Empowering the “Mobile Web” with Chris Mills

919 views

Published on

Empowering the “Mobile Web”
with Chris Mills

“Mobile web” applications are often criticised for having inferior performance and a limited feature set, compared to “native” apps. To redress the balance, browser vendors are working on a number of technologies to grant them superpowers.

In this talk, Chris Mills will discuss the inherent historic problems with mobile apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Notification, Network Information and Vibration, offline apps, installable apps and performance enhancers such as asm.js and Emscripten.

Presented at FITC Toronto 2014 on April 27-29, 2014
More info at www.FITC.ca

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

  • Be the first to like this

No Downloads
Views
Total views
919
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Empowering the “Mobile Web” with Chris Mills

  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

×