Provide Firefox OS Frontend (gaia) contribution procedures for new comers. Presented at COSCUP 2013

1. Steps to Contribute Firefox
OS (gaia)
gasolin@mozilla.com

2. wait for B2G session (by thinker)
If you are more familiar with...
C++ Python JS
Warning

3. C++ Python JS
welcome aboard :)
If you are familiar with...
First stop https://developer.mozilla.org/en-US/docs/Mozilla/
Firefox_OS/Platform/Gaia
Reference

4. Why I’m here?

5. About Me:
• Mozilla Firefox OS front-end developer
• GTUG Taipei Organizer (Open)
• Android developer and book author (Mobile)
• Python Web developer (Web)
http://www.gasolin.idv.tw

6. Firefox OS Front End (Gaia)
Open x Mobile x Web

7. Firefox OS Front End (Gaia)
Open x Mobile x Web
(& python )

8. Firefox OS Front End (Gaia)
Open x Mobile x Web
三種願望⼀一次滿⾜足
(& python )

9. WHY contribute OSS?
you know you can coding, but...

10. (It’s all about how good you want to be)
How good are you?
…...

11. Make you a better
programmer
practice, cowork, feedback

12. Practice
掱
photo credit by http://www.flickr.com/photos/21556354@N03/7203604810/sizes/l/

13. Cowork
劦
photo credit by http://www.flickr.com/photos/outinthesticks/7336479102/sizes/l/

14. Feedback
photo credit by http://www.flickr.com/photos/breathalyzer/2966642214/sizes/o/

15. heal the world?
Can you use your code to
photo credit by http://www.flickr.com/photos/noelzialee/267129769/sizes/l/
(make it a better place)

16. Mozilla can help YOU
and YOU can help us, too

17. WHAT IS Firefox OS?
B2G = GAIA + GECKO + GONK

18. WHAT IS Firefox OS?
B2G = GAIA + GECKO + GONK
Web Application
Web Platform
Infrastructure

19. WHAT IS Firefox OS?
B2G = GAIA + GECKO + GONK
Web Application
Web Platform
Infrastructure
Gaia
Gecko
Gonk

20. HTML5 Support APIs
https://developer.mozilla.org/docs/HTML/HTML5
Reference

21. Firefox OS/Mobile for Android WebAPI
https://developer.mozilla.org/en-US/docs/WebAPI
Reference

22. Web App Developer Hub
https://marketplace.firefox.com/developers/
Reference

23. Firefox OS Simulator
• Firefox addon to simulate and debug web apps
http://bit.ly/T249hs
Reference

24. Gecko
Core Browser Engine

25. GeckoNetscape
90’ Browser

26. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Desktop Firefox

27. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox for Mobile

28. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS

29. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gonk
adapter to each device

30. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps

31. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps

32. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps
image credit by http://ironman.wikia.com/wiki/

33. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps
image credit by http://ironman.wikia.com/wiki/

34. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps
image credit by http://ironman.wikia.com/wiki/

35. GeckoNetscape
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)
Firefox
(android)
Firefox OS
Gaia
Gonk
adapter to each device
system & build-in web apps
image credit by http://ironman.wikia.com/wiki/

36. credit by http://bit.ly/Vf99jc
Gaia (System & build-in web apps)

37. credit by http://bit.ly/Vf99jc
Gaia (System & build-in web apps)
system platform
system utility
browser
media
productivity
communications
...

38. Gecko ~= Tony Stark
photo credit by http://fanartexhibit.wordpress.com/2013/02/08/lady-avengers-wallpaper/

39. Let’s play with Gaia
• Up-and-running
• Discover
• My first patch
credit by http://bit.ly/1cnczgr

40. Up and running
Get gaia
Build gaia
Run gaia
Get Aurora

41. Get gaia https://github.com/mozilla-b2g/gaia

42. Get Aurora
Get Firefox Alpha version to emulate gaia in browser
http://aurora.mozilla.org/

43. Build Gaia
# make steps
$ DEBUG=1 make
more options and detail
• Make Options https://developer.mozilla.org/en-US/
docs/Mozilla/Firefox_OS/Platform/Gaia/
Hacking#Make_options
• Hacking Gaia https://hacks.mozilla.org/2013/01/
hacking-gaia-for-firefox-os-part-1/

44. Run gaia
# open browser
$ /[AppPath]/firefox -profile /
User/me/gaia/profile-debug

45. Discover
Find Issues
take bug
fire a bug

46. Bugzilla http://bit.ly/YwASU7Find Issues

47. Bugzilla http://bit.ly/YwASU7Fire a bug

48. my first patch
http://mzl.la/14IUpTh
http://mzl.la/15EJpS9
photo credit by http://www.wallpaperdev.com/wallpaper/2560x1600/cute-baby-printable-version-65303.html
Reference

49. Take bug

50. Follow bug
Reference

51. Discussion
IRC: #b2g, #gaia (english)
#mozilla-taiwan (chinese)
Maillist: https://lists.mozilla.org/listinfo/dev-
gaia
Reference

52. My first patch
Coding
Submit Patch
Review
Granted
Ask review
Merge

53. I have an idea...
[feature]
Talking Dialer:
play voice with Dialing
(for demo purpose)

54. Fire a bug
Bug 877972 - able to play a short sound clip when keypad is pressed

55. Need information or help
Use ‘Need more information from’ field

56. Coding
Count Number voice clip found...

57. Coding
Count Number voice clip found...
credit by Bumbler to Speech http://zhusee2.github.io/
bumbler-to-speech/

58. http://youtu.be/EgxpzbgS_cY
Prototype your idea
Communicate
&

59. Pull Request (submit patch)
got PR https://github.com/mozilla-b2g/gaia/pull/11319

60. Automatic Coding Style (lint) check
rely on lint tools
Gaia has forced lint check before each
commit
(go @timdream for detail)
credit gjslint https://developers.google.com/closure/utilities/docs/
linter_howto
Reference

61. Ask Review
attach an auto redirect html page to github
photo credit by http://weheartit.com/entry/9380358/via/abz

62. send PR for review
Assign proper reviewer from Module owner list
https://wiki.mozilla.org/Modules/FirefoxOS

63. Wait for review

64. Wait for review
got ‘review granted’ (r+), or not (r-)

65. get feedback
Warning

66. get feedback
Warning

67. or get granted with criteria
fix it, then...
Warning

68. Congrats, your get first
commit
keep doing your good job!
Done

69. 去做⼀一些你還沒準備好能做的事
那是讓⼈人成⻑⾧長的⽅方式
-- Marissa Mayer
I always did something I was a little not ready to do. I think that’s how you grow.

70. Make the world a better place
web
wide
https://github.com/mozilla-b2g/gaia
https://github.com/mozilla-b2g/B2G

71. Thanks