Geekly Articles each Day
📜 ⬆️ ⬇️

Angular vs. React vs. Vue: Comparison 2017

Choosing a javascript framework for your web application can be unbearable. Angular and React are currently very popular, and there is also an upstart that has received a lot of attention lately: VueJS . Besides these, only these few newbies .



So, how do we choose? A list of pros and cons never hurts. Let's do it in the style of my previous article, “ 9 steps: choosing a technology stack for your web application .”


Before we start - SPA or not?


First you have to make a clear decision whether you need a one-page web application (SPA), or you would prefer a multi-page approach. More on this topic in my post “ Single-page Web Applications (SPA) vs. Multi-Page Web Applications (MPA) ” (coming out soon, stay tuned to Twitter ).


Participants in today's competition: Angular, React and Vue


First I would like to discuss the life cycle and strategic considerations . Then we move on to the capabilities and ideas of all three JavaScript frameworks. Finally, we come to conclusions .


Questions that we consider today:



Reade set Go!


Life cycle and strategic considerations



React vs. Angular vs. Vue


1.1 A bit of history


Angular is a JavaScript framework based on TypeScript. Designed and supported by Google, it is described as a “ Superheroic JavaScript MVW framework ”. Angular (also known as “Angular 2+”, “Angular 2” or “ng2”) is a rewritten, mostly incompatible successor to AngularJS (known as “Angular.js” or “AngularJS 1.x”). Although AngularJS (old) was first released in October of 2010, it still receives bug fixes , etc. The new Angular (without JS) was introduced as version number 2 in September 2016. The last major release is version 4, as version 3 was missed . Angular is used by Google, Wix, weather.com, healthcare.gov and Forbes (according to madewithangular , stackshare and libscore.com ).


React is characterized as a “ JavaScript-library for creating user interfaces ”. First released in March 2013, React was developed and maintained by Facebook, which uses React components on several pages (however, it is not a one-page web application). According to this article by Chris Kordla, React on Facebook is applied much more widely than Angular on Google. React is also used in Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart and others (according to Facebook , stackshare and libscore.com ).


Facebook is currently working on the release of React Fiber . This will change the React under the hood - as a result, the rendering should speed up significantly - but backward compatibility will remain after the changes. Facebook talked about these changes at their developer conference in April 2017, and an unofficial article about the new architecture was published. Supposedly, React Fiber will be released along with React 16.


Vue is one of the fastest growing JS frameworks in 2016. Vue describes itself as “ Intuitive, Fast, and Integrated MVVM for creating interactive interfaces .” It was first released in February 2014 by Google’s former employee Evan Yu (by the way, Evan then wrote an interesting post about marketing activities and numbers in the first week after launch ). It was a good success, especially considering that Vue attracted so much attention being a one-man show, without the support of a large company. At the moment, Evan has a team of a dozen major developers. In 2016, the second version was released. Vue use Alibaba, Baidu, Expedia, Nintendo, GitLab. A list of smaller projects can be found at madewithvuejs.com .


Both Angular and Vue are available under the MIT license , while React is under the BSD3-license . There are many discussions about the patent file . James Hades (ex-Facebook engineer) explains the reasons and the story behind this file: Facebook's patent concerns the distribution of their code while still being able to protect themselves from patent lawsuits . The patent file was updated once and some people claim that React can be used if your company is not going to sue Facebook. You can read the discussion around this Github issue . I am not a lawyer, so you yourself must decide whether the React license creates problems for you or your company. There are many more articles on this topic: Dennis Walsh writes why you shouldn't be afraid . Raul Kripalani warns against use in start-ups , he also has a review in the format of “presentation of thoughts”. There is also a recent original Facebook statement on this topic: “ Clarification of the React license ”.


1.2 Core development


As noted earlier, Angular and React are supported and used by large companies. Facebook, Instagram and Whatsapp use them on their pages. Google uses them in many of its projects: for example, the new Adwords user interface was implemented using Angular and Dart . Again, Vue is being developed by a group of individuals whose work is supported through Patreon and other sponsorship tools. Decide for yourself whether this is good or bad. Matthias Goetzke thinks that a small Vue team is a plus, because it leads to cleaner code / API, and less overinering .


Let's look at the statistics: 36 people are listed on the Angular team page, Vue has 16 people, React has no team page. On GitHub, Angular has more than 25,000 stars and 463 contributors, React has more than 70,000 stars and 1,000 contributors, and Vue has almost 60,000 stars and only 120 contributors. You can also check out the “ Github Stars History for Angular, React and Vue ” page. Again, Vue seems to be developing very well. In accordance with bestof.js, over the past three months, Angular 2 received an average of 31 stars per day, React - 74 stars, Vue - 107 stars.



A Github Stars History for Angular, React and Vue ( Source )


Update: Thanks to Paul Henschel for pointing out npm trends. They show the number of downloads for these npm packages and even more useful as a clean look at the stars of GitHub.



Number of downloads for given npm-packages for two years


1.3 Life cycle in the market


Angular, React and Vue are difficult to compare in Google Trends due to their diverse names and versions. One of the ways to get approximate values ​​can be a search in the category “Internet & technologies”. Here is the result:



Well. Vue until 2014 did not exist - it means that there is something wrong. La Vue in French - “view”, “look”, or “opinion”. Maybe that's the point. Comparing “VueJS” with “Angular” or “React” is unfair, as VueJS has almost no results that can be compared with the others.


In this case, try something else. ThoughtWorks Technology Radar gives you a good idea of ​​how technology evolves over time. Redux is at the stage of adoption (adoption in projects!) And it was invaluable on a number of ThoughtWorks projects. Vue.js at the testing stage ( try it !). He is described as a lightweight and flexible alternative to Angular with a lower learning curve. Angular 2 is in the process of being evaluated - it has been used successfully by the ThoughtWorks teams, but is not yet strongly recommended.


According to the latest StackOverflow 2017 poll , 67% of developers surveyed love React, and 52% love AngularJS. “Lack of interest in continuing development” registers large values ​​for AngularJS (48%) compared with React (33%). Vue is not in the top ten in any of the cases. Next, there is a statejs.com poll comparing “ front-end frameworks ”. The most interesting facts: React and Angular possess 100% fame, Vue is unfamiliar to 23% of people surveyed. Regarding “satisfaction,” React scored 92% for the “use again” option, Vue - 89%, Angular 2 - only 65%.


How about another user satisfaction survey? Eric Elliott launched one in October of 2016 to evaluate Angular 2 and React. Only 38% of people surveyed would use Angular 2 again, while 84% would use React again.


1.4 Long-term support and migration


React's API is fairly stable, as Facebook claims in its design principles . There are also scripts to help migrate from your current API to a new one: try react-codemod . Migrations are fairly simple and there is no such thing (and need for it) like the LTS version. In this post on Reddit, people note that upgrading has never really been a problem . The React team wrote a post about their versioning scheme . When they add a deprecation warning, they leave it for the rest of the current release version until the behavior is changed in the next major version. There are no plans to release a new major version - v14 was released in October 2015, v15 was published in April 2016, and v16 does not have a release date yet. Upgrading should not be a problem, as one of the main developers of React recently noted .


As for Angular, there is a post about versioning and Angular releases since v2 release. There will be one major update every six months and a period of obsolescence (deprecation period), at least six months (two major releases). There are experimental APIs that are marked in the documentation with a shorter period of obsolescence. There is no official announcement, but according to this article , the Angular team announced the LTS version starting from Angular 4 . They will be maintained for at least a year after the next major release. This means that Angular 4 will be supported by bugfixes and important patches at least until September 2018 . In most cases, updating from the second to the fourth version of Angular is as simple as updating the Angular dependencies. Angular also provides a guide with information about what changes will be needed in the future.


The upgrade process from Vue 1.x to 2.0 should be simple for a small application — the development team claims that 90% of the API remains unchanged. There is a nice tool for diagnosing updates and help during migration, working from the console. One of the developers noted that the upgrade from v1 to v2 still does not bring much pleasure on large applications. Unfortunately, the roadmap for the next major release or information about plans to create LTS versions is not available.


One more thing: Angular is a one-piece framework offering a bunch of things in a set. React is more flexible than Angular, and you are likely to come across more independent, uncrowded, fast-developing libraries — this means that you will have to take care of the appropriate updates and migrations yourself. This can be harmful if certain packages are no longer supported or if some other package at some point becomes the de facto standard.


1.5 Human resources and recruitment


If you have HTML developers who don’t want to go into JavaScript, you'd better choose Angular or Vue. React will entail an increase in the number of javascript (we will talk about this later).


Do you have designers working right next to the code? The user “pier25” notes in his Reddit post that choosing React makes sense if you work on Facebook, where each developer is a superhero . In the real world, you will not always find a designer who can modify JSX — in essence, working with HTML templates will be much easier.


The good news about Angular is that the new Angular 2 developer from another company will be able to quickly get acquainted with all the necessary agreements. Each project on React is different in terms of architectural solutions and developers will need to familiarize themselves with the settings of a specific project.


Angular is also good if you have developers with OOP backgrounds or those who don't like JavaScript. To draw attention to this, quote Manesh Chand:


“I am not a JavaScript developer. My background is the creation of large-scale corporate systems using “real” software development platforms. I started in 1997, developing applications in C, C ++, Pascal, Ada and Fortran. (...) I can say for sure that JavaScript for me is just rubbish. Being a MVP at Microsoft and an expert, I understand TypeScript well. I also do not see Facebook as a software development company. However, Google and Microsoft are already the largest innovators in this field. I feel more comfortable working with a product that has good support from Google or Microsoft. Also (...) with my background, I know that Microsoft has even big plans for TypeScript ”

Well ... Apparently, I should mention that Manesh Chand is the regional director at Microsoft.


Compare React, Angular and Vue


2.1 Components


All discussed frameworks are based on components. The component receives something to the input and after internal calculations returns the rendered UI template (input / output area from the site or to-do list item) at the output. Certain components should be easy to reuse on a web page or in other components. For example, you could have a grid component (consisting of a header and several components for rows) with various properties (columns, header information, data rows, etc.) and the ability to reuse this component with different data on another page. Here is a comprehensive article about components in case you want to learn more about them.


Both React and Vue are excellent for working with “blunt” components: small functions with no state, which receive something as input and return output elements.


2.2 TypeScript vs ES6 vs. ES5


React focuses on using ES6 JavaScript. Vue uses javascript es5 or es6.


Angular depends on TypeScript . This gives greater consistency in the examples and open source projects (examples of React can be found in ES5 or in ES6). It also introduces concepts such as decorators or static typing. Static typing is useful for tools for analyzing code, such as automatic refactoring, moving to definition, etc. - they should reduce the number of bugs in the application, although a consensus about their use is definitely not reached. Eric Eliot does not agree with this in his article “The Shocking Secret of Static Types .” Daniel S Wong says that using static types is not harmful and that it’s good to have test development (TDD) and static typing at the same time .


You should probably be aware that you can use Flow to enable type checking in React . This is a static type checking tool developed by Facebook for javascript. Flow can also be integrated into VueJS .


If you are writing TypeScript code, you are no longer writing standard JavaScript. Despite its growth, TypeScript still has a tiny number of users, compared to the entire JavaScript language. One of the risks may be that you will move in the wrong direction, as TypeScript may - although unlikely - disappear over time. In addition, TypeScript creates a decent overhead on projects (for training) - you can read more about this in Comparing Angular 2 and React by Eric Elliott.


Update: James Ravenscroft wrote a comment to this article stating that TypeScript has first-class support for JSX components can be easily checked for type matching. So, if you like TypeScript and you want to use React, this should not be a problem.


2.3 Templates - JSX or HTML


React violates established best practices. For decades, developers have tried to separate templates and embedded Javascript logic, but in JSX they are again mixed. Maybe it sounds awful, but you should listen to Peter Hunt's speech “ React: Rethinking Best Practices ” (October 2013). He points out that the separation of patterns and logic is simply a division of technology, not responsibility. You must create components instead of templates. Components are reusable, integrable and convenient for unit testing.


JSX is an optional preprocessor with an HTML-like syntax that is then compiled into JavaScript. Hence some oddities - for example, you need to use className instead of class , because the latter is a reserved keyword in JavaScript. JSX is a great advantage for development, since you will have everything in the same place, and autocomplete and checks at the compilation stage will work faster. When you make a mistake in JSX, React does not compile the code and displays the line number in which the error was made. Angular 2 quietly drops in runtime (this argument may be incorrect if you use AOT with Angular).


JSX implies that everything in React = JavaScript is used for both JSX templates and logic. Corey House points out in his January 2016 article : “ Angular 2 continues to embed 'JS' in HTML. React embeds 'HTML' in JS ”. This is good because JavaScript is more powerful than HTML.


Templates in Angular are advanced HTML with the special language Angular (things like ngIf or ngFor ). While React requires JavaScript knowledge, Angular forces you to learn Angular-specific syntax .


Vue offers “ single-file components ”. This is like a compromise regarding the division of responsibilities - templates, scripts and styles in one file, but in three different, ordered sections. This means that you get syntax highlighting, CSS support and the ability to easily use preprocessors like Jade or SCSS. I read in other articles that JSX is easier to debug, because Vue does not show syntax errors in HTML. This is not the case, since Vue converts HTML into render functions - so errors are shown without problems (Thanks to Vinicius Reiz for comments and corrections!).


Note: If you like the idea with JSX and want to use it in Vue, you can use babel-plugin-transform-vue-jsx .


2.4 Framework vs Libraries


Angular is more of a framework than a library, as it provides compelling suggestions for how your application should be structured and also has more functionality out of the box. Angular - this is a “one-piece solution” - “batteries” are included and you are given the opportunity to start easily. You do not need to analyze libraries, solve the issue with routing, etc. - you can just start working.


React and Vue, on the other hand, are universally flexible. Their libraries can be combined with any kind of packages (there are quite a lot of them for React in npm , but Vue has fewer packages, since it is still quite young). Using React, you can even replace the library itself with its API-compatible alternative, such as Inferno . With greater flexibility, however, there is greater responsibility - there are no rules and restrictive recommendations for React. Each project requires a decision regarding its architecture, and things can easily go wrong.


On the other hand, Angular comes with an intricate tangle of systems for assembling, boilerplates, linters, and other time eaters that you have to deal with. This is also true for React when using starter kits or boilerplates. Of course, they are very useful, React works out of the box, and this may be a way for you to learn. Sometimes the variety of tools required to work in a JavaScript environment is called “JavaScript fatigue.” Here is an article by Eric Clemmons that said:


There are still a lot of tools that you are not used to when you start working with the framework. They are generated, but perhaps many developers do not understand what is happening under their hood, or it takes a long time to understand it.

Vue seems to be the cleanest and easiest of the three frameworks. GitLab has a post about deciding in favor of Vue.js (October 2016):


Vue.js is beautifully well balanced in terms of what it can do for you and what you need to do on your own. (...) Vue.js is always within reach; robust yet flexible mesh is ready to help keep your programming efficient and minimize DOM-related suffering.

They like the simplicity and ease of use - the source code is very readable and no documentation or external libraries are needed. Everything is quite simple. Vue.js “does not make far-reaching assumptions about most of something.” There is also a podcast about the GitLab solution .


Another post about switching to Vue from Pixeljets. React “ was a big step forward for the JS world in terms of state-awareness , and it showed a lot of people real functional programming in a good, practical way .” One of the major drawbacks of React compared to Vue is the problem of splitting components into smaller components due to JSX limitations. Here is a quote from the article:


For me and my team, the readability of the code is important, but it is also extremely important that code writing be enjoyable. There is nothing pleasant in creating 6 components if you are developing a simple widget calculator. In many situations, this is also bad in terms of support, modifications or visual processing of a widget, since you need to navigate through many files / functions and check each small piece of HTML separately. Again, I do not propose to write monoliths - I propose using components instead of microcomponents in everyday development.

On Hacker news and Reddit there are interesting discussions about this post - there are arguments from dissatisfied and further supporters of Vue.


2.5 State Management and Data Binding


Developing a UI is difficult, as states are present everywhere — data changes over time, which entails an increase in complexity. Certain ways of working with the state are of great help when the application grows and becomes more complex. For small applications, this might be a brute force, and something like Vanilla JS would be enough.


How it works? Components describe a UI at a specific point in time. When data changes, the framework redraws the entire UI component - the data displayed is always relevant. We can call this idea “UI as a function”.


React is often paired with Redux. Redux describes itself in three fundamental principles :



In other words: the state of the application is entirely in the object tree inside the unified storage. This helps to debug the application and some functionality becomes easier to implement. The state is in read-only mode and can be changed only through “actions” to avoid a race condition (also useful for debugging). “Reducers” are written to indicate how “actions” can transform a state.


Most tutorials and boilerplaces include Redux, but you can use React without it (or you may not need Redux at all in your project). Redux adds complexity and quite serious limitations to your code. If you are learning React, you should consider exploring pure React before you go to Redux. You should definitely read “ You may not need Redux ” by Dan Abramov.


Some developers suggest using Mobx instead of Redux . , “ Redux”, . , . Redux MobX . Redux MobX . , Flux-. , MVC, “ Redux ( MVC) ” .


Vue Redux, Vuex .


React Angular — - . Angular , ( , ) . React : . Angular . React , , ( ).


. , . “ : Angular 2 React ”, StackOverflow . ( 3 , Angular 1 React). , : Vue , ( -).


, Angular- ( ).


2.6


Angular dependency injection, , () (). . “ dependency injection ” .


-- (MVC) — , . Angular, MVC-, MVC . React V — M C .


2.7


React Vue JavaScript- . Angular, TypeScript.


. React Vue , , . SPA , . Angular SPA, , , .


:


JavaScript , React , , . , , .

React -SPA (, ). Facebook React , , , .


2.8


: Angular - . gzip- — 143, 23 Vue 43 React.


React, Vue Virtual DOM, . , Virtual DOM DOM , Virtual DOM React . Virtual DOM , StackOverflow.


, js-framework-benchmark . . , , , — .



Angular, React Vue ( )



( )


: Vue , , ( Inferno ). : , .


2.9


Facebook Jest , React. Jest Mocha , , Enzyme Mocha . Enzyme — , JavaScript, Airbnb( Jest, Karma -). , React( ).


, Jasmine , Angular 2. , Jasmine “ , , , ”. . Angular 2 Karma Mocha . ( 2015-) Angular 2 .


Vue , 2017-, . Karma . Vue Jest , avoriaz .


2.10


, , .


React, Angular . Angular NativeScript ( Telerik) Ionic Framework . React react-native-renderer , iOS Android, react-native . ( Facebook; Showcase ) react-native.


JavaScript- . , SEO. — . , . React next.js , Vue nuxt.js , Angular … Angular Universal .


2.11


Angular, , . , , , . JavaScript, , . , . , - , , . , , . React , , third-party . 16 flux- , React.


Vue . Vue - , . , Angular Vue . , React , . Vue , , .


, , React Vue. — JavaScript — 10 jQuery — Vue. React. Vue JavaScript : , data-flow. .


In the meantime, Angular and React have their own approach to things. They can disturb you because you need to adapt to them in order to make them work . This can be detrimental due to less flexibility and a steep learning curve. This can also be useful, because you are forced to learn the right approaches in the process of learning technology. With Vue, you can work in the style of old-fashioned javascript. This may be easier at first, but it may become a problem in the long run if everything is not done correctly.


When it comes to debugging, plus React and Vue in less magic. Hunting for bugs is simpler, because there are only a few places where you need to look, and stektrais have better differences between their own code and the source code of the library. Those working with React report that they never needed to read the source code of the library. However, when debugging your Angular application code, you often need to debug Angular internals to understand the underlying model. On the other hand, error messages should become cleaner and more informative, starting with Angular 4.


2.12 Under the hood of Angular, React and Vue


Want to check out the sources yourself? Want to see how things go together?


Perhaps you should first check out these GitHub repositories: React ( github.com/facebook/react ), Angular ( github.com/angular/angular ) and Vue ( github.com/vuejs/vue ).


What does the syntax look like? ValueCoders compares the syntax of Angular, React and Vue.


It would also be nice to see everything in production - along with the source code on which everything is based. TodoMVC has a list of dozens of variations of the same Todo application written in various JavaScript frameworks - you can compare solutions on Angular, React and Vue. RealWorld is developing a real application (clone Medium) and they have ready-made solutions for Angular (4+) and React (with Redux). For Vue, work is in progress.


There are also some real applications that you can look at. React based solutions:



Applications on Angular:



As well as solutions on Vue:



Conclusion


Choose a framework now


And React, and Angular, and Vue are steep enough, and none of them can be put much higher than the others. Trust your gut. This final piece of entertaining cynicism can help you decide:


Dirty little secret - “modern JavaScript development” has nothing to do with creating websites - it’s creating packages that can be used by people who create libraries that can be used by people who create frameworks that people who write tutorials and lead courses to teach . Not sure if someone really creates something for real users.

This is an exaggeration, of course, but there may be some truth in it. Yes, there is a lot of noise in the JavaScript ecosystem. Maybe you will find many more attractive alternatives during your search - try not to be blinded by the latest brilliant framework.


What should I choose?



So you made a decision?



Yeah, you took it!


Fine! Read how to start developing with Angular, React or Vue (soon follow me on Twitter for updates).


Additional resources


React JS, Angular & Vue JS - Quickstart & Comparison (eight-hour introduction and comparison of three frameworks)
Angular vs. React (vs. Vue) - the DEAL breaker (short but excellent comparison from Dominic T )
Angular 2 vs. React - the ultimate dance off (good comparison from Eric Elliott )
React vs. Angular vs. Ember vs. Vue.js (comparison of three frameworks in the form of notes from Hecan Sari )
React vs. Angular (clear comparison of two frameworks)
Can Vue fight for the Throne with React? (nice comparison with a lot of code examples)
10 reasons why I moved from Angular to React (another good comparison from Robin Viruch)
All JavaScript frameworks are terrible (a great note about all the major frameworks from Matt Burgess )


')

Source: https://habr.com/ru/post/338068/

More articles:


All Articles