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. 1.
  2. 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
  3. 6.
  4. 7.
  5. 8.
  6. 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
  7. 10.
  8. 11.
  9. 12.

    There’s an app API for that ▪ <canvas> ▪ <video>

    ▪ Geolocation ▪ Audio API ▪ WebRTC
  10. 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
  11. 14.
  12. 15.
  13. 17.
  14. 18.
  15. 19.

    I wanna, I wanna, I wanna, I wanna, I wanna

    really really really wanna zigazig ha. “ I’ll tell you what I want
  16. 20.
  17. 21.
  18. 22.
  19. 23.
  20. 24.
  21. 25.
  22. 28.
  23. 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
  24. 30.
  25. 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
  26. 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
  27. 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
  28. 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.
  29. 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" }
  30. 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" }
  31. 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" }
  32. 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" }
  33. 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" }
  34. 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" }
  35. 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" }
  36. 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" }
  37. 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" }
  38. 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" }
  39. 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" }
  40. 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" }
  41. 50.
  42. 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" }
  43. 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" }
  44. 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" }
  45. 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" }
  46. 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!"} }
  47. 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" }
  48. 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" }
  49. 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" }
  50. 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/
  51. 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" }
  52. 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.
  53. 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" }
  54. 64.

    Flipkart Lite ▪ 40% returning visitors week over week
 ▪

    +63% conversions from Home screen visits
 ▪ 3x time spent on FlipKart Lite
  55. 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
  56. 67.
  57. 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
  58. 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)
  59. 71.
  60. 72.
  61. 73.
  62. 74.
  63. 75.
  64. 77.
  65. 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
  66. 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.
  67. 80.

    This is in contrast to "everything else", which just needs:


    1. Someone to implement it. “ Compared with…
  68. 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 “
  69. 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. “
  70. 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
  71. 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
  72. 85.
  73. 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
  74. 89.
  75. 90.
  76. 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
  77. 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.
  78. 94.
  79. 95.
  80. 96.
  81. 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;}
  82. 98.

    Custom Paint allows you to have other things as a

    background apart from still images, without abusing the DOM or markup.
  83. 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; …
  84. 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
  85. 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.
  86. 103.
  87. 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
  88. 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
  89. 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
  90. 108.
  91. 109.
  92. 110.
  93. 111.
  94. 112.
  95. 113.
  96. 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)
  97. 115.
  98. 116.
  99. 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