Geek Meet - Boot to Gecko: The Future of Mobile?

K O
E C ile?
O G of mo b

T T ture aw
kes

OO e fu Ro
bH

B Th

Hi, I’m Rob Hawkes and I’m here today to talk about Mozilla’s Boot to Gecko project.

G )
(B m2
c ko or
G e pla
tf

t to Web a sa
oo he
B T

Boot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices.

B2G Gaia
B2G is actually two separate things; B2G and Gaia

The B2G side is the hardware-related stuff and JavaScript APIs that we need to make the
phone work.

The B2G side is pretty much everything that you don’t see.

Gaia is the front-end operating system and application stack that hooks into the APIs that
B2G provides.

Gaia is basically everything that you can see and interact with.

At the basic level, B2G is powered by HTML5 and JavaScript – the same technologies that you
already use to create websites.

This makes it incredibly fast. I’m talking really fast, it boots and shuts down in a fraction of
the time that an iPhone does.

G?
B2
hy ou
t?
W uss ab
thef
is all
hat
W

But why is B2G important?

Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everything
related to the future of the Web.

Pretty much every new technology that is coming out within the browser-space is connected
to HTML5 and JavaScript in some way.

And what’s great is that every major browser has invested in them, so they won’t be going
anywhere any time soon.

But there’s more to it than that.

ies
log
n o de
ch source
te he
co

en t
Op nv
iew
ca
yone
An

It is created with open technologies.

Anyone can get involved in their creation; through browser developers like Mozilla, or
through standards organisations like the W3C.

Also, these technologies are open in that anyone can view the resulting code that is used
within Web pages, which is a fantastic way of learning.

ie s
lo g
n o ith
e c h lop
w

e t de
ve

Fre ree
to
se.F
u
to
Free

It is created with free technologies.

Anyone can use these technologies without having to pay anything, both for using the
technology and developing with it.

This is unlike closed environments like Flash where you have to pay to use official code
editors and production environments.

B2G

Firefox Persona

Web Apps

B2G is also part of the Kilimanjaro event.

Kilimanjaro is a milestone across several of the Mozilla products; Firefox, B2G, Web Apps,
and Persona.

The Kilimanjaro Event is not a single release, it is an incremental effort that results in an
coherent experience across those products.

When we reach the Kilimanjaro milestone we will have an elegant and simple experience for
HTML5 Web apps in Firefox on multiple devices that puts the user in control of their apps and
identity.

‘Kilimanjaro’ is planned to be reached by September 2012.

https://wiki.mozilla.org/Kilimanjaro

Demo

I think the best way to explain B2G and to show it’s current state is to give you a quick demo.

2 G
d B
hin ith
be ite
sw
g y we
bs
o lo bu
ild
chn ff y
ou
Te stu
ame
es
Th

B2G is created from a whole variety of technologies, from pre-existing ones to brand new
ones that have been created speciﬁcally.

Firefox Gecko

The Gecko engine lays at the core of B2G, the same engine that powers Firefox.

Needless to say, B2G isn’t just Firefox running on a phone. It’s much more than that.

WebNFC
WebVibration

Battery API

WebSMS Geolocation
WebContacts

Full Screen API

WebTelephony Settings API

WebUSB
Multitouch WebGL Camera

WebBluetooth

At Mozilla we’re working on the WebAPI effort which is our attempt at creating the APIs
needed to run a B2G device.

In other camps it might be referred to as DAP, which is the Device APIs Working Group who
are producing a W3C speciﬁcation for accessing various parts of a device through JavaScript.

The illustration above shows just a few of the APIs for B2G that we’re working on right now.

tes
uri
avo for
y f ait
tw
M Ican
no
Is
AP
evice
D

There are so many WebAPIs and technologies in the pipeline that relate to B2G in some way.

The following are just a few of my favourites.

You can ﬁnd the rest of the WebAPIs here: https://wiki.mozilla.org/WebAPI

n ts
Eve es
uch stur
ge
To ch and
ou
ultit
M

Touch Events

https://developer.mozilla.org/en/DOM/Touch_events

PI
A
era era
am e cam
C h
gt
essin
Acc

The Camera API lets you access the camera on a device.

Being able to do this with JavaScript will make a whole world of difference in so many areas.

For example, instead of requiring a user to upload a proﬁle image you could take one using
the webcam and use that instead. Simple but effective.

https://wiki.mozilla.org/Platform/Features/Camera_API

P I
S A
SM f said
eb uf
W cript
. ‘N
avaS
ithJ
xtsw
te
ing
nd
Se

The WebSMS API isn’t the most glamorous, but the idea of sending text messages with
JavaScript is quite appealing.

https://bugzilla.mozilla.org/show_bug.cgi?id=674725

P I
y A
o n lls
p h ca
Tele receive

eb akea
nd
W M

The WebTelephony API allows you to make and receive phone calls using JavaScript.

I can just imagine something like this being used to hook into a Web-based version of Siri
that answers your calls for you if you’re busy.


P I
n A
tio ogies
ibra hn
ol
bV nt
ec
We ho
pe
it
youw
ating
Vibr

WebVibration API, previously known as the WebVibrator API


P I
C A
NF ion
eb un
icat
W m
om
sc
les
wire
-like
RFID

The WebNFC API is pretty cool.

It gives you the ability to transmit and receive data within distances no larger than a few
centimetres.

The idea is that it can be used in phones for things like payment (like the new Barclaycard),
travel (think Oyster Card), and ﬁle transfer.


P I
A
o th are
e to dw
Blu ooth h ar
eb et
W o blu
esst
Acc

WebBluetooth API


P I
A
tery ge
at sa
B we
ru
po
oring
onit
M

Battery API


PI
n A
re e ul
Sc we
rf
ull et
po
F im
ple
,y
S

The Full Screen API allows you to expand any HTML element to ﬁll the users screen, even if
the browser isn’t running full screen itself.

https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

io n
t
ta ion
ie n
O r rie
ntat
en fo
Scre loc
kin
go
d
an
ing
ng
Cha

The Screen Orientation APIs allow you to do things like changing and locking, you guessed it,
the orientation of the screen.

Before now, it’s been incredibly difficult to lock orientation on a website or game using
nothing but JavaScript.

http://dvcs.w3.org/hg/screen-orientation/raw-ﬁle/default/Overview.html

GL
eb
W phics
ra
tedg
ra
ccele
re-a
rdwa
Ha

WebGL brings the ability to provide advanced hardware-accelerated 2D and 3D graphics
directly within the browser.

https://developer.mozilla.org/en/WebGL

ps
A p
eb atform
W a pl
pen eb as
O heW t
on
up
ilding
Bu

Open Web Apps is an initiative that is core to B2G and one that is important to the Web as a
whole.

It’s a way of creating and distributing apps that puts the developers and users of apps back
in charge.

It’s a way that embraces open technology and is for the good of the Web.

ach
Re
rm
tfo
s-pla
cros
ed
us
be
an
sc
App

It allows you to create rich HTML5 app experiences that run across multiple devices and form
factors (desktop, mobile, tablet, etc.)

g y
o lo
ch n es
e sit
n t ew
eb
pe om
ak
O us
et
eady
alr
ou
ty
Wha

It allows you to use Web standards and open technologies such as HTML5, CSS and
JavaScript.

Anything you currently use to build a website with can be used to build an app.

oice
f ch ol
o on
tr
o m ers in c
ed
Fre d consum
an
vs
de
tting
Pu

It puts you in control of every aspect of the app experience; from easy development, to
distribution, to direct communication with your customers.

The Mozilla Marketplace is our own platform for selling and distributing Web apps.

It’s in development right now but we plan to open the doors later this year.

However, there’s nothing to stop you creating your own marketplace though. All the APIs to
do that are documented and built into Firefox today. In fact, we encourage it!

https://marketplace.mozilla.org
https://developer.mozilla.org/en/Apps

te d
r
ta app
g s
ttin te
an
Ge to
crea
How

Creating a Web app isn’t crazy hard, it’s just a case of understanding the new features in
browsers.

https://developer.mozilla.org/en/Apps

tes
bsi
we olo
gy
ar e tec
hn
ps me
Ap et
he
sa
us
ey
Th

Apps are websites and are built using the same technology and processes.

If you already know how to make a website then creating your ﬁrst Web app is a breeze.

s ite
e b
e w ap
ps
th for
in g on
ality
nd fun
cti

Exte g new
ddin
A

The Open Web Apps project proposes some additions to standard websites and introduces a
few new JavaScripts APIs into the browser that help make apps an experience unlike any other
on the Web.

If you don’t know JavaScript then don’t be put off, the amount that’s needed to make an app
is relatively small and should make sense to you.

However, I would deﬁnitely advise learning JavaScript development if you’re planning on
getting really involved in Web apps.

fe st
n i
a
m o an a pp
io n int
a t ite
plic we
bs
Ap rninga
Tu

The only thing that you need to do to turn a website into app is create an application
manifest.

{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": [
"https://appstore.mozillalabs.com"
],
"default_locale": "en"
}

This is a JSON ﬁle that effectively describes your application; it’s name, icons, and other
related data.

nts
e
irem ember
q u
t re ttor
em

fes tan
ni mp
or
Ma I

There are a couple of important things to remember when creating an application manifest.

a in
o m ty
e d curi
am nt of se
S me
ele
An

The ﬁrst is that it needs to be hosted from the same domain as your Web app.

This is pretty straightforward and it adds an element of security in that it is unlikely that a
rouge manifest ﬁle will be able to be put on the same domain without your knowledge.

Content-type header

application/x-web-app-manifest+json

The second is that it needs to be served with a specific content type (application/x-web-app-
manifest+json).

This is probably the most tricky process in turning a website into an app as it involves
changing settings on your server or a bit of hackery in your manifest file.

If you don’t want to fiddle with your server then you can always set the content-type header
using something like PHP or Node.js.

to r
a
lid s ok
va
st hin
g i

nife everyt
Ma su
re
king
Ma

If you want to make sure your manifest is valid you can have it checked at http://
appmanifest.org

p s
a p
lin g ce
tal etp
la

Ins rM
ark
sero
brow
the
gh
hrou
T

You can install apps in B2G through the browser or the Mozilla Marketplace.

You can also install apps on the desktop and Android using Firefox.

Installing an app

navigator.mozApps.install(manifestUrl)

Behind the scenes, installing an app is achieved through the new mozApps JavaScript API.

By passing the ‘install’ method a string URL to the app’s manifest ﬁle you will trigger the
installation process.

An example of when you would call this method is after a user clicks on an “Install this app”
button on your own website.

It would be called automatically if your app was installed from the Mozilla Marketplace, or any
other external website.

The install method triggers an installation dialogue within the browser that allows the user to
decide what to do with the app.

On Windows, a desktop shortcut is created for the app you installed and it will also be in the
start menu.

On Mac, the app is added to your /Applications directory.

On B2G, the app is added to your homescreen.

nce
erie
exp eb
sit
es

ive ifie
dw
at lor
N er
jus
tg
long
no
are
ps
Ap

I think what is most interesting about the apps project is the ability to break away from the
concept of apps being nothing more than gloriﬁed websites.

Instead, the new functionality allows Web apps to look and act much like native applications
that you would ﬁnd in an operating system, rather than a website running within a browser.

We call this WebRT (Web run-time) and it’s really cool.

It’s really easy to use and you don’t need to do anything special as a developer to enable it in
your app.

Whenever a user requests to install an app it be be installed natively by default.

ock
e d
th reen
m
ro or home sc
f
nch sktop,
Lau or
de
…

Apps installed using WebRT are no different to any other native application that you have on
your computer.

They’re installed in the standard native applications location and can be launched in the same
way that you launch any other application.

U I
ser
row alo
ne
o b rs
ou
N an
dy
rs
ou
isy
ation
lic
app
The

WebRT applications use a browser rendering engine behind the scenes but don’t display any
normal browser UI that would clutter your app.

Instead, WebRT apps look and feel like native applications while actually using HTML and
JavaScript behind the scenes.

This is an example of a Web app installed as a native application. Notice the lack of browser
UI.

Right now WebRT uses the version of Firefox you already have installed to grab the rendering
engine.

In the future you won’t necessarily need a browser installed and WebRT will handle grabbing
a relevant rendering engine behind the scenes.

a y
d
to ns
2 G tio
g B op
sin are a f ew
U he
re
T

There are a whole bunch of ways to start using and testing B2G today.

If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using a
recent Firefox Nightly build.

Pros:
- No build system and very little setup required
- Can use the Firefox dev tools

Cons:
- The viewport is based on the size of the browser window
- Many device-like things won't work
- Apps are launched in separate, pinned tabs
- Firefox Nightly might be unstable

http://nightly.mozilla.org
https://github.com/andreasgal/gaia/

There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.

https://github.com/jrburke/gaia-devserver

Gaia in Nightly

You’ll have to resize the browser to get it looking right but it’s a great way to quickly play
with Gaia and start developing for it.

B2G Simulator

It is also possible to build a Boot to Gecko 'simulator' and run Gaia using this application.
This software is based on Firefox but behaves similar to the on-device experience of Boot to
Gecko.

If you are familiar with building the Firefox code-base or C++ projects, you can build this
application yourself.

Pros:
- Mobile viewport, similar experience to a mobile device in most respects
- More device apis (not all)

Cons:
- Need to install a C/C++ build system and build gecko
- The Firefox dev tools are not available

https://wiki.mozilla.org/Gaia/Hacking#Building_B2G

B2G Device

The last option is to build B2G on your own device.

This is the most difficult option and is only recommended on a spare device by someone who
knows what they’re doing.

We’re constantly improving the method of getting B2G onto your own device so we hope that
it will be a lot more reliable and safer in the near future.

https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko#Setting_up_.
26_building_Boot_to_Gecko

2 G
B
g to ture
u t in he
fu
ib et
ntr cre
at
Co an
help
uc
Yo

There are plenty of ways to get involved with B2G, from development all the way to general
testing.

The best way to keep up to speed with things is to frequent the B2G mailing lists.

- https://lists.mozilla.org/listinfo/community-b2g
- https://groups.google.com/forum/#!forum/mozilla.dev.b2g

If you want to help with development then the best place to do that is on the B2G and Gaia
GitHub repositories.

- https://github.com/andreasgal/B2G/
- https://github.com/andreasgal/gaia/

u s
lk to C
Ta illa
IR
oz
M
on
elive
W

The general rule of thumb at Mozilla is to look for the relevant people on IRC if you want a
quick response, we tend to live on there.

The server you want is irc.mozilla.org

The channels you want are #b2g and #gaia for B2G-related stuff, #openwebapps for Open
Web Apps, and #webapi for anything about WebAPIs.

ol
g co
th begin inning
m e
f so jus
tthe

ld o is is
o Th

resh
Th
I think it’s amazing that we can now build an entire operating system for a phone using Web
technologies. It just blows my mind.

We really are on the threshold of something awesome here.

I deﬁnitely advise you to start checking out B2G and the related projects, developing for
them, and helping with their development.

I’d love to see a day where all sorts of devices are powered by the Web, like TVs and set-top
boxes.

Perhaps we’ll even get those Internet-enabled fridges that we desire so much!

Rob Hawkes
@robhawkes

Rawkes.com
Personal website and blog

RECENT PROJECTS MORE COOL STUFF

Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla

Rawkets.com Slides
HTML5 & WebSockets game slideshare.net/robhawkes

Get in touch with me on Twitter: @robhawkes

Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://
rawkes.com

I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/
blog/2011/05/05/people-love-a-good-smooch-on-a-balcony

Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com

These slides are online at slideshare.net/robhawkes

Geek Meet - Boot to Gecko: The Future of Mobile?

More Related Content

Viewers also liked (20)

More from Robin Hawkes (20)

Recently uploaded (20)

Geek Meet - Boot to Gecko: The Future of Mobile?