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

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

2. @janjongboom
Hi, I’m Jan, work for Telenor, on Mozilla stuff

3. 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. 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.

5. The web has everything
Information 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

6. Affordable device to access
the internet
So goal: affordable device that people can use to get on the internet

7. Meet Firefox OS

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

9. 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.

10. You already have
created an app
Here’s the good thing. You already have created numerous FFOS apps. Every (mobile?)
website is an app.

11. 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.

12. 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.

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

14. 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.

15. 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.

16. No AJAX?!
F.e. there was no AJAX. Loading partial information was impossible.

17. 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.

18. So unlike PhoneGap, which in general was a great idea. We want to move away from
proprietary technology. Standardize through W3C.

19. Mozilla is leading the effort, but others will follow.

20. Mozilla is leading the effort, but others will follow.

21. 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.

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

23. Let’s build an app!
This stuff needs special awesome unicorn skills. Needs certification process.

24. index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.

25. index.html
Most simple FFOS application. Just a website. Not very crazy. Let’s play with the device.

26. index.html
Proximity sensor is on top of the screen. Close to it (under 10 cm) device vibrates. Magic!

27. index.html
Ambient light, let’s see how bright it is. Dealing with sensors is so easy now!

28. Feature snif"ng
Don’t break other platforms!
But remember, this stuff might not be available on the device you’re running at. Always
feature sniff.

29. Feature snif"ng
Don’t break other platforms!
But remember, this stuff might not be available on the device you’re running at. Always
feature sniff.

30. 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.

31. 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.

32. manifest.webapp
Simple, name, description, launch_path

33. Minimum FFOS app = 2 files

34. App manager can test in simulator & on device

35. Add packaged app, point to directory on disk

36. Add packaged app, point to directory on disk

37. Add packaged app, point to directory on disk

39. UPDATE to install, also works on device
DEBUG will open devtools

40. UPDATE to install, also works on device
DEBUG will open devtools

41. UPDATE to install, also works on device
DEBUG will open devtools

42. UPDATE to install, also works on device
DEBUG will open devtools

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

44. Ecco quanto è
facile!
That’s how easy it is! When done, push to phone or marketplace.

45. One problem
So app making is easy, no deps, but one problem. It’s butt ugly.

46. One problem
So app making is easy, no deps, but one problem. It’s butt ugly.

47. buildingfirefoxos.com
Firefox 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.

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

49. Something in between.

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

51. 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,

52. 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.

53. Using an activity
API is straight forward. Initiate pick activity

54. I NEED AN ADULT!
This was some very basic stuff, just playing with sensors / activities / only 25 minutes today.

55. https://developer.mozilla.org/en-US/docs/WebAPI
every API has been described in detail in the Mozilla MDN documentation.

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

57. Video time

58. Video time

59. Thank you!
slideshare.net/janjongboom
Thanks!

60. slideshare.net/janjongboom
Questions?
Thanks!