Chrome Dev Summit 2016 Highlights

by

Table of Contents

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

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

Service Worker takeaways

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)

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

  • 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

  • SHIP LESS JAVASCRIPT
  • Server Side Rendering 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

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

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

Devices

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

  1. Business needs can change, sometimes really fast
  2. 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.