- Do we already have produc
- Are we starting from scratch
If we have product
If we are starting from scratch
If we are starting from scratch then we need to make a clear decision as to whether we need a single-page-application (SPA) or if we would rather take a multi-page approach. We need to see how many developers we have that know desired framework and what is the best fit for our product.
General technical details
Before we pick any framework there is a few technical things that we need to know about them:
- Is it a good fit for our product ?
- Is it open source ?
- If it is open source, how is the community ?
- Does the framework have long term is support ?
- Framework performance
- Learning curve
- Number and quality of web components
If we analyze these things carefully then we can reduce our choice to three strongest frameworks: React, Angular, Vue. All of the three frameworks are open source frameworks and their source code can be checked out on github.
React vs Angular vs Vue
If we look at the github repositories of those three frameworks we can see that React is the most popular one and has the biggest community support. We must also have in mind that React is oldest framework in this list(we consider only angular 2+).
There is a big difference in size between the three frameworks: Angular is 143k, React is 43k and Vue is 23k. The difference in size is because Angular is framework and React and Vue are libraries.
Source: Stefankrause All these frameworks are pretty close to each other but Vue has great performance and the deepest memory allocation.
Components are very important part of every framework, it’s important that we have all kind of components like datepicker, multiselectlist, etc… The more components a framework has, we are going to lose less time developing something that other frameworks might have. So before choosing any framework check the components market for your product and check what you need for your product. All three frameworks are component based frameworks so in this moment if we compare them, React is in best position it has the biggest support with all kind of components. Vue has the least amount of components.
Typescript vs ES6
Templates - JSX or HTML
Application’s heart is its state, so every application has a state and if we don’t manage the state properly we going to get into trouble very quickly. As the application is grows the state gets more complex and hard to maintain, track, debug.. So we need to pick some tool, library or to create our own state management tool. Most popular libraries on market:
- Single source of truth
- State is read only
- Changes are made with pure functions
Redux is library that is often combined with React. State of the complete application is stored in an object tree within the single store. This helps with debugging the application and some functionalities are easier to implement. The state is read-only and can only be changed via actions to avoid race conditions. Reducers are written to specify how the states can be transformed by actions. Vue can make use of Redux but it offers Vuex as its own solution. A big difference between React and Angular is one-way vs two-way binding. Angular’s two-way-binding changes the model state when the UI element is updated. React only goes one way: it updates the model first and then it renders the UI element. Angular’s method is cleaner but React’s way results in a better data overview, because the data only flows in one direction.
So what to choose?
- If you love TypeScript: Angular
- If you love object oriented programming: Angular
- If you need structure: Angular
- If you like freedom: React
- If you like big ecosystem: React
- If you like style, HTML and js in one file: Vue
- If you want the easiest learning curve: Vue
- If you want the most lightweight framework: Vue
- If you are working alone or have a small team: Vue or React
- If your app tends to get really large: Angular or React
- If you want to use source code for mobile app: Angular or React