Originally posted on http://www.apixio.com/technical-post/notes-from-the-2016-chrome-dev-summit/

Two weeks ago I got to attend the Chrome Dev Summit, an annual two-day conference

hosted by Google where they announced latest developments relevant to the web

technology. Here are my full notes from this conference. Since there was so

much information presented, I decided to organize it by subject, instead of

chronological order of talks presented.

You can watch all of the recorded talks on their YouTube Channel.

Statistics and Charts

Over 2 Billion Chrome Browsers worldwide across desktop and mobile

53% of users say they will leave a site if it’s not loaded in 3 seconds or less

Mobile Stats 19 seconds – average mobile page load time 77% of mobile sites take 10+ seconds to load 214 server requests per mobile web page

Housing.com reports user acquisition costs – $3.75 mobile install vs $0.07 Progressive Web App

The mobile web is no longer a subset of the web. It is the web. @samccone #ChromeDevSummit pic.twitter.com/i6LjPYKxHE — Sam Richard (@Snugug) November 11, 2016

Progressive Web App

When I attended Chrome Dev Summit for the first time in 2014, my key complain

was “this is great, but all of the talks are about the mobile web.” This year,

Google pushed to get rid of this mentality, by calling everything (mobile and

desktop) a Progressive Web App.

Progressive Web App is a newish term, that according to Mozilla Developer

Network (MDN) means:

Discoverable

Network Independent (Even offline)

Responsive

Installable

Works for every browser

Safe

Linkable

Re-engageable

Progressive Web Apps as a term is new but the concept has been around for a very long time. Look at HTA #chromedevsummit @patrickkettner — Abraham Williams (@abraham) November 12, 2016

Progressive Web Apps takeaways

Progressive Web App != Single Page Application

Progressive Web Apps = Smaller user acquisition funnel and faster updates (no need to wait for the App Store)

Older technology can be leveraged to provide Progressive Web App experience on all platforms today. If you are interested in supporting various platforms (including Mobile Safari) I highly recommend watching a talk by Patrick Kettner, Edge PM, Microsoft – The “Progressive” in Progressive Web Apps

Tech

Service Workers

Service Workers (not to be confused with Web Workers) are a big deal. MDN

defines Service Workers as follows:

Service workers essentially act as proxy servers that sit between web

applications, and the browser and network (when available). They are intended

to (among other things) enable the creation of effective offline experiences,

intercepting network requests and taking appropriate action based on whether

the network is available and updated assets reside on the server. They will

also allow access to push notifications and background sync APIs.

I first learned of Service Workers when I attended Chrome Dev Summit in 2014.

At the time the support was limited to the latest Chrome. Things have improved

since then, with Chrome, Firefox and Opera having a full support, and Edge

actively working to add support.

Safari is the only browser without indication of planning to support Service

Worker, with only Mobile Safari being a big deal, since Desktop users have

other options.

"Hundreds of millions of pages are loaded from ServiceWorker per day in Chrome" #ChromeDevSummit — Eric Lawrence (@ericlaw) November 11, 2016

Service Worker takeaways

Service Worker Precipices

Offline Google Analytics Library – Pushes Events after user gets back online

Good library to get started with Service Workers – sw-precache

Live coding session adding Service Worker to a page

Web Assembly

Latest Web Assembly info and step by step guide can be found at

Interesting demo of how Web Assembly can be used today behind a flag (towards the middle of this talk) – Advanced JS performance with V8 and Web Assembly

Web Assembly is on by default in early 2017

HTTPS

Sites with input fields (password, credit card etc) and no HTTPs are going to get big “Not Secure” warning on 01/2017

HTTPs usage report – it’s growing

Thanks Let’s Encrypt

Service Workers, Push and other APIs are ONLY available over HTTPs

Full HTTPs Talk and Slides

ES6+

V8 has Great coverage – Chrome and Node.js 7

Async/Await available behind –harmony-async-await in Node.js 7 and Canary

Web Manifest

MDN defines Web Manifest as follows:

The web app manifest provides information about an application (such as name,

author, icon, and description) in a text file. The purpose of the manifest is

to install web applications to the homescreen of a device, providing users

with quicker access and a richer experience.

Web Manifest is a must have for any installable (add to home screen etc)

Progressive Web App.

Polymer

Accelerated Mobile Pages (AMP)

Announced today: AMP can now prewarm caches for onward journeys in all browsers (including Safari!!!) #ChromeDevSummit — Malte Ubl (@cramforce) November 11, 2016

Can help speeding up the initial Progressive Web App load, until Service Worker cache kicks in

Allows for a proper AMP to PWA hand off

Full Talk – From AMP to PWA – the best of both worlds

Push Notifications

Over 500,000 Domains using Push API

With Service Worker can push notification, long after a browser tab is closed

Local Storage

Use it as local cache to get a huge performance win

Full talk dedicated to the subject, with some Browser specific numbers – The State of Storage

Preload

You can use <link rel=”preload” (Chrome only) to ask Chrome to pre-fetch some data

Credentials API

Proposal to let browser maintain Users being Authenticated with various sites

Full talk

Payments API

The Payment Request API gets me so hyped. Imagine what it could do for subscription content! https://t.co/LsoyVKeUXh #ChromeDevSummit pic.twitter.com/RwY4IyscYM — Rachel🦄Nabors (@rachelnabors) November 10, 2016

Proposal to let browser store payment information and simplify payment process

Full Talk

Facial Recognition API

It’s coming

Canvas Capture API

canvas.captureStream available in Firefox now

Firebase

Firebase hosting supports HTTP2 out of the box

Houdini

New proposal to simplify CSS?

Slides

Tools

Chrome Dev Tools

Full talk – Debugging The Web

Can now debug Node.js code in Dev Tools

Highlighting unused CSS

Multiple break points in the same line (i.e. Promise chain)

Intelligent multi-line entry in Console (line Node console) no more need for Shift+Enter

Better call stack

Lighthous

Lighthouse analyzes web apps and web pages, collecting modern performance

metrics and insights on developer best practices.

Cool tool to analyze your website’s performance. Check it out:



Optimization

Takeaways from #ChromeDevSummit: Virtually every speaker has mentioned this and "send less JavaScript." pic.twitter.com/jRo6g8h62h — Eric Lawrence (@ericlaw) November 11, 2016

Loading your JavaScript bundle over a 2G connection pic.twitter.com/6luaY8lFFX — Changelog (@changelog) November 11, 2016

SHIP LESS JAVASCRIPT

Server Side Rendering still outperforms most highly optimized JavaScript Apps

still outperforms most highly optimized JavaScript Apps TypeScript + Closure Compiler provide type safe minification. a.something()becomes a.b()

Only 10% of apps use code splitting

Majority of Web Apps use WebPack

WebPack supports Code Splitting

RAIL Model Response Animation Idle Load

RPRL Pattern Push critical resources Render initial route Pre-cache remaining routes Lazy-load remaining routes on demand

Preact is blessed as only other (in addition to Polymer) performant enough framework to build Progressive Web Apps

Browser Support

Search for bugs across all major browsers

Star bugs you care about to move the web forward

If you use it, browser will support it!

Apple

On #ChromeDevSummit there are people from Microsoft, Firefox, Opera… but no Apple. Do @Apple remember Job's words: Write amazing Web apps? pic.twitter.com/YqLJgRV1dd — Valentyn Shybanov (@olostan) November 12, 2016

Google, Mozilla, Opera, Samsung, Microsoft came to the Browser Vendor panel, Apple decline to participate

To be fair an Engineer from Apple was present at the Summit and made himself available

Microsoft

Progressive Web Apps will get automatically ingested into Windows App Store

Progressive Web Apps are top priority for MicroSoft for the next year

Edge Dev team hired some great people like @auchenberg and @rachelnabors

FireFox

Pretty much on board with everything that Google is proposing

Brave

At #chromedevsummit but not on Browser vendor panel — @Brave is too small, apparently, even though they just asked about ads & ad blocking. — BrendanEich (@BrendanEich) November 12, 2016

Brendan Eich was pissed that he wasn’t invited to participate in the Browser Vendor panel 🙂

Devices

Serious #perfmatters talk from @slightlylate #ChromeDevSummit

Key reason mobile phones aren't as fast as computers is heat 🔥 — Nicolás Bevacqua (@nzgb) November 10, 2016

GREAT Talk on Mobile Web and the challenges that we are facing – Progressive Performance

The $700 iPhone in your pocket is NOT what next billion of people to come online will be using

Placing crappy mobile phone on an ice pack improves performance by 15%

The reason mobile phones can’t keep up is heat (seriously watch that talk)

Current state of Mobile Web is not good. We must put in the work to make it work for the next billion of users

Examples of Progressive Web Apps

Lyft implemented a Web only version of their app, no download required. Think about it. Android Chrome Only –

NASA’s was re-implemented to be a Progressive Web App

From the The “Progressive” in Progressive Web Apps talk – good example of Progressive Web App that supports wide range of devices, including Mobile Safari

Other examples included Flipcart

Housing.com

Weather Channel

Mic

Cnet

Alibaba

Conclusion

I really enjoyed Chrome Dev Summit, even though it was a long two days.

It seems that Google is hyper aware of the current web trends. Modern web is

not ready for the mobile revolution and Google is very interested in changing

that status quo.

Even if your current business needs are not affected by the developing mobile

market, try to keep two things in mind.

Business needs can change, sometimes really fast There are a number of benefits that Progressive Web Apps could provide for businesses that are not targeting the Mobile web at all (Caching, Push Notifications etc)

I think the Web will win if we all work together.

P.S. We are hiring