Tools & Community

Get started on Firefox OS App development

Belén Albeza @ladybenko
 Are you already a 

 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


  • 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

Let's see some examples


Progress bars




  • 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


  • 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


  • It's a JavaScript task runner
  • Use it to automate your development
  • The Firefox OS generator for Yeoman comes
    with 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


Source code on Github

  • You can download the code
  • You can send pull requests




IRC channels

  • To talk, get help, and help others
  • Server:
  • Channels: #gaia, #webapi, #b2g

Mailing lists

Announcements, discussions, questions, etc.