frontend development of the (current) future
TRANSCRIPT
Frontend development of the
(current) futureFilip Bruun Bech-Larsen, @filipbech
@IMPACTdigitaldk
Filip
#weAreHiring #Denmark
https://developers.google.com/experts/people/filip-bruun-bech-larsen
https://www.facebook.com/groups/ngAarhus/
Frontend development of the
(current) future
So what is this talk really about?
Progressive Web Apps
IOT
Physical Web
Payment and auth
https
http/2
Offline
Layout/styles/grid
Web APKs
EcmaScriptWeb-assembly
WebComponents
WebVRNotifications
Background sync
Web vs Native
Lets look at the pro’sNative• Better Performance
• Hardware access
• Offline support
• Re-engangement w. Push
Web• Only one platform
• No gate-keepers
• Fast/easy deploy/update
• the link…
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 long
er nat
ive on
lyLets look at the pro’s
The web now has an answer for this
Progressive Web Apps
Reliable, fast and engaging
https://developers.google.com/web/progressive-web-apps/
not-a-framework™think of it more as a philosophy…
Performance
https://developers.google.com/web/fundamentals/performance/rail
PRPLfor structuring and serving your web-app
Push critical resources
Render initial route
Pre-cache remaining routes
Lazy-load the resthttps://developers.google.com/web/fundamentals/performance/prpl-pattern/
Hardware Access
Hardware Access
geolocation
Web-bluetooth
Generic sensor API
WebGL
orientation + motionWebAudio
Camera(+shape-detection)
Full-screen
VR
Offline and re-engagement
ServiceWorker
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
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
How do I use it• Register with a scope
• Listen and intercept events
• network-events
• push
• sync
Show me some code for goodness
sake
use sw-toolbox.js for caching
installableadd to homescreen
PWAs are even better on Android
with real APKs
https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen
progressivesnake.com
source: https://github.com/filipbech/progressivesnake
must be served over https
development can work on localhost
https://letsencrypt.org/
HTTP/2
• Binary
• Multiplex (parallelism)
• Header compression
• Server push
https://http2.github.io/
EcmaScriptEcmaScript is the standard, JavaScript is the
language
ES6 (2015)• Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators
going on…
2017:async / awaitObject.valuesObject.entries
2016:Array.prototype.includes
Exponential operator
PaymentRequest
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 impressionshttps://developers.google.com/web/updates/2016/07/payment-request
Authcredential management API
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
stylecustom properties
gridhoudini
Custom propertieslike scss variables but at runtime!
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Grida long missed friend is arriving in css…
http://gridbyexample.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://www.youtube.com/playlist?list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR
Houdinijavascript access to the underlying magic
Internet of Thingsand that Physical web thing
https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web
The physical webEddystone beacons
https://google.github.io/physical-web/
WebComponents (v1)
native components - ‘cause everything is a component
<mini-basket></mini-basket>
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
works with hardware
or in browser with polyfill
* still very experimental. No real browser support
WebAssemblybinary execution in the browser for performance
and portability
https://developer.mozilla.org/en-US/docs/WebAssembly
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
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/
So the platform itself is really cool
but what else is hot now…
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)
The web is powerful itself
- embrace it
@filipbech@IMPACTdigitaldk
I’ll tweet a link to the slides in a minuteThank you