Frontend Updates: 2022 Highlights and Some Trends to Watch in 2023
Time has flown by. Take a look at what this year brought us in the frontend space with some highlights from one year of frontend updates and let us bring some predictions to the table!
Highlights from 2022
React 18 and Concurrent Features
2022 has been the release year of React 18, the last major version bump since October 2020. It was an important milestone, because the React team has been researching and developing support for concurrency in React for years, and it’s a foundational update to React’s core rendering model.
React 18 brings some out-of-the-box improvements like automatic batching, new APIs like
startTransition, and streaming server-side rendering with support for
to look back? We talked about it
in-depth in February.
Although it’s in a pretty mature state right now, the language is still steadily evolving year by year. Some
of the highlights from ECMAScript 2022 are public, private and static class members, top-level await and
Object.hasOwn, but check
our July article for a comprehensive list!
The Evolution of CSS
If JS is mature but still evolving, CSS is doing so faster than ever. Along with HTML5, CSS3 was a great success, and although we often speak about it as a single specification, CSS level 3 divided the language into several separate documents called “modules”. These days, the latest CSS is simply referred to as CSS, with levels only present to differentiate features from earlier versions.
If CSS3 was a revolution, there is still another one in sight. More Viewport Units, Native Nesting, Container Queries… Take a look at our March and May articles for more information on the latest and upcoming features!
Web Standards and Browsers
Language evolution wouldn’t make sense if browsers weren’t able to keep up. Fortunately, standardization efforts have also been followed by the efforts of major browser vendors to comply with them. Nowadays, every major browser is an evergreen browser, which means that they automatically upgrade in the background and always run their last version.
We have witnessed a lot of new features in browsers through this year, and we wrote about many upcoming ones. In the annual Google I/O conference in May, we also learnt that browser teams are uniting efforts and meeting together to discuss features and priorities they intend to work on. Take a look back at Compat 2021 and Interop 2022 efforts!
New Development Paradigms
This was the year of advanced SSR and hydration techniques, like React Server Components and Selective Hydration, and new paradigms like the Islands Architecture. We explained the latter and went through some of the implementations in September.
We also started to see some discussion around CSS-In-JS, which has become hugely popular during the last two or three years, especially in React. In October, we went through the problems and benefits of CSS-in-JS, including the performance implications.
Trends to Follow in 2023
Consolidation of the New Generation Tools
Webpack is mature and stable, and is still the gold standard for frontend bundling, but can be desperately slow for large projects.
We saw Webpack alternatives like Vite mature and become a real option this year. We also saw Turbopack emerge, which is promising because it comes from the creator of Webpack and it claims to be many times faster than anything else, even when compared to the already blazing fast Vite.
Turbopack it’s still in alpha state, but in 2023, we expect the project to keep growing and reach a production-ready state. Other options like Vite will still continue consolidating as serious alternatives to Webpack.
Server Side Rendering & Page Speed Optimization
People expect fast experiences and rapidly give up on pages that take too much to load. Server Side Rendering makes modern Single Page Applications as fast and accessible as server rendered ones, while keeping an app-like experience after first page load.
We already highlighted some techniques like React Server Components and Selective Hydration. We will probably
see the adoption of this kind of pattern increase in the upcoming year, and in React we expect
Suspense to get even more popular too.
Progressive Web Applications
Progressive Web Applications will continue increasing in popularity in 2023. These provide a hybrid experience between traditional webs and platform specific apps, allowing the user to bookmark them as apps in their devices. They also provide some offline experience and support push notifications and background updates.
We can expect data fetching libraries (like React Query or SWR) or Service Workers to continue gaining traction, as they are crucial to provide performant and app-like dynamic experiences for installable web applications.