Tools & Community
Get started on Firefox OS App development
Belén Albeza @ladybenko
web developer?
The tech you need
-
HTML5
-
CSS3
-
JavaScript
The tools you already love
-
Sass / LESS
-
CoffeeScript
-
JS libs & frameworks
-
Grunt
- Vim <3
There's no Firefox OS SDK
There's no Firefox OS Framework
It's all Web API's
Firefox OS
specific tools
Firefox Nightly
Why?
-
It's got the latest Web API's
-
It's got sweet developer tools
-
It's got a simulator!
The Mighty Bar of Happiness
-
Console + Scratchpad
-
DOM + CSS inspector
-
A proper debugger
-
Network traffic
-
Performance profiler
- Responsive view
Responsive view
Firefox OS Simulator
The simulator
-
It's a Firefox Extension
-
Includes Web API's like Contacts, Device Storage, etc.
- Easy "push to device".
-
Download
How to use it?
-
Go to Tools/Web Developer/Firefox OS Simulator
- Click on Add Directory and select your app's manifest
Et voilà!
Install your app in a device
Remote debugging
- Allows you to use the Debugger and the Console
for an app running in your device -
Available in B2G 1.2.x
- Use Tools/Web Developer/Connect
Building Blocks
Meet the Building Blocks
-
The quickest way to layout your app
-
They're Gaia's UI widgets
-
HTML + CSS code ready to copy & paste
-
Download them at buildingfirefoxos.com
Let's see some examples
Headers
Progress bars
Lists
Dialogs
Remember!
-
They are not "standard" Firefox OS controls…
-
…because such a thing does not exist!
- You are free to use them or not
This is the Web
Automation with
Yeoman & Grunt
Yeoman
-
It's an app scaffolding tool
-
Use it to generate your app's file structure
npm install -g yo
npm install -g grunt-cli
npm install -g generator-firefoxos
yo firefoxos
You will be asked
some questions…
…and you'll get an app!
Features of the generator
-
Can include Building Blocks
-
Can include a basic app framework with
Backbone + Zepto + RequireJS
-
Support for Sass stylesheets
-
Support for testing with Sinon + Chai + Mocha
-
Grunt tasks to automate development
Grunt
-
It's a JavaScript task runner
-
Use it to automate your development
-
The Firefox OS generator for Yeoman comeswith a handy Gruntfile ready to use
Included tasks
-
Lint your code
-
Run tests
-
Launch a local server and
re-compile Sass when a file changes
-
Package your app in a zip
-
Push your app to the device
-
…and more
Demo time!
You can also watch this screencast
Community
Source code on Github
-
You can download the code
-
You can send pull requests
Bugzilla
- You can report bugs on Bugzilla
-
Read Bug writing guidelines
- You can report bugs on Bugzilla
-
Read Bug writing guidelines
IRC channels
-
To talk, get help, and help others
-
Server: irc.mozilla.org:6667
-
Channels: #gaia, #webapi, #b2g
Mailing lists
Announcements, discussions, questions, etc.
MDN
-
Wiki with documentation
-
developer.mozilla.org/en/docs/Mozilla/Firefox_OS
Tip!
- MDN is awesome for regular front-end
development too! Try your searches appending
mdn so w3schools is not the first result ;) -
Example: www.google.co.uk/search?q=indexedbd+mdn