3. Firefox OS components
Gonk Kernel + HW abstraction layer
Gecko “Browser” engine (backend)
Gaia UI System apps (frontend)
4. App dev technologies
• Native apps for Firefox OS are web apps
• HTML5
• CSS3
• JavaScript
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. 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.
8. 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
19. You don’t need to be in
a marketplace
window.navigator.mozApps.install(url);
https://developer.mozilla.org/en-US/docs/Apps/
Getting_Started#Installing_the_app
20. 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
22. Features
• Import ePub books from the SD Card
• Sort books by author/title/last access
• Table of contents
• Remeber last page read
23. Import ePubs (I)
• Ask for permission to read the SD Card +
local storage
24. manifest.webapp
"device-storage:sdcard":{
"description": "Required to import books
from the SD card",
"access": "readonly"
},
"storage": {
"description": "Required to store imported
books"
}
25. 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
26. 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
27. 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)
