Soon after Angular, Facebook created React, which further inspired developer Evan You to create the Vue framework. Both React and Vue became popular as both provided better developer productivity and runtime performance by using Virtual DOM. We will talk about Virtual DOM in a while.
Many other frameworks like Ember, Knockout, Backbone, Aurelia, Polymer, and Ionic surfaced up in between, some of these are still thriving and surviving while others are nearing the end of life.
The amount of code you need to write reduces drastically when you use a framework that fits best to the project requirements. Lesser the code, lesser defects, and reduced overall time to release the app.
As of today, Svelte is the most loved framework and a preferred choice for creating reactive and performant user interfaces. Rich Harris created Svelte back in 2016 with an aim to provide better performance over existing frameworks like Angular, React, and Vue.
The governing philosophy of Svelte is to ship minimal code, avoid boilerplate, work directly on the real DOM, and minimize in-browser computations.
How does Svelte work?
Note that, Svelte doesn’t use DOM diffing algorithms or any other external libraries, standalone components include the necessary code to update the DOM elements in response to the state change events.
Key features/advantages of Svelte are as below-
- Option to switch to the server-side rendering instead of client-side manipulations.
Many high-profile web companies like Bloomberg, The New York Times, TeamSpeak, Reuters, Brave, and even Facebook have already included Svelte in their frontend stack.
React ecosystem as a whole provides necessary libraries and tools to build complex, dynamic, and scalable user interfaces. Many other modern frameworks like Svelte, Vue, and SolidJS have taken inspiration from React and inherited many features and design principles introduced first by React.
React has seen unprecedented growth in the last five years and still ranks on the top as the most used framework for frontend development. React framework is backed by Meta (formerly Facebook) and powers the user interface of both Facebook and Instagram.
Not long after its release as an open-source framework in 2013, React outshined already established Angular in the areas like speed development, runtime performance, ecosystem, features, and even the job charts.
How does React work?
To set the context: The user interface in the browser is represented by the DOM tree, and when the app state changes, the user interface is updated due to changes made to the DOM tree by the application code. However, making changes to the DOM on every state change is expensive and becomes inefficient when interfaces grow complex and dynamic.
Talking about React, the user interface (and hence the underlying DOM) of an app is made up of React components that render the UI as per the data passed to the components as props.
React creates a Virtual DOM in the cache, which is a copy of the browser DOM and also maintains the app state. As and when the state changes, React updates the virtual DOM using a mechanism called diffing and subsequently updates the real DOM using a mechanism called reconciliation.
It is important to note that the use of Virtual DOM in React resulted in better performance as compared to Angular and other frameworks that relied on server-side rendering and other techniques.
Key features/advantages of React-
- Backed by Facebook, keeps improving regularly to stay competitive with new frameworks.
- React code is declarative which makes it easy to read and debug.
- Supports unidirectional data flow (one-way data binding) with the use of Flux architecture.
- Huge ecosystem, relatively easy to learn, good documentation.
- Easy to test and debug in the browser.
To continue innovation and match modern frameworks, React has introduced new fiber architecture which works on the principle of incremental rendering and splits the rendering task over multiple frames. We will cover fiber architecture in a separate article.
You can also use React knowledge to build cross-platform apps for mobile, desktop, and web by using React Native. Popular hybrid app development frameworks like Ionic also support React out of the box.
Vue is a progressive web framework for building reactive, complex, and scalable user interfaces using declarative syntax. It was created by former Google engineer Evan You back in 2014 with the intent to enhance developer productivity and application performance.
As of today, it is used by freelancers, startups as well as large enterprises to create interactive web interfaces. Companies using Vue in their overall stack include names like Nintendo, Upwork, Behance, Gitlab, Apple, and Google.
Similar to React, Vue utilizes virtual DOM, uses composable UI components for views, and comes with a minimal core accompanied by separate libraries for state management, routing support, server-side rendering, unit testing, debugging, and much more.
Key features/advantages of Vue are as below-
- Vue brings rendering performance optimization out of the box, when the state changes, Vue selectively re-renders the components instead of re-rendering the entire components tree.
- Vue components can be created using simple HTML templates and keeping JSX optional. This makes it much easy for web developers to start working on Vue projects.
- CSS can be included directly in the component file using <style></style> tags, this limits CSS scope to the component itself.
One of the key reasons developers adapted to Vue quickly is its flexibility, you can use Vue incrementally in your existing projects rather than doing it all in Vue.
Find below some of the use cases served by Vue-
- Use it to enhance HTML markup without any build step
- Generate independent WebComponents that can be reused and embedded in existing apps
- Utilize it for Static Site Generation as well as for Server-side Rendering
- Create Electron-based desktop apps, hybrid mobile apps, or CLI tools
You can also use Vue knowledge to develop cross-platform mobile applications by using Weex as well as the Ionic framework. Similar to React Native, the Vue community came up with Vue Native but that is now deprecated.
NuxtJS is a modern high-level framework built on top of Vue and targets to improve developer productivity by offering sensible defaults for common use cases. Nuxt is more like a batteries-included framework and can be used to pull together a fully functional web application in a matter of hours.
With Nuxt, developers can focus on application logic rather than the overall construct of the application architecture. The core of the Nuxt framework includes the Vue framework and hence it works majorly the way Vue works.
Key advantages of Nuxt over Vue or other frameworks like React and Angular are as below-
- Preconfigured build with useful defaults, including SEO-friendly meta tags and sensible routes generation.
- Server Side rendering option is available out of the box.
- Option to utilize an inbuilt static site generator that works well with content distribution networks for enhanced app performance.
- Huge ecosystem of ready-to-use modules and third-party themes for both frontend as well as admin interfaces.
Nuxt gives you a head start for building Vue-based applications. It is used in many high profile and high traffic websites like Upwork, ecosia.org, unilever.com, and tiktok.com.
Also note that while most of the frameworks mentioned in this article are used for frontend development, Node acts as a backend server.
Key use cases served by Node.js are as below-
- To create web servers and app backends
- To develop and host microservices
- Realtime messaging, chatbots, and chatting apps
- Audio/video streaming services
- Backend scripting to automate repetitive tasks
Some of the companies using Node include the likes of Netflix, NASA, Trello, Uber, Twitter, Yahoo, eBay, Groupon, and Medium.
Node has a role to play in the fronted development as well, many frontend frameworks like Next, Nuxt, React Native, and SolidJs use server-side rendering to refresh the UI.
It is worth noting that Node is the market leader for years without little or no competition, some other competitive frameworks like Deno are seeing traction but the Node ecosystem is gigantic. We don’t see Node going off fashion anytime soon.
Angular is another open-source framework and provides capabilities to develop applications for multiple platforms including web, native mobile, desktop as well as hybrid apps. In Angular, user interfaces and interactivity is built using simple and declarative templates.
Angular was released in 2016 to overcome the shortcomings of AngularJS (also called Angular 1) and to match the features and capabilities of other frameworks like React and Vue.
While Angular 1 was slowly dumped by the developer community after the onset of React, the recent versions of Angular are highly optimized for initial application load time and instant rendering of the first view. Other modern features like declarative components, a new router model, code splitting, and server-side rendering (using Angular Universal) are helping angular gain back the trust of developers.
Furthermore, it may seem Angular is going down in popularity but it is a mighty framework and still, powers cutting edge applications like Gmail, UpWork, PayPal, Mixer, and the Forbes website, and the list is very long. I strongly believe that Angular will be back again among the top 3 frameworks by end of 2022.
Angular has a steep learning curve as compared to Vue, Svelte, React and even Vue, and for that reason, indie developers tend to shy away from Angular given all other options. On the other hand, Enterprises are heavily invested in Angular and can afford initial lead time for learning, and for that reason, still continuing with Angular.
Lit is a lightweight framework that provides features to create web components that work natively in any modern web browser. Web components technology enables developers to create independent, reusable, and encapsulated custom HTML tags that work natively on the web.
A few noteworthy features of LIT are as below-
- Lightweight with only 5KB at its core to keep short bundle size and faster load times.
- Provides fast rendering as it tracks the dynamic elements (using reactive properties) and selectively updates the UI as and when the state changes, it doesn’t rely on virtual DOM.
- Enables developers to build reactive and boilerplate-free web components using declarative templates.
- Option to keep style scoped within the component to avoid conflicts with any other external stylesheets.
- Future proof as it utilizes the web standard HTMLElement wrapped as LitElement.
The popularity of LIT can be gauged from the fact that organizations like IBM, Adobe, SAP, Microsoft, VMWare, and Cisco among many others are already using LIT in their frontend stack.
Ionic was released as an open-source framework by Max Lunch and Ben Sperry back in 2012. Ionic became highly successful because it empowered web developers with tools and techniques to build mobile and desktop apps with technologies they already knew.
I prefer to call Ionic a framework of frameworks as it allows developers to utilize React, Angular, and Vue to put together the frontend skeleton of the app. Ionic core focuses on building user interface/user interactions and allows easy integration with many backend technologies.
Ionic apps are built using Ionic-supplied components like lists, tabs, and cards with adaptive styling options. Adaptive styling automatically renders the UI as per the platform guidelines like Material Design for Android and Cupertino for iOS.
Ionic apps run in the embedded WebView which accesses the native device functionality using Capacitor and Cordova APIs. It is important to note that developers can render native controls and work with native APIs directly bypassing the web view, but that would mean losing the cross-platform benefits that the web view provides.
NextJs is a high-level framework built on top of React and offers features for speed development and runtime performance. Next gives you a head start by providing commonly used configurations and features out of the box.
Key features of Next are listed below-
- Code and bundle splitting algorithm to optimize download over the network
- File system based auto routes creation using an inbuilt router
- Inbuilt Server-side rendering and static site generation support
- Built-in SASS support and component-level styling
- API endpoints generation to aid server-side development
- And the list is quite long
Note that you can do all of the above by using React and other packages available in the React ecosystem as a whole, but that typically is time-consuming.
As of today, hundreds of websites are powered by Next.js. Some examples include the likes of Hulu, Netflix jobs portal, Github copilot, ATT.com, a home search portal named realtor, and many more.
Fine-grained reactivity is what makes SolidJS a good choice for creating reactive and performant user interfaces.
Like many other modern frameworks, Solid inherits key design principles from React and works in a similar way except for a few key architectural differences.
Talking about its similarities with React and other modern frameworks, Solid brings in features like Error boundaries, JSX support, context (works differently though), portals, progressive hydration, streaming Server-side rendering as well as concurrent rendering.
Solid skip virtual DOM and diffing algorithms altogether and works directly on the real DOM. Solid renders components only once and updates only the sections that depend on the state change.
Key features below-
- Works on updating Real DOM and ditches the Virtual DOM concept introduced by React
- Built with and supports Typescript coding.
SolidJs was created by Ryan Carniato and it first appeared back in 2018 as an open-source framework under an MIT license.
It depends on many factors, let us look at some of those –
What are you building?
Most successful frameworks do at least one thing better than all their competitors, so it is important to map your most important requirements with framework capabilities. As an example, if you want to build reusable WebComponents, then LIT will be a much better option than the mighty React or Vue.
Performance and reactivity
All frameworks offer reactivity, but the efforts required to create reactivity and UI performance with different frameworks vary. Svelte for example offers out-of-the-box features to create reactive, complex, and performant user interfaces. Having said that, all applications do not need to be reactive, if you are building a simple blog or a static website, a ready-made React or Angular template might be the way to go than building UI from scratch with something like SolidJS, LIT, or even Svelte.
It is important to look at the existing technology stack and skills available. If you are already running most of your applications on Angular, then upgrading your apps with recent Angular enhancements might be a better idea than replacing them altogether with something like Svelte. Another example, if you are using Python Django for full-stack applications, then including LIT components, or incrementally adding Vue components would be much easier than including Angular or React in the whole mix.
Ease of Learning
It is important to evaluate your learning capacity against the complexity of the framework. You might start off with React but realize mid-way that JSX and Redux are difficult to master. It is important to spend some time playing around with the framework and see if it is as per your capability and liking before finalizing it for your project.
Some frameworks are like bubbles, they create a buzz and die off quickly. It is important to keep track of overall ecosystem growth, corporate backing, and the support they get from the tech giants. If a framework is not getting continuous updates to match new age development needs, it is bound to go obsolete in the near future.
Angular 1 is a perfect example, it couldn’t match developer productivity and runtime performance of React and is deprecated now, though Google introduced an improved Angular 2, it is yet to make a solid come back. React on the other hand is seeing continuous architecture revisions, the recent shift of React to the Fabric architecture is a good example.
After Angular, React appeared to be the “this is it” framework, but then Vue brought in something better, then Svelte and the latest one to garner attention from the developer community goes by the name SolidJS.
Hope you liked the article, do share it with your friends and colleagues.