react vs angular2
TRANSCRIPT
![Page 1: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/1.jpg)
React vs Angular
2
matter of points of view
by Massimiliano Mantione & Gabriele Mittica
![Page 2: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/2.jpg)
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!
![Page 3: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/3.jpg)
Angular 2 Component
ViewsDefined with a template
import Component from '@angular/core'; @Component( selector: 'mycomponent', template: ` <div> <p>I'm name</p> <button (click)="sayHi()">Say Hi</button> </div>` )
![Page 4: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/4.jpg)
)
Angular 2 TemplatesCan use directives
Directives provide logic
(they are like a sub-language)
Angular transforms them into DOM elements
![Page 5: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/5.jpg)
A React Viewfunction MyComponent (props) return <div> <p>I'm props.name</p> <button onclick=() => props.hi()>Say Hi </div>
...is actually plain Javascript!
React is only about views
(for models you are on your own)
![Page 6: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/6.jpg)
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)
![Page 7: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/7.jpg)
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
![Page 8: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/8.jpg)
NG2 Component Exampleimport Component from '@angular/core'; @Component( selector: 'mycomponent', template: '<div>I'm name. <button (click)=) export class MyComponent constructor() this.name = 'Max' sayMyName()
![Page 9: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/9.jpg)
Let's recapComponents are directives that are associated with
a template
They support data binding
<input type="text" [(ngModel)]="fruit" id="newfruit"<div>fruit</div>
They are used as tags in the template markup
![Page 10: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/10.jpg)
React Component inputsProps...
<Contact name=name surname=surname />
...and children
<Preview> <Picture url=link /> <Caption text=content /> </Preview>
Both are immutable!
![Page 11: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/11.jpg)
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!
![Page 12: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/12.jpg)
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
![Page 13: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/13.jpg)
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)
![Page 14: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/14.jpg)
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"
![Page 15: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/15.jpg)
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)
![Page 16: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/16.jpg)
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
)
![Page 17: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/17.jpg)
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
![Page 18: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/18.jpg)
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)
![Page 19: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/19.jpg)
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!
![Page 20: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/20.jpg)
React frameworksMostly related to the model and how to mutate it
The Facebook architecture was called flux
redux seems the emerging implementation
![Page 21: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/21.jpg)
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
![Page 22: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/22.jpg)
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!
![Page 23: React vs Angular2](https://reader031.vdocuments.site/reader031/viewer/2022021919/58729d391a28ab07208b4f91/html5/thumbnails/23.jpg)
Thanks for listeningMassimiliano Mantione - @m_a_s_s_i
Gabriele Mittica - @gabrielemittica