Different points of view about two great js frameworks (AngularConf 2016)

1. React vs Angular
2
matter of points of view
by Massimiliano Mantione & Gabriele Mittica

2. Common traits
Manage 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!

3. Angular 2 Component
Views
Defined 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>`
})

4. Angular 2 Templates
Can use directives
Directives provide logic
(they are like a sub-language)
Angular transforms them into DOM elements

5. A React View
function MyComponent (props) {
return <div>
<p>I'm {props.name}</p>
<button on­click={() => props.hi()}>Say
</div>
}
...is actually plain Javascript!
React is only about views
(for models you are on your own)

6. A Functional Approach
Components 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)

7. Angular 2 Component State
Angular 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

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

9. Let's recap
Components are directives that are associated with
a template
They support data binding
<input type="text" [(ngModel)]="fruit" id="n
<div>{{fruit}}</div>
They are used as tags in the template markup

10. React Component inputs
Props...
<Contact name={name} surname={surname} />
...and children
<Preview>
<Picture url={link} />
<Caption text={content} />
</Preview>
Both are immutable!

11. 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!

12. Components in action
render() 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

13. A Stateful Component
class 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.toLocaleTi
(it actually can be plain Javascript)

14. Stateful components
Props 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"

15. Angular 2 Benefits
TypeScript-centric
Object Oriented
Very strong D.I. (more than ng1)
Angular Zone and strong data-binding
Great built-in modules (HTTP, Router, Animations)

16. 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 Mittica
TM
)

17. 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

18. 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)

19. 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!

20. React frameworks
Mostly related to the model and how to mutate it
The Facebook architecture was called flux
redux seems the emerging implementation

21. Beyond the DOM
render() 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

22. Takaway
Both 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!

23. Thanks for listening
Massimiliano Mantione - @m_a_s_s_i
Gabriele Mittica - @gabrielemittica