The Apixio Engineering Blog

Notes from the 2016 Chrome Dev Summit

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

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

HTTPS

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: https://github.com/GoogleChrome/lighthouse

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

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.

P.S. We are hiring