Upload
martin-naumann
View
492
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
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!