How to Choose the Right Front-end Framework for Your Company

Key points for front-end frame selection

To choose a suitable enterprise-level front-end framework, considering the scale, flexibility, offline support, server-side rendering and maturity of the framework. Practical experience is crucial, and the authors team used Aurelia and React to build authentication pages for evaluation.

The final choice of React is based mainly on its maturity, community support and ease of recruitment. Angular 2 was eliminated for failing to meet most selection criteria. Vue and Aurelia performed well and met the requirements, but hiring experienced developers was the ultimate decisive factor.

In evaluating the core network platform of Singapore’s employee welfare startup CXA Group, we decided to abandon the aging existing architecture and rebuild the front end from scratch. One of the challenges facing the platform is to create a web application that works well in 12 target countries across Asia by the CXA Group.

Considering the strict deadline for project delivery, I led the evaluation of a range of front-end JavaScript frameworks. There are few opportunities for this level of change in large enterprise projects, so we strive to be as thorough as possible in the evaluation process.

This decision is important: As the business grows exponentially, we cannot afford to make any mistakes. We also have to consider that no one on the team has important experience with any framework we are considering.

Narrow the scope

The new front-end framework seems to be released every day, so we did a meta-analysis to reduce the scope of the framework we considered. Including the frameworks we've heard of or recommended to us, we ended up choosing Angular 2 (heard of), Aurelia (heard of), Vue.js (recommended), and React (recommended).

We measure the ranking of each finalist frame based on the list of key requirements. Some requirements are based on what we know what the project needs, while others look forward to what we want to do.

Flexibility

The framework we chose requires a range of configuration options and is relatively easy to customize. This seems to depend heavily on the architectural philosophy: whether you make architectural decisions on your behalf or be completely open to them.

Angular 2 is located at this end, making every choice for you (state server, router, handler). The advantage of this is that it is easy to get started quickly, and the potential cost is that the modules can't work as you need and have nowhere to go.

React, Vue and Aurelia are located on the other end of the scale, providing the ability to swap components as needed. Aurelia and Vue have configurable boilerplate in their initial setup, which has a key advantage over React.

Like Vue, React itself provides only a small part of what it takes to build something. From there, many decisions have to be made, which is certainly daunting. Since React was first released, various boilerplates (including React Boilerplate and Create React App) have been created to simplify the introduction process.

For our test React project, we decided to abandon any specific boilerplate and dig directly into it. We still installed some, even just for reference code. This approach is certainly difficult, but we learned a lot about each component in the React stack and were more confident in the end result.

Vue and Aurelia won the round with their reduced learning curve and modular structure. React earns some flexibility points even if the initial setup is significantly more difficult.

Offline support

With APIs such as Service Workers, it becomes possible for web applications to run without a real-time or stable internet connection. We don’t have much experience in this regard in our team, and we haven’t delved into it except confirming that all the frameworks assessed provide some form of offline support.

Lightweight

The byte size of the code sent to the client has a great impact on browser performance, including both bandwidth and processor time. With the addition of custom code and third-party libraries, the byte size will only get bigger and bigger, so it is crucial to start small. The CXA Group's target market extends to countries where bandwidth is very valuable, so it is crucial to deliver as little code as possible to customers.

Due to the lack of hard data that reflects production configuration, we looked at the size of the core library to at least get a sense of what we will face. The actual production size is larger than what is shown here.

Vue's developers have done their best to narrow down their core library to an impressive 23 KB. React and Aurelia are in the middle (approximately 42 KB and 64 KB, respectively), while the Angular 2 remains a heavyweight with over 143 KB (including RxJS for state management).

In fact, production versions of Vue, Aurelia and React are very close to each other and can be considered. Angular 2 stands out again in the wrong way.

Server-side rendering

The early single page application (SPA) framework followed the model of sending all code to the client. This means that the initial rendering of the page is left to the client and directly leads to slow loading of the initial page. The concept of server-side rendering in SPA puts the burden of initial rendering on the server, allowing all other content to be delayed after that rendering.

Vue and React use plugins to add server-side rendering. Angular 2 is currently in the process of combining its Universal capabilities into the core, although its capabilities do not match what Vue or React provides. Aurelia marks server-side rendering as a feature in development, but even if it has other performance tips, it lacks an implementation timeline.

Maturity

When choosing a framework for enterprise-level websites, broad community support, stability and recruitment capabilities are very important factors. It is difficult to speculate whether any framework is still supported after three years, but we decided to look at the current health of each framework to make a decision.

Viewing the initial public release date of the framework gives us an idea of ​​the robustness of each framework. Older libraries should have better range of functionality and fewer major bugs, at least in theory.

React won easily, and its first public release was in March 2013. Although Vue was originally released in October 2015, it did not reach its peak until September 2016 release. Aurelia is a newbie and reached version 1.0 in August 2016.

Angular 2 is interesting: It's very different from version 1, and in fact, it was first released in September 2016.

Part of this evaluation involves delving into the development history of each library, not just the release date itself. A long and stable history of development—even in beta—of course, it also boosts confidence.

A variety of team members have been paying attention to the development of candidate frameworks, which gives us at least some understanding of the overall stability of each framework. Angular 2's problematic development history stands out among all the frameworks we review, with significant significant changes and unclear release dates. The framework was eventually released in its final version, but it was really messy in the process.

The ultimate key aspect of maturity (as mentioned above) is the ability to recruit experienced employees. Given our team’s limited experience in the framework of assessment and the radical timeline we face, we want to recruit experienced developers.

However, hiring people with specific experience can be limited, but it does make an impact in larger projects like ours. We eliminated Angular 2 at this stage because it failed to meet many of our previous requirements.

For the remaining frameworks, we first searched for different job search websites and posted separate job advertisements for each framework. We did not find job ads for Aurelia or Vue, nor did we receive any applications. In contrast, we found several React jobs and we received many high-quality applications.

Other functions

The rest of our list—developer tools and unit test support—is available in all the frameworks we view. Debugging is nearly impossible without reliable developer tools, and unit testing is almost essential for enterprise-class applications like ours.

Practical experience

No theory can be compared with practical experience. With this in mind, we chose two frameworks that meet most requirements—Arelia and React—and started coding in parallel. There is no good reason to omit Vue at this stage; we just don't have enough time to evaluate.

The given task is to build an authentication screen that matches the basic functions of our existing applications: log in, call the API, and establish a session. The two team members were assigned a framework separately and were given a calendar week to see what they could build.

Aurelia demo is more complete, partly due to the simpler setup process. After selecting the work done in each section, we do feel like we have a better understanding of what’s inside the React stack. Aurelia still wins easily in terms of ease of initial setup.

We cannot draw any important conclusions based solely on practical coding. Perhaps the only surprise is how similar the code is: This is largely due to the structural changes introduced in ECMAScript 6, both frameworks that use ECMAScript 6.

Result

Ultimately, our choice is React; most importantly, it chooses its maturity, community support and ease of recruitment. While React is the clear winner of our standards, it’s great to see such high-quality frameworks exist in the competitive framework we’re looking at.

Vue and Aurelia proved to be close behind. Vue leads slightly with a more complete feature list, but given our requirements, either one will probably serve well. If we don’t have time pressure, recruiting is less important, and we will expand our hands-on work to include Vue.

Angular 2 failed to meet most of our selection criteria and was disappointing. Despite its many advantages, it obviously doesn't suit us.

After choosing React and starting building our project, it is unlikely that we will do this again soon. As for you, what criteria will you add to our list? What have we missed, we could have done better? I look forward to your comments and suggestions.

This article was peer-reviewed by Stuart Mitchell, Ralph Mason and Vildan Softic. Thanks to all the peer reviewers at SitePoint for getting SitePoint content to its best!

FAQs on choosing the right front-end framework for your company

What key factors should be considered when choosing a front-end framework that suits our company?

A few key factors you should consider when choosing a front-end framework for your company. First, consider project requirements. Different frameworks have different pros and cons, so it is important to choose one that matches your project’s needs. Secondly, consider the learning curve. Some frameworks are easier to learn than others, which can affect development speed. Third, consider community and support. A strong community can provide valuable resources and help when you have problems. Finally, consider the performance and size of the framework. A lightweight, high-performance framework can bring a better user experience.

How does the size of the front-end frame affect its performance?

The size of the front-end frame will seriously affect its performance. Larger frameworks usually come with more features and features, but can also load and run slower. This can lead to a poor user experience, especially on slower internet connections or weaker devices. Smaller frames, on the other hand, are usually faster and more efficient, but they may lack certain features or functionality. Therefore, it is very important to balance the size and performance of the framework according to your project requirements.

What are some popular front-end frameworks and their advantages?

There are many popular front-end frameworks, each with its own advantages. For example, React is known for its virtual DOM and high performance, making it a good choice for complex dynamic web applications. Angular, on the other hand, is a fully functional framework that contains everything you need to build a web application, making it a good choice for large projects. Vue.js is known for its simplicity and ease of use, making it a good choice for new developers in small projects or front-end frameworks.

How important is community support when choosing a front-end framework?

Community support is very important when choosing a front-end framework. A strong community can provide a wealth of resources, including tutorials, documentation, and forums where you can ask questions and get help. Furthermore, large communities often show that the framework is popular and widely used, which can lead to more frequent updates and improvements.

Can I use multiple front-end frameworks in a single project?

While technically multiple front-end frameworks can be used in a single project, this is not usually recommended. Each framework has its own way of doing things, and mixing them can lead to confusion and complexity. Instead, it is usually best to choose the framework that best suits your project’s needs and stick with it.

How does the learning curve of the front-end framework affect project development?

The learning curve of the front-end framework will seriously affect project development. A framework with a steep learning curve may take longer to master, which may delay the start of development. On the other hand, a framework with a gentle learning curve allows you to start development faster. However, ease of learning should not be the only factor in choosing a framework. It is also necessary to consider the functionality of the framework and how well it matches the project requirements.

What is the role of front-end frameworks in web development?

Front-end frameworks play a crucial role in web development. It provides structure for the code to make it easier to maintain and scale. It also provides pre-written code for common tasks, thus speeding up the development process. In addition, front-end frameworks often include tools for testing and debugging, making it easier to ensure the quality of your code.

How often should I update the front-end framework I use?

It is very important to keep the front-end framework up-to-date. Updates usually include bug fixes, performance improvements, and new features. However, updating the framework can also introduce changes that break existing code, so it is important to thoroughly test your application after the update. Generally speaking, you should update your framework immediately after a new stable version is released.

How to make a decision between a monolithic and a micro front-end framework?

The decision between the monolithic and micro front-end framework depends on your project requirements. The monolithic framework provides everything you need in one package, which can simplify development, but may also include unnecessary features. On the other hand, the microframework only provides the basics, allowing you to add only the features you need. This may lead to lighter and more efficient applications, but it may also require more work to set up and maintain.

What resources are there to learn more about front-end frameworks?

There are many resources available to learn more about front-end frameworks. Online tutorials, documents and courses are a great place to start. Websites like Stack Overflow and GitHub can also provide valuable insights and examples. Additionally, many frameworks have their own communities where you can ask questions and learn from other developers.

The above is the detailed content of How to Choose the Right Front-end Framework for Your Company. For more information, please follow other related articles on the PHP Chinese website!