What is Angular? Angular vs React Which one to use
To save you time, let me tell you something in advance: this post will not give a clear answer about which structure is better. I cannot tell you this, because the answer depends on a number of factors that make a particular technology more or less suitable for your environment and use case.
Since we cannot directly answer this question, we will try to do something else. We will compare Angular (2+, not the old AngularJS) and React to demonstrate how you can approach the problem of comparing any two structures in a structured manner of your choice and adapt it to your environment.
Where to begin?
Before choosing any tool, you need to answer two simple questions: “Is this a good tool as such?” And “Will it work well for my project?”. Well, the questions may not be so simple, so we will try to break them down into smaller ones.
- How mature is she and who is behind her?
- What features does it have?
- What architecture, development paradigms, and patterns does it use?
- What is the ecosystem around it?
- Will my colleagues and I be able to easily learn this tool?
- Does it fit well with my project?
- What is the developer experience?
Using this set of questions, you can begin your assessment of any instrument, and we will also base our comparison with these questions.
There is one more thing that we have to take into account. Strictly speaking, comparing Angular and React is not entirely correct, since Angular is a full-featured framework, and React is only a component library of the user interface. To figure this out, we’ll talk about React in combination with some of the libraries that are often used with it.
An important role in being a qualified developer is to maintain a balance between established, time-tested approaches and to evaluate new technologies with advanced technologies. As a rule, you should be careful when using tools that are not yet mature due to certain risks:
- The tool may be faulty and unstable.
- It may no longer develop.
- It may not be a good base for learning or community if you need help.
But React, and Angular – it definitely does not threaten.
React is designed and maintained by Facebook and is used in their own products, including Instagram and WhatsApp. It takes about three and a half years, so it is not entirely new. It is also one of the most popular projects on GitHub with about 67,000 stars at the time of writing. Sounds good.
Angular (version 2 and above) was smaller than React, but if you read the stories of your predecessor AngularJS, the picture is aligned. It is supported by Google and used in AdWords and Google Fiber. Since AdWords is one of the key projects in Google, it is clear that they made a big bet on it and are unlikely to disappear anytime soon.
As I mentioned earlier, Angular has more features than React. It can be both good and bad, depending on how you look at it.
Both structures share some key functions: components, data binding, and rendering.
Angular provides many of the features required for a modern web application. Some of the standard features are:
- Templates based on the extended version of HTML;
- Routing provided by @ angular / router;
- Ajax requests using @ angular / http;
- @ Corner / forms for building forms;
- Component CSS encapsulation;
- XSS protection;
- Utilities for unit testing components.
Ease of use of all these functions is very convenient when you do not want to spend time collecting libraries by yourself. However, it also means that you are stuck with some of them, even if you don’t need them. And their replacement usually requires additional efforts. For example, we believe that for small projects that have a DI system, more overhead costs are created than benefits, since they can be effectively replaced by imports.
With React, you start with a more minimal approach. If we only look at React, this is what we have:
- Lack of dependency injection;
- XSS protection;
Utilities for unit testing components.
This means that you have the freedom to choose additional libraries to add depending on your needs. The bad thing is that you actually have to choose this choice yourself. Some of the popular libraries that are often used with React are:
- React-router for routing.
- Fetch (or axios) for HTTP requests;
- A wide range of CSS encapsulation methods;
- Enzyme for additional module testing utilities.
This gives us the freedom to choose our own libraries. It also gives us the opportunity to adapt our stack to the specific requirements of each project.
Languages, Paradigms, and Patterns
Stepping back from the characteristics of each infrastructure, let’s see which higher level concepts are popular in both environments.
When considering React: JSX, Flow, and Redux, several important points arise.
Unlike TypeScript, which has a similar purpose, you do not need to switch to a new language and comment on the code for type checking. In the stream, type annotations are optional and can be used to provide additional hints. This makes Flow a good option if you want to use static code analysis, but would like to avoid having to rewrite existing code.
Redux is a library that helps you precisely manage state changes. She was inspired by Flux, but with some simplifications. The main idea of Redux is that the entire state of the application is represented by a single object, which is mutated by functions called reduction. Redusters themselves are pure functions and are implemented separately from components. This allows for better separation of problems and testability.
If you are working on a simple project, then introducing Redux can be difficult, but for medium and large-scale projects it is a good choice. The library has become so popular that there are projects that implement it in Angular.
All three functions can significantly improve your developer experience: JSX and Flow allow you to quickly find places with potential errors, and Redux will help you achieve a clear structure for your project.
Angular has some interesting things up its sleeve, namely TypeScript and RxJS.
RxJS is a reactive programming library that allows you to manage asynchronous operations and events more flexible. This is a combination of Observer and Iterator patterns mixed with functional programming. RxJS allows you to process something like a continuous stream of values and perform various operations on it, such as display, filtering, splitting, or merging.
The library was adopted by Angular in their HTTP module, as well as for internal use. When you execute an HTTP request, it returns Observable instead of the usual Promise. Although this library is extremely powerful, it is also quite complex. To cope with this, you need to know about hundreds of methods and operators. Yes, it seems that this is too much to make HTTP requests!
RxJS is useful when you work a lot with continuous data streams, such as web sockets, but it seems too complicated for anything else. Anyway, when working with Angular, you need to study it, at least at a basic level.
We found that TypeScript is an excellent tool for improving project performance, especially with a large code base or a complex structure/business logic. Code written in TypeScript is more visual and comprehensible. Since TypeScript has been adopted by Angular, we hope to see even more projects using it. RxJS, on the other hand, only seems useful in certain cases and should be taken with caution. Otherwise, it can lead to undesirable complexity of your project.
The great thing about the open source framework is the number of tools created around them. Sometimes these tools are even more useful than the infrastructure itself. Let’s look at some of the most popular tools and libraries associated with each infrastructure.
Angular command line interface
A popular trend in modern frameworks is to use the CLI tool that helps you load your project without having to customize the build yourself. Angular has an Angular CLI for this. It allows you to create and run a project with just a few commands. All the scripts responsible for creating the application, running the development server and running the tests are hidden from you in node_modules. You can also use it to generate new code during development.
Ionic 2 is a new version of the popular platform for developing hybrid mobile applications. It provides the Cordova container, which is perfectly integrated with Angular 2 and a rather nice library of components. Using it, you can easily customize and create a mobile application. If you prefer a hybrid application over the native, this is a good choice.
Components Material design
If you are a fan of Material design, you will be happy to know that there is a Material component library for Angular. At present, it is still at an early stage and a little damp, but recently it received a lot of contributions, so we hope that the situation will improve in the near future.
Angular universal is a project that can be used to create projects with server-side rendering support.
@ Ngrx / store
@ Ngrx / store is a state management library for Angular, created by Redux, based on the state mutated by pure reducers. Its integration with RxJS allows you to use a change detection strategy to improve performance.
There are many other libraries and tools available on the Awesome Angular list.
Create-reactive-app is a CLI utility for React that allows you to quickly create new projects. Like Angular CLI, it allows you to create a new project, run the server for development. He uses Jest, a relatively new test project from Facebook, for unit testing, which has some nice features. It also supports flexible application profiling using variables, backend proxies for local development, threads, and other functions. Read this brief introduction to the create-reactive-app for more information.
React Native is a platform developed by Facebook for creating your own mobile applications using React. Unlike Ionic, which produces a hybrid application, React Native creates a truly proprietary interface. It provides a set of standard React components tied to their native counterparts. It also allows you to create your own components and link them to native code written in Objective-C, Java or Swift.
For React, there is also a Material UI component library. Compared to the Angular version, this version is more mature and has a wider range of components.
Next.js is a platform for server-side rendering of React applications. It provides a flexible way to fully or partially visualize the application on the server, return the result to the client and continue working in the browser. He tries to simplify the creation of universal applications as much as possible so that the setup is as simple as possible, with a minimum of new primitives and requirements for the structure of your project.
MobX is an alternative library for managing application state. Instead of storing a state in a single unchanged storage, like Redux, this prompts you to store only the minimum required state and extract the remainder from it. It provides a set of decorators to define observables and observers and introduce reactive logic into your state.
Storybook is a component development environment for React. This allows you to quickly set up a separate application to showcase your components. In addition, it provides many add-ons for documenting, developing, testing, and designing your components. We have found that it is extremely useful to be able to develop components independently of the rest of the application.
There are many other libraries and tools available in the Awesome React list.
Education and development
An important criterion for choosing a new technology is how easy it is to master. Of course, the answer depends on a wide range of factors, such as your previous experience and general familiarity with the relevant concepts and patterns. However, we can still try to estimate the number of new things that you will need to learn in order to begin working with this structure. Now, if we assume that you are already familiar with ES6 +, let’s see what else you need to know.
The official guide is a great place to start learning React. After that check out the React Router. React Router v4 may be a bit complicated and unconventional, but there’s nothing to worry about. Using Redux will require a paradigm shift in order to learn how to perform familiar tasks in accordance with library recommendations. The free course Getting Started with Redux can quickly introduce you to basic concepts. Depending on the size and complexity of your project, you need to find and study some additional libraries, and this may be the tricky part, but after that everything should be clear.
We were genuinely surprised at how easy it was to start using React. Even people with a basic background of development and limited experience in the development of interfaces were able to quickly understand. Error messages that you may encounter on this path are usually clear and provide explanations on how to solve the underlying problem. The most difficult part may be finding the right libraries for all the necessary features, but structuring and developing the application is surprisingly simple.
The framework itself is rich in topics for study, starting with basic modules, embedding dependencies, decorators, components, services, channels, patterns, and directives, to more advanced topics such as change detection, zones, compiling AoT and Rx .js. All this is described in the documentation. Rx.js is a difficult topic in itself and is described in detail on the official website. Although relatively simple to use at a basic level, it becomes more difficult when moving to advanced topics.
In general, we noticed that the entrance barrier for Angular is higher than for React. A huge number of new concepts is misleading beginners. You need to keep in mind things like Rx.js subscription management, change detection performance and bananas in the box (yes, this is real advice from the documentation). We often encountered error messages that were too mysterious to understand, so we had to search for them in Google and pray for exact coincidence.
It may seem that we stand for React here, and we are definitely doing it.
You may have already noticed that each framework has its own set of features, both with their good and bad sides. But this analysis was done outside of any specific context and, therefore, does not provide an answer to the question of what you should choose. To make a decision on this issue, you will need to consider it from the point of view of your project. This is what you need to do on your own.
First, try answering these questions about your project, and when you do, compare the answers with what you learned about the two frameworks. This list may not be complete, but it should be enough to get started:
- How big is the project?
- How long will it be maintained?
- Are all functions clearly defined in advance or should you be flexible?
- If all functions are already defined, what features do you need?
- Are the domain model and business logic complex?
- What platforms are you targeting? Web, mobile?
- Do you need server-side rendering? Is SEO important?
- Will you handle a lot of event streams in real time?
- How big is your team?
- How experienced is your developer?
- Are there ready-made libraries of components that you would like to use?
If you are starting a large project, and you would like to minimize the risk of making the wrong choice, first think about creating a product that supports the concept. Select some key features of the projects and try to implement them using one of the frameworks. It usually doesn’t take long to figure out how to get started, it will give you a valuable personal experience with the infrastructure and allow you to confirm the basic technical requirements. If you are satisfied with the results, you can continue full-scale development.
The basis for the right start
As soon as you choose a structure for a project, you will be tempted to use the same technology stack for your future projects. Despite the fact that it is a good idea to maintain the constancy of your technological stack, it’s not blind to use the same approach every time. Before starting a new project, take a minute to answer the same questions again. Perhaps for the next project, the answers will be different. In addition, if you have the opportunity to make a small project with an unapproved TK, do it. Such experiments will provide you with invaluable experience. Keep your mind open and learn from your mistakes. At some point, a certain technology will simply be natural and correct.