View
4.636
Download
1
Category
Preview:
Citation preview
How to start developing apps for
Firefox OS
Belén Albeza @ladybenko
Firefox OS?
• It’s a OS for mobile devices
Firefox OS components
Gonk
Gecko
Gaia
Kernel + HW abstraction layer
“Browser” engine (backend)
UI System apps (frontend)
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, location, vibration, contacts, etc.
• But they are JavaScript APIs :)
• Gaia Building Blocks + JS (https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks)
Gaia Building Blocks
• Pre-made UI components, with HTML + CSS ready to copy & paste!
• JS libraries to detect gestures, access to local storage, etc.
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
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", "icons": { "128": "/images/icon.png" }}
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 marketplace
window.navigator.mozApps.install(url);
https://developer.mozilla.org/en-US/docs/Apps/Getting_Started#Installing_the_app
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
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 read
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", "access": "readonly"},"storage": { "description": "Required to store imported books"}
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
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
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)
Thanks!Questions?
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
Recommended