JSDay.it 2014 - Firefox OS Unicorns & Rainbows
-
Upload
jan-jongboom -
Category
Technology
-
view
634 -
download
0
description
Transcript of JSDay.it 2014 - Firefox OS Unicorns & Rainbows
Firefox OSUnicorns and rainbows
Jan Jongboomjsday.it 2014
@janjongboom
Hi, I’m Jan, work for Telenor, on Mozilla stuff
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.
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.
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
Affordable device to access the internet
So goal: affordable device that people can use to get on the internet
Meet Firefox OS
€ 70
First generation came out last year. Goes for about 65 euro.
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.
You already have created an app
Here’s the good thing. You already have created numerous FFOS apps. Every (mobile?) website is an app.
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.
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.
Scaled down version of the desktop web. Not adjusted to mobile.
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.
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.
No AJAX?!
F.e. there was no AJAX. Loading partial information was impossible.
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.
So unlike PhoneGap, which in general was a great idea. We want to move away from proprietary technology. Standardize through W3C.
Mozilla is leading the effort, but others will follow.
Mozilla is leading the effort, but others will follow.
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.
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!
Let’s build an app!
This stuff needs special awesome unicorn skills. Needs certification process.
index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.
index.html
Proximity sensor is on top of the screen. Close to it (under 10 cm) device vibrates. Magic!
index.html
Ambient light, let’s see how bright it is. Dealing with sensors is so easy now!
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.
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.
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.
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.
manifest.webapp
Simple, name, description, launch_path
Minimum FFOS app = 2 files
App manager can test in simulator & on device
Add packaged app, point to directory on disk
Add packaged app, point to directory on disk
Add packaged app, point to directory on disk
UPDATE to install, also works on deviceDEBUG will open devtools
UPDATE to install, also works on deviceDEBUG will open devtools
UPDATE to install, also works on deviceDEBUG will open devtools
UPDATE to install, also works on deviceDEBUG will open devtools
Same devtools as FF Desktop. Also works on device! Inspector, Debugger, Console, etc.
Ecco quanto è facile!
That’s how easy it is! When done, push to phone or marketplace.
One problem
So app making is easy, no deps, but one problem. It’s butt ugly.
One problem
So app making is easy, no deps, but one problem. It’s butt ugly.
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.
Not your only choice. Can also use any framework you like.
Something in between.
Application busApplication bus can talk from one application to another, no cert required.
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,
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.
Using an activity
API is straight forward. Initiate pick activity
I NEED AN ADULT!This was some very basic stuff, just playing with sensors / activities / only 25 minutes today.
https://developer.mozilla.org/en-US/docs/WebAPI
every API has been described in detail in the Mozilla MDN documentation.
Get hacking!
One way to find out, just start hacking. Still not convinced?
Video time
Video time
Thank you!
slideshare.net/janjongboomThanks!
slideshare.net/janjongboom
Questions?
Thanks!