Future of the Web
- 1. The future of the web Filip Bruun Bech-Larsen, @filipbech @IMPACTdigitaldk
- 2. @filipbech
- 7. The future of the web…
- 8. What is this really about?
- 9. Progressive Web Apps IOT Physical Web Payment and auth https http/2 Offline Layout/styles/grid Web APKs EcmaScript Web-assembly WebComponents WebVR Notifications Background sync
- 10. Web vs Native
- 11. Lets look at the pro’s Native • Better Performance • Hardware access • Offline support • Re-engangement w. Push Web • Only one platform • No gate-keepers • Fast/easy deploy/update • the link…
- 12. The web now has an answer for this
- 13. Progressive Web Apps Reliable, fast and engaging https://developers.google.com/web/progressive-web-apps/
- 14. Native • Better Performance • Hardware access • Offline support • Re-engangement w. Push Web • Only one platform • No gate-keepers • Fast/easy deploy/update • the link… No longer native only Lets look at the pro’s
- 15. not-a-framework™ think of it more as a philosophy…
- 16. Performance
- 18. PRPL for structuring and serving your web-app
- 19. Push critical resources Render initial route (SSR?) Pre-cache remaining routes Lazy-load the rest https://developers.google.com/web/fundamentals/performance/prpl-pattern/
- 20. Hardware Access
- 21. Hardware Access geolocation Web-bluetooth Generic sensor API WebGL orientation + motionWebAudio Camera (+shape-detection) Full-screen VR
- 24. So what is a ServiceWorker • its a javascript worker • one pr. host (shared) • lives beyond the session • gives you a persistent programmable cache • based on events and promises
- 25. How do I use it • Register with a scope • Listen and intercept events • network-events • push • sync
- 26. Show me some code already…
- 27. use sw-toolbox.js for caching
- 32. PWAs are even better on Android with “web-APK”s https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen
- 37. hnpwa.com like todoMVC for pwa's
- 38. must be served over https development can work on localhost https://letsencrypt.org/
- 40. HTTP/2 • Binary • Multiplex (parallelism) • Header compression • Server push https://http2.github.io/
- 41. EcmaScript EcmaScript is the standard, JavaScript is the language
- 42. ES6 (2015) • Class • Fat arrow • Destructuring • Default parameters • Rest+spread • Symbols
- 43. going on… 2017: async / await Object.values Object.entries 2016: Array.prototype.includes Exponential operator
- 45. PaymentRequest
- 47. PaymentRequest • Receive checkout info from the user • Possible PCI-need • Available in Chrome and Edge today (Firefox behind flag, positive feedback from Apple) • Similar integration in Safari with ApplePay • My first impressions https://developers.google.com/web/updates/2016/07/payment-request
- 53. Credential Manangement API • Store (and sync) credentials in the browser • Use the browsers account-chooser • automatic sign-in (no forever living cookies) https://developers.google.com/web/updates/2016/04/credential-management-api
- 57. WebComponents (v1) native components - ‘cause everything is a component <mini-basket></mini-basket>
- 58. 4 specs really • Custom elements • HTML templates • Shadow DOM • HTML imports (but forget about this one… :-/) https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/fundamentals/getting-started/primers/customelements
- 61. https://youtube.googleblog.com/2017/05/a-sneak-peek-at-youtubes-new-look-and.html
- 64. • Not just multiline strings… • Enables a new kind of templating system • check out lit-html - intro (and lit-element) Tagged Template Literals
- 65. What about style custom properties grid houdini
- 66. Custom properties like sass variables but at runtime, and with tree-inheritance https://developer.mozilla.org/en-US/docs/Web/CSS/--*
- 67. Use custom-properties to theme your custom-element
- 68. Grid a long missed friend is arriving in css…
- 71. Houdini javascript access to the underlying magic
- 72. its basically worklets, typed CSSOM and custom display Sam Richard: https://www.youtube.com/watch?v=r-Hc3hN9e6I Surma: https://www.youtube.com/watch?v=sE3ttkP15f8
- 74. this api has changed a little - its actually attributeStyleMap now
- 77. Internet of Things and that Physical web thing
- 82. The physical web Eddystone beacons https://google.github.io/physical-web/
- 88. WebAssembly binary execution in the browser for performance and portability https://developer.mozilla.org/en-US/docs/WebAssembly
- 89. binary (small download) + fast (real memory access) think Photoshop, Final Cut Pro, 3D studio max, (games obviously)… in the browser http://webassembly.org/demo/Tanks/ https://www.youtube.com/watch?v=PvZdTZ1Nl5o
- 90. don’t think of it as a new language it’s (first and foremost) a compiler target (from C, C++, …), that will give you speed hint: you can use for just parts of a PWA https://hacks.mozilla.org/2017/03/why-webassembly-is-faster-than-asm-js/
- 91. The platform is powerful - embrace it #useThePlatform
- 92. @filipbech@IMPACTdigitaldk I’ll tweet a link to the slides in a minute Thank you