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.

B083b8207ccd0744a5abb18c8e75d24d?s=128

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

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

  3. Why Firefox OS Friday, June 7, 13

  4. Write once, run...once Different APIs Different languages Different stores Why

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

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

    gardens Why Firefox OS Friday, June 7, 13
  7. Friday, June 7, 13

  8. Friday, June 7, 13

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

  10. No need to repurchase Higher quality apps No brand discrimination

    Device independence Why will users care? Friday, June 7, 13
  11. Developer bliss Developer bliss Friday, June 7, 13

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

    13
  13. HTML5, CSS3, JavaScript Each site is an app Extreme flexibility

    Great tooling Developer bliss Friday, June 7, 13
  14. No developer fees No API breaks No need for a

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

  16. Developer tools Friday, June 7, 13

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

  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
  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
  20. Creating a Firefox OS app index.html Friday, June 7, 13

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

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

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

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

  25. Develop a web app Reuse any existing HTML5 website Use

    Web APIs for more options Make it responsive! Friday, June 7, 13
  26. Create a .webapp extension Create a file with a .webapp

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

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

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

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

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

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

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

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

  35. Friday, June 7, 13

  36. Friday, June 7, 13

  37. Friday, June 7, 13

  38. Friday, June 7, 13

  39. Friday, June 7, 13

  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
  41. Open web apps https://developer.mozilla.org/docs/Apps/Getting_Started Friday, June 7, 13

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

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

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

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

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

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

  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
  49. http://mzl.la/11F4kSn Setting permissions Friday, June 7, 13

  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
  51. Still requires authentication Friday, June 7, 13

  52. Battery status Friday, June 7, 13

  53. Notification Friday, June 7, 13

  54. Vibration API Friday, June 7, 13

  55. Device proximity Friday, June 7, 13

  56. Privileged APIs Device Storage API Browser API TCP Socket API

    Contacts API systemXHR Friday, June 7, 13
  57. Contacts Friday, June 7, 13

  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
  59. WebSMS Friday, June 7, 13

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

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

    13
  62. Application bus Friday, June 7, 13

  63. Hey I need an image! Sure, I can provide you

    with one! Web activities Friday, June 7, 13
  64. Web activities Friday, June 7, 13

  65. Web is built for connectivity :-( Application assets Server data

    Offline Friday, June 7, 13
  66. ZIP up your app Lose flexibility of the web But

    very easy! Use appcache Browser feature Caching assets Friday, June 7, 13
  67. manifest.appcache Specify HTML / CSS / JS Extra assets (images?)

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

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

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

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

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

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

  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