![Page 1: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/1.jpg)
Firefox OSUnicorns and rainbows
Jan Jongboomjsday.it 2014
![Page 2: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/2.jpg)
@janjongboom
Hi, I’m Jan, work for Telenor, on Mozilla stuff
![Page 3: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/3.jpg)
Big problem in the world. Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion people out of 7.
![Page 4: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/4.jpg)
4,500,000,000
Big problem in the world. Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion people out of 7.
![Page 5: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/5.jpg)
The web has everythingInformation does not like to be locked down
We want people to access the web, not the closed silo’s that Android / iOS are, because thats not where the information is
![Page 6: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/6.jpg)
Affordable device to access the internet
So goal: affordable device that people can use to get on the internet
![Page 7: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/7.jpg)
Meet Firefox OS
![Page 8: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/8.jpg)
€ 70
First generation came out last year. Goes for about 65 euro.
![Page 9: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/9.jpg)
Next generation is going to be lower. System requirements are four times as low as Android.
OK, so if we want to be part of that resolution we want to build new stuff for it. Apps for FFOS.
![Page 10: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/10.jpg)
You already have created an app
Here’s the good thing. You already have created numerous FFOS apps. Every (mobile?) website is an app.
![Page 11: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/11.jpg)
Embrace the phone
You have a device in your pocket that is not only internet connected, but also has a GPS, an accelerometer, proximity sensor. It can react on your environment, location, etc. Take advantage.
![Page 12: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/12.jpg)
The mobile web is broken
At the moment this is not possible. The mobile web is not suitable for mobile devices. Smaller version of the real web. Doesn’t take advantage of modern capabilities.
![Page 13: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/13.jpg)
Scaled down version of the desktop web. Not adjusted to mobile.
![Page 14: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/14.jpg)
We’re back in 1999
We’re back in 1999 where we had the same problem. Everywhere native apps, and the web was not capable of replacing it.
![Page 15: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/15.jpg)
We’re back in 1999
We’re back in 1999 where we had the same problem. Everywhere native apps, and the web was not capable of replacing it.
![Page 16: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/16.jpg)
No AJAX?!
F.e. there was no AJAX. Loading partial information was impossible.
![Page 17: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/17.jpg)
Let’s !x up the mobile web
Mozilla has done it before. Proprietary AJAX API from Microsoft (ActiveX) standardized in 2000’s. Current web wouldn’t have been here w/o Mozilla. IE6 stopped development.
![Page 18: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/18.jpg)
So unlike PhoneGap, which in general was a great idea. We want to move away from proprietary technology. Standardize through W3C.
![Page 19: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/19.jpg)
Mozilla is leading the effort, but others will follow.
![Page 20: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/20.jpg)
Mozilla is leading the effort, but others will follow.
![Page 21: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/21.jpg)
Firefox OS app=
website +
W3C proposed phone APIs
So this is what’s Firefox OS is all about. Build websites and improve them with the capabilities of your phone.
![Page 22: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/22.jpg)
The web is awesome
And that’s great, because the web is awesome. I have 8 internet capable devices in my small apartment, the web enables me to view all my content on all those devices. Insane!
![Page 23: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/23.jpg)
Let’s build an app!
This stuff needs special awesome unicorn skills. Needs certification process.
![Page 24: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/24.jpg)
index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
![Page 25: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/25.jpg)
index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
![Page 26: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/26.jpg)
index.html
Proximity sensor is on top of the screen. Close to it (under 10 cm) device vibrates. Magic!
![Page 27: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/27.jpg)
index.html
Ambient light, let’s see how bright it is. Dealing with sensors is so easy now!
![Page 28: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/28.jpg)
Feature snif"ngDon’t break other platforms!
But remember, this stuff might not be available on the device you’re running at. Always feature sniff.
![Page 29: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/29.jpg)
Feature snif"ngDon’t break other platforms!
But remember, this stuff might not be available on the device you’re running at. Always feature sniff.
![Page 30: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/30.jpg)
So, simple application, does stuff with sensors. Now we want to put it in marketplace. Curated app store for open web apps. Also runs on Android / FF desktop.
![Page 31: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/31.jpg)
The app manifest !le
• Unique to Firefox OS
• Different than Chrome manifest
• Has name, description, version
https://marketplace.firefox.com/developers/docs/manifests
We need to add one file, app manifest.
![Page 32: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/32.jpg)
manifest.webapp
Simple, name, description, launch_path
![Page 33: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/33.jpg)
Minimum FFOS app = 2 files
![Page 34: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/34.jpg)
App manager can test in simulator & on device
![Page 35: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/35.jpg)
Add packaged app, point to directory on disk
![Page 36: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/36.jpg)
Add packaged app, point to directory on disk
![Page 37: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/37.jpg)
Add packaged app, point to directory on disk
![Page 38: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/38.jpg)
![Page 39: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/39.jpg)
UPDATE to install, also works on deviceDEBUG will open devtools
![Page 40: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/40.jpg)
UPDATE to install, also works on deviceDEBUG will open devtools
![Page 41: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/41.jpg)
UPDATE to install, also works on deviceDEBUG will open devtools
![Page 42: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/42.jpg)
UPDATE to install, also works on deviceDEBUG will open devtools
![Page 43: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/43.jpg)
Same devtools as FF Desktop. Also works on device! Inspector, Debugger, Console, etc.
![Page 44: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/44.jpg)
Ecco quanto è facile!
That’s how easy it is! When done, push to phone or marketplace.
![Page 45: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/45.jpg)
One problem
So app making is easy, no deps, but one problem. It’s butt ugly.
![Page 46: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/46.jpg)
One problem
So app making is easy, no deps, but one problem. It’s butt ugly.
![Page 47: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/47.jpg)
buildingfirefoxos.comFirefox OS Building blocks to the rescue. Has elements / transitions / etc. Just CSS and HTML, no JS dependencies. Also works on other platforms.
Used to build system apps.
![Page 48: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/48.jpg)
Not your only choice. Can also use any framework you like.
![Page 49: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/49.jpg)
Something in between.
![Page 50: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/50.jpg)
Application busApplication bus can talk from one application to another, no cert required.
![Page 51: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/51.jpg)
Hey I need an image!
Sure, I can provide you with one!
For example, the camera application will register itself as 'hey I can provide images'. When your application needs an image from the user,
![Page 52: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/52.jpg)
Web activities(like Android intents)
the user will be provided with the choice between all applications (camera, gallery, yourapp) that provide that. This can not only go for media, but in the future also for choosing which phone app should be used to dial, or which web browser to surf.
![Page 53: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/53.jpg)
Using an activity
API is straight forward. Initiate pick activity
![Page 54: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/54.jpg)
I NEED AN ADULT!This was some very basic stuff, just playing with sensors / activities / only 25 minutes today.
![Page 55: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/55.jpg)
https://developer.mozilla.org/en-US/docs/WebAPI
every API has been described in detail in the Mozilla MDN documentation.
![Page 56: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/56.jpg)
Get hacking!
One way to find out, just start hacking. Still not convinced?
![Page 57: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/57.jpg)
Video time
![Page 58: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/58.jpg)
Video time
![Page 59: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/59.jpg)
Thank you!
slideshare.net/janjongboomThanks!
![Page 60: JSDay.it 2014 - Firefox OS Unicorns & Rainbows](https://reader036.vdocuments.us/reader036/viewer/2022070313/554bbb18b4c9053a298b4d1a/html5/thumbnails/60.jpg)
slideshare.net/janjongboom
Questions?
Thanks!