The state of the union

Web development post I/O 2016

Filip Bruun Bech-Larsen@filipbech

This talk• 40-45 minutes of trends and bleeding edge stuff

• Questions as we go and at the end

• I will tweet a link to the slides afterwards (@filipbech)

• Topics• Web vs. Native• New Language features in JavaScript• Frameworks • Styles • What else is hot?

Filip

Web vs native• Performance

• Hardware

• Offline

• Re-engangement

• just one target-platform

• no gate-keepers

• easy to deploy and update

• the link…

Lets solve the problems

• Performance => RAIL

• Hardware => APIs

• Offline => ServiceWorker

• Re-engangement => Push events + notifications

Progressive web apps

• RAIL

• Responsive design

• Secure

• ServiceWorker

Performance

• Response (100ms)

• Animation (5-10ms) (transform+opacity & will-change)

• Idle (50ms)

• Load (1s)

Service worker• Lives in the background after you close the

tab

• For network think of it as a proxy (=>offline)

• Sync

• Push (and notification clicks)

lets see some code…

use sw-toolbox.js for caching

Web vs native

The web is catching up, and even though native will always be ahead, we have a valid

alternative with PWAs.

The biggest drawback now is Apple support of ServiceWorker.Tell Apple we want it: tcook@apple.com

Modern javascript• Backwards compatibility is the power of the

web. but also the horror (we can’t just bump the major version and introduce breaking changes)

• For years that meant nothing happened

• The standard has started evolving again…

New language features

• Class

• Fat arrow

• Destructuring

• Default parameters

• Rest+spread

• Symbols

• Generators

lets see some more code…

Now for a demo

http://localhost/

Lots of cool new ES6use today - transpile for compatibility

and maybe…

• Async functions (await)

• Decorators

• Observables…

Two popular patterns has emerged

• Immutable

• Observable

Frameworks

Release candidateAngular Universal

#useThePlatformApp Toolbox

Frameworks

What about style• The platform is catching up with pre-

processors

• Variables (custom properties)

• New layout opportunities• Flexbox• Multicolumn• Grid

• Houdini…

Houdini

Exposing low-level styling to the javascript engine

Talk from Google IOhoudini-samples

The Extensible Web Manifesto

ServiceWorker, Houdini, etc.

What else is hot• Beacons that broadcast a url

• Web-bluetooth

• Instantly loading pages (AMP, Facebook instant articles)

• requestPayment api

phew…

How do we survive?• Take a chill-pill

• Embrace the extensible web using frameworks/tools

• Use new features in dev, and compile for compatibility

• Use resources to stay up to date• Newsletters• Blogs• Twitter• Conferences• Meetups

ResourcesNewsletters• http://www.oreilly.com/webops-perf/newsletter.html• http://javascriptweekly.com/• http://esnextnews.us12.list-manage.com/subscribe?

u=d3a2c4d93441c84c0a1e6e808&id=705caf4dc7• https://www.smashingmagazine.com/the-smashing-newsletter/• http://html5weekly.com/• http://css-weekly.com/• http://www.ng-newsletter.com/• http://5thingsangular.github.io/

Podcasts• Javascript jabber• Javascript Air• The Web ahead• The web platform podcast• Shop talk• Adventures in Angular• Angular Air

Blogs• https://developers.google.com/web/updates/• https://developer.mozilla.org/en-US/• https://www.smashingmagazine.com/• http://blog.chromium.org/• https://www.christianheilmann.com/• https://addyosmani.com/blog/• https://www.igvita.com/archives/• https://toddmotto.com/• https://jakearchibald.com/• http://labs.ft.com/articles/• https://sarasoueidan.com/articles/• https://remysharp.com/• http://www.bennadel.com/• https://www.nczonline.net/• http://v8project.blogspot.dk/• https://blog.angularjs.org/

Twitter• https://twitter.com/toddmotto• https://twitter.com/SaraSoueidan• https://twitter.com/kentcdodds• https://twitter.com/theefer• https://twitter.com/stopsatgreen• https://twitter.com/Paul_Kinlan• https://twitter.com/aerotwist• https://twitter.com/paul_irish• https://twitter.com/jaffathecake• https://twitter.com/mafintosh• https://twitter.com/brucel• https://twitter.com/ChromiumDev• https://twitter.com/davidwalshblog• https://twitter.com/briantford

Thanks

• @filipbech

• filipbech.github.io