April 10th 2016

Working with AngularJs 1.x and React together

Sebastian Pederivasebastianp@sela.co.il

@spederiva

Don’t compare React to Angular

Don’t compare React to Angular

What is AngularJs?Framework for dynamic web appsControllers (scope)Views/TemplatesServices (service/factory/provider)FiltersBindingWatchers/$DigestEventsDirectives

What is React?A library for creating user interfacesReact does one thing and does it wellRenders your UI and responds to eventsVirtual DOMDevelop real components

Can Work Together

Build componentsEncapsulated and interoperable custom elements that extend HTML itselfA component should ideally only do one thingUse components to separate your concerns

class PageTitle extends React.Component { render() { return (<h1>Hello World!</h1>); }

}

Intro to React

JSXJSX lets you create JavaScript objects using HTML syntaxOptionalCombines ease-of-use of templates with power of JavaScripthttp://facebook.github.io/jsxNeed to be “transpiled”

https://facebook.github.io/react/docs/getting-started.htmlImprove performance with Babel

https://goo.gl/Tu9eTx

Props are select pieces of data that are passed to child components from a parent and are immutable by the child

var HelloWorld = React.createClass({ function render() { return (<div>Hello {this.props.name}!!</div>); }});

ReactDOM.render(<HelloWorld name="Sebastian" />, document.getElementById("example")

);

Props

States are component data that the component sets itself via: getInitialStatesetState

State and UI always must be synced

var HelloWorld = React.createClass({ getInitialState(){ return{ name: "" } }, handleOnChange(e){ this.setState({ name: e.target.value }); }, render() { return (<input value={this.state.name} onChange={this.handleOnChange} />); }

});

State

Life CycleMounting/Unmounting Update

getInitialState()getDefaultProps() componentWillMount()render()

componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render()

componentDidMount() componentWillUnmount()

componentDidUpdate() * State before and after DOM manipulations

Virtual DOMAbstract JavaScript version of the DOMOptimized for performance and memory footprintRe-Render All The ThingsBatch execute all updates

Demo

TODO

Why Angular+React?WeY AngularJs YWant to use ”Components”Don’t want to think about $digestReact is very cool!Directives are powerful but not easy to write

Directives – Need to be an expert

No real ‘one way’ binding

attribute.$observe

Compile/Linkfunctions

‘ng-repeat’’track by’

Controller/Link

CompilePre-LinkPost-Link

Why Angular+React?WeY AngularJs YWant to use ”Components”Don’t want to think about $digestReact is very cool!Directives are powerful but not easy to writePerformance

Performance – AngularJs vs. React

Demo

Angular/React/Angular + React

Ng-ReactngReact is an AngularJs module that allows React Components to be used in AngularJs applicationsVery easy to useMost of the cases is enough

https://github.com/ngReact/ngReact

Demo

Ng-React

Demo

Ng-React - Bindings

Use caseRendering a really long list (ng-repeat)Very dynamic layoutPerformance problemsReally separation of concerns

Linkshttp://blog.500tech.com/using-reactjs-with-angularjshttps://www.bimeanalytics.com/engineering-blog/you-put-your-react-into-my-angularhttp://www.bennadel.com/blog/2902-rendering-reactjs-components-in-angularjs-using-angularjs-directives.htm

SummaryOverview ReactWhy AngularJs + ReactThe “glue” directive between AngularJs and ReactNg-React

Questions