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
nightly.mozilla.org
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
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.
Web API's:
lists.mozilla.org/listinfo/dev-webapi
Gaia:
lists.mozilla.org/listinfo/dev-gaia
B2G:
lists.mozilla.org/listinfo/dev-b2g
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
Thanks!
Questions?
Made with Slides.com