A presentation Christian Heilmann, Dave Camp, and me did at Mobile World Congress 2014. The goal was to tell developers about the Firefox OS story, how they can publish applications, and how we can support them.

1. UNLEASH
THE FUTURE

2. Firefox OS for developers

3. Making HTML5 work

4. Firefox OS is HTML5
(and not just a bad host for an HTML5 event)

5. Firefox OS keeps HTML5 promises
(Works offline, store-independent distribution, simple update mechanisms)

6. Firefox OS empowers HTML5
(Web APIs, Web Activities, shared research findings into low-end device performance)

7. Firefox OS is 100% open
(Open Source, all tech are standard proposals)

8. Firefox OS is a shared effort
(All partners of Mozilla have engineers on the project)

9. The step from site to app is simple
(define a manifest)

10. {
"name": "MozMonument",
"description": "A simple search application to find your name on
the Monument outside the Mozilla San Francisco
office",
"launch_path": "/mobilefinder.html",
"icons": {
"128": "/128.png",
"90": "/90.png",
"60": "/60.png"
},
"developer": {
"name": "Christian Heilmann",
"url": "http://christianheilmann.com"
},
"locales": {
"en": {
"name": "MozMonument"
}
},
"default_locale": "en",
"fullscreen": "true"
}

11. Application levels / security model
Web Content
Privileged Web App
Regular web content
More access, more
responsibility
Installed Web App
Certified Web App
A regular web app
Device-critical
applications

12. You already use the developer tool
(the browser is input and output)

13. Firefox Developer Tools

14. Build with Firefox

15. Tools for the Web

16. Instant Feedback

17. Full device and tools integration

18. Helping developers hands-on

19. Technical
Evangelists team
We are here to help you

20. StackOverflow
We are actively answering questions

21. PhoneGap
Porting PhoneGap apps to Firefox OS

22. Cordova implementation APIs
•
Camera
•
Contacts
•
Device
•
Device-motion
•
Geolocation
•
Orientation
•
Vibration

23. Get ready!
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add firefoxos
$ cordova prepare firefoxos

24. Camera API
$ cordova plugin add org.apache.cordova.camera
!
//Cordova code
navigator.camera.getPicture(function (src) {
var img = document.createElement('img');
img.id = 'slide';
img.src = src;
}, function () {}, {
destinationType: 1
});

25. Mozilla Brick
http://mozilla.github.io/brick/

26. Brick
<x-flipbox>
<div>I'm the front face.</div>
<div>And I'm the back face.</div>
</x-flipbox>
!
//JavaScript
toggleButton.addEventListener("click", function() {
flipBox.toggle();
});
http://mozilla.github.io/brick/

27. Apps Partner
Engineering team
Helping brands port to Firefox OS

28. Phones for Apps
Getting phones into the porters’ hands

29. Building an app?
Please let me know!

30. Resources!

31. https://developer.mozilla.org/en/docs/Mozilla/Firefox_OS

32. https://hacks.mozilla.org/category/firefox-os/

33. https://marketplace.firefox.com/developers/

34. Thanks!