- Front-end frameworks like Angular and React use component-based architectures, with components having life-cycle hooks and handling their own state.
- Both support data binding, but Angular uses two-way binding while React uses one-way binding. Angular also supports mutable data through services.
- Both support routing, with Angular having a single built-in router and React having multiple options through libraries like React Router.
- Other similarities include support for styling components and testing with libraries like Jasmine, though React testing approaches vary more between projects.
3. Hasan @ DEV6 – #WEBU17
Hasan Ahmad
Senior Consultant @ DEV6
Lead @ DevC Toronto
https://www.dev6.com/
https://www.facebook.com/groups/DevCToronto/
4. Hasan @ DEV6 – #WEBU17
Front-end frameworks have more in common than you might expect
Component based architecture
View-Model / State management
Routing views with URLs
5. Hasan @ DEV6 – #WEBU17
Components
Angular: Decorate classes with component life-cycle hooks
React: ES6 inheritance provides interfaces for life-cycle hooks
7. Hasan @ DEV6 – #WEBU17
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
8. Hasan @ DEV6 – #WEBU17
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
11. Hasan @ DEV6 – #WEBU17
Data Binding
Angular - flexible data binding options, including two-way
React - One-way data binding, lift state up
12. Hasan @ DEV6 – #WEBU17
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
13. Hasan @ DEV6 – #WEBU17
Handling State
Angular – Mutable data, services as singletons (can opt for immutable too)
React – state & props, flux, redux
14. Hasan @ DEV6 – #WEBU17
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)
15. Hasan @ DEV6 – #WEBU17
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
16. Hasan @ DEV6 – #WEBU17
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
17. Hasan @ DEV6 – #WEBU17
Layout & Styling
Angular has embraced Shadow DOM +View Encapsulation for styling
components
React is compatible with many styling approaches: traditional CSS,
bootstrap, and flexbox
19. Hasan @ DEV6 – #WEBU17
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
23. Hasan @ DEV6 – #WEBU17
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
24. Hasan @ DEV6 – #WEBU17
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
26. Hasan @ DEV6 – #WEBU17
// ./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>
<!--Each route is defined with Route-->
<Route path="/" component={Home}/>
</Router>,
document.getElementById('container')
);
https://scotch.io/tutorials/routing-react-apps-the-complete-guide
27. Hasan @ DEV6 – #WEBU17
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
28. Hasan @ DEV6 – #WEBU17
Testing
Angular comes with extensive support for jasmine with karma and
protractor
React varies by project, some use Jest, others use Mocha/Chai/Enzyme
29. Hasan @ DEV6 – #WEBU17
Cross-platform apps
Extend cross platform experience beyond the browser
Progressive Web Applications
Cordova / Hybrid Applications
NativeScript / React Native
30. Hasan @ DEV6 – #WEBU17
Angular + React = ?
react-native-renderer – Angular project in a react native app
ng-redux – Use redux (popularized by React) in your Angular projects
31. Hasan @ DEV6 – #WEBU17
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.