Apart from React’s popularity in recent years, Angular is used by large organizations and, after some time without new big updates, the framework is getting some momentum with new and long awaited features by the community. With that in mind, this article intends to be an “101 Angular for React Developers”.
For developers who work with React on a daily basis, they are well aware that they need to take responsibility for choosing the libraries they will use in their projects, as React does not have the “batteries included” (eg.: they need to choose libraries for routing, tooling, data fetching, testing, and so on). Here Angular shines in terms of Developer Experience, giving you everything you need to start a project without the hassle of the decision and providing a comprehensive toolkit. Angular, however, may present some challenges, such as importing a component for use in an HTML template (Is it a standalone component? Where do I import it?) or even change the underlying tool (e.g. Webpack, Vite).
Angular is known for having two types of implementations: Reactivity and Imperative way. While most of the developers prefer and use Angular in the imperative way, the community has pushed to use reactivity powered by RxJS. The ecosystem evolved in recent years and it is a perfect fit when you have to deal with complex or multiple http calls. In the imperative way you would need to control the flow of information and do the changes according to the result you get from your function or promise you are dealing with. On the other hand, using RxJS you would operate with streams, where you always receive a response (either error or not) and your stream would handle it. The magic here is that you can combine those streams, giving you the power to watch many streams without needing to handle their changes manually.
In React your component is rerendered and everything is JavaScript, so you just use the values you have in your component in the return of your function and it renders in the HTML for you. But in Angular we have the separation of concerns, where you have the HTML part, the CSS part and the Component/JavaScript part (generally in different files). To bind the values from JavaScript to HTML and vice versa, we use the Data Binding. You can find information on how to bind values in the Angular Docs, but here is a quick tip to getting started:
One of the features in recent updates of Angular is to enable the developer to create components like in React, where the dependencies are handled by the component instead of using global dependencies as it used to. This improves performance by enabling lazy loading, tree shaking and somewhat improves the unit testing.
You can even use the Angular CLI to create your component: ng g c --standalone myComponent (which is the same as ng generate component --standalone myComponent).
This feature is the most recent and got significant attention from the community. It was inspired by SolidJS and improves the performance of the application made in Angular, drastically improving the performance of the rendering algorithm and even getting faster than React when rendering the interface.
React has been dominant in recent years, and also has more projects and jobs for developers in the market, but it is always good to keep an eye on what is new in our field and understand the path the technology is taking. With so much happening in the world of JavaScript frameworks and libraries, we can be sure that the competition will drive us to new concepts and improve how we develop. As I heard once: “Always bet on JavaScript”.
