Slides from Chris Mills talk @ codemotion roma 2014

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

2. 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

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

4. what is THE
MOBILE WEB?

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

6. what is the mobile web?
the web for mobile phones
๏ real mobile browsers
๏ separate web sites for mobiles
๏ lots of ua sniffing crimes

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

8. what is the mobile web?
the web while you’re on the move
๏ geolocation
๏ offline data storage

9. what is the mobile web?
web technologies providing “native” capabilities
๏ installable apps
๏ control over device hardware and key services
๏ app ecosystem/marketplace
๏ fully functional offline apps
๏ high fps performance

10. what’s the
problem?

11. web versus native, the age-old struggle

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

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

14. solutions,
moz style

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

16. app ecosystem

17. 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

18. {
"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

19. var manifest_url = location.href.substring(0,
location.href.lastIndexOf("/")) + "/manifest.webapp";
function install() {
// install the app
var install = navigator.mozApps.install(manifest_url);
install.onsuccess = function(data) {
// App is installed, do something if you like
};
install.onerror = function() {
// App wasn't installed, info is in
// install.error.name
alert(install.error.name);
};
};
installation example

20. 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)

21. 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

22. 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

23. 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

24. firefox os

25. 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

26. 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

27. 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

28. 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

29. apis

30. 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

31. 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)

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

33. web activities

34. 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

35. 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

36. !
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

37. 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

38. alarm + notification

39. 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

40. window.addEventListener('devicelight', function(deviceLightEvent) {
/* Check ambient light status */
if (deviceLightEvent.value > 500) { // snow
_self.setSnow();
}
else if (deviceLightEvent.value > 100) { // morning
_self.setMorning();
}
else if (deviceLightEvent.value > 10) { // evening
_self.setEvening();
}
else { // night
_self.setNight();
}
});
light sensor

41. light sensor

42. light sensor

43. 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

44. device orientation
alpha
betagamma

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

46. 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

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

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

49. developer
experience

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

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

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

53. 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

54. performance
enhancers

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

56. 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

57. 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

58. 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” ™

59. 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

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