COMPONENTS IN
ANGULARJS AND REACT
Ali Sharif
25th-floor
@sharifsbeat
WeAreDevelopers, 11.06.2015
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 items = this.state.items ...
var active = items.filter(item => item.active);
var inactive = it...
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>
INFO
JavaScript 2 Day Workshop
October 2015
Trainings, Consulting, Workshops
Connect @sharifsbeat
THANK YOU.
Components in AngularJS and React
Components in AngularJS and React
Components in AngularJS and React
Nächste SlideShare
Wird geladen in …5
×

Components in AngularJS and React

720 Aufrufe

Veröffentlicht am

What is component based thinking? How do AngularJS and React compare when it comes to creating components?

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
720
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
65
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Components in AngularJS and React

  1. 1. COMPONENTS IN ANGULARJS AND REACT Ali Sharif 25th-floor @sharifsbeat WeAreDevelopers, 11.06.2015
  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 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> ); }
  15. 15. 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> ); } });
  16. 16. REACT SUMMARY Components all the way down No assumptions about your stack Plain JavaScript. No DSLs, just syntax sugar. ES6, Browserify/Webpack, ClojureScript etc.
  17. 17. ANGULARJS / REACT Data-Heavy/Realtime Apps Large Applications Eco System React Is Just The View
  18. 18. COMBINING ANGULAR AND REACT
  19. 19. ngREACT Migration Path Performance Optimization Connecting Both Frameworks
  20. 20. var ItemList = React.createClass( /* ... */ ); angular.module('app', ['react']) .directive('itemList', function(reactDirective) { return reactDirective(ItemList); }); });
  21. 21. <item-list items="ctrl.activeItems" on-click="ctrl.switchStatus"></item-list>
  22. 22. INFO JavaScript 2 Day Workshop October 2015 Trainings, Consulting, Workshops Connect @sharifsbeat
  23. 23. THANK YOU.

×