Developing FirefoxOS

Develop [email protected]

v1.2

Why I’m here?

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

Mozilla can help YOU

and YOU can help us, too

Mozilla, Firefox & Firefox OS

Gecko

Core Browser Engine

GeckoNetscape90’ Browser

GeckoNetscape

Firefox (windows)

Firefox (mac)

Firefox (linux)

Desktop Firefox

GeckoNetscape

Firefox (windows)

Firefox (mac)

Firefox (linux)

Firefox (android)

Firefox for Mobile

GeckoNetscape

Firefox (windows)

Firefox (mac)

Firefox (linux)

Firefox (android)

Firefox OS

Firefox OS Architecture

Device

Kernel

APIs

Native API-based UX

Web Browser/ Platform

Device

Kernel

Web Engine / Standard Device APIs

Web-based User Experience/Web Content•

•@

Firefox OS

Existing Platforms

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

Significantly small stack

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

Browser Engine

Linux/HAL/RIL

Gaia

Gecko

Gonk

Firefox OS plans to define & standardize (W3C) all Web APIs required for advanced functionalities in Mobile devices

Unleash Web APIs for Mobile devices

Multitouch

NFC

Bluetooth

Accelerometer

Cameras

Hardware Keys

USB Access

Vibration

Speaker

Microphone

Light Proximity

Sensor

Gyro

SMS

Telephony

http://arewemobileyet.com

Think about the web

Facebook

Twitter

Web sites are capableAnd can act as Mobile App

Prove of Concept

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 Tools?

Re-Think about the webWhat happens In 2 years

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/

Reference

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

Develop just on the web

https://appmaker.mozillalabs.com/

Develop in the Browser• Firefox addon to simulate and debug web apps

http://mzl.la/1auuWOi

Web Runtime

WebApp acts as native Apps(Web Runtime)

http://mzl.la/1aDz1Ma

Web Runtime

Firefox (windows)

Firefox (mac)

Firefox (linux)

WebApp acts as native Apps(Web Runtime)

http://mzl.la/1aDz1Ma

Web Runtime

Firefox (windows)

Firefox (mac)

Firefox (linux)

Firefox (android)

WebApp acts as native Apps(Web Runtime)

http://mzl.la/1aDz1Ma

Web Runtime

Firefox (windows)

Firefox (mac)

Firefox (linux)

Firefox (android)

Firefox OS

WebApp acts as native Apps(Web Runtime)

http://mzl.la/1aDz1Ma

Web App Developer Hubhttps://marketplace.firefox.com/developers/

Reference

HTML5 Support APIshttps://developer.mozilla.org/docs/HTML/HTML5

Reference

Web Runtime APIhttps://developer.mozilla.org/en-US/docs/WebAPI

Reference

FirefoxOS Development Process

Train Model

http://bit.ly/1caPWsG

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

1.2 Plan

1.2 Dev

1.2 Fix

1.2 Release

PM/ePM/eM ePM/eM/

Engineer QA/Engineer

QA/L10n/Cariier Test

http://mozilla.github.io/process-releases/draft/development_specifics/

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

1.2 Plan

1.2 Dev

1.2 Fix

1.2 Release

PM/ePM/eM ePM/eM/

Engineer QA/Engineer

QA/L10n/Cariier Test

1.3 Plan

1.3 Dev

1.3 Fix

1.3 Release

http://mozilla.github.io/process-releases/draft/development_specifics/

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

1.2 Plan

1.2 Dev

1.2 Fix

1.2 Release

PM/ePM/eM ePM/eM/

Engineer QA/Engineer

QA/L10n/Cariier Test

1.3 Plan

1.3 Dev

1.3 Fix

1.3 Release

1.1 Release

http://mozilla.github.io/process-releases/draft/development_specifics/

Fundamentals to make it happen...• Issue Tracking

o Bugzillao Code Review per commit

• Version Controlo Mercurialo Git - github

• Continue Integrationo Per commit test - Travis

lint, unittest, integration testo Daily Build - TPBL, Jenkins

Reference

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 NightlyGet Firefox Alpha version to emulate gaia in browserhttp://aurora.mozilla.org/ or http://nightly.mozilla.org/

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/

Run gaia

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

Dev-process: Discover

Bugzilla http://bit.ly/YwASU7Find Issues

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

good first bughttp://mzl.la/14IUpTh

photo credit by http://www.wallpaperdev.com/wallpaper/2560x1600/cute-baby-printable-version-65303.html

Reference

Take bug

Follow bugReference

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

Maillist: https://lists.mozilla.org/listinfo/dev-gaia

Reference

Dev-process: My First Patch

Another reference: http://mzl.la/15EJpS9

I have an idea...

[feature] Talking Dialer: play voice with Dialing

(for demo purpose)

Fire a bugBug 877972 - able to play a short sound clip when keypad is pressed

Need information or helpUse ‘Need more information from’ field

CodingCount Number voice clip found...

CodingCount Number voice clip found...

credit by Bumbler to Speech http://zhusee2.github.io/bumbler-to-speech/

http://youtu.be/EgxpzbgS_cY

Prototype and communicate idea

Pull Request (submit patch)

http://bugzil.la/877972

Automatic Coding Style (lint) check

rely on lint tools, not humansforced code style check before each commit

credit gjslint https://developers.google.com/closure/utilities/docs/linter_howto

Reference

Ask Reviewattach github url to bugzilla

photo credit by http://weheartit.com/entry/9380358/via/abz

send PR for reviewAssign 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-)

get feedbackWarning

get feedbackWarning

or get granted with criteria

fix it, then...

Warning

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

(It’s all about how good you want to be)

How good are you?

…...

Make you a better programmer

practice, cowork, feedback

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)

Make the world a better place

webwide

https://github.com/mozilla-b2g/gaiahttps://github.com/mozilla-b2g/B2G

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

-- Marissa Mayer

I always did something I was a little not ready to do. I think that’s how you grow.

Earn your first commithttp://codefirefox.com/videos

Action

Thanks