Angular vs React for Web Application Development

Hasan @ DEV6 – #WEBU17
Hasan Ahmad
Senior Consultant @ DEV6
Lead @ DevC Toronto
https://www.dev6.com/
https://www.facebook.com/groups/DevCToronto/

Front-end frameworks have more in common than you might expect
Component based architecture
View-Model / State management
Routing views with URLs

Components
Angular: Decorate classes with component life-cycle hooks
React: ES6 inheritance provides interfaces for life-cycle hooks

@Component({selector: 'greet', template: 'Hello {{name}}!’})
class Greet {
name: string = 'World';
}
class Welcome extends React.component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}

ngOnChanges() – when a data binding has changed
ngOnInit() – when angular has already displayed bound data
ngOnCheck() – manual change detection
ngAfterContentInit() - …
ngAfterContentInitChecked() - …
ngAfterViewInit() - …
ngAfterViewInitChecked() - …
ngOnDestroy() – right before angular removes a component

constructor() – component is created
componentWillMount() – before a component has been attached to view
render() – return the react view element
componentDidMount() – after react has attached component to view
componentWillRecieveProps() - …
shouldComponentUpdate() - …
componentWillUpdate() - …
componentDidUpdate() - after react has updated a component
componentWillUnmount() – before react removes a component

export class PeekABoo implements OnInit {
constructor(private logger: LoggerService) { }
// implement OnInit's `ngOnInit` method
ngOnInit() {
this.logIt(`OnInit`);
}
logIt(msg: string) {
this.logger.log(`#${nextId++} ${msg}`);
}
}

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval( () => this.tick(), 1000 );
}
componentWillUnmount() {
clearInterval(this.timerID);
}
//...
}

Data Binding
Angular - flexible data binding options, including two-way
React - One-way data binding, lift state up

Component to
DOM
Interpolation and Property Binding
One-way binding: Value goes from component data property to a target
element property
DOM to
Component
Event Binding: user interacted with page, bring that back to the component
Both Two-Way Binding: update data as soon as it has been changed by the user

Handling State
Angular – Mutable data, services as singletons (can opt for immutable too)
React – state & props, flux, redux

Service is a singleton – only one instance in memory
Components can mutate data in services, everyone who injects a
service can see the altered state
Angular will automatically re-draw the UI with the new data
(Change Detection + Zones + Data Binding)

Components have their own state, react renders components when
their state changes
By default, you have to maintain parent-child relationships to state,
using props
redux: have one giant state object

Store Single big JSON, all state for entire application
Reducer Update store, return a new state
Action Dispatched to trigger a state change
Follow up on redux.js.org

Layout & Styling
Angular has embraced Shadow DOM +View Encapsulation for styling
components
React is compatible with many styling approaches: traditional CSS,
bootstrap, and flexbox

@Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent { /* . . . */ }

What is Shadow DOM?
Shadow DOM is included in the Web Components standard by W3C
Refers to the ability to include a subtree of DOM elements
Allows DOM implementation to be hidden from the rest of the
document

<hero-details _nghost-pmm-5>
<h2 _ngcontent-pmm-5>Mister Fantastic</h2>
<hero-team _ngcontent-pmm-5 _nghost-pmm-6>
<h3 _ngcontent-pmm-6>Team</h3>
</hero-team>
</hero-detail>

render(props, context) {
const notes = this.props.notes;
return <ul className='notes'>{notes.map(this.renderNote)}</ul>;
}
render(props, context) {
const notes = this.props.notes;
const style = {
margin: '0.5em',
paddingLeft: 0,
listStyle: 'none'
};
return <ul style={style}>{notes.map(this.renderNote)}</ul>;
}
https://survivejs.com/react/advanced-techniques/styling-react/

import React from 'react'
import injectSheet from 'react-jss'
const styles = {
button: {
background: props => props.color },
label: {
fontWeight: 'bold'
}
}
const Button = ({classes, children}) => (
<button className={classes.button}>
<span className={classes.label}>
{children}
</span>
</button>
)
export default injectSheet(styles)(Button)
https://github.com/cssinjs/jss

var Block = require('jsxstyle/Block');
var React = require('react');
var MyComponent = React.createClass({
render: function() {
return <Block color="red">Hello, world!</Block>;
}
});
https://github.com/smyte/jsxstyle

Routing
Angular has one routing model, driven by the URL
@angular/router is engineered for many scenarios
React has many different options, depending on your app architecture
react-router, fluxxor-react-router, react-redux-router

template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{ path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

// ./src/index.jsx
import React, { Component } from 'react';
import { render } from 'react-dom';
// Import routing components
import {Router, Route} from 'react-router';
class Home extends Component {
render(){
return (<h1>Hi</h1>);
}
}
render(
<Router>

<Route path="/" component={Home}/>
</Router>,
document.getElementById('container')
);
https://scotch.io/tutorials/routing-react-apps-the-complete-guide

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import reducers from '<project-path>/reducers'
const store = createStore( combineReducers({ ...reducers, routing: routerReducer }) )
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<Route path="foo" component={Foo}/>
<Route path="bar" component={Bar}/>
</Route>
</Router>
</Provider>,
document.getElementById('mount')
)
https://github.com/reactjs/react-router-redux

Testing
Angular comes with extensive support for jasmine with karma and
protractor
React varies by project, some use Jest, others use Mocha/Chai/Enzyme

Cross-platform apps
Extend cross platform experience beyond the browser
Progressive Web Applications
Cordova / Hybrid Applications
NativeScript / React Native

Angular + React = ?
react-native-renderer – Angular project in a react native app
ng-redux – Use redux (popularized by React) in your Angular projects

Summary
Equal, yet different:Two approaches to solving common problems all
developers face.
Choice between Angular and React is ultimately driven by an
organization’s development philosophy.

ThankYou!
Questions?

Angular vs React for Web Application Development

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Angular vs React for Web Application Development

Similar to Angular vs React for Web Application Development (20)

More from FITC

More from FITC (20)

Recently uploaded

Recently uploaded (20)

Angular vs React for Web Application Development