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. github.com / comoyo / ffos-list-detail

18. “Firefox OS Simulator”
github.com / comoyo / ffos-list-detail

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

22. http://localhost:8081/
manifest.webapp

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

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

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

26. није
лоше!
github.com/comoyo/ffos-list-detail

27. Now get funky!

28. Architecture
Kernel
Device Drivers
Hardware Abstraction Layer
Browser
Javascript engine
APIs for hardware access
User facing apps
(HTML/CSS or WebGL)Gaia
Gecko
Gonk

31. Unleash the power
of WebAPIs

32. Regular APIs
• Vibration
• ScreenOrientation
• GeoLocation
• MouseLock
• OpenWebApps
• NetworkInformation
• BatteryStatus
• Alarm
• WebActivities
• PushNotifications
• WebFMApi
• WebPayment
• IndexedDB
• AmbientLightSensor
• ProxyimitySensor
• Notification
Yellow = Approved by W3C

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

40. Your phone is
aware of your
surroundings, take
advantage!

41. https://github.com/robnyman/
Firefox-OS-Boilerplate-App

42. Application bus

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

44. Web activities

45. I NEED AN ADULT!

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

47. Offline

48. Dealing with offline
• Have the necessary application files
available
• Cache server side data
• Store app state on device

49. Storing data
• Local Storage
• IndexedDB

50. Limited storage!
Ask for more through manifest

51. Two types of apps
• Hosted
• Assets on the server
• Cacheable via appcache
• Packaged
• ZIP archive with assets

52. Caching with appcache

59. ZIP
• One big zip file
• Resources loaded from zip file
• Still requires manifest file

60. One more thing...

61. The app manifest file
• Has name, description, version for market
place
• Define permissions (calling, storage)
• Web activity provider (I provide images!)
https://marketplace.firefox.com/developers/docs/manifests

66. Get hacking!

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