JSDay.it 2014 - Firefox OS Unicorns & Rainbows

972 views

Published on

Presentation I gave at May 15 in Verona during JSDay.it about Firefox OS.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
972
On SlideShare
0
From Embeds
0
Number of Embeds
263
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JSDay.it 2014 - Firefox OS Unicorns & Rainbows

  1. 1. Firefox OS Unicorns and rainbows Jan Jongboom jsday.it 2014
  2. 2. @janjongboom Hi, I’m Jan, work for Telenor, on Mozilla stuff
  3. 3. Big problem in the world. Internet is normal for western world, but big part of the world doesnt have it. Click Only 2.5 billion people out of 7.
  4. 4. 4,500,000,000 Big problem in the world. Internet is normal for western world, but big part of the world doesnt have it. Click Only 2.5 billion people out of 7.
  5. 5. The web has everything Information does not like to be locked down We want people to access the web, not the closed silo’s that Android / iOS are, because thats not where the information is
  6. 6. Affordable device to access the internet So goal: affordable device that people can use to get on the internet
  7. 7. Meet Firefox OS
  8. 8. € 70 First generation came out last year. Goes for about 65 euro.
  9. 9. Next generation is going to be lower. System requirements are four times as low as Android. OK, so if we want to be part of that resolution we want to build new stuff for it. Apps for FFOS.
  10. 10. You already have created an app Here’s the good thing. You already have created numerous FFOS apps. Every (mobile?) website is an app.
  11. 11. Embrace the phone You have a device in your pocket that is not only internet connected, but also has a GPS, an accelerometer, proximity sensor. It can react on your environment, location, etc. Take advantage.
  12. 12. The mobile web is broken At the moment this is not possible. The mobile web is not suitable for mobile devices. Smaller version of the real web. Doesn’t take advantage of modern capabilities.
  13. 13. Scaled down version of the desktop web. Not adjusted to mobile.
  14. 14. We’re back in 1999 We’re back in 1999 where we had the same problem. Everywhere native apps, and the web was not capable of replacing it.
  15. 15. We’re back in 1999 We’re back in 1999 where we had the same problem. Everywhere native apps, and the web was not capable of replacing it.
  16. 16. No AJAX?! F.e. there was no AJAX. Loading partial information was impossible.
  17. 17. Let’s !x up the mobile web Mozilla has done it before. Proprietary AJAX API from Microsoft (ActiveX) standardized in 2000’s. Current web wouldn’t have been here w/o Mozilla. IE6 stopped development.
  18. 18. So unlike PhoneGap, which in general was a great idea. We want to move away from proprietary technology. Standardize through W3C.
  19. 19. Mozilla is leading the effort, but others will follow.
  20. 20. Mozilla is leading the effort, but others will follow.
  21. 21. Firefox OS app = website + W3C proposed phone APIs So this is what’s Firefox OS is all about. Build websites and improve them with the capabilities of your phone.
  22. 22. The web is awesome And that’s great, because the web is awesome. I have 8 internet capable devices in my small apartment, the web enables me to view all my content on all those devices. Insane!
  23. 23. Let’s build an app! This stuff needs special awesome unicorn skills. Needs certification process.
  24. 24. index.html Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
  25. 25. index.html Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
  26. 26. index.html Proximity sensor is on top of the screen. Close to it (under 10 cm) device vibrates. Magic!
  27. 27. index.html Ambient light, let’s see how bright it is. Dealing with sensors is so easy now!
  28. 28. Feature snif"ng Don’t break other platforms! But remember, this stuff might not be available on the device you’re running at. Always feature sniff.
  29. 29. Feature snif"ng Don’t break other platforms! But remember, this stuff might not be available on the device you’re running at. Always feature sniff.
  30. 30. So, simple application, does stuff with sensors. Now we want to put it in marketplace. Curated app store for open web apps. Also runs on Android / FF desktop.
  31. 31. The app manifest !le • Unique to Firefox OS • Different than Chrome manifest • Has name, description, version https://marketplace.firefox.com/developers/docs/manifests We need to add one file, app manifest.
  32. 32. manifest.webapp Simple, name, description, launch_path
  33. 33. Minimum FFOS app = 2 files
  34. 34. App manager can test in simulator & on device
  35. 35. Add packaged app, point to directory on disk
  36. 36. Add packaged app, point to directory on disk
  37. 37. Add packaged app, point to directory on disk
  38. 38. UPDATE to install, also works on device DEBUG will open devtools
  39. 39. UPDATE to install, also works on device DEBUG will open devtools
  40. 40. UPDATE to install, also works on device DEBUG will open devtools
  41. 41. UPDATE to install, also works on device DEBUG will open devtools
  42. 42. Same devtools as FF Desktop. Also works on device! Inspector, Debugger, Console, etc.
  43. 43. Ecco quanto è facile! That’s how easy it is! When done, push to phone or marketplace.
  44. 44. One problem So app making is easy, no deps, but one problem. It’s butt ugly.
  45. 45. One problem So app making is easy, no deps, but one problem. It’s butt ugly.
  46. 46. buildingfirefoxos.com Firefox OS Building blocks to the rescue. Has elements / transitions / etc. Just CSS and HTML, no JS dependencies. Also works on other platforms. Used to build system apps.
  47. 47. Not your only choice. Can also use any framework you like.
  48. 48. Something in between.
  49. 49. Application bus Application bus can talk from one application to another, no cert required.
  50. 50. Hey I need an image! Sure, I can provide you with one! For example, the camera application will register itself as 'hey I can provide images'. When your application needs an image from the user,
  51. 51. Web activities (like Android intents) the user will be provided with the choice between all applications (camera, gallery, yourapp) that provide that. This can not only go for media, but in the future also for choosing which phone app should be used to dial, or which web browser to surf.
  52. 52. Using an activity API is straight forward. Initiate pick activity
  53. 53. I NEED AN ADULT! This was some very basic stuff, just playing with sensors / activities / only 25 minutes today.
  54. 54. https://developer.mozilla.org/en-US/docs/WebAPI every API has been described in detail in the Mozilla MDN documentation.
  55. 55. Get hacking! One way to find out, just start hacking. Still not convinced?
  56. 56. Video time
  57. 57. Video time
  58. 58. Thank you! slideshare.net/janjongboom Thanks!
  59. 59. slideshare.net/janjongboom Questions? Thanks!

×