Rob Hawkes gave a talk about new and upcoming features in Firefox related to HTML5 and JavaScript. He discussed technologies like Web APIs that allow access to hardware using JavaScript, and projects at Mozilla like Boot to Gecko and WebRTC. He highlighted features for games such as the Pointer Lock API and Gamepad API. Rob also provided many resources for learning more about Firefox development and new web technologies.

1. OX
EF
FIR future
LA and
ZIL sent Ha
wk
es
MO Pre Rob
Hi, I’m Rob Hawkes and I’m here today to talk about Firefox and some of the JavaScript-related functionality that has
just arrived or is coming soon.

2. If you don’t already know, I work at Mozilla.
My official job title is Technical Evangelist, but I prefer what it says on my business card.
Part of my job is to engage with developers like yourselves about cool new technologies on the Web.
And for those of you with no idea of what a rawket is, I made a multiplayer game called Rawkets in which players fly
around in little rockets and shoot each other in the face with the latest Web technologies. It’s quite addictive!
http://rawkets.com

3. I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in person after the talk or on
Twitter.
These slides will go online after this talk, they include links to more information on the technologies covered.
I’ll put all the details up at the end.

4. I haven’t got long with you guys today so I can’t cover everything in Firefox with you.
Instead, I’m going to go over some of my favourite HTML5 and JavaScript-related features that have either just
landed or will be coming in the near-future.
I’ll give you a bunch of resources to go out and find out about everything else that I couldn’t cover.

5. 4
Pretty much 1 year ago Firefox was at version 4.
As of today the latest public release is version 12, with versions 13, 14 & 15 already going through developer testing.
This new rapid release process has allowed us to push more features to developers and users in a shorter space of
time.

6. B2G
Firefox Persona
Web Apps
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

7. PI
ebA s
W s
cce
area
rdw
ha
nd
Is a
AP
evice
D
WebAPI is a catch-all term for the technologies that we’re working on that allow developers to access hardware and
operating system APIs using JavaScript.

8. WebNFC
WebVibration
Battery API
WebSMS Geolocation
WebContacts
Full Screen API
WebTelephony Settings API
WebUSB
Multitouch WebGL Camera
WebBluetooth
One approach we’re taking is to try and replicate the functionality of a mobile phone with JavaScript.
What APIs would you need to do that?
This has resulted in our Boot to Gecko project.
http://hacks.mozilla.org/2011/08/introducing-webapi/
http://arewemobileyet.com

9. Boot to Gecko
Boot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices that is built using
nothing but JavaScript and HTML.
I won’t cover it in any more detail as it’s not directly connected to Firefox but I have a development device with me
today and am happy to let you play on it and talk about it more after this session.
https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko

10. n ts
E ve es
uch est
ur
To an
dg
uch
ito
Mult
Touch Events
https://developer.mozilla.org/en/DOM/Touch_events

11. PI
A
era era
am e cam
C th
ssing
ce
Ac
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 profile image you could take one using the webcam and use that instead.
Simple but effective.
https://wiki.mozilla.org/Platform/Features/Camera_API

12. P I
n A
a tio ies
Vibr techno log
eb op
en
W ith
uw
yo
ating
Vibr
WebVibration API, previously known as the WebVibrator API
https://bugzilla.mozilla.org/show_bug.cgi?id=679966

13. P I
A
tery
at ru
sa ge
B we
po
oring
nit
Mo
Battery API
https://bugzilla.mozilla.org/show_bug.cgi?id=678694

14. P I
n A
e e ful
llscr ow
er
u tp
F , ye
ple
im S
While not technically part of the WebAPI effort, The Fullscreen API allows you to expand any HTML element to fill the
users screen, even if the browser isn’t running full screen itself.
For games, this is great because you can make the small canvas element fill the entire screen.
Outside of games, this is useful for video elements and Web applications.
https://bugzilla.mozilla.org/show_bug.cgi?id=545812
https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs

15. ion
t
ta ces
rien devi
n O ob
ile
e
re have o nm
Sc t-
Mus
Screen Orientation allows 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.
https://bugzilla.mozilla.org/show_bug.cgi?id=740188
http://dvcs.w3.org/hg/screen-orientation/raw-file/default/Overview.html

16. TC
bR
e
W browser
he
int
pe
Sky
WebRTC is currently being worked on and will allow video conferencing using nothing but JavaScript.
It’s actually a bunch of smaller components, ranging from camera devices access to peer to peer network
communication.
Some of the core components are planned to be released later this year.
https://wiki.mozilla.org/Platform/Features/VideoConferencing
https://bugzilla.mozilla.org/show_bug.cgi?id=665909
http://www.webrtc.org

17. s
A pp
e b ntrol
n W k in co
pe sb
ac
O d us
er
an
ers
velop
de
ing
Putt
The concept of Web apps is something that is gaining a lot of traction at the moment.
It’s no doubt this this traction is as a result of the success of native applications and games on the desktop and
mobile, particularly with iOS and Android.
https://developer.mozilla.org/en/Apps

18. It’s something we’re spending a lot of time on at Mozilla.
We envisage Web apps to run on any device, any browser, and to be distributed through any store or website.
https://developer.mozilla.org/en/Apps
https://marketplace.mozilla.org

19. The process of installing an Open Web App is handled by the browser.
In Firefox this means a door-hanger prompt will appear when you request to install an app from a marketplace or a
developer’s website.
From there the browser will handle the rest of the installation process.

20. nce
ie
er creen
exp es
ike om
p-l kto
po
rh
Ap ed
es
th
from
ch
un
La
Something that needs to be tackled with Web apps is how to make them feel like real applications rather than
glorified websites.
One way that is being considered is completely removing the browser chrome and running the application in it’s own
window.
This will effectively mean that you have full control of the app UI and it won’t look like it’s being run in a browser.

21. At Mozilla we call this WebRT, which stands for Web Run-Time.
By using WebRT you can install a Web app directly into the OS just like you would a native application.
The WebRT app will look and feel like a native application when launched but will actually be running a browser
rendering engine behind the scenes.
This is an example of the game Sinuous running as a WebRT app with the Firefox rendering engine. Notice the lack of
browser UI.
https://developer.mozilla.org/en/Apps/Apps_architecture#Web_runtime

22. P Is
A
ted e Web
rela th
e- console to
Gam g the
gin
Brin
Aside from WebAPI and Web Apps, there are a few APIs that we’re working on specifically for games.

23. PI
A
ck ace
Lo ne pl
ter r in o
oin rso
P e cu
th
ing
Lock
The Pointer Lock API is an attempt at improving the mouse as an input device.
It would be used in situations like games and 3D visualisations where the mouse position rotates or moves you around a 3D
space.
As it stands there’d still be a cursor moving around the screen causing all sorts of trouble when you want to click on something
in your game.
With the new API you can lock your mouse position and stop it from getting in the way and being a nuisance.
Both Google and Mozilla are working on an implementation of this right now, it’s available in a custom build of Firefox.
https://developer.mozilla.org/en/API/Pointer_Lock_API
https://bugzilla.mozilla.org/show_bug.cgi?id=633602

24. P I
d A
p a eb
e
m e to th eW
Ga ol
ns co
he
gt
gin
Brin
The Gamepad API is one of the major improvements to input that is coming.
Both Mozilla and Google are working an an implementation of this and there is actually an experimental build of Firefox available
to the public that has it working. The API is also in the dev build of Chrome.
What I find most interesting about the Gamepad API is that it might be just the thing we need to finally justify HTML5 gaming on
a TV or console.
Who wants to use a keyboard and mouse while sitting on the sofa?
https://wiki.mozilla.org/GamepadAPI
http://www.gamepadjs.com
https://github.com/jbuck/input.js

25. This is another little demo that I put together to show off the Gamepad API implemented in my game Rawkets.

26. nce
a
rm faster
fo and
er
P etter
sb
thing
aking
M
There are a bunch of projects happening at Mozilla that aim to improve performance in Firefox.

27. ppy
na
S ene
ss
siv
on
esp
pr
eskto
foxd
Fire
Snappy aims to improve responsiveness in Firefox on the desktop.
It’s purpose is to improve things like startup time, the responsiveness of UI elements, as well as things like page load time and
navigation speed.
We’re landing a whole bunch of fixes in this area, details of which can be found on the Snappy wiki page.
https://wiki.mozilla.org/Performance/Snappy

28. in k
h r
mS ion
Me um
pt
cons
ory
em
xm
efo
Fir
ucing
Red
MemShrink aims to reduce memory consumption in Firefox, which will make the browser faster and more stable.
This is achieved by slimming down the amount of memory used in the browser whilst also fixing things like memory leaks.
As with Snappy, we’re landing a whole bunch of fixes with MemShrink.
https://wiki.mozilla.org/Performance/MemShrink
https://areweslimyet.com

29. G C
n tal le
me reliab
cre ore
In ter andm
fas
gs
hin
gt
kin
Ma
Incremental GC is one of the many improvements made in Firefox to improve performance.
It basically divides the garbage collection time in JavaScript into short increments.
Overall, the same time is spent doing GC but each individual GC pause would be shorter and less noticeable.
This is integral for high-performance JavaScript projects like games and animation but the improvements also help speed up all
JavaScript in general.
Incremental GC landed in Fx15.
https://wiki.mozilla.org/Platform/Features/Incremental_GC

30. ols
to s
p er t blis
velo pm
en
De evelo
ford
tools
ilt-in
Bu
Developer tools
https://wiki.mozilla.org/Features/DevTools
http://blog.mozilla.org/devtools/

31. Page Inspector
https://wiki.mozilla.org/DevTools/Features/Highlighter

32. 3D View (Tilt)
https://wiki.mozilla.org/DevTools/Features/PageInspectorTilt

33. Style Editor
https://wiki.mozilla.org/DevTools/Features/CSSEditor

34. JavaScript Scratchpad

35. Web Console

36. JavaScript debugger
https://wiki.mozilla.org/DevTools/Features/Debugger

37. up
g
in zon
p
ee he hori
K nt
tuff o
uchs
Som
I’ve really only touched the tip of the iceberg here.
There is much more coming in the near future.
Here are a few ways to keep up with things and get yourself prepared with the things happening in Firefox.

38. Platform features on the Mozilla Wiki
https://wiki.mozilla.org/Features/Platform

39. Desktop features on the Mozilla Wiki
https://wiki.mozilla.org/Features/Desktop

40. Mobile features on the Mozilla Wiki
https://wiki.mozilla.org/Features/Mobile

41. Are We Fun Yet? on the Mozilla Wiki
https://wiki.mozilla.org/Platform/AreWeFunYet

42. WebNFC
WebVibration
Battery API
WebSMS Geolocation
WebContacts
Full Screen API
WebTelephony Settings API
WebUSB
Multitouch WebGL Camera
WebBluetooth
Are We Mobile Yet
http://arewemobileyet.com

43. Hacks blog
http://hacks.mozilla.org

44. Firefox Aurora
“Get a first look at the latest developer tools, security features and innovative HTML5 and other Web technologies.”
http://www.mozilla.org/en-US/firefox/channel/#aurora

45. Firefox Nightly
Bleeding edge functionality.
Testing only.
http://nightly.mozilla.org

46. u s
to C
lk lla IR
Ta
ozi
nM
liveo
We
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.

47. 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 http://slideshare.net/robhawkes