Frontend development of the (current) future
- 1. Frontend development of the (current) future Filip Bruun Bech-Larsen, @filipbech @IMPACTdigitaldk
- 2. Filip
- 7. Frontend development of the (current) future
- 8. So what is this talk 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. Native • Better Performance • Hardware access • Offline support • Re-engangement w. Push Web • Only one platform • No gate-keepers • Fast/easy deploy/update • the link… Lets look at the pro’s
- 13. The web now has an answer for this
- 14. Progressive Web Apps Reliable, fast and engaging https://developers.google.com/web/progressive-web-apps/
- 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 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 for goodness sake
- 27. use sw-toolbox.js for caching
- 32. PWAs are even better on Android with real APKs https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen
- 34. must be served over https development can work on localhost https://letsencrypt.org/
- 35. HTTP/2 • Binary • Multiplex (parallelism) • Header compression • Server push https://http2.github.io/
- 36. EcmaScript EcmaScript is the standard, JavaScript is the language
- 37. ES6 (2015) • Class • Fat arrow • Destructuring • Default parameters • Rest+spread • Symbols • Generators
- 38. going on… 2017: async / await Object.values Object.entries 2016: Array.prototype.includes Exponential operator
- 40. PaymentRequest
- 42. PaymentRequest • Receive checkout info from the user • Possible PCI-need • Available in Chrome Android today (Firefox, edge, chrome desktop behind flag) • Similar integration in Safari with ApplePay • My first impressions https://developers.google.com/web/updates/2016/07/payment-request
- 47. 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
- 51. Custom properties like scss variables but at runtime! https://developer.mozilla.org/en-US/docs/Web/CSS/--*
- 53. Grid a long missed friend is arriving in css…
- 57. Houdini javascript access to the underlying magic
- 62. Internet of Things and that Physical web thing
- 66. The physical web Eddystone beacons https://google.github.io/physical-web/
- 70. WebComponents (v1) native components - ‘cause everything is a component <mini-basket></mini-basket>
- 71. 4 specs really • Custom elements • HTML templates • Shadow DOM • HTML imports https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/fundamentals/getting-started/primers/customelements
- 73. works with hardware or in browser with polyfill * still very experimental. No real browser support
- 75. WebAssembly binary execution in the browser for performance and portability https://developer.mozilla.org/en-US/docs/WebAssembly
- 76. binary (small download) + fast (real memory access) think Photoshop, Final Cut Pro, 3D studio max, (games obciously)… in the browser http://webassembly.org/demo/Tanks/ https://www.youtube.com/watch?v=PvZdTZ1Nl5o
- 77. 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/
- 78. So the platform itself is really cool but what else is hot now…
- 79. Trends • Types (flow, typescript) • Code-generation • Do the heavy lifting at build-time (Angular AOT, Svelte) • Yarn replaces NPM (not the registry) • Managing dataflow (redux, immutability, observables)
- 80. The web is powerful itself - embrace it
- 81. @filipbech @IMPACTdigitaldk I’ll tweet a link to the slides in a minute Thank you