• Angular vs. React vs. Vue: A 2017 comparison
  • Jens Neuhaus
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Raoul1996
  • Proofreader: CAoyi0905, PCAaron

Angular, React, and Vue in 2017

Choosing a JavaScript development framework for a Web application can be tricky. Angular and React are very popular these days, and the latest upstart VueJS is getting a lot of attention. What’s more, these are just some of the latest developments.

Javascripts in 2017 —— things aren’t easy these days!

So how do we choose which framework to use? It’s great to list their pros and cons. We will do this as we did in the previous article, “9 Steps: Choosing a Technology Stack for Your Web Application.”

Before we get started — do you apply single-page Web application development?

First you need to figure out whether you want a single page application (SPA) or a multi-page approach. Read my blog post, “Single-page Applications (SPA) vs. Multi-page Web Applications (MPA)” for more on this issue (coming soon, follow me on Twitter for updates).

First today: Angular, React, and Vue

First, I want to talk about life cycle and strategic considerations. Then, we’ll discuss the capabilities and concepts of the three JavaScript frameworks. Finally, we’ll come to a conclusion.

Here are the questions we’re tackling today:

  • How mature are these frameworks or libraries?
  • Will these frames be hot for a while?
  • How big is the community for these frameworks, and how much help can they get?
  • Is it easy to find every framework developer?
  • What are the basic programming concepts of these frameworks?
  • Is the framework easy to use for small or large applications?
  • What is the learning curve for each framework?
  • What performance do you expect from these frameworks?
  • Where can I learn more about the underlying principles?
  • Can you develop with the framework of your choice?

Get ready to hear me out!

Life cycle and strategic considerations

Compare React, Angular, and Vue

Some of the history

Angular is a Javascript framework based on TypeScript. Developed and maintained by Google, it is described as a “super awesome JavaScript MVW framework”. Angular (also known as “Angular 2+”, “Angular 2” or “ng2”) has been rewritten as a later version that is incompatible with AngularJS (also known as “angular.js” or “AngularJS 1.x”). When AngularJS (the old version) was originally released in October 2010, it was still fixing bugs, etc. — the new Angular (Sans JS) came out in Version 2 in September 2016. The latest major release is 4 because version 3 was skipped. Google, Vine, Wix, Udemy, Weather.com, HealthCare. gov and Forbes all use Angular (according to MadeWithAngular, Stackshare and libscore.com).

React is described as “a JavaScript library for building user interfaces.” React was originally released in March 2013 and is developed and maintained by Facebook, which uses the React component on multiple pages (but not as a single-page application). React is far more used on Facebook than Angular is on Google, according to This Chris Cordle article. React has also been used by 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 working on React Fiber. It will change the React underlying – rendering should be faster – but after the change, the version will be backward compatible. Facebook will discuss the new changes at its Developer conference in April 2017 and publish an unofficial article about the new architecture. React Fiber may ship with React 16.

Vue is one of the fastest growing JS frameworks in 2016. Vue describes itself as an “MVVM framework for building intuitive, fast, and componentized interactive interfaces.” It was first released in February 2014 by Evan You, a former Google employee (BTW: You Wrote a blog post about vue’s first week of marketing and data at the time). Especially considering that Vue was able to gain so much traction as a framework developed by one person without the backing of a major company, this is undoubtedly very successful. Yu Creek currently has a core team of dozens of developers. In 2016, version 2 was released. Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab — a list of small projects can be found at MadeWithVuejs.com.

Angular and Vue are licensed under the MIT license, while React is licensed under the BSD3-license. There’s a lot of discussion on patent documents. James Ide (former Facebook engineer) explains the reason and history behind the patent filing: Facebook’s patent license is to share its code while protecting itself from patent litigation. The patent document was updated once, with some claiming that if your company isn’t going to Sue Facebook, it’s okay to use React. You can check out the discussion on this issue on Github. I’m not a lawyer, so if the React license is a problem for you or your company, you should decide for yourself. Much has been written on this topic: Dennis Walsh writes why you shouldn’t be afraid. Raul Kripalani warned against startups using React and wrote an overview of the memo. There’s also an updated statement on Facebook explaining React licenses.

Core development

As mentioned earlier, Angular and React are supported and used by large companies. Facebook, Instagram and WhatsApp are using React on their pages. Google uses Angular in many projects. For example, the new Adwords user interface uses Angular and Dart. However, Vue is made possible by a group of individuals who support it through Patreon and other sponsors-you can decide for yourself. Matthias Gotzke believes that the benefit of Vue’s smaller team is that it uses cleaner and less over-engineered code or apis.

Let’s look at some statistics: Angular lists 36 people on the team page, Vue lists 16, and React doesn’t have a team page. Angular has 25,000+ Stars and 463 contributors on Github, React has 70,000+ Stars and 1,000+ contributors, Vue has nearly 60,000 stars and only 120 code contributors. You can also view the Github Star history of Angular, React, and Vue. Again, Vue seems to be trending well. According to bestof.js, Angular 2 has averaged 31 stars per day over the past three months, 74 for React, and 107 for Vue.

Angular, React, and Due’s Github Star history

The data source

Update: Thanks to Paul Henschel for the NPM trend. NPM Trends show the number of downloads of NPM packages, which is more useful than looking at Github Star alone:

Number of downloads of NPM packages in the last 2 years

Market life cycle

Due to the various names and versions, it is difficult to compare Angular, React, and Vue in Google Trends. An approximate approach could be a search in the “Internet and Technology” category. The results are as follows:

Vue wasn’t created before 2014 – so something’s wrong here. La Vue is French for “view”, “sight” or “opinion”. Maybe that’s it. The comparison of “VueJS” to “Angular” or “React” is also unfair, as VueJS finds almost no results.

Let’s try something else. ThoughtWorks’ Technology Radar Technology changes over time. It is impressive how the Technology has evolved over time. Redux is in the adoption phase (ThoughtWorks project!) It is invaluable in many ThoughtWorks projects. Vue.js is in the trial phase. Vue is described as a lightweight and flexible alternative to Angular with a smooth learning curve. Angular 2 is in the evaluation phase — it has been successfully implemented by the ThoughtWork team, but is not yet strongly recommended.

According to Stackoverflow’s latest 2017 survey, 67% of developers surveyed like React and 52% like AngularJS. A much higher number of developers “have no interest in continuing to use it in development”, AngularJS (48%) and React (33%). In both cases, Vue was not in the top 10. Then there’s stateJs.com’s survey on comparing “front-end frameworks.” Most interesting fact: React and Angular have 100% awareness, 23% of respondents don’t know Vue. In terms of satisfaction, 92% of respondents were willing to “use React again,” compared to 89% for Vue and 65% for Angular 2.

What about customer satisfaction surveys? Eric Elliott began evaluating Angular 2 and React in October 2016. Only 38% of respondents will use Angular 2 again, while 84% will use React again.

Long-term support and migration

Facebook notes in its design principles that the React API is very stable. There are also scripts to help you move from the current API to a newer version: see React-codemod. Migration is very easy and there is no such thing as a long term supported version. As pointed out in this Reddit post, people seeing upgrades has never been a problem. The React team wrote a blog post about their version control scheme. When they add deprecation warnings, they keep the rest of the current release until the behavior changes in the next major release. No changes are planned for the new major release – V14 was released in October 2015, V15 in April 2016, and V16 has no release date yet. Recently the React core developers pointed out that upgrading shouldn’t be an issue.

For Angular, starting with the V2 release, there was a blog post about versioning and publishing Angular. There will be a major update every six months, with a minimum of six months (two major releases). Some of the experimental apis in the documentation are marked with a short deprecation period. There’s no official announcement yet, but according to this article, the Angular team has announced a long-term support version starting with Angular 4. These will be supported for at least a year after the next major release. This means Angular 4 will be supported, with bug fixes and important patches, until at least September 2018. In most cases, updating Angular from V2 to V4 is as simple as updating Angular dependencies. Angular also provides guidance for information on whether further changes are needed.

The Vue 1.x to 2.0 update process should be easy for a small application – the developer team has claimed that 90% of the API remains the same. There is a good upgrade – Diagnostic migration – assist tool on the console. One developer noted that updates from V1 to V2 remain unchallenging in large applications. Unfortunately, there is no clear (common) path to the next major release or planned information for the LTS release.

One more thing: Angular is a complete framework that provides a lot of bundled things. React is more flexible than Angular, and you’ll probably use more stand-alone, unstable, fast-updating libraries – which means you’ll need to maintain updates and migrations yourself. This can also be a disadvantage if some packages are no longer maintained, or if others become de facto standards at some point.

Human Resources and recruitment

If you have HTML developers on your team who don’t need to know more about Javascript, you’re better off with Angular or Vue. React needs to learn more about JavaScript technology (we’ll talk about that later).

Do you have a designer on your team who can code while working? Reddit user “Pier25” pointed out that if you work at Facebook and everyone is a senior developer, React makes sense. However, the reality is that you won’t always find a designer who can modify JSX, so using HTML templates will be easier.

The advantage of the Angular framework is that a new Angular 2 developer from another company will quickly become familiar with all the necessary conventions. React projects vary in terms of architectural decisions, and developers need to be familiar with specific project Settings.

Angular is also a good choice if your developer has an object-oriented background or doesn’t like Javascript. To push the point, here’s a quote from Mahesh Chand:

I’m not a JavaScript developer. My background is in building large enterprise systems using “real” software platforms. I started building applications in 1997 using C, C ++, Pascal, Ada, and Fortran. (…). I can clearly say that JavaScript is gibberish to me. As a Microsoft MVP and expert, I have a good understanding of TypeScript. I don’t think Facebook is a software development company. But Google and Microsoft are already the biggest software innovators. I feel more comfortable using products with strong support from Google and Microsoft. Besides… With my background, I know Microsoft has bigger plans for TypeScript.

emmmmmmmm…… I should mention that Mahesh is a regional director at Microsoft.

React, Angular, and Vue

component

The frameworks we have discussed are component-based. A component takes an input, and after some internal behavior/calculation, it returns a rendered UI template (a login/logout area or a to-do list item) as output. Components defined should be easy to reuse in web pages or other components. For example, you can use grid components (consisting of one header component and multiple row components) with various properties (columns, header information, data rows, and so on) and be able to use components with different data sets on another page. Here’s a comprehensive article on components if you’d like to learn more about them.

React and Vue are both good at dealing with components: small stateless functions that take input and return elements as output.

Typescript, ES6 and ES5

React focuses on using Javascript ES6. Vue uses Javascript ES5 or ES6.

Angular relies on TypeScript. This provides more consistency in related examples and open source projects (React examples can be found in ES5 or ES6). This also introduces concepts like decorators and static typing. Static types are very useful for code intelligence tools, such as automatic refactoring, jumping to definitions, and so on – they can also reduce the number of errors in your application, although of course there is no consensus on this topic. Eric Elliott, in his article “The Shocking Secrets of Static Typing,” disagrees. According to Daniel C Wang, there is no harm in using static typing, and it is good to have test-driven development (TDD) and static typing at the same time.

You should also know that you can use Flow to enable type checking in React. This is a static type checker developed by Facebook for JavaScript. Flow can also be integrated into VueJS.

If you’re writing in TypeScript, you don’t need to write standard JavaScript anymore. Despite its growth, TypeScript’s user base is still small compared to the entire JavaScript language. One risk is that you’re moving in the wrong direction, because TypeScript could — perhaps not — disappear over time, too. In addition, TypeScript adds a lot of (learning) overhead to projects – you can read more about this in Eric Elliott’s Angular 2 vs. React comparison.

Update: James Ravenscroft writes in his comments on this article that TypeScript has first-class support for JSX — seamless type checking of components. So, if you like TypeScript and you want to use React, this shouldn’t be a problem.

Templates – JSX or HTML

React breaks long-held best practice. For decades, developers have tried to separate UI templates from inline Javascript logic, but with JSX, these are mixed again. It sounds bad, but you should listen to Peter Hunt’s talk on React: Rethinking Best Practices (October 2013). He points out that separating templates and logic is simply a separation of technologies, not a separation of concerns. You should build components, not templates. Components are reusable, composable, and untestable.

JSX is an optional preprocessor with htML-like syntax that is subsequently compiled in JavaScript. JSX has some quirks — for example, you need to use className instead of class because the latter is a Javascript reserved word. JSX is a great advantage for development, because the code is written in one place, making it easier to check the work when the code is finished and compiled. When you type an error in JSX, React will not compile and will print out the wrong line number. Angular 2 silently fails at runtime (this parameter may not be valid if precompiled in Angular is used).

JSX means that everything in React is Javascript — for JSX templates and logic. “Angular 2 continues to put ‘JS’ in HTML,” Cory House wrote in January 2016. React puts ‘HTML’ in JS. “This is a good thing because Javascript is more powerful than HTML.

Angular templates use special Angular syntax, such as ngIf or ngFor, to enhance HTML. React requires JavaScript knowledge, but Angular forces you to learn Angular specific syntax.

Vue has a “single file component.” This seems to be a trade-off for separation of concerns – templates, scripts, and styles in one file, but in three different ordered sections. This means you get syntax highlighting, CSS support and easier use of preprocessors such as Jade or SCSS. I have read other articles and JSX is easier to debug because Vue does not show syntax errors for non-standard HTML. This is incorrect because Vue converts HTML to render functions – so the error display is no problem (thanks Vinicius Reis for comments and corrections!) .

Side note: If you like the idea of JSX and want to use it in Vue, use babel-plugin-transform-vue-jsx.

Frameworks and libraries

Angular is a framework rather than a library because it provides strong constraints on how applications are built and more out-of-the-box functionality. Angular is a “complete solution” – full of features that you can happily start developing. You don’t need to research libraries, routing solutions or anything like that – you just get to work.

React and Vue, on the other hand, are flexible. Their library works with a variety of packages. (There are plenty of React packages on NPM, but fewer on Vue because the framework is still relatively new). With React, you can even swap the library’s own API for compatible alternatives, such as Inferno. However, with greater flexibility comes greater responsibility – React has no rules and limited guidance. Architecture needs to be decided on every project, and things can go wrong more easily.

Angular, on the other hand, has a confusing set of build tools, templates, checkers (linters), and timeslinters to deal with. The same is true for React if you use a project starter suite or template. They’re naturally very helpful, but React works out of the box, which is probably how you should learn. Sometimes, working with various tools in a JavaScript environment is called “JavaScript fatigue.” Eric Clemmons says in his article:

When you start working with a framework, with a bunch of tools installed, you may not be used to it. These are all generated by the framework. Many developers don’t understand what’s going on inside the framework — or it takes a lot of time to figure it out.

Vue seems to be the lightest of the three. GitLab has a blog post about vue.js’s (October 2016) decision:

Vue.js is the perfect balance between what it will do for you and what you need to do. (…). Vue.js is always available, a solid, yet flexible safety net that guarantees programming efficiency and minimizes the pain of manipulating the DOM.

They like simplicity — the source code is very readable and doesn’t require any documentation or external libraries. It’s all very simple. Vue.js “makes no big assumptions about anything”. There is also a podcast about GitLab’s decision.

Another blog post from Pixeljets about the transition to Vue. React “was a big step forward in the JS community’s consciousness, showing people true functional programming in a practical and concise way. A major disadvantage of React compared to Vue is that components are much smaller in granularity due to JSX limitations. Here’s the quote from the article:

For me and my team, it’s important that code be readable, but it’s also important that code be fun to write. It’s not surprising to create six components when implementing a really simple calculator widget. In many cases, it’s also not good to maintain, modify, or visually examine a widget because you need to bypass multiple files/functions and examine the HTML for each small piece separately. Again, I’m not suggesting writing boulders – I’m suggesting using components rather than microcomponents in everyday development.

Interesting discussion of blog posts on Hacker News and Reddit – with arguments from Vue dissenters and further supporters.

State management and data binding

Building user interfaces is difficult because there is state everywhere – the complexity of data that changes over time. Defined state workflows contribute greatly to the growth and complexity of your application. For less complex applications, there is no need to define state flows, such as native JS.

How does it work? Components describe the UI at any point in time. When the data changes, the framework re-renders the entire UI component – the data displayed is always up to date. We can call this concept “UI as feature”.

React is often used with Redux. Redux presents himself with three basic principles:

  • Single source of truth
  • State is read-only.
  • Changes are made with pure functions

In other words: the state of the entire application is stored in a single store’s state tree. This helps debug the application and makes some features easier to implement. The state is read-only and can only be changed by action to avoid race conditions (this also helps debugging). Write a Reducer to specify how to transform state through action.

Most tutorials and boilerplates already integrate Redux, but if you don’t have it, you can use React (you probably don’t need to use Redux in your projects). Redux introduces complexity and considerable constraints into the code. If you are learning React, you should consider learning Pure React before you use Redux. You should definitely read Dan Abramov’s “You Probably Don’t Need Redux.”

Some developers have suggested using Mobx instead of Redux. You can think of it as an “automatic Redux,” which makes things easier to use and understand in the first place. If you want to know, you should start with an introduction. You can also read Robin’s Redux vs. MobX comparison. He also provided information on the migration from Redux to MobX. This list is very useful if you want to find other Flux libraries. If you are from the MVC world, then you should read Mikhail Levkovsky’s article “Thinking in Redux (When You Know MVC)”.

Vue can use Redux, but it offers Vuex as its own solution.

The big difference between React and Angular is one-way versus bidirectional binding. Angular’s bidirectional binding changes model state when UI elements (for example, user input) are updated. React only has one way to do it: update the Model and then render UI elements. The Angular approach is cleaner code and easier for developers to implement. The React approach gives a better overview of the data because the data can only flow in one direction (which makes debugging easier).

Both concepts have their advantages and disadvantages. You need to understand these concepts and determine if this will influence your choice of framework. The article “Two-way data binding: Angular 2 and React” and this issue on Stackoverflow provide a good explanation. Here you can find some interactive code examples (from three years ago, only for Angular 1 and React). Finally, Vue supports one-way and bidirectional binding (one-way binding by default).

If you want to read more, here’s a long article on the different types of state and state management in Angular applications (Victor Savkin).

Other programming concepts

Angular includes dependency injection, a pattern in which one object provides a dependency (service) to another object (client). This leads to more flexibility and cleaner code. The article “Understanding dependency Injection” explains this concept in more detail.

The Model-View-Controller pattern (MVC) divides the project into three parts: model, view, and controller. Angular (the framework for the MVC pattern) has out-of-the-box MVC features. React only has V — you have to solve M and C yourself.

Flexibility and streamlining to microservices

You can use React or Vue simply by adding the JavaScript libraries to your source code. But because Angular uses TypeScript, you can’t use Angular in this way.

Now we are moving more to micro services and micro applications. React and Vue You have more control over the size of your application by selecting only what you really need. They provide a more flexible way to move parts of an older application from a single page application (SPA) to a microservice. Angular is best suited for single-page applications (SPAs) because it may be too bloated to be used for microservices.

As Cory House puts it:

JavaScript moves at a fast pace, and React lets you replace a small part of your application with a more usable JS library, rather than expecting your framework to innovate. The idea of small, composable, single-purpose tools will never go out of style.

Some people also use React for non-one-page sites (such as complex forms or wizards). Even Facebook doesn’t use React on the Facebook home page, but on specific pages for specific functions.

Volume and performance

No framework is perfect: The Angular framework is very bloated. The gzip file size is 143K, while Vue is 23K and React is 43K.

React and Vue both use the Virtual DOM to improve performance. If you’re interested, read about the differences between the virtual DOM and DOM and the practical advantages of the virtual DOM in React.js. In addition, one of the authors of the virtual DOM answered performance questions on Stackoverflow.

To check performance, I looked at the best JS framework benchmarks. You can download and run it yourself, or view the interactive results table.

Angular, React, and Vue performance comparison (source file)

Memory allocation (source file)

To summarize: Vue has excellent performance and sophisticated memory allocation techniques. These frameworks are very close if fast or slow (like Inferno). Keep in mind that performance benchmarks should only be a footnote to considerations, not a yardstick.

test

Facebook uses Jest to test its React code. Here’s an article on the comparison between Jest and Mocha – and another on how enzymes and Mocha can be used together. Enzyme is a JavaScript testing tool used by Airbnb (along with Jest, Karma, and other testing frameworks). If you want to learn more, there are some old articles about testing in React (here and here).

Angular 2 uses Jasmine as a testing framework. Eric Elliott complained in an article that Jasmine “has hundreds of ways to test and assert, and needs to read each one carefully to understand what it is doing”. The output is also very bloated and difficult to read. Useful articles about Angular 2 integration with Karma and Mocha. Here’s an old video (from 2015) on Angular 2 testing strategies.

Vue lacks testing guidance, but Evan wrote in his 2017 outlook that the team plans to work on it. They recommend Karma. Vue is used in combination with Jest, and Avoriaz is used as a test tool.

Universal and native apps

Universal apps are bringing applications to the Web, to the desktop, and to the world of native apps as well.

React and Angular support native development. Angular has NativeScript for native apps (supported by Telerik) and an Ionic framework for hybrid development. With React, you can try the React-Native Renderer to build cross-platform iOS and Android apps, or develop native apps with React-Native. Many apps (including Facebook; See more demos) are all built with React-Native.

The Javascript framework renders the page on the client. This is bad for performance, overall user experience, and SEO. Server-side prerendering is a good idea. All three frameworks have libraries to implement server-side rendering. React has next.js, Vue has nuxt.js, and Angular has…… Presents the Universal.

The learning curve

Angular does have a steep learning curve. It’s fully documented, but you can still be scared to tears because it’s easier said than done. Even if you have a deep understanding of Javascript, you need to understand the underlying principles of the framework. Deinitializing the project is magic, it introduces a lot of packages and code. Because there’s a big, pre-existing ecosystem that you need to learn over time, and that’s not good. On the other hand, since a lot of decisions have already been made, it might be good in a particular situation. With React, you may need to make a lot of big decisions about third-party libraries. React alone has 16 different Flux packages to choose from for state management.

Vue is easy to learn. Companies turned to Vue because it seemed easier for junior developers. Here’s an article about why their team moved from Angular to Vue. Another user said his company’s React app was so complex that new developers couldn’t keep up with the code. With Vue, the gap between junior and senior developers is narrowed and they can collaborate more easily, reducing bugs and reducing problem solving time.

Some people say they do things better with React than they do with Vue. If you are an inexperienced Javascript developer – or if you have primarily used jQuery in the past decade, then you should consider using Vue. The shift in thinking was even more pronounced when we moved to React. Vue looks more like simple Javascript, but introduces some new concepts: components, event-driven models, and one-way data flows. This is also a very small part.

Angular and React also have their own implementations. They can limit you, because you need to adjust your approach in order to develop smoothly. This can be a disadvantage because you can’t have it your way and the learning curve is steep. This can also be a benefit because you have to learn the right concepts when you’re learning technology. With Vue, you can do it the old-fashioned way. This may be easy to learn at first, but it can become problematic over time.

It’s a plus that React and Vue have less dark magic when it comes to debugging. Finding bugs is easier because there’s less to look at, and there’s a clearer distinction between your code and those libraries when it comes to stack tracing. People who use React report that they never have to read the library source code. However, when debugging An Angular application, you usually need to debug the internals of Angular to understand the underlying model. On the bright side, starting with Angular 4, error messages should be clearer and more informative.

Underlying principles of Angular, React and Vue

Do you want to read the source code yourself? You want to see what’s really going on?

You may want to check out the Github repository first: React (github.com/facebook/re…) , Angular (github.com/angular/ang…) Vue (github.com/vuejs/vue).

How does the grammar look? ValueCoders compare Angular, React, and Vue syntax.

It’s also easy to view in a production environment — along with the underlying source code. TodoMVC lists dozens of identical Todo applications written in different Javascript frameworks — you can compare Angular, React, and Vue solutions. RealWorld created a RealWorld application (mid-copy), and they already have Angular (4+) and React (with Redux) solutions ready. Development of Vue is in progress.

You can see a lot of real apps. Here’s how React works:

  • React and Redux can be used to manage notes.
  • Sound-redux (Soundcloud client implemented with React and Redux)
  • Brainfock (Project and team management solution with React)
  • React-hn and React-News
  • React-native whatsapp UI and Tutorials
  • Phoenix – Trello
  • Slack-clone and Other Tutorials

Here’s the Angular version of the app:

  • Angular2-hn and HN-NG2 (parodied Hacker News, another great tutorial created by Ashwin Sureshkumar)
  • Redux-and-angular-2 (imitating Twitter)

Here is the Vue version of the app:

  • Vue – HackerNews-2.0 and Loopa News
  • Vue-soundcloud (SoundCloud Demo)

conclusion

Now decide which framework to use

React, Angular, and Vue are all cool, and none is significantly better than the other. Trust your instincts. One last bit of fun cynicism that might help your decision:

The dirty little secret is that most “modern JavaScript development” has nothing to do with actually building websites — it’s building libraries or packages that can be built and used by people who can build frameworks for people writing tutorials and teaching courses. I’m not sure anyone is actually setting up any interactions for real users.

This is hyperbole, of course, but there may be a grain of truth to it. Yes, there is a lot of noise in the Javascript ecosystem. You’ll likely discover plenty of other attractive options during your search — try not to be fooled by the latest, shiniest frame.

What should I choose?

If you work at Google: Angular

If you like TypeScript: Angular (or React)

If you like object-oriented programming (OOP) : Angular

If you need instruction manuals, architecture, and help: Angular

If you work at Facebook: React

If you like flexibility: React

If you like big tech ecosystems: React

If you like to choose between dozens of packages: React

If you like JS and the “everything is Javascript method” : React

If you like really clean code: Vue

If you want the smoothest learning curve: Vue

If you want the most lightweight framework: Vue

If you want to separate concerns in one file: Vue

If you work alone, or have a small team: Vue (or React)

If your app tends to get very big: Angular (or React)

If you want to build an application with React – Native: React

If you want to have lots of developers in the circle: Angular or React

If you work with a designer and need a clean HTML file: Angular or Vue

If you like Vue but fear the limited tech ecosystem: React

If you can’t decide, learn React, then Vue, then Angular.

So, have you made a choice?

Yeeesss, you did it!

Very good! Read about how to get started with Angular, React or Vue development (coming soon, follow me on Twitter for updates).

More resources

  • React JS, Angular, and Vue JS — Quick Start and Comparison (8 hours of introduction and comparison of the three frameworks)
  • Angular React (and Vue) – DEAL Breaker (a short but good comparison to Dominik T)
  • Angular 2 and React — The Ultimate Dance (a good comparison from Eric Elliott)
  • React Angular Ember vs. Vue.js (A comparison of Gokhan Sari’s three frameworks)
  • React vs. Angular (an explicit comparison of the two frameworks)
  • Can Vue beat React? (A good comparison of many code examples)
  • 10 Reasons why I switched from Angular to React (Robin Wieruch another great comparison)
  • All JavaScript frameworks suck (Matt Burgess ‘rant against all major frameworks)

Thank you for your attention. Did I forget something important? Do you have a different opinion? I’m always happy to get feedback.

Follow me on Twitter for updates and more content: @jensneuhaus — 🙌

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, React, front-end, back-end, product, design and other fields. If you want to see more high-quality translation, please continue to pay attention to the Project, official Weibo, Zhihu column.