Download as PDF, PPTX
![var App = React.createClass({
getInitialState: function() {
return {
filter: '',
items: [
{label: "Foo", active: false}
// more items ...
]
}
},
render: function() {
// do something ...
}
});
React.render(<App/>, window.app);](https://image.slidesharecdn.com/componentsinangularreact-150617073606-lva1-app6892/85/Components-in-AngularJS-and-React-16-320.jpg)
![var ItemList = React.createClass( /* ... */ );
angular.module('app', ['react'])
.directive('itemList', function(reactDirective) {
return reactDirective(ItemList);
});
});](https://image.slidesharecdn.com/componentsinangularreact-150617073606-lva1-app6892/85/Components-in-AngularJS-and-React-23-320.jpg)
![var App = React.createClass({
getInitialState: function() {
return {
filter: '',
items: [
{label: "Foo", active: false}
// more items ...
]
}
},
render: function() {
// do something ...
}
});
React.render(<App/>, window.app);](https://image.slidesharecdn.com/componentsinangularreact-150617073606-lva1-app6892/75/Components-in-AngularJS-and-React-16-2048.jpg)
![var ItemList = React.createClass( /* ... */ );
angular.module('app', ['react'])
.directive('itemList', function(reactDirective) {
return reactDirective(ItemList);
});
});](https://image.slidesharecdn.com/componentsinangularreact-150617073606-lva1-app6892/75/Components-in-AngularJS-and-React-23-2048.jpg)
Components in AngularJS and React
- 1. COMPONENTS IN ANGULARJS ANDREACT Ali Sharif 25th-floor @sharifsbeat WeAreDevelopers, 11.06.2015
- 2. www.25th-floor.com 25th-floor Agile / Scrum ProductDevelopment, Consulting 2+ years AngularJS in production
- 4. WHY TO AVOIDngCONTROLLER No Isolation Hard To Test Not Composable Tight Coupling Uncontrolled Mutation
- 7.
- 8.
- 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 ToWrite Inherently Mutation Based Still Tightly Coupled
- 13.
- 14. RETHINKING BEST PRACTICES SeparationOf Technologies One-Directional Data Flow Immutability Re-render On Every Change
- 15.
- 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 allthe way down No assumptions about your stack Plain JavaScript. No DSLs, just syntax sugar. ES6, Browserify/Webpack, ClojureScript etc.
- 20. ANGULARJS / REACT Data-Heavy/RealtimeApps Large Applications Eco System React Is Just The View
- 21.
- 22. ngREACT Migration Path Performance Optimization ConnectingBoth Frameworks
- 23. var ItemList =React.createClass( /* ... */ ); angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
- 24.
- 25. INFO JavaScript 2 DayWorkshop October 2015 Trainings, Consulting, Workshops Connect @sharifsbeat
- 26.