The document discusses the state of front-end web development and progressive web apps. It outlines pros of native apps versus web apps, and how progressive web apps can offer reliable, fast experiences with features like offline support and push notifications through service workers. New web technologies are discussed like payment APIs, credential management, WebComponents, HTTP/2, JavaScript updates, WebVR, WebAssembly and using the web for IoT. Trends in types, code generation, data flow management and fully utilizing the web platform are also mentioned.

1. The state of the union
Filip Bruun Bech-Larsen, @filipbech
@IMPACTdigitaldk

2. Filip

3. #weAreHiring #Denmark

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

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

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

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
for goodness sake

27. use sw-toolbox.js for caching

31. installable
add to homescreen

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

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

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

46. Auth
credential management API

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

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

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

52. style
custom properties
grid
houdini

53. Custom properties
like scss variables but at runtime!
https://developer.mozilla.org/en-US/docs/Web/CSS/--*

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

57. http://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

58. https://www.youtube.com/playlist?list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR

59. Houdini
javascript access to the underlying magic

64. Internet of Things
and that Physical web thing

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

68. demo time…

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

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

75. works with hardware
or in browser with polyfill
* still very experimental. No real browser support

77. come try afterwards

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

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

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

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

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

83. The web is powerful
itself
- embrace it

84. what do you think?

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