Slides from talk at 2017 local-rock-stars

1. The future of the web
Filip Bruun Bech-Larsen, @filipbech
@IMPACTdigitaldk

2. Filip

3. #weAreHiring #Aarhus #Cph

5. https://developers.google.com/experts/people/filip-bruun-bech-larsen

6. https://www.facebook.com/groups/ngAarhus/

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

17. https://developers.google.com/web/fundamentals/performance/rail

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

22. Offline and
re-engagement

23. ServiceWorker
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

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

31. installable
add to homescreen

32. PWAs are even better
on Android
with “web-APK”s
https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen

33. https://developers.google.com/web/tools/lighthouse/

34. progressivesnake.com
source: https://github.com/filipbech/progressivesnake

35. progressivedice.com
source: https://github.com/filipbech/progressivedice

36. https://www.fidgetspin.xyz/

37. hnpwa.com
like todoMVC for pwa's

38. must be served
over https
development can work on localhost
https://letsencrypt.org/

39. Speaking of https
https://blog.chromium.org/2017/04/next-steps-toward-more-connection.html

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

44. Putting it together

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

51. https://filipbech.github.io/demos/payment.html
https://github.com/filipbech/filipbech.github.io/blob/master/demos/payment.html

52. Auth
credential management API

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

56. https://filipbech.github.io/demos/auth.html
https://github.com/filipbech/filipbech.github.io/blob/master/demos/auth.html

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

60. https://twitter.com/AJStacy06/status/857628546507968512

61. https://youtube.googleblog.com/2017/05/a-sneak-peek-at-youtubes-new-look-and.html

63. Tagged Template Literals

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…

70. http://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://www.youtube.com/playlist?
list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR

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

80. demo time…
https://github.com/filipbech/filipbech.github.io/blob/master/demos/bluetooth-LED.html
https://filipbech.github.io/demos/bluetooth-LED.html

81. https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web

82. The physical web
Eddystone beacons
https://google.github.io/physical-web/

86. Web VR
https://webvr.info/
https://aframe.io/examples/showcase/shopping/

87. Try out cardboard
http://vr.chromeexperiments.com/

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