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 + W3Cproposed phone APIs
The web is awesome
So let’s get going...(nothing fancy yet)
github.com / comoyo / ffos-list-detail
“Firefox OS Simulator”github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
http://localhost:8081/manifest.webapp
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
github.com / comoyo / ffos-list-detail
нијелоше!github.com/comoyo/ffos-list-detail
Now get funky!
ArchitectureKernelDevice DriversHardware Abstraction LayerBrowserJavascript engineAPIs for hardware accessUser facing apps...
Unleash the powerof WebAPIs
Regular APIs• Vibration• ScreenOrientation• GeoLocation• MouseLock• OpenWebApps• NetworkInformation• BatteryStatus• Alarm•...
Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI• We...
Your phone isaware of yoursurroundings, takeadvantage!
https://github.com/robnyman/Firefox-OS-Boilerplate-App
Application bus
Hey I need animage!Sure, I can provideyou with one!
Web activities
I NEED AN ADULT!
https://developer.mozilla.org/en-US/docs/WebAPI
Offline
Dealing with offline• Have the necessary application filesavailable• Cache server side data• Store app state on device
Storing data• Local Storage• IndexedDB
Limited storage!Ask for more through manifest
Two types of apps• Hosted• Assets on the server• Cacheable via appcache• Packaged• ZIP archive with assets
Caching with appcache
ZIP• One big zip file• Resources loaded from zip file• Still requires manifest file
One more thing...
The app manifest file• Has name, description, version for marketplace• Define permissions (calling, storage)• Web activity p...
Get hacking!
Questions?Twitter: @janjongboomslideshare.net/janjongboom
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Firefox OS Workshop @ Serbia & Montenegro
Upcoming SlideShare
Loading in …5
×

Firefox OS Workshop @ Serbia & Montenegro

1,155 views
1,061 views

Published on

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

No Downloads
Views
Total views
1,155
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Firefox OS Workshop @ Serbia & Montenegro

  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 + W3Cproposed phone APIs
  12. 12. The web is awesome
  13. 13. So let’s get going...(nothing fancy yet)
  14. 14. github.com / comoyo / ffos-list-detail
  15. 15. “Firefox OS Simulator”github.com / comoyo / ffos-list-detail
  16. 16. github.com / comoyo / ffos-list-detail
  17. 17. http://localhost:8081/manifest.webapp
  18. 18. github.com / comoyo / ffos-list-detail
  19. 19. github.com / comoyo / ffos-list-detail
  20. 20. github.com / comoyo / ffos-list-detail
  21. 21. нијелоше!github.com/comoyo/ffos-list-detail
  22. 22. Now get funky!
  23. 23. ArchitectureKernelDevice DriversHardware Abstraction LayerBrowserJavascript engineAPIs for hardware accessUser facing apps(HTML/CSS or WebGL)GaiaGeckoGonk
  24. 24. Unleash the powerof WebAPIs
  25. 25. Regular APIs• Vibration• ScreenOrientation• GeoLocation• MouseLock• OpenWebApps• NetworkInformation• BatteryStatus• Alarm• WebActivities• PushNotifications• WebFMApi• WebPayment• IndexedDB• AmbientLightSensor• ProxyimitySensor• NotificationYellow = Approved by W3C
  26. 26. Certified APIs• WebTelephony• WebSMS• IdleAPI• SettingsAPI• PowerManagementAPI• MobileConnectionAPI• WiFiInformationAPI• WebBluetooth• PermissionsAPI• NetworkStatsAPI• CameraAPI• Time/ClockAPI• Attentionscreen• VoicemailRequires certification process
  27. 27. Your phone isaware of yoursurroundings, takeadvantage!
  28. 28. https://github.com/robnyman/Firefox-OS-Boilerplate-App
  29. 29. Application bus
  30. 30. Hey I need animage!Sure, I can provideyou with one!
  31. 31. Web activities
  32. 32. I NEED AN ADULT!
  33. 33. https://developer.mozilla.org/en-US/docs/WebAPI
  34. 34. Offline
  35. 35. Dealing with offline• Have the necessary application filesavailable• Cache server side data• Store app state on device
  36. 36. Storing data• Local Storage• IndexedDB
  37. 37. Limited storage!Ask for more through manifest
  38. 38. Two types of apps• Hosted• Assets on the server• Cacheable via appcache• Packaged• ZIP archive with assets
  39. 39. Caching with appcache
  40. 40. ZIP• One big zip file• Resources loaded from zip file• Still requires manifest file
  41. 41. One more thing...
  42. 42. The app manifest file• Has name, description, version for marketplace• Define permissions (calling, storage)• Web activity provider (I provide images!)https://marketplace.firefox.com/developers/docs/manifests
  43. 43. Get hacking!
  44. 44. Questions?Twitter: @janjongboomslideshare.net/janjongboom

×