Upload
sebastian-pederiva
View
700
Download
0
Embed Size (px)
Citation preview
April 10th 2016
Working with AngularJs 1.x and React together
Sebastian [email protected]
@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