0
APPS FOR FIREFOX OS
What are they, and how can I build one?

Anant Narayanan
Mozilla

August 2012
The Web is the Platform
Apps on FirefoxOS are built exclusively using web technologies
The very same stack used to build (...
Why the Web?
A single code-base for all platforms
Based on Open Standards
Participatory in nature, can get started very qu...
Apps are not websites
A common mistake is to repurpose an existing website into an
app without any modification
Mobile dev...
Layout
Mobile screens are not only smaller than desktops, but are also
subject to orientation changes by users
Readability...
Offline
Unfortunately, you don’t get this for free
Special considerations must be made while developing the app
An arsenal...
Launch & Transitions
The white page interstitial is acceptable when browsing the web,
but not when using an App
Special ca...
WebAPIs
Every piece of hardware in a phone running FirefoxOS is
accessible to JavaScript!

Geolocation, Camera, Accelerome...
Enough Talk, Show me the Code!
You can get started very quickly in just two steps:
Create an app template in Mortar
Deploy...
Mortar
$ git clone https://github.com/mozilla/mortar.git
$ cd mortar && npm install
$ ./bin/build app-stub demo-app

B2G D...
Identity with Persona
navigator.id.watch(callback);
navigator.id.request();

Integrating a login system is super easy!
Easy Payments
Support for paid apps...
mozmarket.receipts.verify(...);

... and in-app payments ...
let req = mozmarket.bu...
Firefox Nightly
All your standard developer tools, now in-built!
Responsive layout preview
DOM Tree Inspector (also availa...
Finishing Touches
Packaging
Only needed for certain types of apps
Submit to the Marketplace!
Happy Hacking!
HTML / CSS / JS
+
Mortar / Bootstrap
+
Firefox Nightly / B2G Desktop Build
=
An amazing app!

anant@mozilla...
Upcoming SlideShare
Loading in...5
×

Apps for FirefoxOS

250

Published on

What is FirefoxOS - What are Apps on Firefox OS? - How can I build one?

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
250
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Apps for FirefoxOS"

  1. 1. APPS FOR FIREFOX OS What are they, and how can I build one? Anant Narayanan Mozilla August 2012
  2. 2. The Web is the Platform Apps on FirefoxOS are built exclusively using web technologies The very same stack used to build (modern) web pages: HTML(5) CSS3 JavaScript An app is simply a collection of web pages designed to look and feel like one
  3. 3. Why the Web? A single code-base for all platforms Based on Open Standards Participatory in nature, can get started very quickly & easily No lock-in
  4. 4. Apps are not websites A common mistake is to repurpose an existing website into an app without any modification Mobile devices operate in a unique environment that must be take into account while designing an app What are some common pitfalls? 3 big gotchas: Layout, Offline, Transitions
  5. 5. Layout Mobile screens are not only smaller than desktops, but are also subject to orientation changes by users Readability is very important Luckily, CSS3 has everything you need to serve different layouts based on screen size! Advanced templates like bootstrap will even gracefully switch between different layouts (responsive design)
  6. 6. Offline Unfortunately, you don’t get this for free Special considerations must be made while developing the app An arsenal of tools at your disposal to help you ranging from localStorage to AppCache Always check for errors! XHRs are most susceptible
  7. 7. Launch & Transitions The white page interstitial is acceptable when browsing the web, but not when using an App Special care should be taken to have a very smooth launch experience by using a very small, quick to load page Subsequent page loads should be handled with CSS3 transforms to move in preloaded content to avoid the white screen effect Fortunately, this is not hard to do in many JS frameworks
  8. 8. WebAPIs Every piece of hardware in a phone running FirefoxOS is accessible to JavaScript! Geolocation, Camera, Accelerometer, Compass, TCP Sockets, SMS, Phone, Vibration... what do you need as a developer?
  9. 9. Enough Talk, Show me the Code! You can get started very quickly in just two steps: Create an app template in Mortar Deploy the app to a B2G Desktop build Iterating on your app is easy with Firefox Nightly
  10. 10. Mortar $ git clone https://github.com/mozilla/mortar.git $ cd mortar && npm install $ ./bin/build app-stub demo-app B2G Desktop Build $ $ $ $ wget http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/... git clone https://github.com/mozilla-b2g/gaia make -C gaia profile /path/to/b2g -p gaia/profile
  11. 11. Identity with Persona navigator.id.watch(callback); navigator.id.request(); Integrating a login system is super easy!
  12. 12. Easy Payments Support for paid apps... mozmarket.receipts.verify(...); ... and in-app payments ... let req = mozmarket.buy(...); req.sign(jwt);
  13. 13. Firefox Nightly All your standard developer tools, now in-built! Responsive layout preview DOM Tree Inspector (also available in 3D!)
  14. 14. Finishing Touches Packaging Only needed for certain types of apps Submit to the Marketplace!
  15. 15. Happy Hacking! HTML / CSS / JS + Mortar / Bootstrap + Firefox Nightly / B2G Desktop Build = An amazing app! anant@mozilla.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×