thinking in components - comparing angularjs with react
TRANSCRIPT
THINKING IN COMPONENTSCOMPARING ANGULARJS WITH REACT
S. Oestreicher
A. Sharif
@thinkfunctional
@sharifsbeat
www.25th-floor.com
25th-floorAgile / Scrum
Product Development, Consulting
2+ years AngularJS in production
WHY TO AVOID ngCONTROLLERNo Isolation
Hard To Test
Not Composable
Tight Coupling
Uncontrolled Mutation
DIRECTIVES
<body ng-app="app"> <items-container></items-container></body>
<div class="main"> <search-box on-change="ctrl.updateFilter(search, active)"></search-box>
<items-list data-title="Active Items" data-items="ctrl.activeItems" data-on-click="ctrl.switchStatus(item)"></items-list>
<items-list data-title="Inactive Items" data-items="ctrl.inactiveItems" data-on-click="ctrl.switchStatus(item)"></items-list></div>
app.directive('itemsList', function() { return { scope: { title: '@', items: '=', onClick: '&' }, restrict: 'EA', controller: function() {}, controllerAs: 'ctrl', bindToController: true, templateUrl: 'items-list.html' }});
<div class="items-list"> <h3>{{ctrl.title}}</h3> <span ng-if="ctrl.items.length == 0">No items available.</span> <ul class="items"> <li ng-repeat="item in ctrl.items"> <item data-set="item" on-click="ctrl.onClick({item: item})"></item> </li> </ul></div>
LIMITATIONSMore Code To Write
Inherently Mutation Based
Still Tightly Coupled
REACT
RETHINKING BEST PRACTICESSeparation Of Technologies
One-Directional Data Flow
Immutability
Re-render On Every Change
<body> <div id="app"></div></body>
var App = React.createClass({ getInitialState: function() { return { filter: '', items: [ {label: "Foo", active: false} // more items ... ] } },
render: function() { // do something ... }});React.render(<App/>, window.app);
render: function() { var filter = this.state.filter.toLowerCase(); var items = this.state.items.filter(item => _.includes(item.label.toLowerCase(), filter) ); var active = items.filter(item => item.active); var inactive = items.filter(item => !item.active); return ( <div> <Searchbar onChange={this.handleSearch}/> <h3>Active</h3> <ItemList items={active} onClick={this.handleClick}/> <h3>Inactive</h3> <ItemList items={inactive} onClick={this.handleClick}/> </div> );}
handleClick: function(item) { // this is not recommended, better to use immutable! item.active = !item.active; this.forceUpdate();},handleSearch: function(text) { this.setState({filter: text});},
var ItemList = React.createClass({ render: function() { var items = this.props.items; if (items.length == 0) { return <p>No items available.</p> } return ( <ul> {items.map((item, index) => <Item key={index} onClick={this.props.onClick} item={item} />)} </ul> ); }});
REACT SUMMARYComponents all the way down
No assumptions about your stack
Plain JavaScript. No DSLs, just syntax sugar.
ES6, Browserify/Webpack, ClojureScript etc.
ANGULARJS / REACTData-Heavy/Realtime Apps
Large Applications
Eco System
React Is Just The View
COMBINING ANGULAR AND REACT
ngREACTMigration Path
Performance Optimization
Connecting Both Frameworks
var ItemList = React.createClass( /* ... */ );angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
<item-list items="ctrl.activeItems" on-click="ctrl.switchStatus"></item-list>
QUESTIONS
THANK YOU.