Developing FirefoxOS

2,524 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,524
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
108
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

×