Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Components in AngularJS and React
Ähnlich wie Components in AngularJS and React (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Components in AngularJS and React
- 1. COMPONENTS IN ANGULARJS AND REACT Ali Sharif 25th-floor @sharifsbeat WeAreDevelopers, 11.06.2015
- 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 items = this.state.items ... 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. 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> ); } });
- 19. REACT SUMMARY Components all the way down No assumptions about your stack Plain JavaScript. No DSLs, just syntax sugar. ES6, Browserify/Webpack, ClojureScript etc.
- 20. ANGULARJS / REACT Data-Heavy/Realtime Apps Large Applications Eco System React Is Just The View
- 21. COMBINING ANGULAR AND REACT
- 22. ngREACT Migration Path Performance Optimization Connecting Both Frameworks
- 23. var ItemList = React.createClass( /* ... */ ); angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
- 25. INFO JavaScript 2 Day Workshop October 2015 Trainings, Consulting, Workshops Connect @sharifsbeat
- 26. THANK YOU.