Angular 2 and React

I am in the process of doing an assessment on the “best” framework (or library) for developing Single Page Apps.

Best is an ambiguous term. To be more specific, I am searching for the best software to incorporate into a professional development team without significant prior experience in any one particular framework or library.

Some obvious candidates are React, Aurelia, Ember, Meteor, Marionette
cycle and Angular 2.
A less well known but interesting candidate is Google’s Incremental-DOM.

In this post, I am mostly examining Angular 2, but also comparing and contrasting it with React JS.

I like Cory’s there will be blood article comparing Angular 2 and React, and even though he admits bias, I believe that he was quite fair.

The April 2016 Thoughtworks languages and frameworks report recommends developers adopt React JS and assess Angular JS. Here I am assessing both of these and will soon decide for myself which if any to adopt.

The front end is a very rapidly moving environment. At the time of writing, Angular 2 has just reached Release Candidate 1, and it is evolving rapidly. Community support is strong and getting stronger as it gets closer to Release status. However, the Angular team is currently fixing a list of bugs so if you want to use it in production you will need to be aware of those.

I don’t believe that it is something that anyone can write off. Great developers such as Shawn Wildermuth, Deborah Kurata and John Papa tend to prefer Angular 2.

A short summary of Cory’s article is:

Angular 2 Plus Points

  • Low Decision Fatigue
  • TypeScript=Clear Path
  • Reduced Churn
  • Broad Tooling Support
  • Web Component Friendly

React Plus Points

  • JSX
  • Fails Fast and Explicitly
  • JavaScript-Centric
  • Luxurious Development Experience
  • Smaller Size (than Angular 1/2, and Ember)
  • Embraces the Unix Philosophy

So far I have not found anything to contradict any of these points, in fact I am agreeing with them even more strongly. I think Angular 2 is a decent framework that will continue to improve and gain in popularity. However, after so many months of seeing posts about how totally awesome Angular 2 is going to be, I feel underwhelmed.

Last year James Shore wrote an Unconventional Review of Angular version 1. Many of his arguments against Angular 1 still apply to version 2. There is less accidental complexity now, but it certainly still locks you in, and its opinionated architecture may or may not suit you. I haven’t yet written unit tests with Angular 2 yet, and I still need to learn more about Angular Universal.

Also see James Shore’s React Review from 2014. I think React does lock you in, because you would need a big rewrite to go back to plain HTML again. React is substantially different to other frameworks and there’s no way to swap another one in easily.

Google describe Angular 1 as a framework and Angular 2 as a platform. See Jules Kremer’s Google I/O 2016 talk where she describes the many parts of Angular 2, including Dependency Injection, Decorators, Zones, Compile, Change, Render, Material, Mobile, Universal, CLI, Language Services and Augury.

A very strong draw to Angular 2 is going to be having a huge library of free open source components to download and use straight away.

We are only just beginning to see these, but in a year from now we will probably have thousands of components to choose from. How much of a good thing this is depends on how this fits in with your needs.

Outside of the world of Angular, we already have hundreds of thousands of open source JavaScript programs and the difficulty lies in discovering the correct one for our needs.

Overall, I believe that it is important for front end developers to, at the very least, gain a basic working knowledge of Angular 2.

Angular 2 and TypeScript

Because of the use of TypeScript in Angular 2, using an editor such as Visual Studio Code is a good idea because it will give you TypeScript Intellisense.

There is no absolutely obligation to use Angular 2 with TypeScript. If you prefer you can use standard JavaScript, or Dart.

If you have never used TypeScript before, you can make learning Angular 2 a bit simpler and quicker by opting for plain JavaScript.

However, in my opinion TypeScript is a good technology for helping you to produce safer JavaScript code, and therefore it makes sense to take advantage of this. I do not cover upgrading from Angular 1 in this post.

Assuming you are using Angular 2 for a greenfield project, it makes more sense to use it with TypeScript, to help you keep you code clean and high quality.

There are two Pluralsight courses which I have watched and reviewed for you:

Angular 2: First Look by John Papa

Angular 2: Getting Started by Deborah Kurata

I have also been looking at React recently, and written a 14 part blog series on Cory House’s new course Building Applications with React and Redux in ES6.

The biggest difference between React and Angular for me is React is more granular. Although Angular 2 is split into different modules, it will best suit the type of developer who likes frameworks that can easily do almost everything they might want to do with a web application. With React, there are more pieces involved, some by Facebook and many by other companies and people in the community.

Many companies will want a framework that is supported by a huge company, and while they get that with React, Angular 2 does a lot more than React on its own does. So you get more “out of the box” with Angular.

Whether this is a good or a bad thing will depend on how important it is to you to keep the page load size down to a minimum.

In the past, some developers have used Angular 1 together with React to accelerate speed.

Although you can use Angular 2 and React together, I have not yet heard anyone need to do this with Angular 2 because version 2 is a lot faster than Angular 1.

This article is an opinion piece, and I am very interested to hear your opinions as well. Please leave a comment with your thoughts.

4 thoughts on “Angular 2 and React

  1. Pingback: Practical LINQ | Zombie Code Kill

  2. Pingback: Building Mobile Apps with the Ionic Framework and Angular JS | Zombie Code Kill

  3. Pingback: Angular 2: First Look | Zombie Code Kill

  4. Pingback: Building Applications with React and Redux in ES6 | Zombie Code Kill

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s