DEV Community

loading...
Cover image for React vs Angular vs Vue
GraphQL Editor

React vs Angular vs Vue

tomekponiat profile image Tomek Poniatowicz Originally published at blog.graphqleditor.com ・4 min read

After looking at the features, components and libraries for Vue, React and Angular it's time to do an actual comparison of the three. While in terms of popularity React is still top there are substantial differences in where each of the frameworks excels. So even if you’re already committed to one (or want to switch) it's probably a good idea to check out exactly how they measure up against each other in a few key aspects.

Basics

Before we get to the meat it's probably prudent to point out what these differences stem from. Each of the three frameworks has a different approach to development and aims at helping devs in a different way. React and Angular are developed by big companies namely Facebook and Google while Vue has started as a side project of a Google developer. While all are JavaScript based, each presents a slightly different syntax approach. React uses JavaScript and JSX (which combines HTML and JavaScript logic), Angular uses TypeScript (HTML and TypeScript logic is split) Vue uses JavaScript (HTML and JavaScript logic is split). All of them are component-driven, but they treat coding them differently along with a number of default features included.

  • React combines the UI and behavior of components, the same code is responsible for both creating a UI component and dictating its behavior.
  • Vue takes the same approach and even lets you combine the UI and behavior of components from within a script.
  • Angular completely separates the two, the UI parts of components are attributes of HTML tags while their behaviors are in the form of JavaScript code.
Components Default lang Built-in features
React same code is responsible for UI & logic JavaScript/JSX low amount
Angular components' UI & logic are completely separated TypeScript high amount
Vue same code is responsible for UI & logic JavaScript fair amount

Learning curve

Finally the main difference in approach is probably the learning curve. Vue is the easiest to learn and can even serve as a stepping stone for learning the two others, as there is some overlap especially in handling components. Simplicity and customizability obviously have their advantages, but there are also some drawbacks as it makes it somewhat difficult to debug and test. React is middle of the road, it is harder to get into but has great documentation and an easy to follow starting guide. The drawback is it does require use of third party libraries for more complex stuff. This makes the learning curve not so steep but highly dependent on what you actually want to do and what third party libraries you’ll need to learn to do it. Angular is the complete framework, but also has the steepest learning curve requiring learning TypeScript, RxJS and MVC. The investment of time and effort may prove well worth it as mastering it will make building your app a breeze.

Alt Text

Minimalism vs all-in-one

Approach and philosophy are important and all but that’s mostly just the pitch. For a clearer picture it's better to look at the features. As mentioned above React takes a minimalistic approach here, it provides you with a library for rendering content to the DOM. It does provide some rudimentary built-in state management support but you’ll likely need to use a state management library like Redux (which is fortunately quite easy to learn). There aren't any other special features and if you need some other functionalities you’ll need to check out community provided solutions. That does make it a lot slimmer than the other two, but can be a hassle if you’re working on a complex project and looking to get started from the get go. Vue is the middle ground, it provides some features, but isn't the complete package Angular is. You get built in state management as well as a built-in router. Though for form validation you’ll need something like the Vuelidate library and a library for Http client functions (there's quite a few to choose from) Angular gives you all these features out of the box and more, there’s an official CLI which helps building, managing, updating and deploying projects even easier.

React Angular Vue
Backed by Facebook Google Evan You
Release date 2013 2016 2014
Lang JavaScript TypeScript JavaScript
Learning curve medium hard easy
Documentation good good good
Features external libraries all-in-one most-in-one
Production-ready yes yes yes

Less is more

The thought that comes to mind is probably, why not go with Angular, after all it has the most features. Well more isn't always better and as mentioned the steep learning curve can be a turnoff especially if you’re looking to get started right away or working on projects requiring less complex solutions out of the box. Oh and emphasis on ‘out-of-the-box’ here, it's not like Vue and React are useless when it comes to features. Just the opposite, they're freely available to you when you need them, you just need to reach out to the community instead of getting them built-in with the framework. As you can see it comes to personal preference and focusing on what fits you best now and what might fit you best in the future, hopefully this little piece helped with that at least a little bit.


A guest blog post for GraphQL Editor blog by Michał Tyszkiewicz


Want to speed up your GraphQL schema development?

GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. Try GraphQL Editor for free!

New features of GraphQL Editor gif

Discussion (11)

Collapse
ronca85 profile image
ronca85 • Edited

why do these comparisons never compare framework to no frameworks?

Collapse
weedshaker profile image
weedshaker

Yes! react vs angular vs vue vs vanilla.
also, this article skips one crucial topic: Performance! And there we have only one winner: VanillaJS aka. no framework!

Check out the performance stats here: github.com/mits-gossau/event-drive...

Collapse
coder3 profile image
Cédric

I'd be very interested in reading a comparison between vanilla vs frameworks. Maybe someone more experienced than me can make an article of it

Thread Thread
weedshaker profile image
weedshaker

@Cédric, we gonna finish the real world example (see link above) soon. Why don't ya have a look... some code is worth a thousand words!

Collapse
wick3drose profile image
wick3dr0se

Ok, but that's a given and shouldn't even have to be said. Why would he add vanilla to the comparison. This is a framework comparison; Not frameworks vs not using frameworks..

Thread Thread
weedshaker profile image
weedshaker

Word! Interestingly enough, the DOM and its Web Api is kinda a framework, too.

Collapse
enmanuel97 profile image
Jesus Enmanuel De La Cruz • Edited

I don't know why people say angular is hard to learn. I started watching Vue but quit, then I built an easy project with React and I didn't like that style of code and finally when I see Angular I immediately fall in love. Angular was very easy for me to learn, the code is clean and its structure is very easy.

Collapse
shadowtime2000 profile image
shadowtime2000

This makes no sense to me. It says Vue was released before Angular, but Evan You created Vue to be a smaller simpler subset of the features of Angular.

Collapse
amarok24 profile image
Jan P.

Evan You was referring to the 1st (old) version of Angular which is today called AngularJS and is almost dead. The "new" Angular is a different and new platform.

Collapse
ivanjeremic profile image
Ivan Jeremic

React makes the most sense for me.

Collapse
bravemaster619 profile image
bravemaster619

Nice article!

typo: Documnation

Forem Open with the Forem app