Recommended
More Related Content
What's hot
What's hot (10)
Similar to Thinking in Components - Comparing AngularJS With React
Similar to Thinking in Components - Comparing AngularJS With React (20)
Recently uploaded
Recently uploaded (20)
Thinking in Components - Comparing AngularJS With React
- 1. THINKING IN COMPONENTS COMPARING ANGULARJS WITH REACT S. Oestreicher A. Sharif @thinkfunctional @sharifsbeat
- 2. www.25th-floor.com 25th-floor Agile / Scrum Product Development, Consulting 2+ years AngularJS in production
- 4. WHY TO AVOID ngCONTROLLER No Isolation Hard To Test Not Composable Tight Coupling Uncontrolled Mutation
- 7. DIRECTIVES
- 9. <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>
- 10. app.directive('itemsList', function() { return { scope: { title: '@', items: '=', onClick: '&' }, restrict: 'EA', controller: function() {}, controllerAs: 'ctrl', bindToController: true, templateUrl: 'items-list.html' } });
- 11. <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>
- 12. LIMITATIONS More Code To Write Inherently Mutation Based Still Tightly Coupled
- 13. REACT
- 14. RETHINKING BEST PRACTICES Separation Of Technologies One-Directional Data Flow Immutability Re-render On Every Change
- 16. var App = React.createClass({ getInitialState: function() { return { filter: '', items: [ {label: "Foo", active: false} // more items ... ] } }, render: function() { // do something ... } }); React.render(<App/>, window.app);
- 17. 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> ); }
- 18. handleClick: function(item) { // this is not recommended, better to use immutable! item.active = !item.active; this.forceUpdate(); }, handleSearch: function(text) { this.setState({filter: text}); },
- 19. 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> ); } });
- 20. REACT SUMMARY Components all the way down No assumptions about your stack Plain JavaScript. No DSLs, just syntax sugar. ES6, Browserify/Webpack, ClojureScript etc.
- 21. ANGULARJS / REACT Data-Heavy/Realtime Apps Large Applications Eco System React Is Just The View
- 22. COMBINING ANGULAR AND REACT
- 23. ngREACT Migration Path Performance Optimization Connecting Both Frameworks
- 24. var ItemList = React.createClass( /* ... */ ); angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
- 26. QUESTIONS
- 27. THANK YOU.