UI Framework Decision
| Status | AGREED |
|---|---|
| Driver | Rahul Singh |
| Approver | Ajit Vijay Daware Naveen Varma Roda User e8ff2 Rahul Singh |
| Outcome | ReactJS to be adopted for all new intitiatives |
Background
We need to select a front-end framework for our SMDS application, and we'll be conducting a comparison between two well-known options: React and Vue. We'll provide an in-depth analysis of each framework to help you determine which one aligns best with our needs.
Overview of Advantages and Limitations
React
Pros:
- Large community and ecosystem with many third-party libraries and tools
- Backed by Facebook
- Flexible and scalable
- Good performance
- Virtual DOM for efficient updates
- Component-based architecture for code reusability and maintainability
Cons:
- The steeper learning curve, especially for beginners
- Can be verbose and require a lot of boilerplate code
- Requires knowledge of JSX
- Lacks built-in state management solutions
Vue
Pros:
- Easy to learn, especially for beginners
- More lightweight and performant than React
- Simple and intuitive syntax
- Built-in state management solution (Vuex)
- Template-based development for easier prototyping and readability
Cons:
- Smaller community and ecosystem than React
- Not as well-known as React
- Finding talent can be an issue
- Less flexible and scalable than React
- Vuex can be complex for large-scale applications
Both Vue and React have strong adoption within Maersk, and our design system has created framework-agnostic components based on web components, making them compatible with a wide range of frameworks and libraries.
Trends :
Google Trends: https://trends.google.com/trends/explore?cat=31&q=Vue.js,React
NPM Downloads: https://npmtrends.com/react-vs-vue
Stackoverflow :
Data flow
The differences between Vue and React also seep into the data flow.
With React, you get unidirectional data flow in the downward direction. So, if you were to view the data structures as a tree, any changes to the child node would not affect the parent node. In simpler words, small-scale data changes would not affect larger data pools. Hence, such changes can be introduced little by little without any extra precautions. However, if you wish to introduce changes to the parent node, it would require a significant change in code while maintaining states.
Vue introduces bidirectional data flow, which goes both upwards and downwards. As such, any changes to the model or view would be reflected at the other end. It accelerates the speed of handling HTML blocks as all data changes get reflected in the UI almost immediately. Even though such an approach is convenient, it does jeopardize code stability.
However, there is no concrete way of stating what kind of data flow is better. Thus, this Vue vs. React comparison would simply be a draw. However, if you were to compare the two based on stability, React would be more stable owing to its one-way data flow and code reusability.
Similarities between Vue Js and React Js
While there are a lot of similarities between Vue Js & React Js, these frameworks also possess a few overlapping qualities. Since we have already covered the Vue vs. React differences in detail, let us also take a look at some of the notable similarities between Vue and React.
- Virtual DOM
- Component-based Arch
- Build tools
- Chrome DevTools
- Use Of JavaScript
Which one should we choose?
It is time to answer the burning question – even though Vue vs & React may yield different results, they are both equally powerful tools for developing web-based solutions. Regardless of what we choose, you cannot go wrong, especially when the development process is in the right hands. We should be going with REACT JS for the following reasons – finding resources is easy and community support is high based on the above stats.