When I first learned about the front end, SPAs (single-page applications) were not as popular as they are today, and there were few frameworks to choose from. Now, open any website or application related to the technology and simply read a few pages to see a wealth of articles related to front-end frameworks Angular, React, and Vue.

When you’re a novice programmer, you probably don’t think about technology selection, because you don’t need to do technology selection and architecture change, and you don’t feel like the framework is rich and relevant to you, just stick with the current technology stack. When it comes time to really choose the technology and change the architecture, it’s still very easy to do it based on the prior knowledge.

But when it comes time to consider the selection, you will find that there are all kinds of problems. If you choose framework A, people who have used framework B may be A little upset. If you choose frame B, the people who use frame A will be A little upset. Choose an outdated framework and most people will resent it. A series of factors considered in the selection of technology are shown in the figure.

Influencing factors of technology selection

When selecting a front-end framework, we also consider the following factors:

  • Does the framework meet the needs of most applications? If not, which framework should you use?
  • Does the framework have a rich component library? If not, does our team and organization have the ability to develop independently?
  • What about community support for the framework? Can you find someone to answer your questions quickly and easily?
  • What are the replacement costs of frameworks? If our new project is going to use the B framework, what additional things do we need to learn?

Each question is not a simple, isolated one, and they are worth exploring in depth.

If we need to choose a new framework, and you are the technical lead on the front end, we need to evaluate which framework is better for us.

I’m afraid we can’t solve this problem in a word or a few words. We need to organize discussions, compare and share various frameworks and so on. Matters to be discussed are as follows:

  • Can team members quickly grasp the framework? The framework has its own design philosophy, and it probably has a more appropriate user base. Angular, with its overall architectural ideas of dependency injection and strong typing, is more suitable for developers with back-end experience. For example, Vue framework is easier to use, suitable for beginners to carry out Web development. For an inexperienced person, using the Angular framework directly can take a long time to learn.

  • Is the framework ecologically rich? Do we have the functional components we need? One factor to consider in technology selection is the ecosystem, that is, whether there are corresponding components to choose from and whether the library is rich enough.

  • How well do different frameworks support different browsers? Because of the different implementation mechanisms, the framework will have certain requirements for the browser.

  • How costly and difficult is the framework to maintain? The maintenance difficulty of a project is directly proportional to the amount of time and code it takes, i.e. the longer the time and the more code it takes, the higher the maintenance cost. The larger the project, the more difficult it is to maintain; For small projects, that’s not the case

The problem. Therefore, when selecting a framework, you can consider the scale of the project. If a project is likely to be larger, a large and comprehensive framework will be easier to maintain.

  • Can existing applications be migrated with minimal cost? When we choose the A framework, the code we write later is often difficult to migrate to the B framework. For example, components written with React cannot be used directly in Angular or Vue. Although cross-framework usage is becoming more promising as Web Components technology evolves, it also means a lot of adaptation.

In addition, there is a scenario where a framework’s API is constantly changing and downward incompatible, resulting in additional maintenance costs. A typical example is React Native. In the process of developing an application using React Native, the version was updated in the middle of the process. Due to the API changes, third-party components were affected and several days of upgrade costs were incurred. We need to keep track of these changes throughout the life cycle of the application.

Big and complete frame or small and beautiful

Large and complete, as the name implies, the framework is large, functional and complete, out of the box. It provides developers with all the elements of a complete application, as opposed to a small and beautiful framework. Therefore, while providing a large number of functions, the volume is also relatively large, and the need to understand more knowledge. In addition, the large and comprehensive framework has centralized and uniform documentation that provides programming and architecture-related specifications. The obvious problem with this kind of framework is that it is expensive to get started and the framework is restrictive. Angular, for example, is a large, comprehensive framework.

Small but beautiful frame is relatively high flexibility, can decide the system is relatively high. We can find the right components to use on our system to make it more flexible. Even if a component doesn’t work on a particular day, you can change it or rewrite it. Even if the core front-end framework has problems, such as copyright issues, it can be switched to a suitable replacement framework. Corresponding component parts can also be reused rather than rewritten. However, for a large and comprehensive framework, it is relatively difficult to try to use a new framework once problems occur.

Now that we’ve looked at big and small, let’s take a look at Angular, React, and Vue, as well as some of the scenarios I think are appropriate.

React

React was one of the first popular front-end frameworks to use VirtualDOM. Traditional DOM operations operate directly on the DOM, and when you need to change the values in a series of elements, you operate directly on the DOM. VirtualDOM compares (DIFF) the DOM that needs to be modified to select only the parts that need to be modified. Therefore, VirtualDOM is not an advantage for applications that do not require extensive DOM modification. In addition to improving application performance by eliminating the need for direct manipulation of the DOM when writing applications, another important idea of React is componentalization, where each component in U1 is individually encapsulated. And because these components are HTML independent, they can be run not only in a browser, but as components of a native application. Components communicate with each other through properties and events. React also introduced the JSX template, which means writing templates in JS and using ES6.

Unfortunately, as we explained in Section 6.4.2, React is just a View layer that was created to optimize DOM operations. To complete a complete application, we also need routing libraries, unidirectional flow libraries, webAPI call libraries, test libraries, dependency management libraries, etc. It’s a nightmare. So in order to build a complete React project, we needed to do a lot of extra work.

There’s another important reason to choose React over other frameworks: The idea of React isn’t limited to the front end. There are React Native, React VR, etc., which can run the React View layer on different platforms. Using React Native, which has a similar syntax to React, we can write Native mobile applications. In addition, we can share much of our business logic between our Web application and iOS and Android applications.

Angular

Angular is a large, comprehensive framework that provides all the elements needed to develop a complete application. At the same time, Google, the developer behind the Angular framework, has a Material Design Ul library. We combine the Angular framework and UI libraries to do most of the front-end development.

Angular also officially provides scaffolding for developing applications, including testing, running services, packaging, and so on. Front-end developers can quickly generate Angular applications using the official command line tool: ngNewmy-dream-app. This official generated project lets you run and build the Angular framework without having to find a proper scaffolding like React or Vue.

For the first two or three years, Angular was used by many enterprises as a front-end framework for projects, mainly because of the normative nature of Angular. Angular provides not only the development elements needed for a front-end framework, but also a set of development specifications and guidelines. Some of these specifications are written in official documentation, some exist in the form of configuration code in projects, and some exist in CLI (command line tools). These strict regulations are more suitable for large-scale operations of large companies, especially traditional companies in non-Internet industries such as finance and insurance. Angular’s large and comprehensive architecture facilitates project management and reduces risk without spending too much time developing specifications. In particular, backend department managers are more comfortable with the Angular framework.

Vue

Vue is a great choice for teams without Angular and React experience. Vue borrows some ideas from Angular and React to develop an easy-to-use framework. It’s not like Angular, which requires a lot of basic knowledge, or React, which requires learning JSX and its associated syntax while using VirtualDOM.

Of course, using Vue also requires learning the template-based syntax. There’s a big difference, but it’s clear that using React requires rewriting the business logic, not embedding it. It’s this difference that makes Vue more advantageous for traditional multi-page applications. We can embed Vue in an application, whereas using React or Angular basically means rewriting the entire application. One advantage Vue has over the Angular and React frameworks is that for traditional multi-page applications, vue.min.js is available. Just take the code base and publish it, no packaging required. For projects that need to migrate the front end framework, it can be done in an asymptotic fashion and developed as a single-page application framework as it matures.

You Yuxi, the developer of Vue, is Chinese. The framework itself provides a large number of rich Chinese documents, which also brings great advantages for the development and use of Vue. The Vue framework is suitable for applications that need to get up and running quickly, as well as migrating traditional multi-faceted applications. Vue framework, which can meet the needs of quick launch, but also can evolve into a single page application in the later stage.

Selection of summary

With so many frameworks, how do you choose? If it’s a medium – to large-sized enterprise application, you’ll basically use Angular or React. Uniform specifications and design patterns can replace countless communication costs for large teams without spending a lot of time debating which base routes to use, state managers, and so on. Like Conway’s law, it is also more consistent with the architectural design within large organizations.

React Native is a better choice for mobile application projects at the moment. For a small to medium sized project, if the team has a lot of new people and the foundation is weak, then Vue is suitable for developers. It can also use the Weex of Vue syntax to develop mobile applications, although the Weex framework is not as widely adopted as React Native.