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

bruce lawson

April 21, 2016
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. View Slide

  2. web.next
    Bruce Lawson, Opera Software

    View Slide

  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

    View Slide

  4. Make the web better for…
    Consumers Business owners The next 4 billion
    4bn
    Developers

    View Slide

  5. THE
    CUSTOMER
    IS
    ALWAYS
    RIGHT

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  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

    View Slide

  10. View Slide

  11. View Slide

  12. There’s an app API for that


    ▪ Geolocation
    ▪ Audio API
    ▪ WebRTC

    View Slide

  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

    View Slide

  14. View Slide

  15. View Slide

  16. WHAT DO 

    CONSUMERS WANT?

    View Slide

  17. View Slide

  18. View Slide

  19. I wanna, I wanna, I wanna, I wanna, I wanna
    really really really wanna zigazig ha.

    I’ll tell you what I want

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. USER EXPERIENCE
    IS A FEATURE TOO!

    View Slide

  27. THE CAPABILITIES OF THE WEB. 

    THE UX OF NATIVE.

    View Slide

  28. View Slide

  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

    View Slide

  30. View Slide

  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

    View Slide

  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

    View Slide

  33. Africa: mobile phone use

    View Slide

  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

    View Slide

  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.

    View Slide

  36. href="/manifest.json">
    all in the

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  49. STARTING A PWA

    View Slide

  50. View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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!"}
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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"
    }

    View Slide

  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/

    View Slide

  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"
    }

    View Slide

  61. Tools
    Manifest Generator http://brucelawson.github.io/manifest/ 

    Manifest validator manifest-validator.appspot.com

    List of PWAs https://pwa.rocks

    View Slide

  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.

    View Slide

  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"
    }

    View Slide

  64. Flipkart Lite
    ▪ 40% returning visitors week over week

    ▪ +63% conversions from Home screen visits

    ▪ 3x time spent on FlipKart Lite

    View Slide

  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

    View Slide

  66. GOING OFFLINE

    View Slide

  67. View Slide

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

    View Slide

  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

    View Slide

  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)

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. Also with Service Worker
    ▪ Push Notifications

    ▪ Background Sync

    View Slide

  77. View Slide

  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

    View Slide

  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.

    View Slide

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

    1. Someone to implement it.

    Compared with…

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  85. View Slide




  86. Magic

    View Slide

  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

    View Slide

  88. Selectors API

    View Slide

  89. View Slide

  90. View Slide

  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

    View Slide

  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.

    View Slide

  93. Font Metrics API

    View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  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;}

    View Slide

  98. Custom Paint
    allows you to have other things as a background apart from
    still images, without abusing the DOM or markup.

    View Slide

  99. #myElement {
    --circle-color: red;
    background-image: paint(circle);
    }
    CSS

    View Slide

  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;

    View Slide

  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

    View Slide

  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.

    View Slide

  103. View Slide

  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

    View Slide

  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

    View Slide

  106. responsiveimages.org
    @respimg

    View Slide






  107. HTML5 video with MQs
    Notes on Adaptive Images (yet again!), Dec 2011

    View Slide







  108. My strawman

    View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  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.

    element
    - Mat Marquis (Wilto)

    View Slide

  115. Join WICG

    View Slide

  116. View Slide

  117. [email protected]
    opera.com/developer
    brucelawson.co.uk
    @brucel

    View Slide

  118. [email protected]
    opera.com/developer
    brucelawson.co.uk
    @brucel

    View Slide

  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

    View Slide