0
How to startdeveloping apps for    Firefox OS    Belén Albeza @ladybenko
Firefox OS?• It’s a OS for mobile devices
Firefox OS components  Gonk    Kernel + HW abstraction layer  Gecko   “Browser” engine (backend)  Gaia    UI System apps (...
App dev technologies• Native apps for Firefox OS are web apps • HTML5 • CSS3 • JavaScript
What? No SDK?• There are Firefox Web APIs (https://  wiki.mozilla.org/WebAPI)  • Phone calls, SMS’s, Bluetooth, camera,   ...
Gaia Building Blocks• Pre-made UI components, with HTML +  CSS ready to copy & paste!• JS libraries to detect gestures, ac...
What do we need to       start?• Firefox Nightly (http://nightly.mozilla.org/)• B2G Simulator (https://addons.mozilla.org/...
Hello World app
File structure-   hello/    -   index.html    -   manifest.app    -   images/        -   icon.png
index.html<!DOCTYPE html><html><head> <title>Hello world!</title></head><body> <h1>Hello World</h1></body></html>
manifest.app{    "name": "Hello World",    "description": "Lorem ipsum blah blah blah",    "launch_path": "/index.html",  ...
icon.png
Let’s try it!
Tools / Web Developer / Firefox OS            Simulator
Select the manifest
Distribute your apps on        the web
You don’t need to be in    a marketplacewindow.navigator.mozApps.install(url);https://developer.mozilla.org/en-US/docs/App...
Stuff to be aware of...• Don’t use eval (that rules out a lot of  libraries)!• Performance • Don’t use template libraries ...
An e-Reader app
Features• Import ePub books from the SD Card• Sort books by author/title/last access• Table of contents• Remeber last page...
Import ePubs (I)• Ask for permission to read the SD Card +  local storage
manifest.webapp"device-storage:sdcard":{   "description": "Required to import books                   from the SD card",  ...
Import ePubs (II)• An ePub is just a zip containing HTML +  metadata• Use js-inflate + js-unzip to read this zip file• Use a...
Display eBooks• Code inspired by Monocle• Books are rendered using CSS3’s columns  rules to create the “pages” (so content...
Gaia’s BB + libs• Use of Gaia’s Building Blocks to have  something pretty :)• Libs • mediadb.js (access to SD card) • asyn...
Thanks!Questions?
Resources•   Wiki https://developer.mozilla.org/en/docs/Mozilla/    Firefox_OS•   Sample app http://robnyman.github.com/Fi...
How to start developing apps for Firefox OS
How to start developing apps for Firefox OS
Upcoming SlideShare
Loading in...5
×

How to start developing apps for Firefox OS

4,857

Published on

Published in: Technology

Transcript of "How to start developing apps for Firefox OS"

  1. 1. How to startdeveloping apps for Firefox OS Belén Albeza @ladybenko
  2. 2. Firefox OS?• It’s a OS for mobile devices
  3. 3. Firefox OS components Gonk Kernel + HW abstraction layer Gecko “Browser” engine (backend) Gaia UI System apps (frontend)
  4. 4. App dev technologies• Native apps for Firefox OS are web apps • HTML5 • CSS3 • JavaScript
  5. 5. What? No SDK?• There are Firefox Web APIs (https:// wiki.mozilla.org/WebAPI) • Phone calls, SMS’s, Bluetooth, camera, location, vibration, contacts, etc. • But they are JavaScript APIs :)• Gaia Building Blocks + JS (https:// github.com/mozilla-b2g/Gaia-UI-Building- Blocks)
  6. 6. Gaia Building Blocks• Pre-made UI components, with HTML + CSS ready to copy & paste!• JS libraries to detect gestures, access to local storage, etc.
  7. 7. What do we need to start?• Firefox Nightly (http://nightly.mozilla.org/)• B2G Simulator (https://addons.mozilla.org/ en-us/firefox/addon/firefox-os-simulator/)• Your favourite text editor
  8. 8. Hello World app
  9. 9. File structure- hello/ - index.html - manifest.app - images/ - icon.png
  10. 10. index.html<!DOCTYPE html><html><head> <title>Hello world!</title></head><body> <h1>Hello World</h1></body></html>
  11. 11. manifest.app{ "name": "Hello World", "description": "Lorem ipsum blah blah blah", "launch_path": "/index.html", "icons": { "128": "/images/icon.png" }}
  12. 12. icon.png
  13. 13. Let’s try it!
  14. 14. Tools / Web Developer / Firefox OS Simulator
  15. 15. Select the manifest
  16. 16. Distribute your apps on the web
  17. 17. You don’t need to be in a marketplacewindow.navigator.mozApps.install(url);https://developer.mozilla.org/en-US/docs/Apps/ Getting_Started#Installing_the_app
  18. 18. Stuff to be aware of...• Don’t use eval (that rules out a lot of libraries)!• Performance • Don’t use template libraries (like mustache.js) • Do you really need jQuery / mootools? • Take a look at the memory
  19. 19. An e-Reader app
  20. 20. Features• Import ePub books from the SD Card• Sort books by author/title/last access• Table of contents• Remeber last page read
  21. 21. Import ePubs (I)• Ask for permission to read the SD Card + local storage
  22. 22. manifest.webapp"device-storage:sdcard":{ "description": "Required to import books from the SD card", "access": "readonly"},"storage": { "description": "Required to store imported books"}
  23. 23. Import ePubs (II)• An ePub is just a zip containing HTML + metadata• Use js-inflate + js-unzip to read this zip file• Use an extended version of js-epub to parse the contents
  24. 24. Display eBooks• Code inspired by Monocle• Books are rendered using CSS3’s columns rules to create the “pages” (so content is a veeery long horizontal stripe)• To improve performance, books are divided into “chunks”, based on the table of contents
  25. 25. Gaia’s BB + libs• Use of Gaia’s Building Blocks to have something pretty :)• Libs • mediadb.js (access to SD card) • async_storage.js (indexDB local storage) • gesture_detector.js (gestures)
  26. 26. Thanks!Questions?
  27. 27. Resources• Wiki https://developer.mozilla.org/en/docs/Mozilla/ Firefox_OS• Sample app http://robnyman.github.com/Firefox- OS-Boilerplate-App/• Firefox OS simulator https://addons.mozilla.org/en- US/firefox/addon/firefox-os-simulator/• Compile B2G and Gaia https:// developer.mozilla.org/en-US/docs/Mozilla/ Firefox_OS/Building_and_installing_Firefox_OS
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×