Whether you’re a novice or an experienced web application developer, you’re almost certainly going to have to make a choice between Angular or React at some point. To do that, you merely need to answer a few simple questions: “Is it a good tool?”, “Can it do what I need it do do?”, and “Is it easy or difficult to learn?”. The answer to the two first questions is likely an emphatic “YES” on both counts. The third question, however, is less clear-cut.
A Little History
All JS web frameworks come with their own unique set of advantages and features. However, they do help develop efficient code that’s easy to maintain. They also should provide ways to develop your web app with less development, debugging and testing time.
Here are a few specific benefits that you can expect from any JS Framework:
- Maximize Productivity: The biggest advantage of a framework is to help you save time and maximize productivity. The idea is that it helps with boilerplate tasks so that you have more time to focus on what’s important to you and your users. Once you know how to accomplish a certain task, you can then you adapt and enhance it for future requirements.
- Shorter Development Time: As a result of point 2 above, a JS framework can help you accelerate product development time. Hence, the market-time for launching the product is invariably accelerated using a JS application framework.
Angular provides a lot of the features required for web application development out of the box. Some of the standard features include:
- dependency injection
- templates, based on an extended version of HTML
- class-based components with lifecycle hooks
- routing, provided by @angular/router
- Ajax requests using @angular/common/http
- forms using @angular/forms
- component CSS encapsulation
- protection against Cross Site Scripting (XSS) attacks
- code splitting and lazy loading
- test runner, framework, and utilities for unit-testing
Angular is what you’d call an “opinionated” framework, so many of the above features are baked right into the core of the framework, so you don’t have a choice as to whether or not to use them. Hence, developers need to be familiar with concepts such as dependency injection to build even a tiny application. Other features such as the HTTP client or forms are optional and can be incorporated on an as-needed basis.
React’s approach is less prescriptive and more minimalist. Out of the box, React provides the following features:
- class-based components with lifecycle hooks or simpler functional components
- state management using setState() and hooks.
- XSS protection
- code splitting and lazy loading
- utilities for unit-testing components
As you can see, React does not provide any dependency injection, routing, HTTP call, or advanced form handling functionality. For those, you are expected to choose whatever additional libraries to add based on your needs. Whether that’s a good or a bad thing depends largely on how experienced you are with these technologies. Some of the popular libraries that are often coupled with React are:
- React-router for routing
- Fetch (or axios) for HTTP requests
- a wide variety of techniques for CSS encapsulation
- Enzyme or React Testing Library for additional unit-testing utilities
Teams who have worked with React have reported that finding the freedom of choosing their own libraries is liberating. Moreover, it gives them the ability to tailor their stack to the particular requirements of each project, without adding a significant learning curve to getting the new libraries integrated.
It may seem like React has a slight edge over Angular at this point, which is strange coming from someone who works with Angular! Of course, there is no “better” when choosing a JS Framework. It’s really a matter of weighing all of the pros and cons and coming up with the best decision for you and your team.