Downloaded 35 times
Uploaded bySebastian Pederiva
Combining Angular and React Together
This document discusses using AngularJs and React together. It provides an overview of AngularJs and React, explaining that AngularJs is a framework for dynamic web apps while React is a library for creating user interfaces. It describes how components in React can be built to work with AngularJs and encapsulate concerns. Performance is generally better with React, especially for long lists. Ng-React is introduced as an AngularJs module that makes it easy to use React components in AngularJs applications. Examples are provided of how to render React components using Ng-React, including data bindings.
More Related Content
Similar to Combining Angular and React Together
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Combining Angular and React Together
- 1. April 10th 2016 Workingwith AngularJs 1.x and React togethe Sebastian Pederiva sebastianp@sela.co.il @spederiva
- 2. Don’t compare Reactto Angular
- 3. Don’t compare Reactto Angular
- 4. What is AngularJs? Frameworkfor dynamic web apps Controllers (scope) Views/Templates Services (service/factory/provider) Filters Binding Watchers/$Digest Events Directives
- 5. What is React? Alibrary for creating user interfaces React does one thing and does it well Renders your UI and responds to events Virtual DOM Develop real components
- 6.
- 7. Build components Encapsulated andinteroperable 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 youcreate 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 selectpieces 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 componentdata 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.
- 12. Virtual DOM Abstract JavaScriptversion of the DOM Optimized for performance and memory footprint Re-Render All The Things Batch execute all updates
- 13.
- 14. Why Angular+React? WeY AngularJsY 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 – Needto 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 AngularJsY 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 – AngularJsvs. React 0 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 100 500 1000 5000 10000 15000 50000 Rendering Comparison Angular React
- 18.
- 19. Ng-React ngReact is anAngularJs 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.
- 21.
- 22. Use case Rendering areally long list (ng-repeat) Very dynamic layout Performance problems Really separation of concerns
- 23.
- 24. Summary Overview React Why AngularJs+ React The “glue” directive between AngularJs and React Ng-React Questions
Editor's Notes
- #3 The V in the MVC React is just for views React don’t provide router, model and event layers
- #4 The V in the MVC React is just for views React don’t provide router, model and event layers
- #6 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
- #7 The V in the MVC React is just for views React don’t provide router, model and event layers
- #8 Components are reusable. Components are composable. Components are unit testable. Sample_1_HelloWorld
- #9 JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.
- #11 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
- #12 Very clear life-cycle
- #13 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
- #15 Want to use ”Components” – Directives? $digest – bad usage of ng-repeat
- #16 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
- #19 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
- #21 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)
- #22 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>