29
How to start developing apps for Firefox OS Belén Albeza @ladybenko

How to start developing apps for Firefox OS

  • Upload
    benko

  • View
    4.636

  • Download
    1

Embed Size (px)

Citation preview

Page 1: How to start developing apps for Firefox OS

How to start developing apps for

Firefox OS

Belén Albeza @ladybenko

Page 2: How to start developing apps for Firefox OS

Firefox OS?

• It’s a OS for mobile devices

Page 3: How to start developing apps for Firefox OS

Firefox OS components

Gonk

Gecko

Gaia

Kernel + HW abstraction layer

“Browser” engine (backend)

UI System apps (frontend)

Page 4: How to start developing apps for Firefox OS

App dev technologies

• Native apps for Firefox OS are web apps

• HTML5

• CSS3

• JavaScript

Page 5: How to start developing apps for Firefox OS

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)

Page 6: How to start developing apps for Firefox OS

Gaia Building Blocks

• Pre-made UI components, with HTML + CSS ready to copy & paste!

• JS libraries to detect gestures, access to local storage, etc.

Page 7: How to start developing apps for Firefox OS
Page 9: How to start developing apps for Firefox OS

Hello World app

Page 10: How to start developing apps for Firefox OS

File structure

- hello/

- index.html

- manifest.app

- images/

- icon.png

Page 11: How to start developing apps for Firefox OS

index.html<!DOCTYPE html><html><head> <title>Hello world!</title></head><body> <h1>Hello World</h1></body></html>

Page 12: How to start developing apps for Firefox OS

manifest.app

{ "name": "Hello World", "description": "Lorem ipsum blah blah blah", "launch_path": "/index.html", "icons": { "128": "/images/icon.png" }}

Page 13: How to start developing apps for Firefox OS

icon.png

Page 14: How to start developing apps for Firefox OS

Let’s try it!

Page 15: How to start developing apps for Firefox OS

Tools / Web Developer / Firefox OS Simulator

Page 16: How to start developing apps for Firefox OS

Select the manifest

Page 17: How to start developing apps for Firefox OS
Page 18: How to start developing apps for Firefox OS

Distribute your apps on the web

Page 20: How to start developing apps for Firefox OS

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

Page 21: How to start developing apps for Firefox OS

An e-Reader app

Page 22: How to start developing apps for Firefox OS

Features

• Import ePub books from the SD Card

• Sort books by author/title/last access

• Table of contents

• Remeber last page read

Page 23: How to start developing apps for Firefox OS

Import ePubs (I)

• Ask for permission to read the SD Card + local storage

Page 24: How to start developing apps for Firefox OS

manifest.webapp

"device-storage:sdcard":{ "description": "Required to import books from the SD card", "access": "readonly"},"storage": { "description": "Required to store imported books"}

Page 25: How to start developing apps for Firefox OS

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

Page 26: How to start developing apps for Firefox OS

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

Page 27: How to start developing apps for Firefox OS

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)

Page 28: How to start developing apps for Firefox OS

Thanks!Questions?

Page 29: How to start developing apps for Firefox OS

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