Empowering the "mobile web"

EMPOWERING THE 
MOBILE WEB
Chris Mills // Mozilla cmills@mozilla.com // @chrisdavidmills

don’t stress about taking notes:
๏ These slides are all at slideshare.net/chrisdavidmills
๏ developer.mozilla.org
๏ @chrisdavidmills
๏ cmills@mozilla.com
๏ #mdn irc channel on mozilla irc
๏ dev-mdc@lists.mozilla.org mailing list

๏ heavy metal drummer turned web nerd
๏ tech writer @ mozilla
๏ web tinkerer (HTML, CSS, JS)
๏ accessibility whiner
๏ educator
who am i?
mdn!!

what is the mobile web?
wap
๏ (blarrrgh, awful...)

the web for mobile phones
๏ real mobile browsers
๏ separate web sites for mobiles
๏ lots of ua sniffing crimes

the web as it is experienced on mobiles/tablets/etc.
๏ more thought given to ux; to context
๏ progressive enhancement
๏ feature detection
๏ responsive

the web while you’re on the move
๏ geolocation
๏ offline data storage

web technologies providing “native” capabilities
๏ installable apps
๏ control over device hardware and key services
๏ app ecosystem/marketplace
๏ fully functional offline apps
๏ high fps performance

web versus native, the age-old struggle

the usual arguments
native is better?
๏ faster?
๏ more integrated, consistent experience?
๏ better developer ecosystem?
๏ more secure?

the usual arguments
๏ web sites accessing other tabs or apps?
๏ web sites accessing 
camera 
contacts 
e-mail?

solutions
we’ve been working hard on this at mozilla
๏ app ecosystem
๏ firefox os
๏ apis
๏ developer experience and tools
๏ performance

installable apps
not a new phenomenon, but...
๏ pretty recent concept for the web
๏ manifest file defines app (manifest.webapp)
๏ installation controlled by app installation and management apis

{
"version": "0.1",
"name": "To-do alarms",
"description": "My awesome open web app",
"launch_path": "/index.html",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Chris Mills",
"url": "http://yourawesomeapp.com"
},
"locales": {
"es": {
"description": "Su nueva aplicación impresionante Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
}, manifest example

app types
Apps can be:
๏ hosted: just like a normal web site, but with a manifest and install
functionality
๏ packaged: zipped up, hosted somewhere (like the firefox
marketplace)

app stores
you are free to distribute your apps how you like
๏ marketplace.firefox.com
๏ team of reviewers verify apps before they are accepted
๏ you can also host your own apps
๏ or set up your own marketplace

app payments
now you can charge money for web apps
๏ payments api (mozpay) that uses the bango payments provider
๏ receipt verification to make sure payments are completed
๏ in-app payments also available

web runtime
web rt allows installable apps to work on other platforms
๏ apk wrapper for android apps, which includes native equivalents
where possible
๏ similar native wrappers for desktop platforms coming up
๏ firefox marketplace/Firefox will generate these

firefox os!
our mobile platform
๏ totally built on open web technologies
๏ mostly standards
๏ some are new inventions, with standardization being worked on
๏ designed for low power devices

successes so far
lots of success so far:
๏ 4 hardware partners
๏ 16 launches in 15 countries
๏ 30% market share with TEF in Uruguay; 12% market share with TEF
in Colombia
๏ vibrant developer community
๏ developer preview devices available

architecture
three main layers
๏ gonk: linux kernel plus hardware abstraction layer
๏ gecko: entire system runs on our rendering engine
๏ gaia: ui plus default system apps

architecture
everything runs in gecko
๏ each app runs in an iframe, hanging off main process
๏ this enforces cross app security (sandbox)
๏ as does api permissions system (see later)
๏ oom errors handled via a priority system

apis!!!
we want to control everything from the web
๏ so we’re creating apis to handle access to device hardware, system
functions, etc.
๏ security handled by permissions, in the manifest

api permissions
different apis have different permission levels:
๏ standard apis can be accessed by any app
๏ privileged apis can only be used in a packaged, verified apps (e.g.
contacts, device storage, keyboard)
๏ certified apis can only be used by vendor-installed apps (e.g.
camera, sms, dialer, bluetooth)

var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]
 
}
});
web activities (intents)

pick.onsuccess = function () {
// Create image and set the returned blob as the src
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.result.blob);
// Present that image in your app
var imagePresenter = document.querySelector("#image-presenter");
imagePresenter.appendChild(img);
};
pick.onerror = function () {
// If an error occurred or the user canceled the activity
alert("Can't view the image!");
};
web activities

var img = '/to-do-notifications/img/icon-128.png';
var text = 'HEY! Your task "' + title + '" is now overdue.';
var notification = new Notification('To do list', { body: text, icon:
img });
notification

!
var myAlarmDate = new Date(month.value + " " + day.value + ", " +
year.value + " " + hours.value + ":" + minutes.value + ":00");
!
var data = {
task: title.value
}
!
var request = navigator.mozAlarms.add(myAlarmDate, "ignoreTimezone",
data);
!
request.onsuccess = function () {
console.log("Alarm successfully scheduled");
var alarmRequest = navigator.mozAlarms.getAll();
alarmRequest.onsuccess = function() {
newAlarmId = this.result[(this.result.length)-1].id;
}
};
alarm

navigator.mozSetMessageHandler("alarm", function (alarm) {
// only launch a notification if the Alarm is of the right type for this
app
if(alarm.data.task) {
// Create a notification when the alarm is due
new Notification("Your task " + alarm.data.task + " is now due!");
updateNotified(alarm.data.task);
}
});
alarm + notification

window.navigator.vibrate(200); // vibrate for 200ms
!
window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,10
0,30,100,30,100]); // Vibrate 'SOS' in Morse.
vibration

window.addEventListener("deviceorientation", handleOrientation, true);
!
function handleOrientation(event) {
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
!
// Do stuff with the new orientation data
}
device orientation

device orientation
alpha
betagamma

window.addEventListener('devicemotion', function(event) {
console.log(event.acceleration.x + ' m/s2');
});
device motion

var person = new mozContact();
person.givenName = ["John"];
person.familyName = ["Doe"];
person.nickname = ["No kidding"];
!
var person = new mozContact(contactData); // Firefox OS 1.3 takes a
parameter to initialize the object
if ("init" in person) {
// Firefox OS 1.2 and below uses a "init" method to initialize the
object
person.init(contactData);
}
!
// save the new contact
var saving = navigator.mozContacts.save(person);
!
saving.onsuccess = function() {
console.log('new contact saved');
}; contacts

var message = "Hi!";
var number = "1234"; // There are several ways to retrieve a valid phone
number
!
navigator.mozMobileMessage.send(number, message);
SMS

regular web stuff!
other standards features also work great in this context:
๏ indexeddb/localstorage
๏ web rtc/getusermedia
๏ css animations
๏ SVg

developer experience
we want to give the web a first class development experience,
alongside native ecosystems:
๏ documentation
๏ developer tools
๏ frameworks, templates, libraries

documentation
announce new things, provide useful references, give
recommendations
๏ hacks blog
๏ mdn app center

developer tools
developer tools
๏ firefox’s standard toolbox
๏ app manager
๏ remote debugging
๏ you can run gaia inside desktop firefox too

frameworks and libraries
ready made code to make development easier
๏ mortar app templates
๏ brick: web components for building up interfaces quickly
๏ libraries to solve real world problems, for example localforage
๏ firefox os boilerplate: great resource for learning about fxos
๏ phonegap now has firefox os as a target platform

performance enhancers
because the web can still be a bit slow
๏ web workers
๏ asm.js
๏ emscripten

web workers
web workers
๏ run scripts in a background thread
๏ don’t block the main thread execution
๏ specify a script to run in the background
๏ pass messages between the two

asm.js
asm.js
๏ just javascript
๏ a very efficient low-level subset
๏ suitable for ahead-of-time optimizing compilation
๏ Unity3d now has asm.js/WebGL support

emscripten
emscripteN
๏ an LLVM to javascript compiler (well, asm.js, specifically)
๏ compile c++ (and others) into JS and run it on the web
๏ = “very fast shit” ™

resources
๏ look up localforage - polyfill for indexeddb/websql/localstorage
๏ simplewebrtc.com - simple webrtc library
๏ animate.css - good library for css animations
๏ raphaeljs.com, d3js.org - svg libraries
๏ emscripten.org - try quakejs.com and unrealengine.com/html5 in
a recent version of firefox, opera or chrome
๏ asmjs.org
๏ MDN app center: developer.mozilla.org/en-US/Apps
๏ hacks blog: hacks.mozilla.org

thanks for 
listening!!
slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills
The end

Empowering the "mobile web"

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Empowering the "mobile web" (20)

More from Chris Mills (20)

Recently uploaded (20)

Empowering the "mobile web"