Introduction to Firefox OS

Slide 1

Slide 1 text

陳佳隆 EragonJ Firefox OS 的⼤大⼩小事

Slide 2

Slide 2 text

About myself

Slide 3

Slide 3 text

• 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 : [email protected]  [email protected]  EragonJ

Slide 4

Slide 4 text

Why am I here ? Because I want to tell you a story …

Slide 5

Slide 5 text

What is web ?

Slide 6

Slide 6 text

On web, you can ...

Slide 7

Slide 7 text

Focus Image Credit : http://goo.gl/DHHOij

Slide 8

Slide 8 text

• Javascript - Focus on programming logics • HTML - Focus on views • CSS - Focus on styles • With these three blades, the only limitation is your imagination. Focus

Slide 9

Slide 9 text

Web is platform Image Credit : http://goo.gl/HGzeVx

Slide 10

Slide 10 text

Responsive Web Design Desktop platform WebApp for tablet WebApp for mobile Image Credit : http://goo.gl/y6OJME

Slide 11

Slide 11 text

The OS is the browser. Firefox OS

Slide 12

Slide 12 text

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 "ﬁnd 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 !

Slide 13

Slide 13 text

3 layers !

Slide 14

Slide 14 text

Gaia Gecko Gonk WebApps, User Interface ... WebAPI, Permission manager ... Linux kernel, device drivers ...

Slide 15

Slide 15 text

Gaia Gecko Gonk WebApps, User Interface ... WebAPI, Permission manager ... Linux kernel, device drivers ... a.k.a. Boot to Gecko - B2G

Slide 16

Slide 16 text

WebApps Radio SMS Music

Slide 17

Slide 17 text

WebAPIs https://developer.mozilla.org/en-US/docs/WebAPI

Slide 18

Slide 18 text

Security Model https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model

Slide 19

Slide 19 text

App Types

Slide 20

Slide 20 text

Bring your weapons and follow us ! Tools

Slide 21

Slide 21 text

MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS

Slide 22

Slide 22 text

MDN https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS In MDN, you can ﬁnd stable and well-documented API here :)

Slide 23

Slide 23 text

MozillaWiki https://wiki.mozilla.org/

Slide 24

Slide 24 text

MozillaWiki https://wiki.mozilla.org/ In MozillaWiki, you can ﬁnd out latest and still-under-discussed API here.

Slide 25

Slide 25 text

We have few options for contributors / developers to test their own code. Testing environments

Slide 26

Slide 26 text

1. Firefox OS Simulator 2. Firefox OS Emulator 3. Firefox OS Desktop Client 4. Firefox Nightly with custom proﬁle 5. Firefox OS Devices Test environments

Slide 27

Slide 27 text

Firefox OS Simulator https://addons.mozilla.org/zh-tw/ﬁrefox/addon/ﬁrefox-os-simulator/

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Firefox OS Emulator https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_emulators

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Firefox OS Desktop Client https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_desktop_client

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Firefox Nightly with custom proﬁle https://developer.mozilla.org/en-US/Firefox_OS/Using_the_B2G_desktop_client

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Firefox OS Devices https://developer.mozilla.org/en-US/Firefox_OS/Installing_on_a_mobile_device

Slide 36

Slide 36 text

• Pros 1. You can do whatever you want and hack your own phone !       Pros & Cons • Cons 1. You have to root your phone ﬁrst. 2. You need enough knowledge of Firefox OS.  

Slide 37

Slide 37 text

Choose your own tools ! https://www.ﬂickr.com/photos/-2hu-/2208537129/

Slide 38

Slide 38 text

We need to do something ! Roll up your sleeves !

Slide 39

Slide 39 text

It’ time to make your FIRST FxOS app ! APP time !

Slide 40

Slide 40 text

Appmaker http://appmaker.mozillalabs.com/

Slide 41

Slide 41 text

• 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

Slide 42

Slide 42 text

Demo

Slide 43

Slide 43 text

Demo

Slide 44

Slide 44 text

Demo

Slide 45

Slide 45 text

Demo

Slide 46

Slide 46 text

Demo

Slide 47

Slide 47 text

Demo

Slide 48

Slide 48 text

Demo

Slide 49

Slide 49 text

Demo Mission Complete

Slide 50

Slide 50 text

Advanced Demo +

Slide 51

Slide 51 text

Advanced Demo http://jsﬁddle.net/xhGzU/ http://cssdeck.com/labs/cssclock

Slide 52

Slide 52 text

Advanced Demo Add manifest.webapp to see the magic

Slide 53

Slide 53 text

Advanced Demo

Slide 54

Slide 54 text

Advanced Demo Mission Complete

Slide 55

Slide 55 text

The only limitation is your imagination. Your show time

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

You can change the world with us. Get involved

Slide 58

Slide 58 text

Gaia Hackers http://jsbin.com/EGEloSa/1

Slide 59

Slide 59 text

Gaia Hackers http://jsbin.com/EGEloSa/1 You are the next one !

Slide 60

Slide 60 text

Gaia on Github https://github.com/mozilla-b2g/gaia

Slide 61

Slide 61 text

• 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

Slide 62

Slide 62 text

• 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 proﬁle-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

Slide 63

Slide 63 text

Bugzilla https://bugzilla.mozilla.org/

Slide 64

Slide 64 text

• 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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Find a good-ﬁrst-bug http://goo.gl/SgfRbg

Slide 67

Slide 67 text

Discuss with mentor

Slide 68

Slide 68 text

or need info ?

Slide 69

Slide 69 text

It seems that we are on the right direction ! Let’s start hacking ! Good

Slide 70

Slide 70 text

• http://git-scm.com/book • http://git-scm.com/documentation • http://learn.github.com/ • http://try.github.io • ... etc Git / Github resources

Slide 71

Slide 71 text

Create a branch

Slide 72

Slide 72 text

Commit your changes

Slide 73

Slide 73 text

Squash commits !

Slide 74

Slide 74 text

Squash commits !

Slide 75

Slide 75 text

Squash commits !

Slide 76

Slide 76 text

Squash commits !

Slide 77

Slide 77 text

Squash commits !

Slide 78

Slide 78 text

Squash ﬁnished ! Ok , right now you just ﬁnished 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.

Slide 79

Slide 79 text

Let’s push

Slide 80

Slide 80 text

Send PR

Slide 81

Slide 81 text

Send PR

Slide 82

Slide 82 text

I am afraid to send empty PR because all Gaia developers will see it and be tracked on IRC... xD ...