0
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
๏ @chris...
๏ heavy metal drummer turned web nerd
๏ tech writer @ mozilla
๏ web tinkerer (HTML, CSS, JS)
๏ accessibility whiner
๏ educ...
what is THE

MOBILE WEB?
what is the mobile web?
wap
๏ (blarrrgh, awful...)
what is the mobile web?
the web for mobile phones
๏ real mobile browsers
๏ separate web sites for mobiles
๏ lots of ua sni...
what is the mobile web?
the web as it is experienced on mobiles/tablets/etc.
๏ more thought given to ux; to context
๏ prog...
what is the mobile web?
the web while you’re on the move
๏ geolocation
๏ offline data storage
what is the mobile web?
web technologies providing “native” capabilities
๏ installable apps
๏ control over device hardware...
what’s the

problem?
web versus native, the age-old struggle
the usual arguments
native is better?
๏ faster?
๏ more integrated, consistent experience?
๏ better developer ecosystem?
๏ ...
the usual arguments
๏ web sites accessing other tabs or apps?
๏ web sites accessing

camera

contacts

e-mail?
solutions,

moz style
solutions
we’ve been working hard on this at mozilla
๏ app ecosystem
๏ firefox os
๏ apis
๏ developer experience and tools
...
app ecosystem
installable apps
not a new phenomenon, but...
๏ pretty recent concept for the web
๏ manifest file defines app (manifest.we...
{
"version": "0.1",
"name": "To-do alarms",
"description": "My awesome open web app",
"launch_path": "/index.html",
"icons...
var manifest_url = location.href.substring(0,
location.href.lastIndexOf("/")) + "/manifest.webapp";
function install() {
/...
app types
Apps can be:
๏ hosted: just like a normal web site, but with a manifest and install
functionality
๏ packaged: zi...
app stores
you are free to distribute your apps how you like
๏ marketplace.firefox.com
๏ team of reviewers verify apps bef...
app payments
now you can charge money for web apps
๏ payments api (mozpay) that uses the bango payments provider
๏ receipt...
web runtime
web rt allows installable apps to work on other platforms
๏ apk wrapper for android apps, which includes nativ...
firefox os
firefox os!
our mobile platform
๏ totally built on open web technologies
๏ mostly standards
๏ some are new inventions, wit...
successes so far
lots of success so far:
๏ 4 hardware partners
๏ 16 launches in 15 countries
๏ 30% market share with TEF i...
architecture
three main layers
๏ gonk: linux kernel plus hardware abstraction layer
๏ gecko: entire system runs on our ren...
architecture
everything runs in gecko
๏ each app runs in an iframe, hanging off main process
๏ this enforces cross app sec...
apis
apis!!!
we want to control everything from the web
๏ so we’re creating apis to handle access to device hardware, system
fu...
api permissions
different apis have different permission levels:
๏ standard apis can be accessed by any app
๏ privileged a...
var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"]


}
});
web activities (...
web activities
pick.onsuccess = function () {
// Create image and set the returned blob as the src
var img = document.createElement("img"...
var img = '/to-do-notifications/img/icon-128.png';
var text = 'HEY! Your task "' + title + '" is now overdue.';
var notifi...
!
var myAlarmDate = new Date(month.value + " " + day.value + ", " +
year.value + " " + hours.value + ":" + minutes.value +...
navigator.mozSetMessageHandler("alarm", function (alarm) {
// only launch a notification if the Alarm is of the right type...
alarm + notification
window.navigator.vibrate(200); // vibrate for 200ms
!
window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,20...
window.addEventListener('devicelight', function(deviceLightEvent) {
/* Check ambient light status */
if (deviceLightEvent....
light sensor
light sensor
window.addEventListener("deviceorientation", handleOrientation, true);
!
function handleOrientation(event) {
var alpha = e...
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 message = "Hi!";
var number = "1234"; // There are several ways to retrieve a valid phone
number
!
navigator.mozMobile...
regular web stuff!
other standards features also work great in this context:
๏ indexeddb/localstorage
๏ web rtc/getusermed...
developer

experience
developer experience
we want to give the web a first class development experience,
alongside native ecosystems:
๏ document...
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 de...
frameworks and libraries
ready made code to make development easier
๏ mortar app templates
๏ brick: web components for bui...
performance

enhancers
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...
asm.js
asm.js
๏ just javascript
๏ a very efficient low-level subset
๏ suitable for ahead-of-time optimizing compilation
๏ ...
emscripten
emscripteN
๏ an LLVM to javascript compiler (well, asm.js, specifically)
๏ compile c++ (and others) into JS and...
resources
๏ look up localforage - polyfill for indexeddb/websql/localstorage
๏ simplewebrtc.com - simple webrtc library
๏ ...
thanks for

listening!!
slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills
The end
Upcoming SlideShare
Loading in...5
×

Empowering the "mobile web"

449

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
449
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Empowering the "mobile web""

  1. 1. EMPOWERING THE
 MOBILE WEB Chris Mills // Mozilla cmills@mozilla.com // @chrisdavidmills
  2. 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. 3. ๏ heavy metal drummer turned web nerd ๏ tech writer @ mozilla ๏ web tinkerer (HTML, CSS, JS) ๏ accessibility whiner ๏ educator who am i? mdn!!
  4. 4. what is THE
 MOBILE WEB?
  5. 5. what is the mobile web? wap ๏ (blarrrgh, awful...)
  6. 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. 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. 8. what is the mobile web? the web while you’re on the move ๏ geolocation ๏ offline data storage
  9. 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. 10. what’s the
 problem?
  11. 11. web versus native, the age-old struggle
  12. 12. the usual arguments native is better? ๏ faster? ๏ more integrated, consistent experience? ๏ better developer ecosystem? ๏ more secure?
  13. 13. the usual arguments ๏ web sites accessing other tabs or apps? ๏ web sites accessing
 camera
 contacts
 e-mail?
  14. 14. solutions,
 moz style
  15. 15. solutions we’ve been working hard on this at mozilla ๏ app ecosystem ๏ firefox os ๏ apis ๏ developer experience and tools ๏ performance
  16. 16. app ecosystem
  17. 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. 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. 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. 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. 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. 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. 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. 24. firefox os
  25. 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. 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. 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. 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. 29. apis
  30. 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. 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. 32. var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] 
 } }); web activities (intents)
  33. 33. web activities
  34. 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. 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. 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. 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. 38. alarm + notification
  39. 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. 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. 41. light sensor
  42. 42. light sensor
  43. 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. 44. device orientation alpha betagamma
  45. 45. window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); device motion
  46. 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. 47. var message = "Hi!"; var number = "1234"; // There are several ways to retrieve a valid phone number ! navigator.mozMobileMessage.send(number, message); SMS
  48. 48. regular web stuff! other standards features also work great in this context: ๏ indexeddb/localstorage ๏ web rtc/getusermedia ๏ css animations ๏ SVg
  49. 49. developer
 experience
  50. 50. developer experience we want to give the web a first class development experience, alongside native ecosystems: ๏ documentation ๏ developer tools ๏ frameworks, templates, libraries
  51. 51. documentation announce new things, provide useful references, give recommendations ๏ hacks blog ๏ mdn app center
  52. 52. developer tools developer tools ๏ firefox’s standard toolbox ๏ app manager ๏ remote debugging ๏ you can run gaia inside desktop firefox too
  53. 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. 54. performance
 enhancers
  55. 55. performance enhancers because the web can still be a bit slow ๏ web workers ๏ asm.js ๏ emscripten
  56. 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. 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. 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. 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. 60. thanks for
 listening!! slideshare.net/chrisdavidmills cmills@mozilla.com // @chrisdavidmills The end
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×