The future is hybrid

The future is hybrid...or is it?

Hi there!

The future is user-focused

The future is user-focused

What we’ll cover

0. Prologue1. Firefox OS2. Web APIs3. Phonegap4. Web Components

What are apps?

“native” Apps● in the App stores● home screen icon● work offline● fully-featured● custom UI

Web apps● in the App stores ✓*● home screen icon ✓● work offline ✓● fully-featured ✓*● custom UI ✓

Use the web, Luke

1. Firefox OS

The web is the platform

● Standard APIs for all features● Fully open● Open Web Apps

1. Firefox OS

The $100 smartphone?

69€ $129 90€

1. Firefox OS - the open experience

Search the web

See if you like it

Install it

1. Firefox OS - the web experience

Search the web

See if you like it

Install it

1. Firefox OS - Open web apps

Hosted / Packaged appsMinimal: Your website + Manifest

Privileged appsMinimal: Your app, signed

Certified appsMinimal: Certified by OEMs

1. Firefox OS - Manifest?{

name: “Hello FOWA”,

description: “A simple web app”,

...

}

1. Firefox OS - Web activities

2. Web APIs

https://developer.mozilla.org/en-US/docs/WebAPI

Ambient Light

ProximityBattery Status

Vibration

WebFM

Idle

Contacts

Web Payments Network Info

Notifications

Storage

Bluetooth

3.

What if you want that today?

3. PhoneGap

You can have it today!

Web vs. App - FIGHT!

Thanks for that, @alexanderpeh

Why fight?

What’s hybrid?

3. PhoneGap

Your web app+

native APIs+

installable App=

APPsomeness!

Get your hands on it

Locally:<Setup SDKs> npm install -g cordova

cordova create helloapp && cd helloapp

cordova platform add <platform>

cordova build -d

Deploy!

Get your hands on it - even easier!

build.phonegap.com

Caution, speed bumps ahead..

Caution, speed bumps ahead..

1. Do not just wrap your web(site | app)

2. Test test test and test!

3. Expect the unexpecteda. Rendering performance

b. Feature support

c. Click vs. Touch

4. Did I mention “TEST”?

And now...

The super-quick-live-coding™

4. Web components

4. Web components

Build your own HTML elements

4. Web components

Build your own HTML elementsusing HTML, CSS and Javascript

4. Web components

4. Web components

Welcome to the future, today!

Oh - and for the others:

X-Tags, Polymer

4. Web components

So, what can we do?● easily reuse components ● speed up the web evolution● open up the web

4. Web components

Meet the AppMakerappmaker.mozillalabs.com

4. Web components

Let’s build one now!The super-quick-live-coding™

Vol. II

</body>

Thank you for listening

Questions, please!