This document discusses the future of hybrid apps and web technologies. It covers Firefox OS, which uses web APIs as its platform; PhoneGap, which allows developing installable apps using web technologies that access native device APIs; and web components, which allow building reusable custom HTML elements. The document encourages developing apps using these open web technologies and provides examples of building components using upcoming standards like Web Components.

1. The future is hybrid
...or is it?

2. Hi there!

3. The future is user-focused

4. The future is user-focused

5. What we’ll cover
0. Prologue
1. Firefox OS
2. Web APIs
3. Phonegap
4. Web Components

6. What are apps?
“native” Apps
Web apps
●
●
●
●
●
●
●
●
●
●
in the App stores
home screen icon
work offline
fully-featured
custom UI
in the App stores ✓*
home screen icon ✓
work offline
✓
fully-featured
✓*
custom UI
✓

7. Use the web, Luke

8. 1. Firefox OS
The web is the platform
● Standard APIs for all features
● Fully open
● Open Web Apps

9. 1. Firefox OS
The $100 smartphone?
69€
$129
90€

10. 1. Firefox OS - the open experience
Search the web
See if you like it
Install it

11. 1. Firefox OS - the web experience
Search the web
See if you like it
Install it

12. 1. Firefox OS - Open web apps
Hosted / Packaged apps
Minimal: Your website + Manifest
Privileged apps
Minimal: Your app, signed
Certified apps
Minimal: Certified by OEMs

13. 1. Firefox OS - Manifest?
{
name: “Hello FOWA”,
description: “A simple web app”,
...
}

14. 1. Firefox OS - Web activities

15. 2. Web APIs
WebFM
Ambient Light Battery Status
Proximity
Contacts
Bluetooth
Vibration
Web Payments
Network Info
Idle
https://developer.mozilla.org/en-US/docs/WebAPI
Storage
Notifications

16. 3.
What if you want that today?

17. 3. PhoneGap
You can have it today!

18. Web vs. App - FIGHT!
Thanks for that,

19. Why fight?

20. What’s hybrid?

21. 3. PhoneGap
Your web app
+
native APIs
+
installable App
=
APPsomeness!

22. 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!

23. Get your hands on it - even easier!
build.phonegap.com

24. Caution, speed bumps ahead..

25. Caution, speed bumps ahead..
1. Do not just wrap your web(site | app)
2. Test test test and test!
3. Expect the unexpected
a.
Rendering performance
b.
Feature support
c.
Click vs. Touch
4. Did I mention “TEST”?

26. And now...
The super-quick-live-coding™

28. 4. Web components

29. 4. Web components
Build your own HTML elements

30. 4. Web components
Build your own HTML elements
using HTML, CSS and Javascript

31. 4. Web components

32. 4. Web components
Welcome to the future, today!
Oh - and for the others:
X-Tags, Polymer

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

34. 4. Web components
Meet the AppMaker
appmaker.mozillalabs.com

35. 4. Web components
Let’s build one now!
The super-quick-live-coding™
Vol. II

36. </body>
Thank you for listening
Questions, please!