v1.2

Develop FirefoxOS
gasolin@mozilla.com
Why I’m here?
About Me:

http://www.gasolin.idv.tw

•
•
•
•

Mozilla Firefox OS front-end developer
GTUG Taipei Organizer (Open)
Android...
Mozilla can help YOU

and YOU can help us, too
Mozilla, Firefox &
Firefox OS
Gecko
Core Browser Engine
Netscape
90’ Browser

Gecko
Netscape

Firefox
(windows)

Gecko

Firefox
(mac)
Desktop Firefox

Firefox
(linux)
Firefox for Mobile

Firefox
(android)

Netscape

Firefox
(windows)

Gecko

Firefox
(mac)

Firefox
(linux)
Firefox
(android)

Netscape

Firefox
(windows)

Firefox OS

Gecko

Firefox
(mac)

Firefox
(linux)
Firefox OS Architecture
Existing
Platforms

Firefox
OS

Web Browser/ Platform

!

!
@

Native API-based UX

!
APIs

•

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

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

Web Application

Gaia

Browser Engine

Gecko

Linux/HAL/RIL

Gonk
Unleash Web APIs for Mobile devices
Firefox OS plans to define & standardize
(W3C) all Web APIs required for advanced
funct...
Think about the web
Facebook
Twitter
Prove of Concept

Web sites are capable
And can act as Mobile App
FirefoxOS Screenshots: Homescreen
Calendar
Contact
Clock
MarketPlace

https://marketplace.firefox.com/
WebApp is useful, but can I ...
•
•
•
•
•

Write Native/Performance ?
Gaming ?
Video/Auido conferencing ?
Flash ?
Develop ...
Re-Think about the web
What happens In 2 years
Reference

Gaming without plugin (ASM.js)

http://bit.ly/YfF6gz
Reference

VideoChat without plugin (webRTC)

http://bit.ly/12f7MY2
Reference

Flash without plugin (Shumway)

http://mozilla.github.io/shumway/
Prototyping App on website (jsFiddle)
add /fxos.html to have webapp install page
https://appmaker.mozillalabs.com/

Develop just on the web
http://mzl.la/1auuWOi

Develop in the Browser
• Firefox addon to simulate and debug web apps
http://mzl.la/1aDz1Ma
WebApp acts as native Apps
(Web Runtime)

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

Web Runtime

Firefox
(windows)

Firefox
(mac)

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

Firefox
(android)
Web Runtime

Firefox
(windows)

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

Firefox
(android)

Firefox OS
Web Runtime

Firefox
(window...
Reference

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

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

Web Runtime API
https://developer.mozilla.org/en-US/docs/WebAPI
FirefoxOS Development Process
Train Model

http://bit.ly/1caPWs
Train Model: Release every 3 month
•
•
•

Time bound: Development + Release
Agile for change
Plan -> Feature complete -> B...
Train Model: Release every 3 month
•
•
•

Time bound: Development + Release
Agile for change
Plan -> Feature complete -> B...
Train Model: Release every 3 month
•
•
•

Time bound: Development + Release
Agile for change
Plan -> Feature complete -> B...
Reference

Fundamentals to make it happen...
•
•
•

Issue Tracking
o
Bugzilla
o
Code Review per commit
Version Control
o
M...
Let’s play with Gaia
• Up-and-running
• Discover
• My first patch

credit by http://bit.ly/1cnczgr
Dev-process:Setup and runing
Get gaia

https://github.com/mozilla-b2g/gaia
Get Aurora or Nightly
Get Firefox Alpha version to emulate gaia in browser
http://aurora.mozilla.org/ or http://nightly.mo...
Build Gaia
# make steps
$ DEBUG=1 make
more options and detail

•
•

Make Options https://developer.mozilla.org/en-US/
doc...
Run gaia

# open browser
$ /[AppPath]/firefox -profile /
User/me/gaia/profile-debug
Dev-process: Discover
Bugzilla Find Issues

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

http://bit.ly/YwASU7
good first bug

Reference

http://mzl.la/14IUpTh

photo credit by http://www.wallpaperdev.com/wallpaper/2560x1600/cute-bab...
Take bug
Reference

Follow bug
Reference

Discussion
IRC: #b2g, #gaia (english)
#mozilla-taiwan (chinese)

https://lists.mozilla.org/listinfo/devgaia
Mai...
Dev-process: My First Patch
Another reference: http://mzl.la/15EJpS9
I have an idea...

(for demo purpose)

[feature]
Talking Dialer:
play voice with Dialing
Fire a bug
Bug 877972 - able to play a short sound clip when keypad is pressed
Need information or help
Use ‘Need more information from’ field
Coding
Count Number voice clip found...
Coding
Count Number voice clip found...

credit by Bumbler to Speech http://zhusee2.github.io/
bumbler-to-speech/
Prototype and communicate idea

http://youtu.be/EgxpzbgS_cY
Pull Request (submit patch)

http://bugzil.la/877972
Reference

Automatic Coding Style (lint) check
rely on lint tools, not humans
forced code style check before each
commit

...
Ask Review
attach github url to bugzilla

photo credit by http://weheartit.com/entry/9380358/via/abz
send PR for review
Assign proper reviewer from Module owner list

https://wiki.mozilla.org/Modules/FirefoxOS
Wait for review
Wait for review

got ‘review granted’ (r+), or not (r-)
Warning

get feedback
Warning

get feedback
Warning

or get granted with criteria

fix it, then...
So WHY contribute OSS?
you know you can coding, but...
How good are you?

…...

(It’s all about how good you want to be)
Make you a better
programmer
practice, cowork, feedback
Can you use your code to

heal the world?

(make it a better place)
photo credit by http://www.flickr.com/photos/noelziale...
web
wide
Make the world a better place
https://github.com/mozilla-b2g/B2G
https://github.com/mozilla-b2g/gaia
I always did something I was a little not ready to do. I think that’s how you grow.

去做⼀一些你還沒準備好能做的事
那是讓⼈人成⻑⾧長的⽅方式
-- Mari...
Action

Earn your first commit
http://codefirefox.com/videos
Thanks
Upcoming SlideShare
Loading in …5
×

Developing FirefoxOS

2,380 views
2,150 views

Published on

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

Published in: Technology, News & Politics
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,380
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
107
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Developing FirefoxOS

  1. 1. v1.2 Develop FirefoxOS gasolin@mozilla.com
  2. 2. Why I’m here?
  3. 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. 4. Mozilla can help YOU and YOU can help us, too
  5. 5. Mozilla, Firefox & Firefox OS
  6. 6. Gecko Core Browser Engine
  7. 7. Netscape 90’ Browser Gecko
  8. 8. Netscape Firefox (windows) Gecko Firefox (mac) Desktop Firefox Firefox (linux)
  9. 9. Firefox for Mobile Firefox (android) Netscape Firefox (windows) Gecko Firefox (mac) Firefox (linux)
  10. 10. Firefox (android) Netscape Firefox (windows) Firefox OS Gecko Firefox (mac) Firefox (linux)
  11. 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. 12. WHAT IS Firefox OS? B2G = GAIA + GECKO + GONK
  13. 13. WHAT IS Firefox OS? B2G = GAIA + GECKO + GONK Web Application Browser Engine Linux/HAL/RIL
  14. 14. WHAT IS Firefox OS? B2G = GAIA + GECKO + GONK Web Application Gaia Browser Engine Gecko Linux/HAL/RIL Gonk
  15. 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. 16. Think about the web
  17. 17. Facebook
  18. 18. Twitter
  19. 19. Prove of Concept Web sites are capable And can act as Mobile App
  20. 20. FirefoxOS Screenshots: Homescreen
  21. 21. Calendar
  22. 22. Contact
  23. 23. Clock
  24. 24. MarketPlace https://marketplace.firefox.com/
  25. 25. WebApp is useful, but can I ... • • • • • Write Native/Performance ? Gaming ? Video/Auido conferencing ? Flash ? Develop Tools?
  26. 26. Re-Think about the web What happens In 2 years
  27. 27. Reference Gaming without plugin (ASM.js) http://bit.ly/YfF6gz
  28. 28. Reference VideoChat without plugin (webRTC) http://bit.ly/12f7MY2
  29. 29. Reference Flash without plugin (Shumway) http://mozilla.github.io/shumway/
  30. 30. Prototyping App on website (jsFiddle) add /fxos.html to have webapp install page
  31. 31. https://appmaker.mozillalabs.com/ Develop just on the web
  32. 32. http://mzl.la/1auuWOi Develop in the Browser • Firefox addon to simulate and debug web apps
  33. 33. http://mzl.la/1aDz1Ma WebApp acts as native Apps (Web Runtime) Web Runtime
  34. 34. http://mzl.la/1aDz1Ma WebApp acts as native Apps (Web Runtime) Web Runtime Firefox (windows) Firefox (mac) Firefox (linux)
  35. 35. http://mzl.la/1aDz1Ma WebApp acts as native Apps (Web Runtime) Firefox (android) Web Runtime Firefox (windows) Firefox (mac) Firefox (linux)
  36. 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. 37. Reference Web App Developer Hub https://marketplace.firefox.com/developers/
  38. 38. Reference HTML5 Support APIs https://developer.mozilla.org/docs/HTML/HTML5
  39. 39. Reference Web Runtime API https://developer.mozilla.org/en-US/docs/WebAPI
  40. 40. FirefoxOS Development Process
  41. 41. Train Model http://bit.ly/1caPWs
  42. 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. 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. 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. 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. 46. Let’s play with Gaia • Up-and-running • Discover • My first patch credit by http://bit.ly/1cnczgr
  47. 47. Dev-process:Setup and runing
  48. 48. Get gaia https://github.com/mozilla-b2g/gaia
  49. 49. Get Aurora or Nightly Get Firefox Alpha version to emulate gaia in browser http://aurora.mozilla.org/ or http://nightly.mozilla.org/
  50. 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. 51. Run gaia # open browser $ /[AppPath]/firefox -profile / User/me/gaia/profile-debug
  52. 52. Dev-process: Discover
  53. 53. Bugzilla Find Issues http://bit.ly/YwASU7
  54. 54. Bugzilla Fire a bug http://bit.ly/YwASU7
  55. 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. 56. Take bug
  57. 57. Reference Follow bug
  58. 58. Reference Discussion IRC: #b2g, #gaia (english) #mozilla-taiwan (chinese) https://lists.mozilla.org/listinfo/devgaia Maillist:
  59. 59. Dev-process: My First Patch Another reference: http://mzl.la/15EJpS9
  60. 60. I have an idea... (for demo purpose) [feature] Talking Dialer: play voice with Dialing
  61. 61. Fire a bug Bug 877972 - able to play a short sound clip when keypad is pressed
  62. 62. Need information or help Use ‘Need more information from’ field
  63. 63. Coding Count Number voice clip found...
  64. 64. Coding Count Number voice clip found... credit by Bumbler to Speech http://zhusee2.github.io/ bumbler-to-speech/
  65. 65. Prototype and communicate idea http://youtu.be/EgxpzbgS_cY
  66. 66. Pull Request (submit patch) http://bugzil.la/877972
  67. 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. 68. Ask Review attach github url to bugzilla photo credit by http://weheartit.com/entry/9380358/via/abz
  69. 69. send PR for review Assign proper reviewer from Module owner list https://wiki.mozilla.org/Modules/FirefoxOS
  70. 70. Wait for review
  71. 71. Wait for review got ‘review granted’ (r+), or not (r-)
  72. 72. Warning get feedback
  73. 73. Warning get feedback
  74. 74. Warning or get granted with criteria fix it, then...
  75. 75. So WHY contribute OSS? you know you can coding, but...
  76. 76. How good are you? …... (It’s all about how good you want to be)
  77. 77. Make you a better programmer practice, cowork, feedback
  78. 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. 79. web wide Make the world a better place https://github.com/mozilla-b2g/B2G https://github.com/mozilla-b2g/gaia
  80. 80. I always did something I was a little not ready to do. I think that’s how you grow. 去做⼀一些你還沒準備好能做的事 那是讓⼈人成⻑⾧長的⽅方式 -- Marissa Mayer
  81. 81. Action Earn your first commit http://codefirefox.com/videos
  82. 82. Thanks

×