What’s New in Front-End Frameworks: React, Angular, and Vue.js
Front-end frameworks form a critical part of the web landscape, which is extremely dynamic and constantly evolving to meet new user expectations and demands. For this reason, popular front-end frameworks, like React, Angular, and Vue receive constant updates to keep up with these changes. As a developer, keeping up with these updates directly contributes to your ability to build better and more efficient front-end applications.
Source: Medium
Since these frameworks receive updates frequently, staying up to date with the latest ones can be challenging. This post is here to help. It will cover what’s new in the most popular front-end frameworks, React, Angular, and Vue, and how these changes will affect how developers build front-end apps. But first, why are these frameworks constantly updated?
Why React, Angular, and Vue are constantly being updated
As the primary front-end programming language, JavaScript has numerous libraries and frameworks created to help simplify and streamline the development of dynamic UIs for web apps. They range from simple libraries to complex frameworks. React, Angular, and Vue are the most popular and widely used front-end frameworks.
A 2023 Stack Overflow survey [1] revealed the following popularity numbers for each of these frameworks:
- 58% for React.
- 46% for Angular.
- 38% for Vue.
The popularity of front-end frameworks | Source: Stack Overflow
These frameworks are the most popular and are constantly updated for the following reasons.
- To keep up with advancements in front-end development
There is a slight disconnect between designers and developers because design technologies are rapidly advancing [2]. These updates introduce new features that help to bridge this void.
- To address existing security vulnerabilities
Being the most popular frameworks means React, Angular, and Vue are the most targeted. Hackers are always looking for vulnerabilities they can exploit and potentially attack apps built with these frameworks/libraries.
Constant updates help to address these vulnerabilities to minimize entry points and promote the security of these tools.
- To improve performance and efficiency
Updates often introduce bug fixes, performance enhancements, and code optimizations to ensure that applications built with the framework run smoothly and efficiently.
One of the main reasons these frameworks get regular updates is to enhance the developer experience. New tools and functionalities are added to make their work easier and more efficient.
While frequent updates are beneficial, they pose challenges for developers who need to keep up with them and update how they work accordingly. That said, here is what’s new in React, Angular, and Vue, and what it means for developers using these frameworks.
What’s new in React?
Although React is, by far, the most popular JavaScript front-end library, it saw a steady decline (a 2% drop) in usage in 2022. This stems from dissatisfaction from the React developer community for the React team taking too long to release a new version [3].
React Questions on Stack Overflow | Source: Stack Overflow
But, news on a new React version, React 19, has finally arrived. So here’s what the React team has been working on to bring in a new version of React [4].
React Compiler
The React team is working on preparing the React Compiler for its first open-source release. React tends to re-render too much when the state changes. Up to now the solution for this problem has been manual memoization using React’s APIs to configure how much React re-renders.
The compiler will work to automatically re-render the right parts of the user interface when the state changes, taking the work of manual memoization out of developers’ hands.
Actions
Actions form a part of React’s solution for sending data from the client to the server. With Actions, developers can pass a function to DOM elements, for instance, forms.
<form action={search}> |
In addition, this feature works with:
- useFormStatusand useFormState hooks – to access the current status and response of forms.
- useOptimistic- for managing optimistic state updates.
New features in React Canary
As a way to enable developers to access new features when they’re being finalized the following features are available in React Canaries: Server Components, new Resource Loading APIs, built-in support for rendering metadata anywhere in the React tree, etc.
What’s new in Angular?
A new version of Angular, Angular 17, was released on November 8, 2023. It is a depiction of Angular’s renaissance initiative to become a more modern, leaner, and developer-friendly framework. It features a set of both technical and non-technical improvements to make it a lot easier for developers to build with.
Non-technical improvements in Angular 17
Angular’s improvements start with a new website, angular.dev (just like React’s react.dev), with a slick new look and Playground that supports the latest version. This will be the new home of Angular’s documentation.
Technical improvements in Angular 17
Here are some of the technical updates coming in Angular 17.
New control flow features
@if, @for, @switch are the new control flow features replacing *ngIf, *ngFor, and *ngSwitch respectively. This is a new block template syntax that gives developers powerful features with simple, declarative APIs. This new control flow syntax allows built-in control flow, which has better type checking and is easier to write.
Deferred rendering
Angular’s new deferred rendering syntax makes it easy for developers to lazily load sections in just a single line of code.
@defer (on viewport) { |
Angular will first load a placeholder and then replace it with the component once the component finishes loading. Apart from on viewport, it has several other triggers like on idle, on immediate, on timer, and so on.
Improvements to server-side rendering and generation
Hydration is no longer in the developer preview. This feature allows Angular developers to create apps that load faster and feel more responsive. In addition, Angular has a new server-side rendering setup which you can include in your app when you use the ng new command.
Angular + Vite: A New Build System
Angular is switching from Webpack to Vite. This new version now uses Vite with Esbuild as its build engine. Vite builds much faster than Webpack, and this will reduce waiting times and improve developer productivity.
From these updates, Angular 17 is focused on delivering a more efficient and developer-friendly experience for building modern web apps.
What’s new in Vue.js?
Vue.js is a relatively new framework compared to React and Angular. It is only its third version, which was released in September 2020. Since then the Vue team has had subsequent releases of different versions of Vue 3, the latest one being Vue 3.4 (December 2023) [5]. So, here is what Vue 3.4 has in store for Vue.js developers.
A new, faster Template Parser
The template parser has been rewritten from the ground up. It ditches regular expressions and look-ahead searches for a state-machine tokenizer. This makes the parser twice as fast as the previous one.
A more efficient Reactivity System
Vue has refactored the current reactivity system to improve re-compute efficiency. The system can only be triggered when an actual compute value changes. This can potentially improve app performance.
API Enhancements
Stabilized defineModel
The defineModel API, which was shipped in version 3.3 as an experimental feature, is now stable in 3.4. Developers can now use it to simplify the implementation of components that support the v-model.
Same-Name shorthand binding with v-bind
A new shorthand syntax is available for binding props with the same name as the component property.
Source: Vue.js blog
Vue.js 3.4 focuses on internal improvements for better performance, a refined API and a smoother development experience. While not a major feature release, it provides solid upgrades for developers working with Vue.js 3.