Developing for Firefox OS

Introduction to Firefox OS and how to get started developing apps. Talk given at the 2013 Dutch Mobile Conference.

Transcript

1. FOR FIREFOX OS
   DEVELOPING
   @SERGIMANSILLA
   Friday, June 7, 13
   

   View Slide

2. @sergimansilla
   sergi
   Who am I?
   Friday, June 7, 13
   

   View Slide

3. Why Firefox OS
   Friday, June 7, 13
   

   View Slide

4. Write once, run...once
   Different APIs
   Different languages
   Different stores
   Why Firefox OS
   Friday, June 7, 13
   

   View Slide

5. The gap is gone, and
   it’s time to move on.
   Why Firefox OS
   Friday, June 7, 13
   

   View Slide

6. New mobile OS
   Leverages open web
   WebAPI standards
   No walled gardens
   Why Firefox OS
   Friday, June 7, 13
   

   View Slide

7. Friday, June 7, 13
   

   View Slide

8. Friday, June 7, 13
   

   View Slide

9. Device independence
   Why will users care?
   Friday, June 7, 13
   

   View Slide

10. No need to repurchase
    Higher quality apps
    No brand discrimination
    Device independence
    Why will users care?
    Friday, June 7, 13
    

    View Slide

11. Developer bliss
    Developer bliss
    Friday, June 7, 13
    

    View Slide

12. You already know this stuff
    Developer bliss
    Friday, June 7, 13
    

    View Slide

13. HTML5, CSS3, JavaScript
    Each site is an app
    Extreme flexibility
    Great tooling
    Developer bliss
    Friday, June 7, 13
    

    View Slide

14. No developer fees
    No API breaks
    No need for a phone
    No dependencies
    Friday, June 7, 13
    

    View Slide

15. https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/
    Developer tools
    Friday, June 7, 13
    

    View Slide

16. Developer tools
    Friday, June 7, 13
    

    View Slide

17. It also works on Android!
    Android
    Friday, June 7, 13
    

    View Slide

18. Open web apps
    Built using standard web technologies
    Small additions to turn them into apps
    Responsive to adapt to any device
    Friday, June 7, 13
    

    View Slide

19. Create a Firefox OS app
    1. Develop web app using HTML5, JavaScript and CSS
    2. Create an app manifest file
    3. Publish the app
    Friday, June 7, 13
    

    View Slide

20. Creating a Firefox OS app
    index.html
    Friday, June 7, 13
    

    View Slide

21. Creating a Firefox OS app
    index.html
    Friday, June 7, 13
    

    View Slide

22. Sniff before you use!
    Friday, June 7, 13
    

    View Slide

23. Sniff before you use!
    Friday, June 7, 13
    

    View Slide

24. Any hipster framework/technology
    Friday, June 7, 13
    

    View Slide

25. Develop a web app
    Reuse any existing HTML5 website
    Use Web APIs for more options
    Make it responsive!
    Friday, June 7, 13
    

    View Slide

26. Create a .webapp extension
    Create a file with
    a .webapp extension
    Friday, June 7, 13
    

    View Slide

27. manifest.webapp
    Create a .webapp extension
    Friday, June 7, 13
    

    View Slide

28. Create a .webapp extension
    Friday, June 7, 13
    

    View Slide

29. Create a .webapp extension
    Serve with Content-type/MIME type:
    application/x-web-app-manifest+json
    Friday, June 7, 13
    

    View Slide

30. https://marketplace.firefox.com/developers/validator
    Create a .webapp extension
    Friday, June 7, 13
    

    View Slide

31. Running it in the simulator
    Friday, June 7, 13
    

    View Slide

32. Running it in the simulator
    Friday, June 7, 13
    

    View Slide

33. Running it in the simulator
    Friday, June 7, 13
    

    View Slide

34. Running it in the simulator
    Friday, June 7, 13
    

    View Slide

35. Friday, June 7, 13
    

    View Slide

36. Friday, June 7, 13
    

    View Slide

37. Friday, June 7, 13
    

    View Slide

38. Friday, June 7, 13
    

    View Slide

39. Friday, June 7, 13
    

    View Slide

40. OS/X: out of the box
    Windows: needs drivers
    Linux: follow instructions
    Push to device
    Running it in the simulator
    Friday, June 7, 13
    

    View Slide

41. Open web apps
    https://developer.mozilla.org/docs/Apps/Getting_Started
    Friday, June 7, 13
    

    View Slide

42. marketplace.firefox.com
    Publish the app
    Friday, June 7, 13
    

    View Slide

43. marketplace.firefox.com
    Marketplace
    Friday, June 7, 13
    

    View Slide

44. marketplace.firefox.com
    Marketplace
    Friday, June 7, 13
    

    View Slide

45. marketplace.firefox.com/developers/
    Marketplace
    Friday, June 7, 13
    

    View Slide

46. https://wiki.mozilla.org/WebAPI
    WebAPIs
    Friday, June 7, 13
    

    View Slide

47. arewemobileyet.com
    Opening up phones
    Friday, June 7, 13
    

    View Slide

48. Verification needed
    Only Mozilla and vendors
    Types of apps
    No verification needed
    Unprivileged
    Web content
    Regular web apps
    Privileged
    More access
    More responsibility
    Certified
    Device-critical apps
    Friday, June 7, 13
    

    View Slide

49. http://mzl.la/11F4kSn
    Setting permissions
    Friday, June 7, 13
    

    View Slide

50. Regular APIs
    Vibration API (W3C)
    Screen Orientation
    Geolocation API
    Mouse Lock API (W3C)
    Open WebApps
    Network Information API (W3C)
    Battery Status API (W3C)
    Web Activities
    Push Notifications API
    WebFM API
    WebPayment
    IndexedDB (W3C)
    Ambient light sensor
    Proximity sensor
    Notification
    Friday, June 7, 13
    

    View Slide

51. Still requires authentication
    Friday, June 7, 13
    

    View Slide

52. Battery status
    Friday, June 7, 13
    

    View Slide

53. Notification
    Friday, June 7, 13
    

    View Slide

54. Vibration API
    Friday, June 7, 13
    

    View Slide

55. Device proximity
    Friday, June 7, 13
    

    View Slide

56. Privileged APIs
    Device Storage API
    Browser API
    TCP Socket API
    Contacts API
    systemXHR
    Friday, June 7, 13
    

    View Slide

57. Contacts
    Friday, June 7, 13
    

    View Slide

58. Certified APIs
    WebTelephony
    WebSMS
    Idle API
    Settings API
    Power Management API
    Voicemail
    Mobile Connection API
    WiFi Information API
    WebBluetooth Permissions API
    Network Stats API Camera API
    Time/Clock API
    Attention screen
    Friday, June 7, 13
    

    View Slide

59. WebSMS
    Friday, June 7, 13
    

    View Slide

60. http://bit.ly/ffos-magic
    Firefox OS Boilerplate app
    Friday, June 7, 13
    

    View Slide

61. Camera only available for certified apps :(
    Friday, June 7, 13
    

    View Slide

62. Application bus
    Friday, June 7, 13
    

    View Slide

63. Hey I need an
    image!
    Sure, I can provide
    you with one!
    Web activities
    Friday, June 7, 13
    

    View Slide

64. Web activities
    Friday, June 7, 13
    

    View Slide

65. Web is built for connectivity :-(
    Application assets
    Server data
    Offline
    Friday, June 7, 13
    

    View Slide

66. ZIP up your app
    Lose flexibility of the web
    But very easy!
    Use appcache
    Browser feature
    Caching assets
    Friday, June 7, 13
    

    View Slide

67. manifest.appcache
    Specify HTML / CSS / JS
    Extra assets (images?)
    Prefer online
    Caching assets
    Friday, June 7, 13
    

    View Slide

68. manifest.appcache
    Specify HTML / CSS / JS
    Extra assets (images?)
    Prefer online
    Caching assets
    Friday, June 7, 13
    

    View Slide

69. manifest.appcache
    Specify HTML / CSS / JS
    Extra assets (images?)
    Prefer online
    Caching assets
    Friday, June 7, 13
    

    View Slide

70. github.com/comoyo/ffos-list-detail
    Demo app
    Friday, June 7, 13
    

    View Slide

71. Getting help
    irc://irc.mozilla.org/
    #openwebapps
    Friday, June 7, 13
    

    View Slide

72. Thanks!
    Sergi Mansilla
    sergimansilla.com
    @sergimansilla
    Friday, June 7, 13
    

    View Slide

73. @sergimansilla
    github.com/sergi
    speakerdeck.com/sergi
    sergimansilla.com
    Questions?
    Friday, June 7, 13
    

    View Slide

74. https://addons.mozilla.org/firefox/addon/firefox-os-simulator/
    sergimansilla.com/blog/promise-of-ffos/
    http://arewemobileyet.com/
    https://wiki.mozilla.org/WebAPI
    http://www.mozilla.org/en-US/firefoxos/
    Links
    Friday, June 7, 13
    

    View Slide