Upgrade to Pro — share decks privately, control downloads, hide ads and more …

web.next render

web.next render

keynote from Render Conference, Oxford, 21 April 2016

6f3ec7315ad0715ae2a5f89a52877218?s=128

bruce lawson

April 21, 2016
Tweet

Transcript

  1. None
  2. web.next Bruce Lawson, Opera Software

  3. My pledge to the Web ▪ Never gonna give you

    up ▪ Never gonna let you down ▪ Never gonna run around and desert you ▪ Never gonna make you cry ▪ Never gonna say goodbye ▪ Never gonna tell a lie and hurt you
  4. Make the web better for… Consumers Business owners The next

    4 billion 4bn Developers
  5. THE CUSTOMER IS ALWAYS RIGHT

  6. None
  7. None
  8. None
  9. 2009 HTML [is] in direct competition with other technologies intended

    for applications deployed over the Web, in particular Flash and Silverlight. “ - Ian Hickson, editor HTML, Living Standard
  10. None
  11. None
  12. There’s an app API for that ▪ <canvas> ▪ <video>

    ▪ Geolocation ▪ Audio API ▪ WebRTC
  13. It’s an App World. The Web Just Lives in It

    Today, the U.S. consumer spends an average of 2 hours and 38 minutes per day on smartphones and tablets. 80% of that time (2 hours and 7 minutes) is spent inside apps and 20% (31 minutes) is spent on the mobile web. “ - blog.flurry.com April, 2013
  14. None
  15. None
  16. WHAT DO 
 CONSUMERS WANT?

  17. None
  18. None
  19. I wanna, I wanna, I wanna, I wanna, I wanna

    really really really wanna zigazig ha. “ I’ll tell you what I want
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. USER EXPERIENCE IS A FEATURE TOO!

  27. THE CAPABILITIES OF THE WEB. 
 THE UX OF NATIVE.

  28. None
  29. Progressive Web Apps ▪ “install” to the home screen ▪

    have their own icon (defined by the web developer) ▪ can launch full-screen, portrait or landscape ▪ but “live” on the Web
  30. None
  31. Downloading a typical app with 20 MB APK can take

    more than 30 minutes on a 2G network, and the download is likely to fail before completion, due to the flaky nature of the network.
 
 https://code.facebook.com/posts/1365439333482197/how-we- built-facebook-lite-for-every-android-phone-and-network
  32. One last deciding factor in whether or not to adopt

    an app is whether or not the user is willing to give away their precious disk space to the app…
 With space this limited, the user is comparing their personal photo collection with the adoption of a new app on their phone.
 Mobile App Developers Are Suffering, Branch 
 https://blog.branch.io/mobile-app-developers-are-suffering
  33. Africa: mobile phone use

  34. Birdly we didn’t stand a chance as we were fighting

    with both our competitors and other apps for a few more MB of room inside people’s phones.
 https://medium.com/inside-birdly/why-you-shouldn-t-bother- creating-a-mobile-app-328af62fe0e5#.ufoave1x4
  35. Manifest file stores metadata for your web app: icons, description,

    colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.
  36. <link rel="manifest" href="/manifest.json"> all in the <head>

  37. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  38. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  39. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  40. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  41. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  42. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  43. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  44. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  45. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  46. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  47. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  48. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  49. STARTING A PWA

  50. None
  51. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  52. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  53. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  54. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", “start_url": "/simple-demo/?home=true" }
  55. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" } CSS @media (display-mode: standalone) { h3:after {content: " in standalone mode!"} }
  56. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "browser", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  57. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  58. { "name": "Air Horner", "short_name": "Air Horner", "icons": [ {

    "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" }
  59. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/
  60. Simple way to keep track of launch trends { "name":

    "Simple web app demo", "short_name": "Demo", "icons": [ { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  61. Tools Manifest Generator http://brucelawson.github.io/manifest/ 
 Manifest validator manifest-validator.appspot.com
 List of

    PWAs https://pwa.rocks
  62. Opera differences ▪ HTTP-hosted sites will only display with browser

    UI, regardless of what the manifest states
 ▪ When the user follows a link that takes the user out of the domain of the installed app, a new tab is spawned, with browser chrome. ▪ Opera doesn’t (yet) support background_color; this will be added in a forthcoming release.
  63. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  64. Flipkart Lite ▪ 40% returning visitors week over week
 ▪

    +63% conversions from Home screen visits
 ▪ 3x time spent on FlipKart Lite
  65. Progressive Web Apps ▪ live on the server so no

    update distribution lag
 ▪ require no app store or gatekeeper
 ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones
 ▪ searchable, indexable, linkable
 ▪ can work offline
  66. GOING OFFLINE

  67. None
  68. Appcache http://www.lollercoasterlab.com/2011/05/foreveralonethispartyiscrp.html

  69. The appcache API is another big mistake. It’s the best

    example of not understanding the problem before designing a solution, and I’m still trying to fix that mess. “ SlapDache - Hixie
  70. AppCache is declarative - you give the browser a manifest

    and magic happens. This has well documented limitations. “ What's wrong with AppCache? - Alex Russell (sinister mastermind at Google)
  71. None
  72. None
  73. None
  74. None
  75. None
  76. Also with Service Worker ▪ Push Notifications
 ▪ Background Sync

  77. None
  78. Why is everything else around us developing so fast, but

    the web is so slow to adopt anything? “ Why are Standards slow? - Mark Roberts' email to WHATWG, 10 Oct 2013
  79. Hixie’s reply: 1. Have someone design the feature. 2. Have

    someone write a specification for it. 3. Have some people write tests for it. 4. Have one browser implement it. 5. Have another browser implement it. 6. [etc] 7. Have people document it.
  80. This is in contrast to "everything else", which just needs:


    1. Someone to implement it. “ Compared with…
  81. Extensible Web Manifesto Browser vendors should provide new low-level capabilities

    that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high- level APIs through JavaScript implementations of new features “
  82. Fetch standard At a high level, fetching a resource is

    a fairly simple operation. A request goes in, a response comes out. The details of that operation are however quite involved and used to not be written down carefully and differ from one API to the next. “
  83. The Fetch Standard provides a unified architecture for these features

    so they are all consistent when it comes to various aspects of fetching “ Explaining the platform
  84. The Fetch Standard also defines the fetch() JavaScript API,which exposes

    most of the networking functionality at a fairly low level of abstraction. “ Fetch API - Fetch Living Standard
  85. None
  86. <input> <video controls> <img> Magic

  87. The JavaScriptification of the Web? “ We want web developers

    to write more declarative code, not less. This calls for eliminating the standards bottleneck to introducing new declarative forms, and giving library and framework authors the tools to create them. - extensiblewebmanifesto.org
  88. Selectors API

  89. None
  90. None
  91. CSS Magic ▪ Parsing when it drops unknown stuff ▪

    specificity, inheritance, imports, @rules ▪ shorthands ▪ apply it live, as the page is still loading ▪ reapply any time the DOM changes
  92. Parser API Existing preprocessors and polyfills aren’t fully capable, or

    fully compatible and they don’t agree on the output, and need to be updated.
  93. Font Metrics API

  94. None
  95. None
  96. None
  97. Custom Layout Custom layouts will allow us to register a

    custom display value and own layout computations making whole classes of new proposals possible to figure out in the community and without impossibly complex barriers. pantomime-horse: {display: --unicorn;}
  98. Custom Paint allows you to have other things as a

    background apart from still images, without abusing the DOM or markup.
  99. #myElement { --circle-color: red; background-image: paint(circle); } CSS

  100. this.registerPaint({ name: 'circle', dependencies: ['--circle-color'], paintCallback: function(ctx, geom, properties) {

    } // Change the fill color. var color = properties['--circle-color']; ctx.fillStyle = color; …
  101. Composited Scrolling • position-sticky, • image carousels, • custom scroll

    animations, • iphone-style contact lists, • physics-based animations. Scripted effects (driven by requestAnimationFrame, response to onscroll, etc) are flexible and powerful, but are subject to main thread jank. 
 
 they're the only way to create common effects such as
  102. Composited Scrolling Introduce CompositorWorker whose global scope exposes requestAnimationFrame which

    runs at the rate of threaded scrolling and animation. 
 
 Allow DOM elements to be wrapped in a CompositorProxy which may be sent to a CompositorWorker and which exposes a limited set of accelerated properties and input events.
  103. None
  104. This extensibility and ability to adapt, refine and share sensible

    high-level features are the cornerstone on which we will allow the Web not just to generally improve, but to remain interesting and competitive for decades — and recapture some of the most important things that made it successful in the first place. “ Brian Kardell
  105. Include developers In order for the open web to compete

    with its walled competitors, there must be a clear path for good ideas by web developers to become part of the infrastructure of the web. “ - extensiblewebmanifesto.org
  106. responsiveimages.org @respimg

  107. <video> <source src=foo-lowres.webm media="max-width:480px"> <source src=foo-hires.webm> <!-- Fallback content -->

    </video> HTML5 video with MQs Notes on Adaptive Images (yet again!), Dec 2011
  108. <picture> <source src=foo-lores.jpg media="max-width:480px"> <source src=foo-full.jpg> <!-- Fallback content -->

    <img src="foo-lores.jpg" alt="…"> </picture> My <picture> strawman
  109. None
  110. None
  111. None
  112. None
  113. None
  114. the RICG’s main contribution to the web platform wasn’t picture,

    srcset, or sizes… To get them done we had to punch a hole through the thick technical, cultural, and institutional walls that separate the people who make browsers from the people who make websites. “ <picture> element - Mat Marquis (Wilto)
  115. Join WICG

  116. None
  117. brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

  118. brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

  119. Thanks • Me by HTML sign in Tokyo by Doug

    Schepers (@shepazu), used with permission • The Selecter: By Braunov - Own work, CC BY-SA 3.0, 
 https://commons.wikimedia.org/w/index.php?curid=3140115 • Stare photo Milner Moshe 
 https://commons.wikimedia.org/wiki/File:Sartre_1967_crop.jpg • Apps vs Web graphs by Flurry, used by permission • World Development Report 2016: Digital Dividends 
 http://www.worldbank.org/en/publication/wdr2016