Angular 2 versus React: There Will Be Blood

Photo credit: @jwcarrol

You’re Comparing Apples and Orangutans!

Choosing between Angular and React is like choosing between buying an off-the-shelf computer and building your own with off-the-shelf parts.

Angular 2 Advantages

React Advantages

Contrasting how Angular 2 and React handle a missing closing tag

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

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding
{myVar}
<ul>
<li *ngFor="#hero of heroes">
{{hero.name}}
</li>
</ul>
<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)}

Large apps tend to have a minimum of several hundred kilobytes of code — often more — whether they’re built with a framework or not. Developers need abstractions to build complex software, and whether they come from a framework or are hand-written, they negatively impact the performance of apps.

Even if you were to eliminate frameworks entirely, many apps would still have hundreds of kilobytes of JavaScript. — Tom Dale in JavaScript Frameworks and Mobile Performance

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

--

--

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