React vs Angular

2

matter of points of view

by Massimiliano Mantione & Gabriele Mittica

Common traitsManage the complexity of DOM manipulation

Allow splitting a view into components

Let you specify the view declaratively...

...but also let you put logic into the view

The view can use the application state

They do all these things in di䇁erent ways!

Angular 2 Component

ViewsDefined with a template

import Component from '@angular/core'; @Component( selector: 'my­component', template: ` <div> <p>I'm name</p> <button (click)="sayHi()">Say Hi</button> </div>` )

)

Angular 2 TemplatesCan use directives

Directives provide logic

(they are like a sub-language)

Angular transforms them into DOM elements

A React Viewfunction MyComponent (props) return <div> <p>I'm props.name</p> <button on­click=() => props.hi()>Say Hi </div>

...is actually plain Javascript!

React is only about views

(for models you are on your own)

A Functional ApproachComponents are pure functions of their inputs

No separated markup language

Views are produced by Javascript code

JSX is optional

(it looks like markup but it's actually code)

Angular 2 Component StateAngular 2 is object oriented

Every component is a class

State is stored inside instance properties

Templates can data bind those properties

(either one way or two ways)

Instance methods can be bound to events

NG2 Component Exampleimport Component from '@angular/core'; @Component( selector: 'my­component', template: '<div>I'm name. <button (click)=) export class MyComponent constructor() this.name = 'Max' sayMyName()

Let's recapComponents are directives that are associated with

a template

They support data binding

<input type="text" [(ngModel)]="fruit" id="new­fruit"<div>fruit</div>

They are used as tags in the template markup

React Component inputsProps...

<Contact name=name surname=surname />

...and children

<Preview> <Picture url=link /> <Caption text=content /> </Preview>

Both are immutable!

Immutable WAT?How do you update an immutable view?

You re-render it!

Your code re-creates the element tree every time

this makes the view code extra simple

render() actually produces a virtual DOM

React modifies the real DOM only where strictly

needed!

Components in actionrender() returns a tree of immutable elements

The element tree is reduced to DOM virtual

elements

A di䇁 algorithm discovers how to patch the DOM

React manages stateful component instances for

you

A Stateful Componentclass Clock extends React.Component constructor(props) super(props) this.state = this.date() setInterval(() => this.tick(), 1000)

date() return date: new Date() tick() this.setState(this.date()) time() return this.state.date.toLocaleTimeString()

(it actually can be plain Javascript)

Stateful componentsProps and children are immutable...

...but component instances can have a state

You modify it with setState()

outside setState() it is immutable

state changes trigger a re-render()

Useful for handling the "view model"

Angular 2 BenefitsTypeScript-centric

Object Oriented

Very strong D.I. (more than ng1)

Angular Zone and strong data-binding

Great built-in modules (HTTP, Router, Animations)

is Typescript Centric

React is Javascript-centric!

(some would say babel-centric...)

React brings declarative markup to Javascript

Angular continues to put Javascript inside HTML

(Quote by Gabriele MitticaTM

)

Zone, Data Binding and D.I.

React favors functional programming techniques

Unidirectional data flow

The use of immutable data structures

change detection by reference comparison

Considered Antipatterns:

managing business state inside view components

mutable state in general

two-way data binding!

The need for D.I. and Zones comes from an

Object Oriented approach!

(a functional approach makes them irrelevant)

has Great built-in Modules

(HTTP, Router, Animations...)

React is focused on views

Routing, animations, server interaction...

(...and a lot more...)

...come from the ecosystem!

React frameworksMostly related to the model and how to mutate it

The Facebook architecture was called flux

redux seems the emerging implementation

Beyond the DOMrender() produces immutable elements

These elements are DOM independent

In React Native they draw native UIs

They can also draw SVG or 3D objects...

Server side rendering: universal Javascript

TakawayBoth Angular and React are great frameworks

They mostly solve the same problems

(React is focused on pure views)

They have drastically di䇁erent approaches

Pick whatever you think is best

Knowing both makes you a better developer!

Thanks for listeningMassimiliano Mantione - @m_a_s_s_i

Gabriele Mittica - @gabrielemittica