Frontend Trends

The world of software is constantly changing and evolving; in no particular domain is that more true than the world of front-end development, which in particular has seen a huge evolution in the past five to fifteen years. Way back in 2010 we were using Backbone and KnockoutJS, 9 years ago Facebook introduced React to the world and 8 years ago Webpack became the go to tool for bundling Frontend applications on the web.

In this article we’ll take a look at some of the trends we might see over 2022 and beyond, and highlight some upcoming tools and libraries that might just be worth your attention if you’re looking to keep up to speed on the latest and greatest.

As Frontend applications become more ambitious and more complex, inevitably the time required for a bundler like Webpack to finish bundling the application grows too. The maintainers of these tools work hard to keep the performance snappy but it’s a tricky challenge. Others have experimented with building tools that aren’t written in JavaScript and have characteristics that lend themselves to efficient bundling. One such language is Rust and that’s the language of choice for esbuild, which is a new bundler focused on performance and improving the standard for frontend build tools. It’s also the approach taken by Rome, an upcoming one-stop tool for building JavaScript apps that packs a bundler, linter, formatted and more into one tool. Their focus on performance led them to rebuild entirely in Rust.

It’s a great time to be a frontend engineer; there is so much work in this area and it’s only going to benefit us as we build applications and our users as these tools get better at building smaller, more efficient applications and help with patterns like code-splitting that can improve your application’s performance.

These tools are also making getting up and running with a new project even easier. Vite is my current tool of choice, and via one simple command you get a Frontend boilerplate setup (with the option to add TypeScript/React/Svelte and more) with a live reloading server (that’s impressively speedy) all setup. Pair it with the up-and-coming Vitest to enable easy unit testing of your project, and that’s a great setup. It’s one I’ve used on any side projects because it severely reduces the friction in getting started and hacking on something.

Every year there is a new release of ECMAScript, which sets out the specification for what ultimately becomes JavaScript in browsers. There have been numerous features added over the past few years, and 2022 continues to be no exception. There were also many additions in 2021 that are worth being aware of.

Personally I’m very excited for the at method on arrays, which will let us get values at indexes, but also support negative indexes to access values from the end of an array:

[‘a’, ‘b’, ‘c’].at(0) // a, same as using [0] [‘a’, ‘b’, ‘c’].at(-1) // c

One of the best features of ECMAScript 2021 is the [`replaceAll` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll) which makes it much easier to replace all instances of strings within strings::

‘Foo’.replaceAll(‘o’, ‘a’); // Faa

And I’m a big fan of [using underscores as separators in numbers](https://v8.dev/features/numeric-separators) to make the size of the number clearer:

// These values are the same, but the _ helps figure out the order of magnitude easily 100000 100_000

If you want to keep up to speed, [Dr. Axel Rauschmayer’s blog](https://2ality.com/) is a great source of information, and you can always see the [ist of proposed JavaScript features on this GitHub repository](https://github.com/tc39/proposals). Remember the stage is important: a proposal at stage 0 or 1 is at the very early stages, whereas a proposal at stage 3 is much more likely to be approved. Only once approvals reach stage 4 will they be officially added to the language.

TypeScript continues to be at the forefront of many people’s minds as we move into 2022. A lot of people are investing heavily in migrating their codebase to TypeScript, and more and more 3rd party libraries that you can install from npm come with great TypeScript support out of the box. Additionally, editor support for TypeScript is universally available and works superbly, so there’s never been a better time to make the move to TypeScript.

If you’re considering learning TypeScript in 2022, we’ve got a whole blog post dedicated to it. TypeScript’s ability to check your code and highlight issues will increase your final product’s robustness, but also your ability to change and refactor your code, which is a powerful productivity boost and can lead to much cleaner codebases.

When libraries like React, Angular and more recently, Vue, burst onto the scene, they pushed the idea of components onto Frontend development; your application can be built out of a series of small components that can come together like Lego bricks to create your overall application.

One of the reasons these libraries gained usage was because they offered something that wasn’t available natively in JavaScript, which has now been rectified with custom elements. These have taken a while to gain adoption but we’re starting to see more and more people use the component system built into the browser. Libraries like Lit are useful wrappers around custom elements that may make you feel more at home.

Other component libraries are also starting to support custom elements; Svelte enables you to compile your code as web components, and React now experimentally supports using custom elements).

If you’re working on a new application, I hope you’ll consider trying web components. Being able to work with components without requiring a large library to be added to your application is a great benefit (did you know Wordle uses custom elements?) and although they don’t provide every feature that you might get from React, they are still a great foundation to build on top of.

In the past few months we’ve also seen the introduction of Remix, an all encompassing framework for building web applications. What makes Remix interesting is firstly its creators: Ryan Florence and Michael Jackson, who have plenty of React experience and maintain the very popular React Router library. Remix takes a different approach to your typical frontend framework because its goal is to create applications that can work without JavaScript that can then be progressively enhanced with JavaScript to provide a better experience.

This, of course, is the way we historically built websites before the waves of Frontend frameworks took many away from that approach. It’s very exciting to see a new framework that tries to reinstate this approach because ultimately if we can build sites that work without JavaScript they will be more robust and more people will be able to make use of them. Even if you don’t end up using Remix on your next project, I encourage you to explore ways to improve the robustness and accessibility of your application in 2022 and beyond.

I’ve been a huge fan of Svelte for a number of years, and first tried it out more seriously in 2020 when building a side project. I compared it to React, and surprisingly to me I found that I personally enjoyed using Svelte more. You may disagree, and that’s fine - my goal wasn’t to declare Svelte as the best framework of all time! - but since then Svelte has continued to grow and at Svelte Summit 2020 Rich Harris announced SvelteKit. SvelteKit is a fully fledged framework on top of Svelte for building web applications. It too tackles the concerns of rendering without JavaScript and supports server side rendering along with the ability to pre-render an application into a suite of static files.

Having had a lot of fun and been very productive writing Svelte I can say that should I need to build a production ready, accessible and robust application, SvelteKit would be high on my list.

I subscribe to a few weekly newsletters such as JavaScript Weekly that provide a digestible round-up of what’s new in the community and handily a week goes by where Deno isn’t featured. Deno was created by Ryan Dahl, the initial creator of Node, and aims to provide a runtime that fixes some of the mistakes made with Node’s design (these mistakes are by Ryan’s own admission, and his talk discussing them is well worth a watch).

Deno comes with a lot of features that most would agree they’d love to see in Node: out the box TypeScript support, full support for modern JavaScript including ES Modules (no more require(‘…’) here!), a built in code formatter and a better security model that means you must explicitly give Deno permission to perform certain actions, such as writing to the file system or making network requests.

If you’re used to writing Node applications, whether it be servers, command line tools or otherwise, Deno should be high on your list to explore. My experience using it thus far has been positive; it’s pretty close to Node so the barrier to entry is low, but the features it provides are very welcome and beneficial. Deno is not going anywhere, and I expect its popularity to grow substantially in 2022.

2022 is going to be yet another big year for JavaScript and more broadly frontend development. With tools like React continuing to mature, and new fronts of tooling being pushed by building using Rust and other languages, there's plenty of things to look forward to in the coming months, and beyond.