using reactjs in angularjs

500TECH - AngularJS Consultancy

ReactJS & AngularJSReactJS & AngularJS

Chuck Norris doesn't need a framework - he updates the DOM directly, in C.

(not vs !)

Boris Dinkevich


Boris DinkevichBoris DinkevichCEO @ 500TECHCEO @ 500TECH

Cats, good weather and Ruby


What is ReactJS ?What is ReactJS ?Component frameworkVirtual DOM

Adding React to AngularAdding React to Angular



angular.module("sampleapp", []) .directive("sampleDirective", function() { return { template: "<h2>Angular directive</h2>" } });

<body> <sample-directive></sample-directive></body>

Example code

var MyComponent = React.createClass({ render: function() { return <h2>React Component</h2>; }});

The basicsThe basics

http://bit.ly/1HmMXh8

angular.module("sampleapp") .directive("reactContainer", function() { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render(React.createElement(MyComponent, null), element[0]); } } });


<body> <sample-directive></sample-directive> <react-container></react-container></body>

var MyComponent = React.createClass({ render: function() { return <h2>React Component</h2>; }});

Directive to render a ComponentDirective to render a Component


angular.module("sampleapp") .directive("reactContainer", function() { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(MyComponent, null), element[0]); } } });

Directive to render a ComponentDirective to render a Component


ngReactngReacthttps://github.com/davidchang/ngReact


Thank you, buh bye !Thank you, buh bye !


Dependency Injection - IDependency Injection - I

Example code

return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } });

angular.module("sampleapp") .factory("ReactComponent", function() { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } }); })

http://bit.ly/1Js5V8h


Dependency Injection - IIDependency Injection - II

Example code

angular.module("sampleapp") .factory("ReactComponent", function() { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } }); })

angular.module("sampleapp") .factory("ReactComponent", function(DataService) { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component: ", DataService.data()); } }); })



Dependency Injection - IIIDependency Injection - III

Example code

// ReactComponent = ....

angular.module("sampleapp") .directive("reactContainer", function() { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(ReactComponent, null), element[0] ); } } });

angular.module("sampleapp") .directive("reactContainer", function(ReactComponent) { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(ReactComponent, null), element[0] ); } } });

http://codepen.io/borisd/pen/EjVvOd



Dependency Injection - IVDependency Injection - IVangular.module("sampleapp") .factory("HeaderComponent", function(DataService) { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component: ", DataService.data()); } }); })

angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null) )} }); })


Going crazyGoing crazyAngular in React in Angular in React in Angular

Example code

http://bit.ly/1A9E9eU

angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { return React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null)

); } }); })


angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { return ( <div> <HeaderComponent /> <div>Some nice graphics</div> <FooterComponent /> </div> ); } }); })

JSXJSX

BabelJSX-transpilerWorks with Webpack/Gulp/Grunt/etc


But wait.. But wait.. return React.createElement( "h2", null, "React Component: ", DataService.data());

DataServices.data() ?


There is no $watchThere is no $watchIf you want data binding, you can either useAngular's or roll out your own (flux).

Example code

“ $broadcast makes more sense there

http://bit.ly/1bZBqJn


The Angular wayThe Angular wayWe have Dependency Injection...

We have $rootScope or container's Isolated Scope

We have $on & $watch

We can use digest !

“ Uh oh..


How does Angular renderHow does Angular renderDigest cycleDigest cycle


How does React renderHow does React renderData modeling - NOT Virtual DOMData modeling - NOT Virtual DOM


-- ProfileComponent

<div class="row"> <div class="col-sm-6"> <div class="profile-pic"> <img src="/images/51233221.jpg" /> </div> </div> <div class="col-sm-6"> <div class="data-container"> <span> <i class="icon-name"></i> Boris Dinkevich </span> </div> <div class="data-container"> <span> <i class="icon-age"></i> 33 </span> </div></div>

So what is this Virtual DOM ?So what is this Virtual DOM ?


So what is this Virtual DOM ?So what is this Virtual DOM ?-- ProfileComponent


-- ProfileComponent


https://slides.com/secure/decks/404434/print?print-pdf=true


Wow right ?Wow right ?ReactJS saved DOM manipulations bycalculating the diff itself.

.. in JavaScript ..

React.js Conf 2015 - Hype!Angular + React = Speed Dave Smith

http://localhost:8000/

http://localhost:9000/


"Speed" comparison"Speed" comparisonIf you look carefuly, most samples of AngularJS vs ReactJS either:

Unoptimized Angular side

React.js Conf 2015 - Hype!Fixed github demo PR (Angular is 2x faster than React)

Compares data binding ($digest), not rendering.

Angular + React = Speed Dave SmithFixed github demo PR (Angular and React same speed)

“ "In theory, there ought to be no difference between theory and practice. In practice, there is."

https://www.youtube.com/watch?v=z5e7kWSHWTg

https://github.com/borisd/reactconf-2015-HYPE

https://www.youtube.com/watch?v=XQM0K6YG18s

https://github.com/borisd/angular_react_directive_example


So why React ?So why React ?Components life cycleClear state managementBreak away from $digestServer side rendering !Buzz


So why React ?So why React ?

Total results: {{ ? }}

Available ?

Isolated scope digest




Server RenderingServer RenderingSEOFast page load (bind later)Embed in page before Angular even runs

["hip","hip"]


Life cycleLife cycle

“ You can simulate everything inAngularJS, but then its not AngularJS.


JSX ?JSX ?React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null))}


Directive TemplateDirective Template<div class="row"> <div class="controls" ng-class={ visible: ctrl.canAdd}> <button ng-click="ctrl.addRow">New row</button> <a class="back-button" href="">Go back</a> </div> <div ng-repeat="row in ctrl.rows" class="item">{{ row.name }}</div> <HelpMessage type="addRow" ng-if="ctrl.canAdd"></HelpMessage></div>


JSXJSX render: function() { var className = cx({ 'visible': this.state.canAdd, 'controls': true }); var renderRow = function(row) { return (<div className="item">{ row.name }</div>); } return ( <div className="row"> <div className={ className }> <button onClick={ this.addRow }>New row</button> <a className="back-button" href="">Go back</a> </div> { this.state.rows.map(renderRow) } { this.state.canAdd ? <HelpMessage type="addRow" /> : null } </div> ); }


JSXJSXInteresting solution from Wix ( )Work directly with final resultSplitting to very large of mini components

react-templates

https://github.com/wix/react-templates


Data ModelingData Modeling


Angular / MVVMAngular / MVVMData flowData flow


FluxFluxA Pattern - Not a libraryA Pattern - Not a library

“ All arrows go one way


Flux librariesFlux librariesFacebook Flux

Fluxible by Yahoo

Reflux

Alt

Flummox

Marty

McFly

Lux

Material Flux

Delorean


Flux in AngularFlux in AngularRegular servicesEventEmitter / $broadcastReactJS Flux libraries


Angular 2.0Angular 2.0


Questions ?Questions ?

Thank you [email protected]

Amazing AngularJS / NodeJS / ReactJS Dev ?

Want to hone your skills on projects of all size and shape ?

Work in Israel & NYC ?

- Talk to me at the break

Our next AngularJS Coursestarts this Wedensday

using reactjs in angularjs

Technology