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

Web VR

https://webvr.info/

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