APPS FOR FIREFOX OS - Binary Sunrise · APPS FOR FIREFOX OS What are they, and how can I build one?...
Transcript of APPS FOR FIREFOX OS - Binary Sunrise · APPS FOR FIREFOX OS What are they, and how can I build one?...
![Page 1: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/1.jpg)
APPS FOR FIREFOX OSWhat are they, and how can I build one?
Anant NarayananMozilla
August 2012
![Page 2: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/2.jpg)
The Web is the PlatformApps 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
![Page 3: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/3.jpg)
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
![Page 4: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/4.jpg)
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
![Page 5: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/5.jpg)
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)
![Page 6: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/6.jpg)
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
![Page 7: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/7.jpg)
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
![Page 8: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/8.jpg)
WebAPIsEvery 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?
![Page 9: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/9.jpg)
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
![Page 10: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/10.jpg)
Mortar$ git clone https://github.com/mozilla/mortar.git$ cd mortar && npm install$ ./bin/build app-stub demo-app
$ 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
B2G Desktop Build
![Page 11: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/11.jpg)
Identity with Personanavigator.id.watch(callback);
navigator.id.request();
Integrating a login system is super easy!
![Page 12: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/12.jpg)
Easy PaymentsSupport for paid apps...
mozmarket.receipts.verify(...);
... and in-app payments ...
let req = mozmarket.buy(...);req.sign(jwt);
![Page 13: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/13.jpg)
Firefox NightlyAll your standard developer tools, now in-built!
Responsive layout preview
DOM Tree Inspector (also available in 3D!)
![Page 14: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/14.jpg)
Finishing Touches
PackagingOnly needed for certain types of apps
Submit to the Marketplace!
![Page 15: APPS FOR FIREFOX OS - Binary Sunrise · 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](https://reader034.fdocuments.in/reader034/viewer/2022050610/5fb152c9dcbb4b71890d24b6/html5/thumbnails/15.jpg)
Happy Hacking!
HTML / CSS / JS+
Mortar / Bootstrap+
Firefox Nightly / B2G Desktop Build=
An amazing app!