Pro Yearly is on sale from $80 to $50! »

ProData Consult: Web Trends

ProData Consult: Web Trends

Evening event about the latests web trends and summary from ColdFront Conference 2015.

October 2015


Kenneth Auchenberg

October 21, 2015


  1. Web Trends ProData Consult, October 2015 Kenneth Auchenberg

  2. Hej!

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. The web

  13. Agenda 17:00 - 17:45 • The web as an application

    platform • Service workers • Push Notifications • App Manifest + related features 17:45 - 17:55 Break 17:55-18:30 • WebRTC • Microsoft Edge 18:30 - 19:00 • Food/Dinner 19:00 - 20:00 • Physical Web • The headless web • The web in a native world • Future challenges
  14. The web has changed

  15. None
  16. Devices has changed

  17. Source:

  18. It’s about mobile

  19. None
  20. 742.5 million (2013) European population Source:

  21. Click here Chinese internet users

  22. Architecture has changed Source:

  23. Architecture has changed Source:

  24. Browsers has changed

  25. Mobile browsers has changed too Source:

  26. Mobile browsers has changed too 34.38% 13.32% 16.78% 13.59% 16.82%

    3.12% Others 1.99% Source:
  27. Engines has changed WebKit Blink Trident Gecko U3 Engine

  28. Frameworks has changed

  29. Frameworks has changed

  30. The web is an application runtime

  31. Example: Facebook

  32. Example: Netflix

  33. Example: Polarr

  34. Example: The intercept

  35. Example: Google Apps

  36. Capabilities has changed

  37. Progressive Web Apps ServiceWorker WebRTC App Install Banners App Manifest

    Web Bluetooth Push Notifications Client Hints Responsive Images Web Crypto Media Source Extensions (MSE) requestIdleCallback Object.observe Copy & Paste ES6/2015 WebVR CSS: Grid Layouts CSS: Scroll snapping Pointer Events
  38. Progressive Web Apps ServiceWorker WebRTC App Install Banners App Manifest

    Web Bluetooth Push Notifications Client Hints Responsive Images Web Crypto Media Source Extensions (MSE) requestIdleCallback Object.observe Copy & Paste ES6/ES2015 WebVR CSS: Grid Layouts CSS: Scroll snapping Pointer Events
  39. ServiceWorker

  40. A new core primitiv to the web

  41. Source:

  42. Source:

  43. Source:

  44. Source:

  45. Source:

  46. “Probably the most important introduction to the web platform since

    hyper-linking.” Paul Kinlan, Google
  47. Potential use-cases • Background data synchronization • Responding to resource

    requests from other origins • Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes • Hooks for background services • Custom templating based on certain URL patterns • Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the new few pictures in a photo album.
  48. Web Background Synchronization

  49. Coming to Firefox too

  50. Alex Russell, Google @slightlylate Follow these guys Jake Archibald, Google

  51. Push Notifications

  52. Source:

  53. Product Hunt

  54. Facebook Source:

  55. New API services: Roost

  56. Coming to Firefox too

  57. App Manifest

  58. Source:

  59. Source:

  60. “JSON-based manifest that provides developers with a centralized place to

    put metadata associated with a web application.” Source:
  61. Source:

  62. Splash screens

  63. Splash screen

  64. { "name": "Voice Memos", "icons": [ { "src": "/images/icon-192x192.png", "sizes":

    "192x192", "type": "image/png" }, ], "background_color": "#FAFAFA", "theme_color": "#FAFAFA", }
  65. App Install Banners

  66. None
  67. App install banners • You have a web app manifest

    file ◦ The manifest defines how your app appears on the user’s system and how it should be launched - and you are required to have a `short_name` and a `144x144` png icon • You have a service worker registered on your site. We recommend a simple custom offline pageservice worker • Your site is served over HTTPS (you need a service worker after all) • The user has visited your site twice over two separate days during the course of two weeks.
  68. <break />

  69. WebRTC

  70. Most think of <video> when hearing of WebRTC

  71. WebRTC is a high-level API to provide P2P communcation directly

    in the browser.
  72. Today 1.2 Billion+ WebRTC-enabled devices Source:

  73. WebRTC Spec devided

  74. Abbreviation bingo

  75. It’s new world to most web people

  76. • SDP - Session Description Protocol - Format for describing

    streaming media initialization parameters • STUN - Session Traversal Utilities for NAT - Enables announcing your public IP addrreess during the negotiation phase of a session • TURN - Traversal Using Relays around NAT - Relays all media via a TURN server that is visible to all parties in a session • ICE - Interactive Connectivity Establishment - Decide the best solution connect (direct, STUN or TURN) Core protocols
  77. Extended network stack Source:

  78. WebRTC: Audio and video engines Source:

  79. Data Channels Source:

  80. Data Channels Source: • Peer-to-peer assisted file delivery (CDN)

    • FIle transfer services • Chat/email/encrypted P2P communication • Future P2P protocols
  81. Perspective: Reach Source: 2019 6.0 Billion+ WebRTC-enabled devices

  82. Example: Gotomeeting

  83. Browser support ORTC 1.0

  84. WebRTC in WebKit

  85. Apple moves

  86. Alliance for Open Media Source:

  87. Alliance for Open Media “An open-source project that will develop

    next- generation media formats, codecs and technologies in the public interest. The Alliance’s founding members are Amazon, Cisco, Google, Intel Corporation, Microsoft, Mozilla and Netflix.”
  88. Perspective: Devices

  89. Perspective: IoT + M2M

  90. Perspective: WebTorrent

  91. Perspective: P2P & Hybrid CDN’s Source:

  92. Perspective: Distributed internet

  93. Future: Object RTC

  94. Service Worker + WebRTC Idea

  95. Microsoft Edge

  96. History Source:

  97. Complexity Source:

  98. Evergreen change Source:

  99. Going evergreen Source:

  100. Planning in the open

  101. Other platforms?

  102. <break />

  103. Physical Web

  104. None
  105. Service Worker + Physical Web? Idea

  106. Coming to Chrome?

  107. The headless web

  108. What is the web with no browser UI?

  109. Chrome Custom Tabs

  110. Example: Pinterest Android

  111. Safari View Controller

  112. What is the web with no app UI?

  113. App + Service Worker + Push = ?

  114. None
  115. Progressive Web Apps

  116. Escaping the browser

  117. None
  118. Progressive Web Apps • Responsive: to fit any form factor

    • Connectivity independent: Progressively-enhanced with Service Workers to let them work offline • App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions • Fresh: Transparently always up-to-date thanks to the Service Worker update process • Safe: Served via TLS (a Service Worker requirement) to prevent snooping • Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications • Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store • Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
  119. Flipboard

  120. Flipboard

  121. The web in native world

  122. Web advantage

  123. Web advantage

  124. Future challenges

  125. 1) The rise of new neta platforms

  126. The web is a meta platform

  127. Source:

  128. Source:

  129. Source:

  130. Accelerated Mobile Pages Project

  131. Accelerated Mobile Pages Project


  133. is a massive Trojan horse for Facebook “ “ Paul

    Kinlan, Google
  134. • Abstract HTML Markup and Styling away from the developer

    for building UI’s so that you can render native components using JS as the runtime. • A Platform that run’s everywhere. • Optimized to run natively on the platform where the user is. • If you are Facebook, you now have an app platform without app stores. Facebook React as a Trojan Horse Paul Kinlan, Google
  135. 2) Browser distribution

  136. Browser choice

  137. Mobile Safari and iOS = ?

  138. None
  139. iOS’s lack of browser-choice

  140. 3) Our tooling

  141. Our broken web workflow

  142. Tools hasn’t followed along Authoring tools !== Debugging tools

  143. Tools hasn’t followed along

  144. None
  145. Too many build tools You can’t open index.html anymore

  146. 4) Adaptable UI across platforms

  147. Adaptable UI across platforms <body> <navBar> <button>Home</button> </navBar> <main> <search

    /> <listView data=”artists”/> </main> </body>
  148. Adaptable UI across platforms

  149. Mapped to platform styles Source:

  150. Mapped to platform styles Source:

  151. Mapped to platform styles Source:

  152. React Native?

  153. React Native

  154. These issues must be solved

  155. Discussion

  156. What are your challenges with the web?