Angular vs. React for Companies of All Sizes

Introduction

A common question that arises with our clients (of all sizes) is whether they should they choose Angular or React.

There are already many articles discussing this subject all over the internet. Unfortunately, the majority of those articles were targeted for developers and are not very friendly to non-technical people. In a real life scenario, it is often up to the company to decide which tech stacks work the most efficiently for what they need. We want to approach the decision from a corporate view to help understand the pros and cons and make the best decision possible. While there is no clear-cut answer, our objective is to discuss the many benefits that each of them have to help you make the best decision for your company.

In this article, we will walk through multiple important topics applicable to both technologies. In each topic, we will discuss the upsides and downsides for Angular and React individually, helping you to have a clearer understanding of each.

Angular Overview

When it was first introduced in 2010, AngularJS (or Angular 1) quickly become the most popular javascript framework, but the frontend ecosystem has been rapidly changing. New tools and libraries such as React/Redux and Vue.js came out and garnered huge community support, and AngularJS was already too outdated to compete. Then, Angular 2 came out to solve the difficult problems that Angular 1 had. The new Angular had huge performance improvements by reducing bundle size, implementing Shadow Dom and removing “forced” two way data-binding.

From Angular 2 and above, the Angular team adopted semantic versioning and decided to go with the term, “Angular”. The Angular team wants to promote it as a platform rather than a framework and is ambitiously putting a large amount of effort in its cross-platform tools. Angular has been receiving strong support, especially from mid to large sized companies.

React Overview

React is a javascript library to write declarative UI. It is built with a tree-like structure filled with individual components. It differs slightly from Angular since it is not an entire framework but a lightweight library that uses open source components to fill it out. Components are the overall backbone of React and the addition of open-source components in the React eco-system help create an overall framework. React was created a little while after the original AngularJS started and gained popularity in the development community and is still gaining traction at the corporate level. React is written and managed by Facebook.

Documentation, Tutorials, Resources, Community

Angular

A well documented API is one that is highly detailed while still friendly to beginners. In my opinion, Angular does both very well although the vast size of documentation and steep learning curve might be overwhelming to beginners. New developers can pretty much stick with official docs and tutorials (Tour of Heroes) to be production ready.

If you really want to diversify your learning resources or aren’t technical enough to pick up official docs, Udemy (paid) and Angular University (partially free) are both great options. They are about 20 hours long and beginner friendly. You can find some Angular enthusiasts at reddit and gitter. The Angular team learned from their mistakes and is trying to actively communicate and build strong relationships within the community. If you want to stay up to date with Angular, watching ng-conf playlists on YouTube, following the core development team on Twitter, and listening to podcasts like Angular Air are very helpful.

React

Since React was built by a large, well-supported community with the backing of a large development company (similarly to Angular) there is a decent amount of support available. The main documentation is open sourced and stored on Github. This gives it the ability to be corrected, improved, and grown by the developers that support it. React Native is developed and supported the same way and open sourced through Github.

If you want to get up and running quickly with React, there are tutorials and resources throughout the internet, from Codecademy and Egghead.io to Codementor and large amounts of helpful Medium blog posts. If all else fails, a quick Google search will get you to where you need to go. It is also recommended to follow Dan Abramov on Twitter, since he is a large contributor to the React ecosystem.

React is also well supported in the community on Stack Overflow, the discussion forum, and they even provide dedicated Discord and IRC to keep in touch. React has every sign of a modern, well-supported library and looks to be improving as it keeps growing.

Data Management / State Management

To manage states in large and complex applications, Redux is likely the best option available. For asynchronous activities, you are suggested to handle them separately with rxjs Epics (Effects in ngrx). These patterns are becoming best practice and gaining a lot of popularity. Luckily, both of them are supported in Angular and React, though in slightly different manners.

Angular

There are a few ways to manage state in Angular, and the best practice is using ngrx. ngrx is basically a combined version of Redux with RxJS libraries. We all know asynchronous programming is painful on top of managing UI state, and ngrx solves this problem in a very sophisticated way. If your application is, or is expected to be, quite large and complex, you will love using ngrx. Lukas Ruebbelke wrote a great article “Build a Better Angular 2 Application with Redux and NgRx” on state management. The important thing to remember with state management is that events flow up and state flows down.

React

Handling data in React can be easy or difficult depending on how well you handle your back-end services and how large the application grows. By default, React uses a tree type structure where data is passed down and the actions are passed up. This means that the data is usually all stored and managed at the parent level and passes down references to its children so when the data changes, it calls back up to the parent to have the data changed. In small applications, this is wonderful and not a problem. In big applications, you could find yourself writing multiple duplicate functions to manage even the smallest amounts of data.

There are a couple of ways to adjust and manage large-scale applications. The best tool for managing data with React is Redux. Redux is a state container for React that acts a service layer and similarly to a database. This is why it is sometimes considered a “store” instead of a state container. It is the best way to manage large amounts of data for the client side to use and manipulate without getting crowded throughout your React components. The best way to manage state in React is to use a mix of both Redux and React, where you choose Redux to manage your server-side data and use React to manage your simple UI state (like toggles and simple front-end actions).

This is a strong reminder that React is a library and not a framework. So, although Redux seems extremely important and should be a standard part of React, it is not, because React was built to be lightweight and component-driven instead of all-inclusive. This gives you the ability to choose the best option for data management. If you don’t think it’s necessary, you can use the simplicity of React!

Syntax

If your developers are familiar with traditional model-view-controller (MVC) or model-view-viewmodel (MVVM) architecture, and Objected Oriented Programming (OOP), Angular is not going to look too odd for them. For javascript developers, that is not always the case. Their backgrounds are coding bootcamps, design, non-computer science majors, and many other different fields. A vast majority of them tend to favor React syntax over Angular.

Angular

Angular is a strongly-opinionated framework and it makes your application less error-prone. The good examples of opinionated codes in Angular are directives, pipes, and databindings. These APIs give benefits that React won’t provide right out of the box. Directives are syntactic sugar that makes DOM interaction easy and terse. Pipes transform data to be more user friendly. A typical Angular component file looks like this:

In contrast to uni-directional data flow in React, Angular gives more flexibility. You can use simple one-way data binding or two-way data binding, as seen below.

One-way data binding

Two-way data binding

Angular 2 also uses Typescript instead of plain Javascript, although Typescript is a superset of javascript and the newer versions allows you to use the latest ES6 features. It is also a strong safeguard to build a less error-prone application with typing. Instead of adding libraries like Flow, you can use default typing out of the box.

React

Some of the differences you are going to find within React is in the syntax. React is a front-end Javascript library. This usually means state and data management that helps support your HTML and CSS. To improve upon the performance of HTML, React uses a virtual DOM written in JSX syntax. This is more or less similar to HTML but managed in Javascript instead of HTML templates. From a syntax perspective alone, this simplifies your code by removing the need for massive HTML templates and mixing your JS and HTML together. This could also be harmful to the unorganized coder as components can get out of hand quickly. If needed, the ability to split them apart is still an option.

The virtual dom is very important for performance. DOM interactions using regular JS and HTML can be very expensive. React’s virtual DOM extracts that away into JS which gives it the ability to batch updates, provide diff algorithms, and choose when it is necessary to update the actual HTML DOM. This makes component interaction and performance much improved from previous libraries and frameworks. Note that React didn’t invent the virtual DOM, and there are many versions out there that you could use in your application.

The last important thing to note on syntax is that React is a Javascript library, and you should be using the latest and greatest to get the most out of it. This means that you need to make sure you are using a transpiler (see Babel) to have all of the latest ES6/ES7/ES8 toys and features available. This is also not necessarily React specific, and you should be using it for most applications going forward.

Challenges

Angular and React are both lightweight frameworks that give you the ability to pull in any components or tools you want to create a customizable web application. This sounds great if you are a developer, but you have to remember that a lot of corporations require you to get approval on tools and packages you use. This problem is less common with smaller companies, but it can be challenging with larger companies. The approval process for software can take weeks and possibly slow down development a decent amount.

There are solutions incoming to solve these approval issues in software and automate them instead. Companies like Sonatype and their Nexus platform manage repositories and show if any of them have security issues or known bugs for each version of software. They currently do have support for NPM as well, but you would still need corporate approval or a corporation that uses the Nexus suite to let you build with that software.

Overall, each option has their fair share of challenges like any software out there. We will touch on the challenges that are most important and have the biggest impact on the software development lifecycle.

Angular

Techies in corporations and large companies often deal with internal infrastructural challenges. As a consultant, one of the problems I encountered during my project with a bank client was having to code in their corporate cloud. I was building an Angular 2 application for their credit card team. Corporations usually have complex architectural design with load balance layers for various reasons (mainly for security). These systems are usually not open source friendly and it prevents you from grabbing code from open-source libraries such as npm. But how can a javascript developer in 2017 produce code without using npm? This was a big challenge for me.

They maintained an internal package library that included a number of popular modules such as @Angular/Core, Form, RxJs, Bootstrap. However, adding packages like MomentJS (date and time), Datepicker (calendar) and d3js (charts) to the project was a painful process. I had to submit an approval request for package deployment and provide valid reasoning for using each of the packages. If the project was React, this process might have been chaos, because none of the libraries would be there since React doesn’t really have “core” libraries.

Also, having a uniform code style across the developers is crucial in large organizations for maintenance reasons. Angular 2 and TypeScript with TSLint prevents developers from writing anti-pattern codes and forces them to have uniform code styles.

React

As mentioned before, one of the issues with component-based frameworks is the reliance on open-source components and modules to make your software application more robust. Unlike Angular, React does not come with any real components built in with the library. This means that you need to source almost all components you use. Even routing is not included with the React when you pull it down.

Another challenge the React ecosystem causes is developer fatigue. As a developer, you are expected to understand and learn tons of different libraries and components to keep up with the latest and greatest. There are usually front-runners when deciding between things like Flux and Redux, but there might be business cases where one works better for you even if it is considered the lesser component. Without doing a decent amount of research and even testing them out, it can be difficult to pick the right components for your application and possibly stressful to developers and product owners alike.

Testing Tools

In a large scale team, Test Driven Development (TDD) is important and maybe achievable.

Angular

The official angular docs are very explicit and have massive amounts of information about all sorts of testing. I’ve copy and pasted it on Google docs, and it was 105 pages long! Angular CLI provides Karma for Unit Tests and Protractor for Integration Tests. With CLI magic command, ng generate component ‘component-name’, you will get a directory with html, ts, css, and pre-written test files at no cost. Getting up and running with testing on front-end frameworks is fairly simple.

React

If you use the Create React App tool that Facebook provides for you, it already comes with Jest built in. Like most built-in testings tools, it has its share of issues, but the nice part is that you can choose most front-end testing languages instead. A lot of developers and teams tend to use Mocha and Chai instead of Jest for their default testing framework.

There are also a lot of bigger companies that contribute to helping out with testings. Airbnb has a great style guide for React and Angular, but they also have their own testing API called Enzyme. Enzyme is a javascript testing utility for React that makes it easier to assert, manipulate, and traverse your React component’s output. Enzyme also works great with most of the other testing frameworks like Jest, Mocha/Chai, and Jasmine.

Mobile

Both Angular and React have very good options for writing mobile applications. Obviously, you could just use a responsive UI framework to achieve mobile-like results, but most people want full native applications you can put in an App Store. Angular and React now both have native scripts to write iPhone and Android applications. React has a slightly more mature ReactNative, while Angular just recently gained a stable build of NativeScript in May 2017.

Angular

Angular 2 certainly has more options for mobile development. You can either develop a responsive web app with Angular 2, make a hybrid web app with Ionic using HTML, CSS, or go fully native with NativeScript for iOS and Android.

Ionic 2 is great tool if you want to spin up a prototype or develop hybrid applications quickly. But by the nature of hybrid applications, your application will have limited API, restricted performance and native features.

Meanwhile, NativeScript is a complement of React Native, which performs almost as fast as native applications. You are allowed to use 100% native APIs such as camera, calendar, phone calls and UI events. The downsides are that it is maintained by Telerik (not by the official Angular team) and a relatively large application size due to including V8 engine for Android.

React

React Native lets you write fully native mobile apps in Javascript using the same React you have been using for your web applications. This means you can reuse components and service layers between your web application and your native applications. React Native is similar to regular React, but it uses native components instead of regular HTML elements and standard React components. This makes development much more natural and gives it more of a mobile development feel while using the structure and programming language you are used to.

React Native has been around for a while and makes it easy to transform your web applications into mobile applications. Just like local front-end development, it provides hot-reloading so you can develop your mobile app without having to recompile your application. There is slightly different notation to some of the React native library, but it wouldn’t be any trouble to an experienced React developer. The best part is that your company doesn’t have to find a specific native developer or consulting firm to make your mobile application. You can reuse your internal front-end resources to do both.

The Future / What’s Next?

It is important to predict what’s coming next since the javascript world is dynamically and rapidly changing. New technologies such as Progressive Web Apps (PWA), Http/2, web assembly, and Accelerated Mobile Pages (AMP) are already emerging. It is important to pick a tech stack with a higher chance of surviving for maintainability.

Angular

Good news—Angular 4 is backwards compatible! After the announcement of Angular 4, Igor Minar, lead dev for the Angular Team wrote, ”Don’t worry about version numbers” and “We do need to evolve Angular in order to avoid another Angular 1 to Angular 2 change, but we should do it together as a community in a transparent, predictable, and incremental way.” This is the Angular team’s philosophy and they surely have learned from their previous mistakes.

The next scheduled version updates are Version 5 in September or October 2017 and Version 6 in March 2018. Angular 4 is now smaller and faster and the team is continuing to work on improvements.

React

React has been slowly growing for the past few years but has recently made great strides in improving itself. The first step toward improvement is the impending release of React Fiber. If you check isfiberreadyyet.com, there is only one warning left before it’s finally ready. React Fiber is a rewrite of the core algorithm to improve upon the existing one. Part of this deals with rendering prioritization, but the important thing to take away is that this will improve performance from a UI perspective greatly.

Another improvement, although it has existed for a while, is Relay. Relay has a new version out called Relay Modern, which is a rewrite/improvement upon the existing framework. Relay uses React and GraphQL (query-language) to manage the data layer for large applications. If you have ever written a full front-end for data heavy applications before, it is important to manage and isolate data as much as possible. Data is ever-changing and so are models. Relay helps manage all of that for you so your application can properly scale to as large as you need.

Developers

Angular

A. Hiring: Since Angular 2 is less than a year old, experienced Angular 2 developers might be more scarce than experienced React developers. This leads to our next challenge: who can pick up Angular 2 easily and how fast can they get up and running?

B. How fast to get up and running / learning curve: When I was introduced to Angular2 earlier this year, I’d only had experience with React. I spent a full 2.5 weeks to be production ready. It took about three days to learn typescript, two days to understand the architecture, two-three more days to learn glimpse of RxJS/Observables, and another two days to go through the official Tour of Heroes tutorial. The remaining time was spent understanding directives, services, data bindings, and reactive form. From there, it was kind of learn as I go. Just as I’ve mentioned previously, newbie Angular developers will be sufficient enough to stick with official doc. Here is my guideline:

1. Start your first app with CLI Quickstart (using angular CLI)

2. Jump on to Tutorial (Tour of Heroes)

3. Use Cheatsheet and Typescript to Javascript as references.

C. Efficiency: Angular CLI provides all the handy tools for your productivity. With webpack under the hood, CLI provides commands generate codes (components, directives, services, pipes and tests), create boilerplate, hot module reloading support, typescript linting, start and buildproject, and run unit and e2e tests.

React

A. Hiring: Like Angular, there are no lack of jobs available, and as web applications and mobile applications become bigger, it will only grow. A quick search of Indeed shows almost 4,000 jobs available. It can be tough to find good front-end developers because the demand is so high, so keep an eye out.

B. How fast to get up and running / learning curve: React provides many tools to help you get up and running quickly. From their documentation to code line interface, you won’t have any problem standing up an app. The learning curve can be trickier, but you have to remember that React is a library. What I mean by that is at the end of the day, React is just vanilla Javascript with library tools and web components. This means you can get a new developer up and running in no time. The difficulty lies with having to add dependencies which you will have to learn on the fly like Redux, React Router, and any other components you need to add in to use.

C. Efficiency: It all really depends on how you manage your dependencies. Like we mentioned earlier, React can be very quick to get up and running, and the tools they supply help a lot. If you go crazy on the dependencies and get stuck having to make sweeping updates, you can really slow yourself down. This is why we recommend using a style guide, regardless of React or Angular. We cannot stress the importance enough of being consistent with your code, styling, and testing.

Summary

Ultimately, there is no winner in the battle between Angular and React. Just like in software, the business cases provide the solutions. Each software product provides improvements and stability to existing Javascript, but each product comes with its own quirks and problems. For smaller companies and startups, speed and efficiency can be the most important factor. For large corporations and even some non-technical companies, scalability, testing, and risk are usually the biggest factors. Hopefully this article can provide enough information to help you decide whether React or Angular better fits your needs. If you have any questions or want more information on this discussion, feel free to contact us.