Share with college students about how FirefoxOS development works and the procedure and resource to contribute to FirefoxOS

1. v1.2
Develop FirefoxOS
gasolin@mozilla.com

2. Why I’m here?

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

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

5. Mozilla, Firefox &
Firefox OS

6. Gecko
Core Browser Engine

7. Netscape
90’ Browser
Gecko

8. Netscape
Firefox
(windows)
Gecko
Firefox
(mac)
Desktop Firefox
Firefox
(linux)

9. Firefox for Mobile
Firefox
(android)
Netscape
Firefox
(windows)
Gecko
Firefox
(mac)
Firefox
(linux)

10. Firefox
(android)
Netscape
Firefox
(windows)
Firefox OS
Gecko
Firefox
(mac)
Firefox
(linux)

11. Firefox OS Architecture
Existing
Platforms
Firefox
OS
Web Browser/ Platform
!
!
@
Native API-based UX
!
APIs
•
•
Significantly
small stack
Web-based User
Experience/Web Content
Web Engine / Standard
Device APIs
Kernel
Kernel
Device
Device
HW and kernel/
drivers from
Android or other
embedded stacks
Architecture differs
from others:
• Scales from
feature phones to
high-end
smartphones
• Enables Lower
RAM footprint
distributions

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

13. WHAT IS Firefox OS?
B2G = GAIA + GECKO + GONK
Web Application
Browser Engine
Linux/HAL/RIL

14. WHAT IS Firefox OS?
B2G = GAIA + GECKO + GONK
Web Application
Gaia
Browser Engine
Gecko
Linux/HAL/RIL
Gonk

15. Unleash Web APIs for Mobile devices
Firefox OS plans to define & standardize
(W3C) all Web APIs required for advanced
functionalities in Mobile devices
Cameras
Speaker
NFC
Microphone
Vibration
Multitouch
USB Access
SMS
Accelerometer
Telephon
y
Gyro
Bluetooth
Hardware
Keys
Light
Proximity
Sensor
http://arewemobileyet.com

16. Think about the web

17. Facebook

18. Twitter

19. Prove of Concept
Web sites are capable
And can act as Mobile App

20. FirefoxOS Screenshots: Homescreen

21. Calendar

22. Contact

23. Clock

24. MarketPlace
https://marketplace.firefox.com/

25. WebApp is useful, but can I ...
•
•
•
•
•
Write Native/Performance ?
Gaming ?
Video/Auido conferencing ?
Flash ?
Develop Tools?

26. Re-Think about the web
What happens In 2 years

27. Reference
Gaming without plugin (ASM.js)
http://bit.ly/YfF6gz

28. Reference
VideoChat without plugin (webRTC)
http://bit.ly/12f7MY2

29. Reference
Flash without plugin (Shumway)
http://mozilla.github.io/shumway/

30. Prototyping App on website (jsFiddle)
add /fxos.html to have webapp install page

31. https://appmaker.mozillalabs.com/
Develop just on the web

32. http://mzl.la/1auuWOi
Develop in the Browser
• Firefox addon to simulate and debug web apps

33. http://mzl.la/1aDz1Ma
WebApp acts as native Apps
(Web Runtime)
Web Runtime

34. http://mzl.la/1aDz1Ma
WebApp acts as native Apps
(Web Runtime)
Web Runtime
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)

35. http://mzl.la/1aDz1Ma
WebApp acts as native Apps
(Web Runtime)
Firefox
(android)
Web Runtime
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)

36. http://mzl.la/1aDz1Ma
WebApp acts as native Apps
(Web Runtime)
Firefox
(android)
Firefox OS
Web Runtime
Firefox
(windows)
Firefox
(mac)
Firefox
(linux)

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

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

39. Reference
Web Runtime API
https://developer.mozilla.org/en-US/docs/WebAPI

40. FirefoxOS Development Process

41. Train Model
http://bit.ly/1caPWs

42. Train Model: Release every 3 month
•
•
•
Time bound: Development + Release
Agile for change
Plan -> Feature complete -> Bug Fixing -> Release Engineering
1.2 Plan
PM/ePM/
eM
1.2 Dev
ePM/eM/
Engineer
1.2 Fix
QA/
Engineer
1.2 Release
QA/
L10n/Cariier
Test
http://mozilla.github.io/process-releases/draft/development_specifics/

43. Train Model: Release every 3 month
•
•
•
Time bound: Development + Release
Agile for change
Plan -> Feature complete -> Bug Fixing -> Release Engineering
1.2 Plan
1.3 Plan
PM/ePM/
eM
1.2 Dev
1.3 Dev
ePM/eM/
Engineer
1.2 Fix
QA/
Engineer
1.3 Fix
1.2 Release
1.3 Release
QA/
L10n/Cariier
Test
http://mozilla.github.io/process-releases/draft/development_specifics/

44. Train Model: Release every 3 month
•
•
•
Time bound: Development + Release
Agile for change
Plan -> Feature complete -> Bug Fixing -> Release Engineering
1.2 Plan
1.3 Plan
1.1 Release
PM/ePM/
eM
1.2 Dev
1.3 Dev
ePM/eM/
Engineer
1.2 Fix
QA/
Engineer
1.3 Fix
1.2 Release
1.3 Release
QA/
L10n/Cariier
Test
http://mozilla.github.io/process-releases/draft/development_specifics/

45. Reference
Fundamentals to make it happen...
•
•
•
Issue Tracking
o
Bugzilla
o
Code Review per commit
Version Control
o
Mercurial
o
Git - github
Continue Integration
o
Per commit test - Travis

lint, unittest, integration test
o
Daily Build - TPBL, Jenkins

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

47. Dev-process:Setup and runing

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

49. Get Aurora or Nightly
Get Firefox Alpha version to emulate gaia in browser
http://aurora.mozilla.org/ or http://nightly.mozilla.org/

50. 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/

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

52. Dev-process: Discover

53. Bugzilla Find Issues
http://bit.ly/YwASU7

54. Bugzilla Fire a bug
http://bit.ly/YwASU7

55. good first bug
Reference
http://mzl.la/14IUpTh
photo credit by http://www.wallpaperdev.com/wallpaper/2560x1600/cute-baby-printable-version-65303.html

56. Take bug

57. Reference
Follow bug

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

59. Dev-process: My First Patch
Another reference: http://mzl.la/15EJpS9

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

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

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

63. Coding
Count Number voice clip found...

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

65. Prototype and communicate idea
http://youtu.be/EgxpzbgS_cY

66. Pull Request (submit patch)
http://bugzil.la/877972

67. Reference
Automatic Coding Style (lint) check
rely on lint tools, not humans
forced code style check before each
commit
credit gjslint https://developers.google.com/closure/utilities/docs/
linter_howto

68. Ask Review
attach github url to bugzilla
photo credit by http://weheartit.com/entry/9380358/via/abz

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

70. Wait for review

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

72. Warning
get feedback

73. Warning
get feedback

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

75. So WHY contribute OSS?
you know you can coding, but...

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

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

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

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

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

81. Action
Earn your first commit
http://codefirefox.com/videos

82. Thanks