Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Firefox OS

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.

C467be2c8057ee9a73735ee2bd269504?s=128

EragonJ

May 21, 2014
Tweet

More Decks by EragonJ

Other Decks in Technology

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