Angular 2 versus React: There Will Be Blood

Photo credit: @jwcarrol

You’re Comparing Apples and Orangutans!

Angular 2 Advantages

Low Decision Fatigue

TypeScript = Clear Path

Reduced Churn

Broad Tooling Support

Web Component Friendly

React Advantages

JSX

Contrasting how Angular 2 and React handle a missing closing tag

React Fails Fast and Explicitly

React is JavaScript-Centric

Angular 2 continues to put “JS” into HTML. React puts “HTML” into JS.

React’s JavaScript-centric design = simplicity

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding
{myVar}
<ul>
<li *ngFor="#hero of heroes">
{{hero.name}}
</li>
</ul>
  • Declaring a “master template” via a preceeding asterisk is cryptic.
  • The pound sign in front of hero declares a local template variable. This key concept looks like needless noise (if preferred, you can use `var`).
  • The ngFor adds looping semantics to HTML via an Angular-specific attribute.
<ul>
{ heroes.map(hero =>
<li key={hero.id}>{hero.name}</li>
)}
</ul>

To read Angular: Learn a long list of Angular-specific syntax.

To read React: Learn JavaScript.

Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind=”foreach”
React: JUST USE JS. :)
(click)=”onSelect(hero)"
onClick={this.onSelect.bind(this, hero)}

Luxurious Development Experience

Size Concerns

React Embraces the Unix Philosophy.

The philosophy of small, composable, single-purpose tools never goes out of style.

Showdown Summary

--

--

--

Pluralsight Author, Principal at reactjsconsulting.com, Software Architect, Microsoft MVP, Speaker, Clean Coder, Aspiring Outlier.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cory House

Cory House

Pluralsight Author, Principal at reactjsconsulting.com, Software Architect, Microsoft MVP, Speaker, Clean Coder, Aspiring Outlier.

More from Medium

What’s a Framework or library in Javascript?

Framework and Libraries in Javascript by 404answernotfound

Angular vs React: Which One is Better for Web Development?

The Good HTML Component

JS-14 — JavaScript for Programmers, Chapter10