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

1. Firefox OS
Unicorns and rainbows
Jan Jongboom

2. @janjongboom

3. You already have
created an app

4. Embrace the phone

5. The mobile web is
broken

7. We’re back in 1999

8. We’re back in 1999

9. No AJAX?!

10. -webkit-prefix

11. Let’s open up the
mobile web

12. Firefox OS app
=
website
+
W3C proposed phone APIs

15. The web is awesome

16. So let’s get going...
(nothing fancy yet)

17. index.html

18. index.html

19. index.html

20. index.html

21. Feature sniffing
Don’t break other platforms!

22. Feature sniffing
Don’t break other platforms!

24. The app manifest file
• Unique to Firefox OS
• Different than Chrome manifest
• Has name, description, version
https://marketplace.firefox.com/developers/docs/manifests

25. manifest.webapp
Serve as application/x-web-app-manifest+json

36. OS/X: out of the box
Windows: needs drivers
Linux: follow instructions
Push to device

37. I’m off to build
some apps!

38. One problem

39. One problem

40. buildingfirefoxos.com

41. Building blocks
• Elements, transitions, etc.
• Only HTML/CSS
• Works in all modern browsers
• Also iOS,Android
• Used to build all system apps

43. Embrace the phone!

44. Unleash the power
of WebAPIs

45. APIs
http://wiki.mozilla.org/WebAPI

51. Certified APIs
• WebTelephony
• WebSMS
• IdleAPI
• SettingsAPI
• PowerManagementAPI
• MobileConnectionAPI
• WiFiInformationAPI
• WebBluetooth
• PermissionsAPI
• NetworkStatsAPI
• CameraAPI
• Time/ClockAPI
• Attentionscreen
• Voicemail
Requires certification process

52. Your phone is aware of
your surroundings...
Take advantage!

53. http://bit.ly/ffos-magic

54. Camera is only available
for certified apps...

55. Application bus

56. Hey I need an
image!
Sure, I can provide
you with one!

57. Web activities(like Android intents)

58. I NEED AN ADULT!

59. https://developer.mozilla.org/en-US/docs/WebAPI

61. Offline
• Web is built for connectivity :-(
• Two types of assets:
• Application assets
• Server data

63. Caching assets
• ZIP up your app
• Lose flexibility of the web
• But very easy!
• Use appcache
• Browser feature

64. Depends on the app

65. Appcache

66. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache

67. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache

68. App caching our app
• Specify HTML / CSS / JS
• Extra assets (images?)
• Prefer online
manifest.appcache

69. Caching resources
• AJAX calls
• Cache results in indexedDB
or local storage
• Be aware: local storage blocks
• Read from cache if request fails

74. 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

76. github.com/comoyo/ffos-list-detail

77. Get hacking!

78. Questions?
Twitter: @janjongboom
slideshare.net/janjongboom