Introduction to Firefox OS

This is an updated version of previous slide - "all about Firefox OS".

I gave this talk in NCKU on 2014/05/14 and focused on introduction to Firefox OS. In this slide, you can learn the rough idea of Firefox OS and our working flow.

Transcript

1. 陳佳隆 EragonJ Firefox OS 的⼤大⼩小事
2. About myself
3. • Mozilla Taiwan Gaia Team - Front-end developer • I love Javascript / Node.js and focus more on Web • Embrace open source community and contributed
 a lot on Github - Gaia,Trip.js, Stepper.js ... etc • My blog : http://eragonj.me • My twitter : https://twitter.com/EragonJ • My email : ejchen@mozilla.com
 eragonj@eragonj.me
 EragonJ
4. Why am I here ? Because I want to tell you a story …
5. What is web ?
6. On web, you can ...
7. Focus Image Credit : http://goo.gl/DHHOij
8. • Javascript - Focus on programming logics • HTML - Focus on views • CSS - Focus on styles • With these three blades, the only limitation is your imagination. Focus
9. Web is platform Image Credit : http://goo.gl/HGzeVx
10. Responsive Web Design Desktop platform WebApp for tablet WebApp for mobile Image Credit : http://goo.gl/y6OJME
11. The OS is the browser. Firefox OS
12. History http://en.wikipedia.org/wiki/Firefox_OS The project proposal was to "pursue the goal of building a complete, standalone operating system for the open web" in order to "find the gaps that keep web developers from being able to build apps that are – in every way – the equals of native apps built for the iPhone [iOS], Android, and WP7 [Windows Phone 7]." - Andreas Gal Our CTO !
13. 3 layers !
14. Gaia Gecko Gonk WebApps, User Interface ... WebAPI, Permission manager ... Linux kernel, device drivers ...
15. Gaia Gecko Gonk WebApps, User Interface ... WebAPI, Permission manager ... Linux kernel, device drivers ... a.k.a. Boot to Gecko - B2G
16. WebApps Radio SMS Music
17. WebAPIs https://developer.mozilla.org/en-US/docs/WebAPI
18. Security Model https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model
19. App Types
20. Bring your weapons and follow us ! Tools
21. MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS
22. MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS In MDN, you can find stable and well-documented API here :)
23. MozillaWiki https://wiki.mozilla.org/
24. MozillaWiki https://wiki.mozilla.org/ In MozillaWiki, you can find out latest and still-under-discussed API here.
25. We have few options for contributors / developers to test their own code. Testing environments
26. 1. Firefox OS Simulator 2. Firefox OS Emulator 3. Firefox OS Desktop Client 4. Firefox Nightly with custom profile 5. Firefox OS Devices Test environments
27. Firefox OS Simulator https://addons.mozilla.org/zh-tw/firefox/addon/firefox-os-simulator/
28. • Pros 1. Easy to use. 2. Easy to setup working environment. 
 
 Pros & Cons • Cons 1. You can’t do too much. 2. No hardware support.
 
 

29. Firefox OS Emulator https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_emulators
30. • Pros 1. You can control many things. 2. You would know more details behind FxOS. 3. You can fake hardware related informations. Pros & Cons • Cons 1. Hard to setup the environment. 2. You need more knowledge about c / c++. 3. It changes quickly.

31. Firefox OS Desktop Client https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_desktop_client
32. • Pros 1. Easy to use. 2. Easy to setup working environment.
 
 Pros & Cons • Cons 1. You can’t do too much. 2. No hardware support.
 
 

33. Firefox Nightly with custom profile https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_desktop_client
34. • Pros 1. For Gaia developers, you can quickly verify your code. 2. With developer tools. 
 Pros & Cons • Cons 1. No hardware support but you can easily fake it. 2. Have to setup environment for Gaia. 

35. Firefox OS Devices https://developer.mozilla.org/en-US/Firefox_OS/Installing_on_a_mobile_device
36. • Pros 1. You can do whatever you want and hack your own phone ! 
 
 
 Pros & Cons • Cons 1. You have to root your phone first. 2. You need enough knowledge of Firefox OS. 

37. Choose your own tools ! https://www.flickr.com/photos/-2hu-/2208537129/
38. We need to do something ! Roll up your sleeves !
39. It’ time to make your FIRST FxOS app ! APP time !
40. Appmaker http://appmaker.mozillalabs.com/
41. • What you see is what you get ! • You can write an app without knowing how to program ! • Drag & drop is your good friend ! • Install your app to see your change directly ! Appmaker
42. Demo
43. Demo
44. Demo
45. Demo
46. Demo
47. Demo
48. Demo
49. Demo Mission Complete
50. Advanced Demo +
51. Advanced Demo http://jsfiddle.net/xhGzU/ http://cssdeck.com/labs/cssclock
52. Advanced Demo Add manifest.webapp to see the magic
53. Advanced Demo
54. Advanced Demo Mission Complete
55. The only limitation is your imagination. Your show time
56. 1. Write an app with Javascript / CSS / HTML (Don’t use Appmaker) 2. This app has to show current time with hh:mm:ss YYYY/MM/DD 3. [Bonus] 1. If you still have time, try to show more information at the same time like weather / temperature / timezone … etc. 2. Try to publish your app onto our marketplace. Homework
57. You can change the world with us. Get involved
58. Gaia Hackers http://jsbin.com/EGEloSa/1
59. Gaia Hackers http://jsbin.com/EGEloSa/1 You are the next one !
60. Gaia on Github https://github.com/mozilla-b2g/gaia
61. • Check Time Bound • Plan → Develop → Fix bugs → Release (3 months per release) • Plan : PM will create user stories and mark them must/nice-to-have • Develop : Developers will commit features on schedule • Fix bugs : Fix issues, late features • Release : Push this version to market Development cycle
62. • Clone Gaia from Github • Follow Firefox OS build prerequisites to set up your environment • Make sure all unit tests passed under Gaia folder (Because when developing Gaia, we have to follow the rule to make sure Travis get green light before committing changes.) • Use Nightly Firefox to access our profile-debug and make sure we can invoke Gaia successfully. Step by step https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites
63. Bugzilla https://bugzilla.mozilla.org/
64. • Mozilla is an international company composed of Mozillians in different timezone, so we need a platform to chat discuss and track our comments and bug status. • Bugzilla is very powerful and you can do anything on it like : • add attachments, set milestones • set bug dependencies, review bugs • ... etc • Eat your own dog food :) Why Bugzilla
65. Terms on Bugzilla Each verb will be accompanied by three states. ! 1. question mark ( ? ) means asking for something 2. minus mark ( - ) means something is rejected 3. plus mark ( + ) means something is granted ! Common used verbs would be review, feedback, ui-review
66. Find a good-first-bug http://goo.gl/SgfRbg
67. Discuss with mentor
68. or need info ?
69. It seems that we are on the right direction ! Let’s start hacking ! Good
70. • http://git-scm.com/book • http://git-scm.com/documentation • http://learn.github.com/ • http://try.github.io • ... etc Git / Github resources
71. Create a branch
72. Commit your changes
73. Squash commits !
74. Squash commits !
75. Squash commits !
76. Squash commits !
77. Squash commits !
78. Squash finished ! Ok , right now you just finished the process of squashing commits. ! The reason why we have to do this is to make sure we can easily track bug all in one commit.
79. Let’s push
80. Send PR
81. Send PR
82. I am afraid to send empty PR because all Gaia developers will see it and be tracked on IRC... xD ...
83. My PR list
84. Ask for review ?
85. Ask for review ?
86. Discuss with reviewer
87. Get all r+
88. If you get r- ... Image Credit : http://goo.gl/FwsNsI
89. Now you can merge !
90. You are Gaia Hacker now
91. Image Credit : http://goo.gl/jQPMMG
92. Thanks