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