THINKING IN COMPONENTS
COMPARING ANGULARJS WITH REACT
S. Oestreicher
A. Sharif
@thinkfunctional
@sharifsbeat
www.25th-floor.com
25th-floor
Agile / Scrum
Product Development, Consulting
2+ years AngularJS in production
WHY TO AVOID ngCONTROLLER
No 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 ...
app.directive('itemsList', function() {
return {
scope: {
title: '@',
items: '=',
onClick: '&'
},
restrict: 'EA',
controll...
<div class="items-list">
<h3>{{ctrl.title}}</h3>
<span ng-if="ctrl.items.length == 0">No items available.</span>
<ul class...
LIMITATIONS
More Code To Write
Inherently Mutation Based
Still Tightly Coupled
REACT
RETHINKING BEST PRACTICES
Separation 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}
//...
render: function() {
var filter = this.state.filter.toLowerCase();
var items = this.state.items.filter(item =>
_.includes(...
handleClick: function(item) {
// this is not recommended, better to use immutable!
item.active = !item.active;
this.forceU...
var ItemList = React.createClass({
render: function() {
var items = this.props.items;
if (items.length == 0) {
return <p>N...
REACT SUMMARY
Components all the way down
No assumptions about your stack
Plain JavaScript. No DSLs, just syntax sugar.
ES...
ANGULARJS / REACT
Data-Heavy/Realtime Apps
Large Applications
Eco System
React Is Just The View
COMBINING ANGULAR AND REACT
ngREACT
Migration Path
Performance Optimization
Connecting Both Frameworks
var ItemList = React.createClass( /* ... */ );
angular.module('app', ['react'])
.directive('itemList', function(reactDirec...
<item-list items="ctrl.activeItems"
on-click="ctrl.switchStatus"></item-list>
QUESTIONS
THANK YOU.
Thinking in Components - Comparing AngularJS With React
Thinking in Components - Comparing AngularJS With React
Thinking in Components - Comparing AngularJS With React
Nächste SlideShare
Wird geladen in …5
×

Thinking in Components - Comparing AngularJS With React

600 Aufrufe

Veröffentlicht am

Component Based Thinking In AngularJS and React

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
600
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Thinking in Components - Comparing AngularJS With React

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

×