Frontend JavaScript News Brief (Q2 2021)

Honeybadger's quarterly briefings keep you up to date on the most important developments in your programming communities. We curate the news so you can spend more time focusing on what's really important.

• Events: Conferences and meetups. Upcoming and recently completed.
• Security: Recent vulnerability reports
• Projects: News about major community projects
• Trending Topics: Summaries of the big topics everyone's talking about
• Standout Content: Content that didn't fit in other sections, but that was too cool to leave out.

Events

JSCAMP Virtual on 15-16 July 2021

An International two-day conference all about JavaScript topics including WebAssembly, React, TypeScript, debugging, 2021 ECMAScript features and upcoming proposals.

• Location: Barcelona, Spain and Virtual
• Speakers
• Schedule

Web Directions Global Scope on July 23, 2021 & July 30, 2021

GlobalScope aims to focus specifically on JavaScript the language. It's aimed at anyone who works with JavaScript ranging from front end and node developers, to library and framework developers.

• Location: Virtual.
• Speakers
• Schedule

Render-Atlanta (RenderATL) 2021 on September 13, 2021 - September 15, 2021

RenderATL is the first major React conference in the Southern United States. It's conceived by a team of passionate React engineers who're looking to help drive more culture, inclusion, and, accessibility into the React ecosystem.

• Location: Atlanta, USA.
• Speakers

Web Directions Code on September 17, 2021 & September 24, 2021

A conference on Progressive Web Apps and the Web Platform. It focuses on the practice of developing PWAs, relevant browser APIs, as well as patterns and best practices for delivering sophisticated web applications.

• Location: Virtual.

Security

• April 23: React Draft Wysiwyg before 1.14.6 allows a javascript URI in a Link Target of the link decorator in decorators/Link/index.js when a draft is shared across users, leading to XSS.

Projects

Angular

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

• May 18: The Angular team announced Angular DevTools. It's a Chrome DevTools extension that you can use to inspect the structure of your applications, and profile their performance.
• May 13: Angular v12 was released. While the new version isn’t a revolution, it’s a strong step towards the full transition to Ivy, Angular’s next generation compilation and rendering pipeline. The previous compilation and rendering pipeline called View Engine is now deprecated.
• April 27: The Angular team is deprecating support for Internet Explorer 11 in Angular v12, and plans to remove support for this browser in Angular v13 (late 2021).

Vue.js

Vue.js is a JavaScript framework for building user interfaces and single-page applications.

• April 02: The Vue.js team released a plan to Drop IE11 support for Vue 3. Discussion on Hacker News and Reddit.
• June 07: Vue.js 3.1.0 (Pluto) Released. The major highlight is a migration build intended to help with migrating existing Vue 2 apps to Vue 3.

Babel

Babel is a JavaScript compiler.

• May 10: Babel is used by millions, so why are we running out of money? Discussion on Hacker News and Reddit
• April 29: v7.14.0 released with new class features enabled by default, TypeScript 4.3, async do expressions, and better CommonJS interoperability.

React

React is a JavaScript library for building user interfaces.

• June 08: The React team details its plan for React 18, including the planned features and release schedule. Discussion on Hacker News and Reddit here and here.

Trending Topics

CSS-IN-JS (8)

CSS-in-JS is a modern approach to writing application styles that taken a solid place in front-end tooling, and this trend should continue in the near future. In spite of its advantages, it remains a controversial technology, as many developers continue to ask if it’s worth adopting in their workflow.

• Real-world CSS vs. CSS-in-JS performance comparison

  • Tomas Pustelnik
  • The author compares the performance of Styled Components (a popular CSS-in-JS library) to conventional statically generated CSS stylesheets in a real world application through the Chrome DevTools, and Lighthouse. The results can help you decide which solution has the most reasonable trade-offs for your use case. Discussion on Hacker News, and Reddit.

• A Thorough Analysis of CSS-in-JS

  • Andrei Pfeiffer
  • This article doesn't debate if or why you should adopt a CSS-in-JS solution. It is aimed people who want to use this approach but are having hard time deciding which solution to choose. The author compares the standout features for 10 of the most popular libraries in this space to help readers make more informed decisions.

• Demystifying styled-components

  • Joshua Comeau
  • In this article, the author presents a great explanation of how the Styled Components library works. He reasons that learning how the tooling works on a deeper level helps to develop our intuition to figure out which types of composition make sense, and which don't. It also helps greatly when debugging because, we can trace the source of a problem more easily if we know exactly what the tool is doing.

Web performance (12)

In this quarter, discussion on front-end performance was prevalent in the community with most threads centering on Google's Core Web Vitals metrics.

• New browser APIs to detect JavaScript performance problems in production

  • Michael Shpilt
  • This article covers ways to measure the real-world performance of web applications using native browser APIs such as performance.now(), the Long Task API (with PerformanceObserver), the Event Timing API, and the JavaScript Self-Profiling API. Not all the APIs discussed in this article have been implemented in all browsers, but they can all be tested using the latest version of Google Chrome.

• An In-Depth Guide To Measuring Core Web Vitals

  • Barry Pollard
  • The Core Web Vitals are a set of three metrics designed to measure the “core” experience of whether a website feels fast or slow to the users, and Google has announced that from June 2021, these metrics will affect search rankings. This article discusses how Core Web Vitals are measured, how to determine if your fixes have had the desired effect, and how to monitor the results in the Google Search Console.

• Three Front-End Auditing Tools I Discovered Recently

  • Stefan Judis
  • This article describes three lesser known tools for spotting performance problems in web applications.

• Google no longer requires AMP, but the replacement might be worse

  • Scott Gilbertson
  • This article argues that although the shift to Core Web Vitals is a step in the right direction, it also means that Google alone determines what a 'great page experience' means, and its monopoly position is being used to force the rest of the web into doing what it wants. Discussion on Hacker News.

WebAssembly (10)

WebAssembly is still a relatively new technology, with the final draft specifications published by W3C in 2018. Devlopers are curious about this technology especially with regards to how it will affect web development, the current state of the ecosystem, and areas of application outside of web dev.

• The State of WebAssembly 2021

  • Colin Eberhardt
  • This blog post shares insights gained from the first ever State of WebAssembly Survey performed in June 2021. It presents data on the most frequently used and most desired WebAssembly languages, the areas where WebAssembly is expected to have a significant impact, and what needs the most attention in the near future to increase adoption.

• Is WebAssembly magic performance pixie dust?

  • Das Surma
  • WebAssembly, in the author's perception, is strongly associated with performance by a lot of people. But does this mean WebAssembly is always faster than JavaScript? The author, a web advocate at Google, performs several tests comparing the performance of JavaScript to WebAssembly binaries produced by AssemblyScript (as well as Rust, and C++) on V8, which yields some interesting results. Discussion on Hacker News and Reddit

• Making JavaScript run fast on WebAssembly

  • Lin Clark
  • In this article, the author establishes some use cases for running JavaScript in WebAssembly, why the current methods for doing so are slow, and what can be done about them. The techniques discussed in the article may also be applied to other dynamic languages such as Python, Ruby, or Lua to make them run in WebAssembly. Discussion on Hacker News.

• Using asynchronous web APIs from WebAssembly

  • Ingvar Stepanyan
  • The I/O APIs on the web are asynchronous, but they're synchronous in most system languages. When compiling code to WebAssembly, you need to bridge one kind of APIs to another—and this bridge is Asyncify. In this post, you'll learn when and how to use Asyncify, and how it works under the hood. Discussion on Hacker News.

• An Introduction to WebAssembly for JavaScript Developers

  • Pascal Pares
  • This paper is an introduction of the JavaScript WebAssembly interface. It presents how JavaScript code interacts with WebAssembly modules, it can be also of interest for those who mind to understand the implementation of wrappers such as the ones generated by emscripten.

Faster build tools (8)

The trend of writing JavaScript tools in Rust/Go, and moving away from established players in this space like webpack, Babel, et al continues.

• Comparing the New Generation of Build Tools

  • Hugh Haworth
  • This article discusses the value proposition of newer build tools such as Vite, Esbuild, Snowpack, and others, by comparing their use cases and common features to help readers make a decision on which to adopt for a project. Discussion on Hacker News and Reddit.

• Parcel 2 beta 3

  • Parcel Team
  • The Parcel team released beta 3 of Parcel, a webpack alternative. This release includes a ground up rewrite of their JavaScript compiler in Rust, which improves overall build performance by up to 10x. Discussion on Hacker News and Reddit here and here.

• Announcing Rome Tools, Inc.

  • Sebastian McKenzie
  • The creator of Babel is building a new tool called Rome which aims to consolidate tools like Babel, ESLint, webpack, Prettier, Jest and others, into a single CLI. They raised their first round of seed funding this quarter. Discussion on Hacker News and Reddit.

• Migrating from Parcel to Snowpack

  • Ben Frain
  • The author discusses his reasoning for switching to Snowpack from Parcel (v1), and the differences to be aware of before opting for one or the other.

• Why we switched from Webpack to Vite

  • Sergei Chestakov
  • This post discusses Replit's decision to switch from Webpack to Vite. The Hacker News discussion is probably more interesting than the article itself.

Standout Content

• How we use Web Components at GitHub

  • Kristján Oddsson
  • The GitHub team detailed how they're using Web Components in their front-end codebase in order to provide independent, isolated, and reusable pieces of code that allow their teams to deliver high fidelity UI quickly and efficiently while still keeping to their high standards of quality. Discussion on Hacker News.

• The State Of Web Workers In 2021

  • Das Surma
  • The web is single-threaded. This makes it increasingly hard to write smooth and responsive apps. Workers have a bad rep, but can be an important and useful tool in any web developer's toolbelt for these kinds of problems. This article will get you up to speed on Workers on the Web!

• Introducing WebContainers: Run Node.js natively in your browser

  • Eric Simons
  • StackBlitz's WebContainers allow you to create fullstack Node.js environments that boot in milliseconds and are immediately online & link shareable—in just one click. The environment loads with VS Code's powerful editing experience, a full terminal, npm and more. It also runs entirely inside the browser through WebAssembly although it is limited to Chromium browsers only for now. Discussion on Hacker News and Reddit.

• Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript

  • Priscila Oliveira and Mark Story
  • Sentry recently converted 100% of its front-end React codebase from JavaScript to TypeScript. This year-long effort spanned over a dozen members of the engineering team, 1,100 files, and 95,000 lines of code. In this blog post, they share their process, techniques, challenges, and ultimately, what they learned along this journey.

• The modern guide to React state patterns

  • Fredrik Strand Oseberg
  • At one stage, you could basically just say 'use Redux' but there are so many options now, and this guide flies through a few approaches to handle complex state in React.