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.

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.

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.

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!