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


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

https://github.com/pdi-innovation/generator-firefoxos

Grunt


  • 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

 Community 

Source code on Github


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

Gaia: github.com/mozilla-b2g/gaia
B2G: github.com/mozilla-b2g/B2G

Read wiki.mozilla.org/B2G/Hacking

Bugzilla



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



Tip!

 Thanks! 


Questions?


Made with Slides.com