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 Suspense. Want to look back? We talked about it in-depth in February.
The Evolution of JavaScript
With the release of ECMAScript 2015 (or ES6) in June 2015, the JavaScript language entered its golden age. After delivering a lot of the long awaited features, like classes or modules, regular yearly updates followed up with other important additions, like async/await or rest/spread operators.
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!
We also went through the latest JS trends in the annual State of JavaScript survey in February. Watch out for the upcoming one in 2023!
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.
We spoke about Vite and Turbopack in our January and November articles respectively.
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 lazy and 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.
Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq, Instagram or LinkedIn, we’d love to read your feedback!