Angular vs React in a corporate reality. Part 2.

In the previous part of the article, we met the farmer Bob. We will use his example to illustrate the process of building an application to simplify his work by automating data collection and processing. Based on this, we will try to decide which framework will work better - Angular or React.??

Project generation?

In order to create our application for Bob the agronomist, we need to generate new project.?

Angular – we have available very comfortable Angular CLI, through which we can configure our initial project to our liking - for example we can choose CSS preprocessor or our components prefix.?

Generated project comes with preinstalled and configured eslint and prettier, and integrated testing capabiliites (@angular/core/testing).?

The downside is – Angular supports only TypeScript, and evert part of application have to be TypeScript class.?

?React – we have React Scripts, with rather basic configuration options - we can choose if we want to use JavaScript or TypeScript, or select existing template.?

Generated project comes with testing capabilities in form of React Testing Library, but sadly – no eslint or prettier – we have to add them on our own.?

?Here is a good place to pause for a moment and clarify very important thing -?

there is a common belief that React, compared to Angular, is perfect for apps of all sizes because it scales easily and it has smaller initial boilerplate??

Currently that is no longer the case – since Angular standalone components are available we can create small apps without writing too much code??

?

App configuration / Adding libraries?

Our app will be only for internal use. As our client, Bob doesn't expect anything extraordinary from us – app should be readable and efficient. Most of applications like that usually uses Material Desing. We can assume thath in time, we will install some additional packages from npm - which we don’t have to specify right now.?

?Angluar - Most popular angular libraries have ng add command support – which not only installs the packages but also does basic configuration and attaches them to the project. It is incredibly convinient.?

Sometimes integrating some external packages might be tricky – it’s usually better to use angular versions of given libraries or create adapters via services or directives.?

?React – here importing and using external packages is extremely easy, they usually work as is. But still, many packages have React specific versions, which expose their logic through custom hooks.?

App scaffold?

After generating project, we should create scaffold – split the app into separate modules, generate components, create routing for our views and transitions between them. We can use previously installed component libraries to give our app some initial shape and looks.?

Angular – we can use Angular CLI to create modules, and within these modules components, services, directives, pipes etc. With few simple CLI commands we can create advanced app scaffold with initial templates.?

For routing we can use Angular RouterModule which comes preinstalled.?

?React - Not much can be written here – we have to do everything by ourselves. For routing we need to install and configure external package – most popular would probably be ReactRouter.?

HTTP?

At this step we can assume that Bob approved how the app looks at the moment. We need to start thinking about fetching some data.?

?Angular - we can use JavaScript FetchAPI – which is a really good API.?

But we can use even better and more convinient Angular HttpModule, which is configurable and comes with integrated Rxjs support.?

?React - we have to use JavaScript FetchAPI – which again, is a really good API. Alternatively, we can install external HttpClient.?

?

Forms?

We have our views, we have our data. Now, based on this data, we need to dynamically generate proper form and show it to Bob. He has to enter his observations about crops and before we’ll do anything - we need to validate them .?

?Angular - here comes the part where Angular really shines – forms. We have few modules which we can use, depending on what kind of forms we want. We can use form builder to build forms from objects or arrays - and that comes with integrated validation and advanced form controls for whole form or single form control. Building forms in Angular requires a little bit of practice – but it gives developers a lot of power and freedom.?

?React - we can start seeing a little pattern here – React have nothing out of the box for forms. We are stuck with basic HTML forms, or we can install external library like Formik or ReactHookForm.?

There are some experimental form features – but they remain experimental so we’re not going to take them under consideration.?

?

Code, data flow, data management?

After fetching data from our sources, we need to transform it and present to Bob on the screen. And after Bob submits the form, we need to transform this data again, and send it back to proper APIs. Basically, we need to send data between components, and do some mapping in the meantime.?

?React - follows unidirectional data flow – data travels down the component tree. This can get messy when we want to share data between components that are not directly related. It this situation we have to do a little “prop drilling” or use ReactContext.?

In React we can create class components or? fuctional components, but in recent years the latter option took over – in newer apps we usually don’t use classes.?

There are available few build in hooks for state management – like useState, useReducer, useEffect. They seem pretty easy to use, but we have to remember that we need to strictly follow certain hooks rules in order to avoid creating bugs or memory leaks.?

The most powerfull aspect of React is JSX – the ability to combine HTML code with JavaScript code gives developers so much freedom and flexibility, that creating event most advanced and bizzare views is reatively easy. Of coruse, that comes with a price –it is just as easy to loose control over the code quality and readability.?

?React is very open to modifications – which is a good thing and a bad thing at the same time. There are some rules that developers should follow while creating React app – but usually they don’t. React gives us freedom, but this freedom can lead to unoptimized components, memory leaks and errors, if we are not careful.?

?Angular, on the other hand, follows bidirectional data flow – components can consume data, but can also expose data to it’s parents via Event Emitters. This gives us an apportunity to write less code – we don’t need to write callbacks or use contexts like in React. Sharing data between non related components can be achieved by creating a service – but it’s neccesary to use Rxjs for that to work correctly.?

?Angular has it’s own way – we have a lot of abstracts like modules, components, services, pipes, directives, guards, resolvers, factories etc. Basically Angular gives us building blocks, which we have to use to create our app. We can arrange them as we please, but necessity for using those block enforces a certain pattern. That means we still have a lot of freedom – but it is way harder to make a mess, and loose control over the app structure and code quality.?

?Angular main strength is Rxjs – creating apps focused on handling a lot of data is a dream come true – once we mastered it. And it’s important to note that RXJS is not the easiest library to learn – although today there are tons of materials, usually with visual aid, to help us understand how Rxjs operators work.?

Verdict?

?So we iterated over the most important aspects of our application, and saw how they present themselves in each framework.?

?It wasn’t a deep dive, but I believe it was enough to see the differences between them.?

?Before we pass our verdict here, lets see how the situation looks globaly:?

?

?

?As we can see, React is winning – based on StackOverflow Developer Survey it has almost 41% market share, and Google Trends chart confirms that (red – React, blue – Angular)?

?That begs the question – why? We just went throught the basic funtionalities of both frameworks, and Angular doesn’t seem to stay behind – on the contrary, it has way more features build in then React.?

?So why is React so popular? Let’s try to answer that question, by looking at the bigger picture.?

?First of all, because of it’s simplicity React has shorter learning curve – and because of that it is often recommended for juniors to learn.?

React is amazingly flexible – besides some simple rules, it’s not forcing any design patterns on developers.?

React is perfect for prototyping – development is fast, UI and logic coexists in JSX on the same level. And in corporate world, once prototype is ready – it is usually transformed into final product.?

React is stable – it has been for while, most recent stable release was few year ago (at the time of writing this React 19 hasn’y been released yet) – which means that there were no groundbreaking changes introduced. Meanwhile, Angular has received several major updates over the last few years that have forced developers to migrate their code to newer versions.?

In React you have to install and configure everything by yourself – this may not sound like something positive – but in the end, the ability to create custom tailored environment, that suits your project perfectly with libraries you already know is something that many developers appreciate.?

React has better native support? in form of React Native – migrating smaller apps to native platforms usually limits itself to changing basic HTML tags to native ones.?

?Many companies already have “React friendly” infrastructure. Having few project written in React is a strong argument for choosing technology for new upcoming projects.??

?And the last reason why React is so pupular – because it was popular. This may don’t sound reasonable, but it is. Let’s take a look at the timeline.?

?We can start in August 2010 – Angular.js was released then. It was first iteration of Angular framework, with rather huge complexity, and a lot of problems and bottlenecks. But it worked and was adapted in many project at the time.?

Three years after that, in May 2013 React.js was released. And it was revolution – it was way easier to learn and faster than Angular.js. And it was developed by Facebook for Facebook, so React had a good reputation from the beginning. We obviously have to keep in mind that these framework were nothing like their modern versions.?

Another threee years passed, and we come to semtember 2016 – Angular 2+ was introduced. It was completelty new Angular, new architecture, new approach. The problem was that people heard “Angular” and they thought about the old Angular.js – power of assosiation here didn’t do any good for the new version.?

?Three years in IT world is a lot of time. So React, with great start had three more years to establish its dominant position. React was fast, reliant, and growing with Facebook support, and huge community. Angular didn’t stood a chance.?

And its good to mention that its not really It’s not in corporate nature to take risks – so even after Angular 2+ release React was more mature player in the game. It was a safer choice.?

?But as we just have seen times changed. So maybe it’s time to change our midnset and maybe it’s time to give Angular a chance.?

?

Conclusions?

?What is the verdict here? Which framework would be better for our application for Bob the agronomist? Considering that this app would be simply a huge dynamic form – I strongly believe that Angular would be a suitable candicate.?

?Which framework is better overall? The problem with this questions is, that it doesn’t really have an universal anwers. This question should be asked again and again, everytime we start developing new project. Every project is different, every team is different, so everytime answer for this question will be different. And that’s good.?

?My main goal here was to show that sometimes asking the question in the right way is more important than getting the answer. Whenever you’ll be faced with a choice:?

?Be thorough when comparing technolgies (and not only technologies) - look at the question from different perspectives, try to understand the problem, take all the details under consideration and think about bigger picture.?

?Don’t be afraid of complexity. Just because something sounds or looks complicated – it doesn’t mean it’s not gonna be convinient after a while. Sometimes a small investment in learning something new really pays off.?

?If you want to make a right choice for the future – you really need to understand the history of the problem. It’s always good to do some additional research to see how the option you're considering started and how it has changed over time. It can give you the ability to see how it will look in the future.?