Tech TLDR;

  • Archive
  • Top Posts
  • GitHub
  • LinkedIn
  • Contact

Chrome Dev Summit 2016 Highlights

November 22, 2016 by admin

Table of Contents

  • Statistics and Charts
  • Progressive Web App
    • Progressive Web Apps takeaways
  • Tech
    • Service Workers
    • Service Worker takeaways
    • Web Assembly
    • HTTPS
    • ES6+
    • Web Manifest
    • Polymer
    • Accelerated Mobile Pages (AMP)
    • Push Notifications
    • Local Storage
    • Preload
    • Credentials API
    • Payments API
    • Facial Recognition API
    • Canvas Capture API
    • Firebase
    • Houdini
  • Tools
    • Chrome Dev Tools
    • Lighthous
  • Optimization
  • Browser Support
    • Apple
    • Microsoft
    • FireFox
    • Brave
  • Devices
  • Examples of Progressive Web Apps
  • Conclusion

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+

#chromedevsummit JS Languaje Features pic.twitter.com/CKu0uTM3VB

— Milton Yarleque (@myarleq) November 11, 2016

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

  • Web tool to auto generate Web Manifest file
  • CLI tool to help generate Web Manifest

Polymer

  • Blessed by numerous speakers as one of the few performant frameworks (in addition to preact) that can be used to create Progressive Web Apps
  • Polymer App Toolbox – Collection of components to build Progressive Web Apps
  • polydev – Polymer Chrome Dev tools extension
  • polyperf – Simple web page performance harness

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

Code splitting and preloading for the win @flipcart #ChromeDevSummit pic.twitter.com/niFuiqH4uy

— Alex Kras (@akras14) November 11, 2016

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

Filed Under: Business, Front End, JavaScript, Software Engineering

Copyright © 2023 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in