Firefox OSUnicorns and rainbowsJan Jongboom
@janjongboom
You already havecreated an app
Embrace the phone
The mobile web isbroken
We’re back in 1999
We’re back in 1999
No AJAX?!
-webkit-prefix
Let’s open up themobile web
Firefox OS app=website+W3C proposed phone APIs
The web is awesome
So let’s get going...(nothing fancy yet)
index.html
index.html
index.html
index.html
Feature sniffingDon’t break other platforms!
Feature sniffingDon’t break other platforms!
The app manifest file• Unique to Firefox OS• Different than Chrome manifest• Has name, description, versionhttps://marketpl...
manifest.webappServe as application/x-web-app-manifest+json
OS/X: out of the boxWindows: needs driversLinux: follow instructionsPush to device
I’m off to buildsome apps!
One problem
One problem
buildingfirefoxos.com
Building blocks• Elements, transitions, etc.• Only HTML/CSS• Works in all modern browsers• Also iOS,Android• Used to build...
Embrace the phone!
Unleash the powerof WebAPIs
APIshttp://wiki.mozilla.org/WebAPI
Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI• We...
Your phone is aware ofyour surroundings...Take advantage!
http://bit.ly/ffos-magic
Camera is only availablefor certified apps...
Application bus
Hey I need animage!Sure, I can provideyou with one!
Web activities(like Android intents)
I NEED AN ADULT!
https://developer.mozilla.org/en-US/docs/WebAPI
Offline• Web is built for connectivity :-(• Two types of assets:• Application assets• Server data
Caching assets• ZIP up your app• Lose flexibility of the web• But very easy!• Use appcache• Browser feature
Depends on the app
Appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
Caching resources• AJAX calls• Cache results in indexedDBor local storage• Be aware: local storage blocks• Read from cache...
Boilerplate app• Contains all UX Building Blocks• Page transitions• Has manifest file• Offline capabilities based on appcach...
github.com/comoyo/ffos-list-detail
Get hacking!
Questions?Twitter: @janjongboomslideshare.net/janjongboom
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June
Upcoming SlideShare
Loading in …5
×

Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June

1,459 views

Published on

Presentation I gave at Dutch Mobile Conference (June 6) and on the local app days in Serbia (June 8) and Montenegro (June 9)

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

No Downloads
Views
Total views
1,459
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Firefox OS Apps & APIs - Dutch Mobile Conference / Serbia & Montenegro App days June

  1. 1. Firefox OSUnicorns and rainbowsJan Jongboom
  2. 2. @janjongboom
  3. 3. You already havecreated an app
  4. 4. Embrace the phone
  5. 5. The mobile web isbroken
  6. 6. We’re back in 1999
  7. 7. We’re back in 1999
  8. 8. No AJAX?!
  9. 9. -webkit-prefix
  10. 10. Let’s open up themobile web
  11. 11. Firefox OS app=website+W3C proposed phone APIs
  12. 12. The web is awesome
  13. 13. So let’s get going...(nothing fancy yet)
  14. 14. index.html
  15. 15. index.html
  16. 16. index.html
  17. 17. index.html
  18. 18. Feature sniffingDon’t break other platforms!
  19. 19. Feature sniffingDon’t break other platforms!
  20. 20. The app manifest file• Unique to Firefox OS• Different than Chrome manifest• Has name, description, versionhttps://marketplace.firefox.com/developers/docs/manifests
  21. 21. manifest.webappServe as application/x-web-app-manifest+json
  22. 22. OS/X: out of the boxWindows: needs driversLinux: follow instructionsPush to device
  23. 23. I’m off to buildsome apps!
  24. 24. One problem
  25. 25. One problem
  26. 26. buildingfirefoxos.com
  27. 27. Building blocks• Elements, transitions, etc.• Only HTML/CSS• Works in all modern browsers• Also iOS,Android• Used to build all system apps
  28. 28. Embrace the phone!
  29. 29. Unleash the powerof WebAPIs
  30. 30. APIshttp://wiki.mozilla.org/WebAPI
  31. 31. Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI• WebBluetooth• PermissionsAPI• NetworkStatsAPI• CameraAPI• Time/ClockAPI• Attentionscreen• VoicemailRequires certification process
  32. 32. Your phone is aware ofyour surroundings...Take advantage!
  33. 33. http://bit.ly/ffos-magic
  34. 34. Camera is only availablefor certified apps...
  35. 35. Application bus
  36. 36. Hey I need animage!Sure, I can provideyou with one!
  37. 37. Web activities(like Android intents)
  38. 38. I NEED AN ADULT!
  39. 39. https://developer.mozilla.org/en-US/docs/WebAPI
  40. 40. Offline• Web is built for connectivity :-(• Two types of assets:• Application assets• Server data
  41. 41. Caching assets• ZIP up your app• Lose flexibility of the web• But very easy!• Use appcache• Browser feature
  42. 42. Depends on the app
  43. 43. Appcache
  44. 44. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  45. 45. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  46. 46. App caching our app• Specify HTML / CSS / JS• Extra assets (images?)• Prefer onlinemanifest.appcache
  47. 47. Caching resources• AJAX calls• Cache results in indexedDBor local storage• Be aware: local storage blocks• Read from cache if request fails
  48. 48. Boilerplate app• Contains all UX Building Blocks• Page transitions• Has manifest file• Offline capabilities based on appcache• 3rd party resource caching in IndexedDB• Built on AngularJS
  49. 49. github.com/comoyo/ffos-list-detail
  50. 50. Get hacking!
  51. 51. Questions?Twitter: @janjongboomslideshare.net/janjongboom

×