With the emergence of large web platforms, the requirements for dynamic web applications have increased rapidly. As a result, the two "big players" Google and Facebook have each developed (or sponsored) Angular and React, their own JavaScript-based frameworks to further develop their user interfaces dynamically.
The topic of "Angular vs React" has been discussed in detail many times in forums, on websites and also in the analog world. Many of these articles compare the advantages and disadvantages. However, this doesn't really help if someone wants to start a new project and is looking for appropriate tools. It would be better to simply look at an example and form your own opinion. Because the decision for Angular or React has an impact on the further development of the project. Since both solutions are from the big players Google and Facebook, it can be assumed that both options represent a mature solution. For this reason, I will create two small projects in this article, the first with Angular and the second with React, to show how certain concepts are handled. I assume that you already have some prior knowledge of Angular and React.
An example app that makes the decision for Angular or React easier
The sample app will be a TODO list. We will display the ten most recent post titles from corresponding subreddits. This will allow us to easily visualize how the specific mechanisms are handled. The source code can be found on GitHub to find the source code.
First, the boilerplate code is generated. Both frameworks, Angular and React, offer convenient tools to do this quickly. Use the following commands:
React:
npxcreate-react-app react-todo
Angular:
ngnew angular-todo
A few minutes later, we have created initial states for both apps. These can be tested to make sure that everything went well.
React:
npmstart
Angular:
ngserve
If everything has worked, we should already be able to see both apps. These are located at the following URLS: localhost:3000 for React and localhost:4200 for Angular. Now we just need to clean up the placeholder texts and then we can get started.
First we generate components for our TODO list.
Angular:
ngg component todo-list
In React, we unfortunately have no way to automatically generate a component "out of the box". We have to create the files manually or get an npm package to do it for us. I have created a tool that I use in this case.
React:
rctg TodoList/TodoList
Although we haven't done much, we can already see a big difference:
In React, our HTML template lives in the component itself and in Angular it is usually integrated as a separate .html file. The other difference is how you handle the styles. Angular also has a separate styling file for this. React, like Angular, allows us to save the html template and the styles separately, but opinions differ on this topic.
What possibilities do the frameworks offer me?
There are many other options that can be used. The choice is up to us. This is a very important feature of React: for everything we want to do, there are at least a few options. Whether it is an advantage or disadvantage is up to you to decide. It is also important to consider that Angular styles are modularized by default, i.e. the CSS classes are only assigned to their own components. This means we don't have to worry about avoiding collisions ourselves. With React, you have to name the css file `[name].module.css` and import it.
Once the basic elements are in place, we can start with our first component. First we add an input field, as well as a button and a box in which we display the TODOs. In both cases, a separate component is responsible for displaying the list.
These are the components. Both take a list of tasks as input parameters and use them to display the information.
There are no major differences here. The components look very similar. However, it should be noted that we have changed the shape of the React component. A stateless functional component was used here. This allows us to write the entire component as a function. This allows us to achieve better readability compared to class components. Another new feature are React Hookswhich were recently introduced. These offer even greater flexibility when it comes to logic.
On the other hand, our basic components have changed. We had to introduce state management to store the list of todos. We added a method that controls the input field and one that is responsible for adding new TODOs.
In the React project, the state is placed in the component itself. One reason for this is that our state is very small and therefore has no separate control mechanisms. In the Angular project, we want to use a dependency injection from Angular. We have therefore created a service that takes over the state management. This means we don't have to worry about getting the dependencies ourselves. This allows us to have an independent data source that we can easily mock during tests.
Retrieve data from external sources
The task data is retrieved asynchronously here. This will be very convenient if you want to retrieve the data from online sources in the future, for example. Then you only have to make the changes in the service and everything will still run smoothly.
Now we are going to look at getting the data from external servers. This will be a component that will display the most popular articles on Reddit. For this we use the HttpClient module for Angular, for React we use Axios in this case.
When it comes to Angular, everything we need is usually already available to us. A good example is the HttpClient module, which allows us to make external calls. With React, we must/may choose what we want to work with.
In Angular, we have again created a service that we have injected. Now we retrieve finished, processed data. With React, things look a little different. In this field, there are also many opinions on how to solve the data fetching problem correctly. I opted for React Hooks because they allow you to fetch the data cleanly. We were also able to move the function for fetching the data into a separate JavaScript module to separate this logic from the component.
A conclusion on React vs Angular
The project is very simple, but if you develop the to-do app with two different frameworks, you can already get an initial overview of where the differences between the two frameworks lie. You can say that everything is already there with Angular, with React we make the decision ourselves. As I said, both have advantages (we are not limited with the tools we use) and disadvantages (you can spend a lot of time finding the right tool).
In the end, however, the decision as to which tool we choose makes no difference. However, we are talking about a simple to-do app here and not about large enterprise projects. We can simply use what we like better. Both frameworks presented are already very well developed and each has a very large community.
We must not forget that good programmers learn concepts, not tools, because there may be something new in a few years' time. That's why I recommend writing at least one project with both frameworks in order to get an objective overview of the possibilities of both frameworks.
