Frontend JavaScript News Brief (Q3 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

CascadiaJS on Nov 3-Nov 4

CascadiaJS is a conference for web developers that was started in the Pacific Northwest. The conference will take place both online and in a few locations (Seattle, Portland, Vancouver BC). Topics will vary from JavaScript to Web Assembly to hacking hardware to building healthy engineering teams.

• Sept 23: Preliminary schedule published.
• Sept 10: The Top-10 reasons you should attend CascadiaJS 2021.

React Advanced Conference 2021 on Oct 22 & 25

The React ecosystem and community have grown drastically in the past years, and so did the complexity of web and JavaScript app development. This conference taking place in London (or remote) provides the opportunity to connect with the global network of field experts and explore the framework.

• The schedule is now available.

Next.js Conf 2021 on Oct 26

The 2nd Next.js Global Community Conference is being held online to celebrate the fifth anniversary of the popular React framework.

• Call for proposals.

International JavaScript Conference New York on Sept 27-30

The International JavaScript Conference is a Full Stack conference that brings international experts together in one place to share insights on the present and future JavaScript.

Security

• Aug 16: Versions of Next.js between 10.0.0 and 11.0.0 contain a cross-site scripting vulnerability which was finally patched in Next.js 11.1.1.
• Aug: Next.js contained a vulnerability that could allow for phishing attacks by redirecting to an attacker's domain from a trusted domain. The issue has been patched in release 11.1.0.

Projects

Vue.js

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

• Aug 5: This release includes many significant new features and performance improvements, and contains no breaking changes.
• Sept 21: petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue.

Ember

Ember.js is an opinionated, full-featured and batteries-included JavaScript framework for building modern web applications.

• Sept 7: Ember 3.28 was released marking the end of the project's 3.x series. The start of the Ember 4.0 beta cycle for all sub-projects was also announced. To ensure a smooth upgrade path going into the 4.x series, 3.28 has been declared an LTS (Long Term Support) candidate.
• Jul 14: The Ember developers discuss what's coming in Ember 4.0. Following the process set in previous major versions, Ember 4.0's beta introduces no new features Version 4.0 beta was also released. Instead, it removes support for deprecated public APIs in Ember 3.x.

TypeScript

TypeScript is a programming language developed and maintained by Microsoft that adds optional static typing to the JavaScript language.

• Aug 26: TypeScript 4.4 was released bringing with it a host of new features such as control flow analysis of aliased conditions and discriminants, symbol and template string pattern index signatures, static blocks in classes, defaulting to unknown in catch variables, and more!
• Aug 24: TypeScript has a new homepage. The core team explain their thought process for the redesign in this article.

SolidJS

Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM.

• Jun 29: Solid’s creator is demonstrates how Solid addresses React’s shortcomings while offering Svelte-like simplicity.
• Aug 9: Solid v1.1 was released.

Next.js

Next.js is a React framework for developing JavaScript applications. It enables several extra features, including server-side rendering and generating static websites.

• Aug 11: Next.js 11.1 is released with ES Modules support, new Rust-based tooling, improved build performance, and more.

Trending Topics

Next.js (10)

Next.js was on the lips of many frontend web developers this quarter with many discussing why they chose to migrate to the framework, or why they stopped using it, while others wrote about how to use the framework more effectively.

• How To Migrate From jQuery To Next.js

  • Facundo Giuliani
  • This article discusses different approaches and strategies for migrating a web application that uses jQuery framework to Next.js.

• Next.js Is The Best React Framework

  • Harry Wolff
  • This video discusses several aspects of Next.js including what is provides out of the box, the developer experience, routing, and other features.

• Migrating Notion's marketing site to Next.js

  • Cory Etzkorn
  • This article discusses Notion's decision to migrate their client-rendered SPA to a client-rendered approach powered by Next.js. They discuss some of the problems that was faced on the old site, why they chose Next.js, and what the migration process was like.

• Moving Away From Next.js

  • Luis Neves
  • This author shares a story of how his team moved away from Next.js 11 months ago, and why they haven't looked back.

• Global vs. Local Styling In Next.js

  • Alexander Dubovoy
  • Next.js has strong opinions about how to organize JavaScript but not CSS. In this article, the author explores how we can develop patterns that encourage best CSS practices without deviating from the framework’s logic.

• State Management In Next.js

  • Átila Fassina
  • Managing state in a Next.js application can get tricky very quickly. This looks at some patterns to help avoid complexity in common scenarios and avoid “provider hell.”

Next Generation JavaScript Features (5)

There is always some discussion around what's coming in the future versions of ECMAScript and this quarter is no different. In fact, some are starting to accuse JavaScript of having too many features and slowly being turned into Java.

• ES2022 feature: class static initialization blocks

  • Dr. Axel Rauschmayer
  • The ECMAScript proposal on Class static initialization blocks is at stage 4 and scheduled to be included in ECMAScript 2022. This article provides an introduction to this feature, and also considers whether JavaScript is becoming more like Java or not. Discussion on Hacker News.

• Pipe Operator (|>) for JavaScript

  • TC39
  • One of the top answers to the State of JS 2020 survey question "What do you feel is currently missing from JavaScript?" was a pipe operator. This proposal (currently ins stage 2 of 4) advocates the inclusion of this feature in the language and explains why it is needed.

• Temporal: getting started with JavaScript’s new date time API

  • Dr. Axel Rauschmayer
  • JavaScript’s current date time API is infamously difficult to use. The ECMAScript proposal "Temporal" is a new and better date time API and currently at stage 3. This blog post gives you a feeling for how Temporal works, and helps you get started with using it. Discussion on Hacker News.

Structuring front-end applications & components (5)

A long list of "How to structure frontend apps" articles have been written in the past, but it remains a perennially interesting topic as there really is no one way.

• How to Structure a Large Scale Vue.js Application

  • Daniel Kelly
  • This article proposes a way of structuring your Vue.js project in a way that will avoid code duplication, improve stability, and help it remain maintainable and extendable the more it grows.

• How to Structure and Organize a React Application

  • Tania Rascia
  • This article describes what the author considers to be an intuitive and scalable system for large-scale production React applications.

• Guideline from the 70's on how to split your React components

  • João Forja
  • This article presents a guideline to validate ideas on splitting a React component to increase code reuse and reduce maintenance costs. The ideas discussed comes from the paper "Designing Software for Ease of Extension and Contraction" written in 1979 by David Parna.

• Bulletproof React

  • Alan Alickovic
  • This project is an attempt to present a way of creating React applications using the best tools in the ecosystem with a good project structure that scales very well. It is based on the experience of working with many different codebases.

JavaScript Bundling (4)

• Small Bundles, Fast Pages: What To Do With Too Much JavaScript

  • Ben Schwarz
  • Shipping less JavaScript is one way to improve the performance of a web application! Bundle size matters and this post touches on a few strategies to monitor, visualize and shrink it to manageable levels.

• Bundling non-JavaScript resources

  • Ingvar Stepanyan
  • This article discusses how one can import and bundle various types of assets from JavaScript in a way that works with both browsers and bundlers.

• Modern web apps without JavaScript bundling or transpiling

  • David Heinemeier Hansson
  • The original creator of the popular Ruby on Rails framework explains where he sees the future of JavaScript in Rails-based applications. It involves using import maps and not needing bundlers like Webpacker – instead apps will just pull in the ES modules needed.

Standout Content

• How To Build Resilient JavaScript UIs

  • Callum Hart
  • This article explores how graceful degradation, defensive coding, observability, and a healthy attitude towards failures puts you in a better position as a JavaScript developer.

• What's new in React 18?

  • Yagmur Cetin Tas
  • This article provides a general roundup of what's coming up in the next (not yet released) major version of React.

• How do Chrome extensions impact browser performance?

  • Matt Zeunert
  • This report investigates how 1000 of the most popular Chrome extensions impact browser performance and end-user experience. Discussion on Hacker News.