Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing for Firefox OS

Developing for Firefox OS

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

Sergi Mansilla

June 07, 2013
Tweet

More Decks by Sergi Mansilla

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Why Firefox OS
    Friday, June 7, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Friday, June 7, 13

    View full-size slide

  8. Friday, June 7, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Developer tools
    Friday, June 7, 13

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Friday, June 7, 13

    View full-size slide

  36. Friday, June 7, 13

    View full-size slide

  37. Friday, June 7, 13

    View full-size slide

  38. Friday, June 7, 13

    View full-size slide

  39. Friday, June 7, 13

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

  51. Still requires authentication
    Friday, June 7, 13

    View full-size slide

  52. Battery status
    Friday, June 7, 13

    View full-size slide

  53. Notification
    Friday, June 7, 13

    View full-size slide

  54. Vibration API
    Friday, June 7, 13

    View full-size slide

  55. Device proximity
    Friday, June 7, 13

    View full-size slide

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

    View full-size slide

  57. Contacts
    Friday, June 7, 13

    View full-size 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 full-size slide

  59. WebSMS
    Friday, June 7, 13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. Application bus
    Friday, June 7, 13

    View full-size slide

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

    View full-size slide

  64. Web activities
    Friday, June 7, 13

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide