Chrome Dev Summit 2019 tl;dw
This year, I’ve attended the Chrome Dev Summit for the first time, sent by my company Wix to learn about new web concepts, mingle with Google and other companies developers and come back with my insights. The conference was well organized, speakers were awesome and I was motivated to try new concepts in my day-to-day work.
I summarized some of the topics for myself, just to have a good reference for the future, but since hard work was already done, why not share it with the rest of the world? :)
The summary will not be convincing as the actual videos and is my interpretation only, so I urge you to watch the content you’re interested in.
All videos are can be found on the official Youtube channel.
If you’re interested in UI:
HTML is not done
Video: https://developer.chrome.com/devsummit/sessions/html-isnt-done
tl;dw:
- A11y touch and visual refresh — Improve default form elements to Chromium (Both Chrome and Edge).
- Stability — allow richer visual changes to elements (color picker).
- Extending functionaliy (custom select items)
- New components like virtual scroll <display-locking/> and <toggle-switch/>
Introducing:
- Open UI: a new emerging resource for components knowledge to gather best practices https://open-ui.org/
- Check the new visual refresh — enable chrome://flags/#form-controls-refresh
Next-generation web styling
Video: https://developer.chrome.com/devsummit/sessions/next-generation-web-styling/
tl;dw:
- New awesome CSS properties. All examples are here: https://css-at-cds.netlify.com/
- New logical properties, for a better intl (LTR, RTL, Vertical RL)
height => block-size and width => inline-size
margin-right => margin-inline-start and margin-top => margin-block-start
Introducing:
- CSS Houdini. Add advanced custom properties and values API to CSS in a performant way using worklets.
In which we make loading disappear with <portal> and friends
tl;dw:
- Create a seamless experience moving between pages for multi-page applications (MPA). It’s like an iframe-like but acts as a first-class citizen when changing URLs.
- Bridges the gap to native. For example, a popup that takes full screen (product page), prefetching the page structure with periodic background-sync
Introducing:
- Web bundles — a new concept to bundle any resource from the web and share it with anyone. like zip for the web — https://web.dev/web-bundles/
- Periodic background sync — https://developers.google.com/web/updates/2019/08/periodic-background-sync
If you’re interested in client-side web frameworks:
Advancing the web framework ecosystem
Video: https://developer.chrome.com/devsummit/sessions/advancing-the-web-framework-ecosystem/
tl;dw:
- “Web frameworks” offers developing high-quality web applications with good defaults and opinionated tooling.
- Google collaborates with Next.js to enhance it, focusing on performance — split chunks, differential loading, drop polyfills for browser-specific bundles.
Introducing:
- @babel/preset-modules — https://github.com/babel/preset-modules — Use this in place of @babel/preset-env’s target.esmodules option for smaller bundle size and improved performance.
If you’re interested in performance:
Adaptive Loading — Improving the user-experience for millions on low-end devices
Video: https://developer.chrome.com/devsummit/sessions/adaptive-loading/
tl;dw:
- Not all devices and browsers are the same. Some are stronger than others, the network connection has a major effect.
Build your apps thinking about it — create them in a way adding features according to device and network capabilities (memory, network, CPU).
Introducing:
- React hooks library concept http://bit.ly/react-adaptive to assist in doing these logical checks:
Speed tooling evolutions: 2019 and beyond
tl;dw:
- New performance metrics to 2019 for your site benchmark. From FMP (First Meaningful Paint) and FCI (First CPU Idle) to LCP (Largest Contentful Paint), TBT (Total Blocking Time) and CLS (Cumulative Layout Shift).
- Using the “Google Search Console“ https://search.google.com/search-console to get the maximum from your reports.
- Stack Pack allows creating custom suggestions to users on how to improve their site (super important for Wix users! [WordPress already have theirs])
Introducing:
- Lighthouse CI. Run performance tests on every CI run with a dedicated server and dashboard for your results http://bit.ly/lhci
The main thread is overworked & underpaid
tl;dw:
- Move heavy calculations to WebWorker. It will free your main thread for UI only. We should aim to reduce the load from it in general to support it.
- It will not necessarily make your apps faster, but it will improve the overall experience, not sticking the main thread.
Introducing:
- Comlink is a small library abstracting API interaction with a worker http://npm.im/comlink
- Integrating web workers to your Redux application https://dassur.ma/things/react-redux-comlink/
If you’re interested in user authentication:
What’s new in sign-up and sign-in
Video: https://developer.chrome.com/devsummit/sessions/whats-new-in-sign-up-and-sign-in/
tl;dw:
- Improve the way to authenticate by integrating directly with SMS messages for OTPs. Next-generation auth will be based on WebAuthn, using 2FA with public-private keys, creating them with platform authenticators such as biometric and face sensors
Introducing:
- the new SMS Receiver API https://goo.gle/SMSReceiverAPI
If you’re interested in processes:
Intent to explain: demystifying the Blink shipping process
Video: https://developer.chrome.com/devsummit/sessions/intent-to-explain/
tl;dw:
- From w3c committee to shipping new features to users. Some will not be eventually shipped based on user feedback but that’s natural. The earlier devs/users are involved in the design, discussions, and implementation. An “intent” (email to the community) is a good way to share the plans.
- Listen to users
- Research the problem
- Design and Prototype
- Experiment and Iterate
- Decide if to ship or not
Introducing:
- Apply to Google’s origin trials as a beta tester: https://developers.chrome.com/origintrials/
TODO (Didn’t get to summarize…)
If you’re interested in bridging the gap to native apps
PWA and the installable web
Description
If you’re interested in Chrome and platform extensions
Description
If you’re interested in SEO
Description
- Video: https://developer.chrome.com/devsummit/sessions/how-to-make-your-content-shine-on-google-search/
If you’re interested in Security
Description
