ProData Consult: Web Trends

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

October 2015

Transcript

1. Web Trends ProData Consult, October 2015 Kenneth Auchenberg
2. Hej!
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
16. Devices has changed
17. Source: https://blog.liip.ch/archive/2013/04/30/some-facts-about-responsive-web-design.html
18. It’s about mobile
20. 742.5 million (2013) European population Source: https://en.wikipedia.org/wiki/Europe
21. Click here Chinese internet users
22. Architecture has changed Source: https://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates
23. Architecture has changed Source: https://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates
24. Browsers has changed
25. Mobile browsers has changed too Source: http://www.sitepoint.com/browser-trends-october-2015-sustained-safari-slips/?utm_source=html5weekly&utm_medium=email
26. Mobile browsers has changed too 34.38% 13.32% 16.78% 13.59% 16.82% 3.12% Others 1.99% Source: http://www.sitepoint.com/browser-trends-october-2015-sustained-safari-slips/?utm_source=html5weekly&utm_medium=email
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: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
42. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
43. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
44. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
45. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
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 @jaffathecake
51. Push Notifications
52. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
53. Product Hunt
54. Facebook Source: www.theverge.com/2015/9/15/9328915/chrome-facebook-push-notifications-android
55. New API services: Roost
56. Coming to Firefox too
57. App Manifest
58. Source: http://www.w3.org/TR/appmanifest/
59. Source: http://www.w3.org/TR/appmanifest/
60. “JSON-based manifest that provides developers with a centralized place to put metadata associated with a web application.” Source: http://www.w3.org/TR/appmanifest/
61. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
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
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: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
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: http://chimera.labs.oreilly.com/books/1230000000545/ch18.html#_real_time_network_transports
78. WebRTC: Audio and video engines Source: http://chimera.labs.oreilly.com/books/1230000000545/ch18.html#_audio_and_video_engines
79. Data Channels Source: http://chimera.labs.oreilly.com/books/1230000000545/ch18.html#_real_time_network_transports
80. Data Channels Source: http://chimera.labs.oreilly.com/books/1230000000545/ch18.html#_real_time_network_transports • Peer-to-peer assisted file delivery (CDN) • FIle transfer services • Chat/email/encrypted P2P communication • Future P2P protocols
81. Perspective: Reach Source: http://disruptivewireless.blogspot.co.uk/p/blog-page_30.html 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: http://aomedia.org/
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: https://greta.io/
92. Perspective: Distributed internet
93. Future: Object RTC
94. Service Worker + WebRTC Idea
95. Microsoft Edge
96. History Source: https://docs.com/david-rousset/4526/microsoft-edge-a-break-from-the-past
97. Complexity Source: https://docs.com/david-rousset/4526/microsoft-edge-a-break-from-the-past
98. Evergreen change Source: https://docs.com/david-rousset/4526/microsoft-edge-a-break-from-the-past
99. Going evergreen Source: https://docs.com/david-rousset/4526/microsoft-edge-a-break-from-the-past
100. Planning in the open
101. Other platforms?
102. <break />
103. Physical Web
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 = ?
115. Progressive Web Apps
116. Escaping the browser
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: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
128. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
129. Source: https://paul.kinlan.me/future-of-web-on-mobile-coldfront-conf/
130. Accelerated Mobile Pages Project
131. Accelerated Mobile Pages Project
132. https://ampproject.org
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 = ?
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
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: http://www.developer-tech.com/news/2014/jun/26/googles-material-design-pays-homage-microsofts-flat-cross-platform-modern-ui/
150. Mapped to platform styles Source: http://www.cultofmac.com/216792/youre-going-to-want-to-get-these-gorgeous-wallpapers-for-your-apple-devices-gallery/
151. Mapped to platform styles Source: https://blogs.windows.com/windowsexperience/2015/01/21/the-next-generation-of-windows-windows-10/
152. React Native?
153. React Native
154. These issues must be solved
155. Discussion
156. What are your challenges with the web?