History Lesson AngularJS was started as a side project at Google around 2009. Later it was open-sourced and v1.0 was officially released in 2011.
React was developed at Facebook. It was open-sourced at JSConf US in May 2013.
Vue was created by Evan You after working for Google using AngularJS in a number of projects. He wanted to extract what he really liked about AngularJS and build something lightweight. Vue was originally released in February 2014.
Angular 2.0 was announced at the ng-Europe conference in September 2014. The drastic changes in the 2.0 version created considerable controversy among developers. The final version was released in September 2016.
Side note: AngularJS and Angular 2.0, which was later simply called Angular are two different frameworks. The naming really caused a lot of confusion. I believe that the Angular team would have been better off choosing a different name.
In December 2016 Angular 4 was announced, skipping version 3 to avoid a confusion due to the misalignment of the router package's version, which was already distributed as v3.3.0. The final version was released in March 2017.
Nowadays, developers are looking for smaller, faster, and simpler technologies. All three frameworks (Angular, React and Vue) are doing lots of work in this direction. You can expect pretty good performance from these frameworks. Performance benchmarks show similar performance.
In April 2017, Facebook announced React Fiber, a new core algorithm of React. It was released in September 2017.
Angular 5 was released in November 2017. Key improvements in Angular 5 included support for progressive web apps, and a build optimizer.
Google pledged to do twice-a-year upgrades. Angular 6 was released in April 2018. Angular 7 will be released September/October 2018.
In the beginning of 2018, a schedule was announced for phasing-out AngularJS: after releasing 1.7.0, the active development on AngularJS will continue until the end of June 2018. Afterwards, 1.7 will be supported till June, 2021 as long-term support.
The bottom line is that these three frameworks, React, Vue and Angular, are quite mature. And it is likely they’ll be around for a while.
Key Concepts React use the Virtual DOM pattern. React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.
React is all about components. Your React codebase is basically just one large pile of big components that call smaller components. Props are how components talk to each other; they are the data, which is passed to the child component from the parent component. It’s important to note that React’s data flow is unidirectional: data can only go from parent components to their children, not the other way around.
To build an Angular application you define a set of components for every UI element, screen, and route. An application will always have a root component that contains all other components. Components have well-defined inputs and outputs, and lifecycle.
The idea behind dependency injection is that if you have a component that depends on a service, you do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. This allows you to depend on interfaces, not concrete types. This results in more decoupled code and improves testability.
Property bindings makes Angular applications interactive.
Vue also makes use of the Virtual DOM like React.
In Vue.js the state of the DOM is just a reflection of the data state. You connect the two together by creating "ViewModel" objects. When you change the data, the DOM updates automatically.
You create small, decoupled units so that they are easier to understand and maintain. In Vue the components are ViewModels with pre-defined behaviours. The UI is a tree of components.
In Vue the HTML, JS and CSS for each component live in the same file. Some hate the single-file components, some people love them. I personally think that they are very handy and can make you more productive as it reduces context switch.
Ecosystems This table that shows the libraries you may be familiar with in React or Angular or Vue alongside their equivalent in the other frameworks:
It is important to note here that Angular is somewhat more prescriptive. Some developers do not like this and prefer to have freedom choosing the tools they use. It is more of a personal preference.
TodoMVC is supposed to help you select an MV* framework. But the Todo app is way too simple.
If you are new to web development and you are learning a new framework, the TodoMVC is probably a good start.
But if you are experienced and would like to build real-world, more complex applications there are better alternatives.
Some better alternatives are RealWorld and HNPWA.
Lesson #1 The Todo App is too simple. Use RealWorld or HNPWA to see what a real-world application would look like. Play with them, build on them and learn.
Lesson #2 Documentation is very important. Good documentation helps you to get started quickly. Vue really excels at documentation. This is one of the reasons why it is so easy to get started with Vue.
React and Angular also have good documentation. Still not as good as Vue in my opinion.
The main problem with the Angular documentation is that often you will stumble upon documentation about AngularJS instead and it can be very confusing and frustrating. That is why I said earlier that the Angular team would have been better off if they had chosen a different name for Angular.
Lesson #3 Community is important. When documentation fails, you learn that community is also very important. You want to be sure that it will be easy to get help if you get stuck and cannot find information in the documentation. You want to choose a framework whose corresponding communities are extensive and helpful; communities where you can discuss best practices and get solid advice.
Ultimately, you need to answer the following question: *Would it be easy to hire more developers who are experts or willing to work with and learn this framework?
**How high is the “Bus Factor?” The “Bus Factor” is a number equal to the number of team members who, if run over by a bus, would adversely affect a project. To put it more simply: Can other people continue working on your projects if you are hit by a bus tomorrow?
Remember that talent is hard to hire. You need to know how easy it is to find developers for each of the frameworks. Also, what does the learning curve look like for each framework? Again, I think that Vue really excels here. It has the lowest learning curve of the three.
What does the product roadmap look like? Is it just a prototype? Choose whatever, learn something new.
Would it have a single function that would never change? Do you have to ship it quickly? Choose whatever you are most familiar with.
Is your product business critical? Probably it is a good decision to be more conservative in your choice.
Is the product going to evolve, have new features, etc.? It should be scalable in that case.
Don’t ask what the best framework is, ask what the most suitable framework for your product and your team is.
* Work with open minds like Lora. Have a look at the Zalando jobs site.*