jsday.it 2014 - firefox os unicorns & rainbows

60
Firefox OS Unicorns and rainbows Jan Jongboom jsday.it 2014

Upload: jan-jongboom

Post on 08-May-2015

634 views

Category:

Technology


0 download

DESCRIPTION

Presentation I gave at May 15 in Verona during JSDay.it about Firefox OS.

TRANSCRIPT

Page 1: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Firefox OSUnicorns and rainbows

Jan Jongboomjsday.it 2014

Page 2: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

@janjongboom

Hi, I’m Jan, work for Telenor, on Mozilla stuff

Page 3: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

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

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

Meet Firefox OS

Page 8: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

€ 70

First generation came out last year. Goes for about 65 euro.

Page 9: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

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

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

Scaled down version of the desktop web. Not adjusted to mobile.

Page 14: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

No AJAX?!

F.e. there was no AJAX. Loading partial information was impossible.

Page 17: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

Mozilla is leading the effort, but others will follow.

Page 20: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Mozilla is leading the effort, but others will follow.

Page 21: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

Let’s build an app!

This stuff needs special awesome unicorn skills. Needs certification process.

Page 24: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

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

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

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

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

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

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

manifest.webapp

Simple, name, description, launch_path

Page 33: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Minimum FFOS app = 2 files

Page 34: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

App manager can test in simulator & on device

Page 35: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Add packaged app, point to directory on disk

Page 36: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Add packaged app, point to directory on disk

Page 37: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Add packaged app, point to directory on disk

Page 38: JSDay.it 2014 - Firefox OS Unicorns & Rainbows
Page 39: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

UPDATE to install, also works on deviceDEBUG will open devtools

Page 40: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

UPDATE to install, also works on deviceDEBUG will open devtools

Page 41: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

UPDATE to install, also works on deviceDEBUG will open devtools

Page 42: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

UPDATE to install, also works on deviceDEBUG will open devtools

Page 43: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Same devtools as FF Desktop. Also works on device! Inspector, Debugger, Console, etc.

Page 44: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

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

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

Not your only choice. Can also use any framework you like.

Page 49: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Something in between.

Page 50: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Application busApplication bus can talk from one application to another, no cert required.

Page 51: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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

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

Using an activity

API is straight forward. Initiate pick activity

Page 54: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

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://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

Get hacking!

One way to find out, just start hacking. Still not convinced?

Page 57: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Video time

Page 58: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Video time

Page 59: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

Thank you!

slideshare.net/janjongboomThanks!

Page 60: JSDay.it 2014 - Firefox OS Unicorns & Rainbows

slideshare.net/janjongboom

Questions?

Thanks!