Angular vs React vs Vue vs Svelte [2020]

Angular, React, and Vue have reigned as the major contenders for the title of “the best JavaScript UI frontend framework” for quite a while. Which one the winner depends on who you ask, and what kind of application you want to build. Each one comes with its own unique set of features, use-cases, target audiences, and general philosophies of how frontend coding should be done.

Frontend development teams all over the world are using Angular, React, Vue, and Svelte (the new kid on the block). Some of your favorite and most well-known apps are made with these frameworks, like Netflix, Google, and GitLab.

There is a lot to consider regarding JS libraries and frameworks. But first thing’s first: what are we talking about when we say library and framework?

What is a JavaScript Library?

A library is a collection of pre-written ‘code snippets’ that perform commonly used JS functions. These snippets are like bricks that can be used to construct more complex programs.

They offer greater control and flexibility if you are willing to spend some more time putting your app together in the way you want.

What is a JavaScript Framework?

A JS framework is a full toolbox that can be used to create a website or an application. A framework is more like the pieces used to build a pre-fabricated building. It provides the skeleton that an entire web development project is built around.

The strength of a framework is that it offers a lot of efficiency and organization. You lose some control in exchange for resource efficiencies.

Angular vs React vs Vue vs Svelte

Each of these software is a powerful tool in their own right. React is a library. Angular and Vue are frameworks. Svelte is a compiler.

When it comes to sheer popularity, you can see from the below graph indicating downloads from GitHub since 2015 that React is by far the most downloaded.

Respondents to the Stackoverflow 2019 Survey seem to agree with this trend. But while the above graph shows that React greatly outstrips everything in terms of downloads, the survey results below indicate that Vue is actually not too far behind React in terms of popularity among frontend developers.

In terms of community support, the below numbers from GitHub tell a slightly different story. This is a snapshot from August 2020.

A Deeper Look at These Frameworks

Angular

Origins: Angular is developed by Google. It was first released in 2010, making it the oldest of this lot of frameworks. Formerly AngularJS, it underwent a substantial shift in 2016 with the release of Angular 2, and is known simply as Angular.

Category: Angular is a JavaScript framework based on TypeScript.

Angular is an end-to-end framework that offers all of the main components needed to build an enterprise-grade web app. It is better suited for larger projects.

Characteristics: Angular is a low code framework comparing to the other frontend technologies. The tradeoff is that Angular comes with an extremely fixed and complex structure, and require developers to code in a particular way, with less freedom and flexibility.

Angular features Model-View-Controller Architecture, or MVC architecture. It features a two-way data binding system, which ensures that model state changes automatically when any change in a UI element is made, and vice-versa. This helps decrease development time.

Angular CLI (Command Line Interface) is easy to install and use, newcomer-friendly, offers innovative testing tools, and simpler commands. This allows an enhanced development experience with one-line commands.
The best thing about Angular is that you can render the code into HTML & CSS and have the first view of the application on any other platform like NodeJS, .Net, PHP, etc.

Cross-platform: Angular is cross-platform. You can develop progressive web applications (PWA), which offer an app-like experience to the audience using modern web capabilities. You can also develop native and desktop apps.

Testing: Angular can be tested with Karma, Protractor, or Jasmine.

Ease of learning: However, Angular has a steep learning curve when compared to React. It demands familiarity with different concepts and languages like templates, pipes, dependency injection, RxJS, TypeScript, etc. And the framework is constantly developing, forcing developers to update themselves often.

React

Origins: React is developed by Facebook. It made its debut in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp).

It is based on JavaScript and JSX and is considered widely for developing reusable HTML elements for frontend development.

Category: React is a library. Being a library as opposed to a framework, it doesn’t give you everything that Angular does. React only offers a library for rendering content to the DOM and controlling it efficiently thereafter. Applications developed in React require additional libraries to be included.

It’s all about components and building UI with components. React does not include built-in form validation support, does not include a router (for rendering different components based on URL changes), and it does not ship its own HTTP client.

Community and support: For those features it lacks, you have to rely on the React community, which is well developed. Though it must be said that React’s community is a bit more fragmented than Vue’s and you often have to spend more time searching for solutions to common issues. Also React’s documentation pales in comparison with Vue’s.

Characteristics: When it comes to React, the development speed and productivity gets affected due to the involvement of third-party libraries. ReactJS developers have to determine the right architecture along with the tools. Angular and Vue allow you to build apps quicker.

However, React framework provides you with the freedom to choose the tools, libraries, and architecture for developing an app. It lets you build a highly-customized app using only the features and tech stack you require. But you’ll need to be able to spend some time on it, and have a sufficiently proficient ReactJS development team.

React uses one-way data binding in which the UI elements can be changed only after changing the model state. ReactJS developers cannot alter the UI elements without updating the corresponding model state, which is a disadvantage compared to Angular.

DOM: Another major difference over Angular is that React uses a Virtual DOM. Manipulating Real DOM is slow, so the React team came up with a solution of Virtual DOM which is similar to DOM Objects, but it lacks the ability to change anything on the screen. Every Virtual DOM Object is mapped with the Real DOM Objects, and instead of manipulating the Real DOM, the Virtual DOM gets changed.

Testing: Testing an app written in React calls for multiple tools for different elements, unlike Angular apps which can be tested in one tool.

Ease of learning: React has a faster learning curve than Angular. You can pick it up quickly if you are good with JavaScript.

Vue

Origins: Vue, also known as Vue.js, is the youngest member of the “big three” in this group. It was developed by ex-Google employee Evan You in 2014. Vue has seen substantial growth in popularity since 2017, comparable with its tech-firm backed cousins, React and Angular.

Category: Vue is a great framework for simple, performant applications, as well as for rapid prototyping. In comparison, Angular is the default framework for developing enterprise application clients and generally takes more time to develop applications with.

Vue is touted as a progressive framework. Depending on your needs, Vue scales between a lightweight library and a full-fledged framework.

In fact, Vue is a kind of in-between React and Angular. It’s not as “big” as Angular but it definitely includes more features than React does. Vue does give you built-in state management and it also ships with a built-in router. But it does not include form validation or HTTP client functionalities.

Characteristics: Some parts of Vue.js remind programmers of working with Angular. Templating, model binding, loops, conditionals, and event binding work in a similar way for both frameworks, so it would be easy for developers on both frameworks to switch between the two.

Vue doesn’t make using TypeScript mandatory, which Angular does. Detractors of TypeScript would perhaps opt for Vue.

Compared to Vue, Angular’s main drawback is its size, startup time, and memory allocation capacity. In applications where space and memory are both limited, Vue is a natural choice. However, Angular shines as the complexity of the application goes up. Angular is also great for SEO.

Vue is generally less opinionated than Angular, so there is no one way of writing code in Vue. Frontend developers can be more creative and flexible with the framework.

Vue is excellent for creating interactive multi-page apps. It allows you to quickly import the core library and inject Vue into the existing pages. You don’t even need to use components for simpler features.

Community and support: While the Vue community is certainly growing and has a ways to go before it catches up with React, Vue is hailed for its wonderful documentation as one of the best in the industry. It includes a detailed overview of the Vue ecosystem, unlike React. The documents are well-written, clear, accessible, and comprehensive.

DOM: Like React, Vue uses components and virtual DOM.

Testing: At present, Vue lacks any significant guidance on testing. But Evan You wrote in his 2017 preview that the team plans to work on this. They recommend using Karma.

Svelte

Origins: Svelte is a free and open-source framework written by Rich Harris, graphics editor on the investigative team at the New York Times. Its initial release was in 2016, making it the newest member of this group.

Category: Svelte.js is a Component Framework like React and Vue but with an important difference –Svelte is a compiler. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time.

From Svelte’s own website: “Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.”

Characteristics: Svelte’s templating syntax is quite similar to Vue’s. Both Svelte and Vue use HTML-based template syntax and have the concept of single-file components. So users of Vue will have less of a learning curve when transitioning between the two.

In terms of performance, Svelte is generally about 30% faster than Vue, according to Butter CMS.

Svelte files are generally the smallest of all of these frameworks.

Svelte borrows some ideas from React and Vue, but it brings its own approach for efficiency and performance.

With traditional frameworks, there is a tendency to extend the code and let JavaScript interpret all the framework’s functions. So even smaller applications can inflate into large scripts, which require more computing time and data to execute.

With Svelte, the developed app’s components are compiled into self-contained JavaScript modules. Programmers can check the stability and execution of their compiled program in a preview window at any time. With this approach, the final script becomes lean and fast.

Svelte enables you to create faster and more powerful apps than traditional frameworks due to the large reduction in data used.

DOM: React and Vue use a VirtualDOM. Most of the code gets converted by the browser into the ideal JS code. Svelte converts the code into ideal JS code at build time rather than doing it at run-time. Instead of using techniques like Virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Ease of learning: Svelte has a fast learning curve. Apart from a few basic commands, which are very easy to learn, Svelte uses pure HTML, CSS, and JavaScript. The developers of Svelte JS are primarily targeting beginners to app programming. They offer starter kits which can be used to get results very quickly.

The future of Svelte: Svelte is still quite new on the scene and has only a small community of users, but it is showing great promise. Svelte JS promises better access, easier onboarding, and faster results. And in the 2019 State of JavaScript survey, it was awarded the “Prediction Award”, which is given to “an up-and-coming technology that might take over”.

If Svelte really does turn out to be that framework that disrupts the hegemony of Vue, React, and Angular, it might soon replace them and become the new universal standard for frontend development.

The Best Frontend Framework

…is ultimately the one that best fits your needs. There are a lot of other decisive factors, apart from discussed above, in choosing the correct framework for product development, such as:

• Organizational policy: Some organizations choose to work with a particular frontend framework unless there’s a very compelling reason why an app’s desired functionalities cannot be achieved with their preferred framework.

• Availability of development team: You can’t develop in a framework if you don’t have the developers on hand. If it’s a non-negotiable requirement, you may have to outsource.

• Future-proofing: Migration and upgrade are a difficult for simple apps. This could be a significant factor depending on the complexity of the app. You should also always check how active the framework’s community and support looks on a medium to long-term basis.

• Developer popularity: It’s easier to recruit and retain developers to work with the most popular frameworks.