The document discusses advancements in frontend development, focusing on progressive web apps (PWAs) and their advantages over native applications, such as reliability and fast deployment. It covers various technologies including ES6, service workers, and WebAssembly, emphasizing their role in creating performant and engaging web applications. Additionally, it highlights trends like the growing use of types and data flow management in modern web development.

1. Frontend development
of the (current) future
Filip Bruun Bech-Larsen, @filipbech
@IMPACTdigitaldk

2. Filip

3. !

4. #weAreHiring #Denmark

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

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

8. Frontend development
of the (current) future

9. So what is this talk really
about?

10. 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

11. Web vs Native

12. 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…

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. 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

16. not-a-framework™
think of it more as a philosophy…

17. Performance

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

19. PRPL
for structuring and serving your web-app

20. Push critical resources
Render initial route (SSR?)
Pre-cache remaining routes
Lazy-load the rest
https://developers.google.com/web/fundamentals/performance/prpl-pattern/

21. Hardware Access

22. Hardware Access
geolocation
Web-bluetooth
Generic sensor API
WebGL
orientation + motionWebAudio
Camera
(+shape-detection)
Full-screen
VR

23. Offline and
re-engagement

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

25. 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

26. How do I use it
• Register with a scope
• Listen and intercept events
• network-events
• push
• sync

27. Show me some code
already…

28. use sw-toolbox.js for caching

32. installable
add to homescreen

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

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

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

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

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

39. HTTP/2
• Binary
• Multiplex (parallelism)
• Header compression
• Server push
https://http2.github.io/

40. EcmaScript
EcmaScript is the standard, JavaScript is the language

41. ES6 (2015)
• Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols

42. going on…
2017:
async / await
Object.values
Object.entries
2016:
Array.prototype.includes
Exponential operator

44. PaymentRequest

46. 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

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

51. Auth
credential management API

52. 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

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

56. WebComponents (v1)
native components - ‘cause everything is a component
<mini-basket></mini-basket>

57. 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

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

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

61. What about style
custom properties
grid
houdini

62. Custom properties
like scss variables but at runtime, and with tree-inheritance
https://developer.mozilla.org/en-US/docs/Web/CSS/--*

64. Grid
a long missed friend is arriving in css…

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

67. Houdini
javascript access to the underlying magic

72. Internet of Things
and that Physical web thing

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

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

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

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

83. works with hardware
or in browser with polyfill

85. come try cardboard after

86. WebAssembly
binary execution in the browser for performance and portability
https://developer.mozilla.org/en-US/docs/WebAssembly

87. 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

88. 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/

89. So the platform itself is
really cool
but what else is hot now…

90. 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)

91. The platform is powerful
- embrace it
#useThePlatform

92. @filipbech@IMPACTdigitaldk
I’ll tweet a link to the slides in a minute
Thank you