The future is hybrid

609 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
609
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The future is hybrid

  1. 1. The future is hybrid ...or is it?
  2. 2. Hi there!
  3. 3. The future is user-focused
  4. 4. The future is user-focused
  5. 5. What we’ll cover 0. Prologue 1. Firefox OS 2. Web APIs 3. Phonegap 4. Web Components
  6. 6. What are apps? “native” Apps Web apps ● ● ● ● ● ● ● ● ● ● in the App stores home screen icon work offline fully-featured custom UI in the App stores ✓* home screen icon ✓ work offline ✓ fully-featured ✓* custom UI ✓
  7. 7. Use the web, Luke
  8. 8. 1. Firefox OS The web is the platform ● Standard APIs for all features ● Fully open ● Open Web Apps
  9. 9. 1. Firefox OS The $100 smartphone? 69€ $129 90€
  10. 10. 1. Firefox OS - the open experience Search the web See if you like it Install it
  11. 11. 1. Firefox OS - the web experience Search the web See if you like it Install it
  12. 12. 1. Firefox OS - Open web apps Hosted / Packaged apps Minimal: Your website + Manifest Privileged apps Minimal: Your app, signed Certified apps Minimal: Certified by OEMs
  13. 13. 1. Firefox OS - Manifest? { name: “Hello FOWA”, description: “A simple web app”, ... }
  14. 14. 1. Firefox OS - Web activities
  15. 15. 2. Web APIs WebFM Ambient Light Battery Status Proximity Contacts Bluetooth Vibration Web Payments Network Info Idle https://developer.mozilla.org/en-US/docs/WebAPI Storage Notifications
  16. 16. 3. What if you want that today?
  17. 17. 3. PhoneGap You can have it today!
  18. 18. Web vs. App - FIGHT! Thanks for that,
  19. 19. Why fight?
  20. 20. What’s hybrid?
  21. 21. 3. PhoneGap Your web app + native APIs + installable App = APPsomeness!
  22. 22. Get your hands on it Locally: <Setup SDKs> npm install -g cordova cordova create helloapp && cd helloapp cordova platform add <platform> cordova build -d Deploy!
  23. 23. Get your hands on it - even easier! build.phonegap.com
  24. 24. Caution, speed bumps ahead..
  25. 25. Caution, speed bumps ahead.. 1. Do not just wrap your web(site | app) 2. Test test test and test! 3. Expect the unexpected a. Rendering performance b. Feature support c. Click vs. Touch 4. Did I mention “TEST”?
  26. 26. And now... The super-quick-live-coding™
  27. 27. 4. Web components
  28. 28. 4. Web components Build your own HTML elements
  29. 29. 4. Web components Build your own HTML elements using HTML, CSS and Javascript
  30. 30. 4. Web components
  31. 31. 4. Web components Welcome to the future, today! Oh - and for the others: X-Tags, Polymer
  32. 32. 4. Web components So, what can we do? ● easily reuse components ● speed up the web evolution ● open up the web
  33. 33. 4. Web components Meet the AppMaker appmaker.mozillalabs.com
  34. 34. 4. Web components Let’s build one now! The super-quick-live-coding™ Vol. II
  35. 35. </body> Thank you for listening Questions, please!

×