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: 'mycomponent',
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
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
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
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
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!