The document discusses the future of the web, emphasizing progressive web apps (PWAs) and comparing them to native applications regarding performance, hardware access, and offline support. It highlights key technologies such as service workers, web components, WebAssembly, and various APIs that enhance web development. Additionally, it addresses trends like payment and authentication management, as well as the integration of the Internet of Things (IoT) into web applications.

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

2. @filipbech

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