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!