July 25, 2017
TABLE OF CONTENTS
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.
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.
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.
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.
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.
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.
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!
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
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.
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.
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.
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.
In a large scale team, Test Driven Development (TDD) is important and maybe achievable.
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.
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.
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 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 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.
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 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.
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:
Start your first app with CLI Quickstart (using angular CLI)
Jump on to Tutorial (Tour of Heroes)
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.
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.
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.
Businesses face a higher bar for application performance than ever before. Users will simply abandon a service that is not responsive enough. Performance testing enables teams to develop more efficient code that makes an application run smoothly.
Levvel CEO Chris Hart spoke at HMG Strategy's CIO Executive Leadership Summit event. In this video series, Hart talks about effective collaboration, communication, and culture in the c-suite, as well as how technology sharpens the competitive edge.
At the end of lunch with a mentee, I used the items on our table to express the fundamental concepts of Kubernetes. Sometime after explaining the purpose of the Kubernetes scheduler, she asked a question I spent the next several weeks thinking about.
API design is crucial, giving structure to application interaction. Given cross-functional teams and applications, development time is reduced with a clear, intuitive way to access data. API development often follows two approaches: REST and GraphQL.