2018.05.21 - Web performance made easy

Title: 2018.05.21 - Web performance made easy

Industry Conferences

FDCon2018 – The 3rd China Front‑End Developers Conference https://fdcon.topgeek.org/
The path to integrated front‑end experience development – looking forward to the presentation materials and articles.

In‑Depth Reading

Introducing Git protocol version 2 https://opensource.googleblog.com/2018/05/introducing-git-protocol-version-2.html
Git protocol version 2, a major update of Git’s wire protocol (how clones, fetches and pushes are communicated between clients and servers). This update removes one of the most inefficient parts of the Git protocol and fixes an extensibility bottleneck, unblocking the path to more wire‑protocol improvements in the future. The protocol version 2 spec can be found here. The main improvements are: server‑side filtering of references; easy extensibility for new features like ref‑in‑want and fetching and pushing symrefs; simplified client handling of the HTTP transport.

What if JavaScript wins? https://medium.com/@anildash/what-if-javascript-wins-84898e5341a
JavaScript is now part of the toolkit of most working developers. What if network effects push it into being the first‑ever truly dominant programming language?

Web performance made easy https://www.youtube.com/watch?v=Mv-l3-tJgGk
The web has made great progress in enabling fast experiences, but building a fast site today isn’t trivial. At Google, we analyze a lot of sites and have learned what makes them load quickly and run smoothly. In this talk, Ewa Gasperowicz and Addy Osmani show you how to find and fix the most common web‑performance bottlenecks to improve your UX by using tools like Lighthouse and DevTools, and discover the latest browser APIs (e.g., Service Workers, Async Images, Fetch Priorities) to get more control over your loading experience. Also included: Using Lighthouse To Improve Page Load Performance, First Input Delay: A New Web Interactivity Metric.

First Look: Angular Ivy – Angular's new rendering pipeline and view engine https://www.telerik.com/blogs/first-look-angular-ivy
We’ll take a look at what Ivy is, how it works, and how you can stay up to date on its progress. Just a caveat: Ivy is still in the early stages of active development, so this article is subject to change. Okay, let’s get to it!

Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku https://blog.heroku.com/a-rock-solid-modern-web-stack
Rails is an incredible framework, but modern web development has moved to the front‑end, meaning sometimes you don’t need all the bulk of the asset pipeline and the templating system. In Rails 5 you can now create an API‑only Rails app, meaning you can build your front‑end however you like—using Create React App. Also included: Create React App Parcel.

Debugging Modern Web Applications https://hacks.mozilla.org/2018/05/debugging-modern-web-applications/
Building and debugging modern JavaScript applications in Firefox DevTools just took a quantum leap forward. In collaboration with Logan Smyth, Tech Lead for Babel, we leveled up the debugger’s source‑map support to let you inspect the code that you actually wrote. Combined with the ongoing initiative to offer first‑class JS‑framework support across all our devtools, this will boost productivity for modern web‑app developers. Also included: What’s new in Chrome DevTools.

Page Transitions for Everyone https://css-tricks.com/page-transitions-for-everyone/
Animation matters. It can be used to improve the user experience. On the web, most of the effort used to improve the experience is in structure, visual design, or even site performance. There are some elements you can swipe around here and there, but that’s about it—a boring remnant of the era when the web was simply a collection of text pages later upgraded with a bit of sliding text.

A Strategy Guide To CSS Custom Properties https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
Custom properties have huge potential to change how we write and structure CSS and, to a lesser extent, how we use JavaScript to interact with UI components. I won’t focus on the syntax and how they work (for that I recommend you read “It’s Time To Start Using Custom Properties”). Instead, I want to take a deeper look at strategies for getting the most out of CSS Custom Properties.

Clean Node https://medium.com/the-node-js-collection/clean-node-1df635d176f7
This article is the first of a three‑part series discussing this exact topic and suggesting potential solutions. Each article will use a test‑first approach, either unit or end‑to‑end: this first piece sets a common ground—a quick‑and‑dirty version with end‑to‑end tests, discussing common mistakes, general opinions and misconceptions; the second article will refactor the “quick‑and‑dirty” version with unit tests and a layered architecture; the fourth article will refactor the code using Clean Architecture and unit tests. (Note: the series numbering appears to skip a number.)

The HTTP headers we don’t want https://www.fastly.com/blog/headers-we-dont-want
Let’s look at the unnecessary headers, see why we don’t need them, and discuss what we can do about it.

Building Services at Airbnb, Part 2 https://medium.com/airbnb-engineering/building-services-at-airbnb-part-2-142be1c5d506
The second in a series on scaling service development, this article looks at some of the key tooling that supports the new Services‑Oriented Architecture at Airbnb.

Performance Impact of Removing OOBGC https://githubengineering.com/removing-oobgc/
GitHub used an Out‑of‑Band Garbage Collector (OOBGC) in production. Since removing it, we decreased CPU time across our production machines by 10 %. Let’s talk about what an OOBGC is, when to use it, and when not to use it, then follow up with some statistics about the impact of removing it from GitHub’s stack.

Full‑Cycle Developers at Netflix — Operate What You Build https://medium.com/netflix-techblog/full-cycle-developers-at-netflix-a08c31f83249
Fast forward to 2018. Netflix has grown to 125 M global members enjoying 140 M+ hours of viewing per day. We’ve invested significantly in improving the development and operations story for our engineering teams. Along the way we’ve experimented with many approaches to building and operating our services. We’d like to share one approach, including its pros and cons, that is relatively common within Netflix. We hope that sharing our experiences inspires others to debate the alternatives and learn from our journey.

AI and Compute https://blog.openai.com/ai-and-compute/
Three factors drive the advance of AI: algorithmic innovation, data (which can be either supervised data or interactive environments), and the amount of compute available for training. Algorithmic innovation and data are difficult to track, but compute is unusually quantifiable. (content truncated)

---

Originally written by Ping Xia (平侠) and published in Chinese on Web技术周刊 (Web Tech Weekly). Translated and adapted for DriftSeas with permission.