Transcript

1.
FIXING THE MOBILE WEB
Lessons learned building Firefox OS
Christian Heilmann, Mozilla (@codepo8)
Internet & Mobile World, Bucharest, Romania 10/10/2013
Today I am going to talk about how building FirefoxOS helps Mozilla ﬁx a few of the issues we have with the mobile web.

2.
HTML5 WORRIES…
★ Performance
★ Fragmentation
★ Security
★ Access to hardware
★ Painless app updates
★ Development environment
When talking to people about HTML5, I get a the same questions and
concerns over and over again.

3.
NO WEB GOODIES FOR YOU!
All of this is annoying as the web has a lot of beneﬁts closed environments
do not have like ease of distribution and simple update mechanisms.

4.
WRONG DIRECTION
The issue with a lot of mobile web attempts is that they are going in the
wrong direction: you have a high ﬁdelity OS and then you try to shoe-horn
the web into it instead of starting with the web stack.

5.
FIREFOX OS
Firefox OS is Mozilla’s attempt to break the closed nature of mobile
computing and bring the web to phones and tablets a s ﬁrst class citizen. It
is a daring endeavour and is already a reality.

6.
SOME FACTS…
★ Released in four countries: Spain, Poland, Venezuela and
Columbia (more to come very soon)
★ 18 mobile operator partners, 6 hardware partners
★ Hardware options: Alcatel One Touch Fire, ZTE Open,
Geeksphone Keon, Geeksphone Peak…
★ Aimed at emerging markets/low end market
★ Aimed to be an alternative to feature phones and
unavailable closed environments.
★ Open source - it is all on GitHub
Firefox OS is not a test, it is not an idea. It is already very real.

7.
"Movistar oﬀers the
ZTE Open for €69,
including €30 of
balance for prepaid
customers and a
4GB microSD card"
Firefox OS devices are extremely aﬀordable and aimed at people who have not
yet access to the web on the go. This also meant keeping them low spec which
is good. It forces us to optimise wherever we can.

8.
PERFORMANCE AND
FRAGMENTATION
A lot of the performance problems have been solved by Firefox OS’s archi-
tecture and we are trying hard to work around the fragmentation issue by
proposing everything we do as a standard.

9.
ARCHITECTURE
Linux/Gonk (ADB enabled)
Gecko rendering engine
Third Party HTML5 Apps
Web APIs / Web Actitivies
GAIA
PlatformApps/3rdparty
The architecture is simple, we build on top of the Gonk layer of Android (why
reinvent and open architecture) and added the Gecko rendering engine. On
top of that we have Web APIs and Activities, GAIA, the UI of Firefox OS and
third party HTML5 apps.

11.
LOCKOUT
This works around one of the biggest issues of HTML5 support: stock
browsers. Many basic features of HTML5 are not available across platforms
as the browsers are hard-wired to certain versions of the OS and do not get
upgraded.

12.
PREDICTABLE HTML5 SUPPORT
In the case of Firefox OS this is not an issue, as the browser engine is the OS.
This was also the original idea of OSX.

13.
SECURITY
Security is a big issue when it comes to HTML5. The web as it is now is
suffering from some massive security holes which is why we can not allow
any JavaScript on the web to access for example the camera of your phone.

25.
NETWORK
INFORMATION API
The Network Information API tells you what the connection is and if it is
metered or not. This helps your users not to spend too much money on
downloads and defer upgrades to when they are connected to WiFi.

31.
WEB APIS (PRIVILEGED APPS)
Device Storage API
Browser API
TCP Socket API
Contacts API
systemXHR
Privileged apps are those that went through a review by the Mozilla security
team and thus get more access to the hardware.

32.
CONTACTS API
For example, privileged apps can create new contacts on the ﬂy.

37.
WEB
ACTIVITIES
Web activities are a way to get access to the hardware without going through
a review process of your app. Instead of accessing the hardware directly,
the user will access it for you.

38.
You can for example ask for a photo and the user then picks from their
gallery or takes a photo with the app of their choice. They then return
automatically to your app with the photo as a ﬁle blob.

40.
FIREFOX OS + ANDROID!
Activities allow for an app ecosystem on the device. You can ask the user to
become the app to do certain tasks and defer to other apps instead of
doing everything yourself. They also work on Android when you install
Firefox.

41.
APP
DISTRIBUTION
App distribution on Firefox OS works in two ways: as a marketplace and by
distributing directly on the web using then Open Web Apps API.

42.
FIREFOX OS MARKETPLACE
https://marketplace.ﬁrefox.com/
The marketplace works like any other out there: submit your app, get found,
get rich.

43.
INSTALL FROM THE WEB…
var installapp = navigator.mozApps.install(manifestURL);
installapp.onsuccess = function(data) {
// App is installed
};
installapp.onerror = function() {
// App wasn't installed, info is in
// installapp.error.name
};
You can also re-use already existing web fame by adding a “install app”
button anywhere on the web calling this JavaScript. This means your SEO
efforts of the last years were not in vain.

44.
DYNAMIC APP WEB SEARCH
Firefox OS has a unique way to search apps. Instead of just searching by
name and description, the search scans the web for apps and links them to
the intent of the user. For example a search for a band would ﬁnd music
apps.

45.
DEVELOPMENT
ENVIRONMENT
The big question about HTML5 is always about the development environment.
Firefox OS has no SDK or IDE, but we built a few tools to get you started faster

46.
FIREFOX OS
BOILERPLATE APP
https://github.com/robnyman/Firefox-OS-Boilerplate-App
The Boilerplate App is a great way to start with Web Activities. In it you have
stub code for all activities and you can just comment out what you don’t
need.

47.
FIREFOX OS SIMULATOR
https://addons.mozilla.org/ﬁrefox/addon/ﬁrefox-os-simulator/
The Simulator is and add-on for Firefox that runs a virtual phone on your
desktop, complete with debugging tools and the option to send apps from
the simulator to a real device.

48.
PROTOTYPING WITH JSFIDDLE
https://hacks.mozilla.org/2013/08/using-jsﬁddle-to-prototype-ﬁrefox-os-apps/
1. Write your code as a JSFiddle
2. Append /webapp.manifest to your Fiddle
URL and paste this link into the Firefox OS
simulator to install the app
3. Alternatively, append /fxos.html to your
Fiddle URL to get an install page like a
typical Firefox OS hosted application
JSFiddle is not only a great way to try out some functionality or ask for help
reviewing it - now it also features a way to make any code in it installable
as an application in the simulator or on a device.

49.
BUILDING
BLOCKS?
Many people ask us for building blocks like the iOS ones. We don’t want to
stiﬂe people in their creativity and there is no “one” Firefox OS look and
feel - there are guidelines - but here are some ideas.

50.
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/
The creation of the OS-internal apps has been documented and all the
widgets used in their creation are available at buildingﬁrefoxos.com.

51.
CERTIFIED APPS BUILDING BLOCKS
http://buildingfirefoxos.com/
This is a great resource to get inspiration for your own apps.

52.
MOZILLA BRICK
http://mozilla.github.io/brick/
Mozilla Brick is a library to allow you to build apps from web components.
The beneﬁt here is that your apps will perform much, much better and you
don’t need to write behaviour yourself.