Combining Angular and React Together
•
2 likes•3,487 views
As part of conference BoostJs 2016
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Combining Angular and React Together
Similar to Combining Angular and React Together (20)
Recently uploaded
Recently uploaded (9)
Combining Angular and React Together
- 1. April 10th 2016 Working with AngularJs 1.x and React togethe Sebastian Pederiva sebastianp@sela.co.il @spederiva
- 2. Don’t compare React to Angular
- 3. Don’t compare React to Angular
- 4. What is AngularJs? Framework for dynamic web apps Controllers (scope) Views/Templates Services (service/factory/provider) Filters Binding Watchers/$Digest Events Directives
- 5. What is React? A library for creating user interfaces React does one thing and does it well Renders your UI and responds to events Virtual DOM Develop real components
- 7. Build components Encapsulated and interoperable custom elements that extend HTML itself A component should ideally only do one thing Use components to separate your concerns class PageTitle extends React.Component { render() { return (<h1>Hello World!</h1>); } } Intro to React
- 8. JSX JSX lets you create JavaScript objects using HTML syntax Optional Combines ease-of-use of templates with power of JavaScript http://facebook.github.io/jsx Need to be “transpiled” https://facebook.github.io/react/docs/getting-started.html Improve performance with Babel https://goo.gl/Tu9eTx
- 9. 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
- 10. States are component data that the component sets itself via: getInitialState setState 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
- 11. Life Cycle Mounting/Unmounting Update getInitialState() getDefaultProps() componentWillMount() render() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidMount() componentWillUnmount() componentDidUpdate() * State before and after DOM manipulations
- 12. Virtual DOM Abstract JavaScript version of the DOM Optimized for performance and memory footprint Re-Render All The Things Batch execute all updates
- 13. Demo TODO
- 14. Why Angular+React? WeY AngularJs Y Want to use ”Components” Don’t want to think about $digest React is very cool! Directives are powerful but not easy to write
- 15. Directives – Need to be an expert No real ‘one way’ binding attribute. $observe Compile/Link functions ‘ng-repeat’ ’track by’ Controller/ Link Compile Pre-Link Post-Link
- 16. Why Angular+React? WeY AngularJs Y Want to use ”Components” Don’t want to think about $digest React is very cool! Directives are powerful but not easy to write Performance
- 17. Performance – AngularJs vs. React 0 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 100 500 1000 5000 10000 15000 50000 Rendering Comparison Angular React
- 19. Ng-React ngReact is an AngularJs module that allows React Components to be used in AngularJs applications Very easy to use Most of the cases is enough https://github.com/ngReact/ngReact
- 20. Demo Ng-React
- 22. Use case Rendering a really long list (ng-repeat) Very dynamic layout Performance problems Really separation of concerns
- 24. Summary Overview React Why AngularJs + React The “glue” directive between AngularJs and React Ng-React Questions
Editor's Notes
- The V in the MVC React is just for views React don’t provide router, model and event layers
- The V in the MVC React is just for views React don’t provide router, model and event layers
- React manages a DOM in-memory, and when the state mutates and triggers any change to the DOM, mutations are first done in-memory. Then React computes the minimal set of mutations to do on the real DOM, and does them in batch
- The V in the MVC React is just for views React don’t provide router, model and event layers
- Components are reusable. Components are composable. Components are unit testable. Sample_1_HelloWorld
- JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
- Forget any of your old jQuery habits where you respond to an event and then tweak the DOM Forget about binding Any time there's a change, we will re-render the state of our app. Sample_6_State
- Very clear life-cycle
- Not confuse with ShadowDOM, which is part of WebComponent Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. Virtual DOM is a technique and set of libraries / algorithms that allow us to improve front end performance by avoiding direct work with DOM and work only with lightweight JavaScript object that mimic the DOM tree. Re-render the whole app on every update Re-rendering on every change makes things simple. Computes minimal DOM operations React will intelligently decide what DOM elements stay and go Most of the virtual DOM can be treated like magic, and you can ignore the implementation React converts these virtual elements into real DOM elements as necessary Diff it with the old one How it works React builds a new virtual DOM subtree …diffs it with the old one …computes the minimal set of DOM mutations and puts them in a queue …and batch executes all updates
- Want to use ”Components” – Directives? $digest – bad usage of ng-repeat
- Pre-link functions are also run in priority order, but post-link functions are run in reverse order. Compile/Link Cannot exist both in the same directive – what happened if there are both? Compile can return a link function How many times compile is executed? – only one Pre-Link: we still don’t have transcluded content and the template isn’t linked to the scope because the bindings aren’t setup
- Because AngularJS doesn't know anything about ReactJS, and vice-versa, rendering ReactJS inside of AngularJS requires some sort of a "glue" layer Copy files from angular and react samples (app.js, index.html, table.jsx) Add <script src="builds/table.js"></script> Add ” this.events = new Events();” and change broadcast to “emit” Change the directive myBoard leaving only the “link”: renderDOM.render is “myBoard” live template HTML: add ”events” property events=“$ctrl.events” Wrap play method with setTimeout
- Copy files from angular-react samples (app.js, index.html, table.jsx) Add <script src="../../node_modules/ngreact/ngReact.js"></script> Add ‘react’ to app module Remove ”myBoard” directive Add (react-component) <react-component name="Table" props="$ctrl.props" ng-if="$ctrl.isDataLoaded"></react-component> Add to showTable: this.props (thisProps)
- Show onClick functionality already added in Table component Add onClick property to this.props Add this.onClick method (thisOnClick) Add (spanCellValue) <span ng-if="$ctrl.isDataLoaded && $ctrl.cellValue">Cell Clicked: {{$ctrl.cellValue}}</span>