SlideShare uma empresa Scribd logo
1 de 26
Baixar para ler offline
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
Components in AngularJS and React
WHY TO AVOID ngCONTROLLER
No Isolation
Hard To Test
Not Composable
Tight Coupling
Uncontrolled Mutation
Components in AngularJS and React
Components in AngularJS and React
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 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>
app.directive('itemsList', function() {
return {
scope: {
title: '@',
items: '=',
onClick: '&'
},
restrict: 'EA',
controller: function() {},
controllerAs: 'ctrl',
bindToController: true,
templateUrl: 'items-list.html'
}
});
<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>
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}
// more items ...
]
}
},
render: function() {
// do something ...
}
});
React.render(<App/>, window.app);
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>
);
}
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>
);
}
});
REACT SUMMARY
Components all the way down
No assumptions about your stack
Plain JavaScript. No DSLs, just syntax sugar.
ES6, Browserify/Webpack, ClojureScript etc.
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(reactDirective) {
return reactDirective(ItemList);
});
});
<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.

Mais conteúdo relacionado

Semelhante a Components in AngularJS and React

Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Alessandro Nadalin
 
Angular js filters and directives
Angular js filters and directivesAngular js filters and directives
Angular js filters and directivesDarryl Sherman
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Alessandro Nadalin
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UIGeorgeIshak
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancementGraham Bird
 
jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )EZoApp
 
Controller in AngularJS
Controller in AngularJSController in AngularJS
Controller in AngularJSBrajesh Yadav
 
Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Amar Shukla
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
Using JIRA to build a culture of innovation - Atlassian Summit 2012
Using JIRA to build a culture of innovation - Atlassian Summit 2012Using JIRA to build a culture of innovation - Atlassian Summit 2012
Using JIRA to build a culture of innovation - Atlassian Summit 2012Atlassian
 
React 16: new features and beyond
React 16: new features and beyondReact 16: new features and beyond
React 16: new features and beyondArtjoker
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
SplunkLive! Analytics with Splunk Enterprise - Part 2
SplunkLive! Analytics with Splunk Enterprise - Part 2SplunkLive! Analytics with Splunk Enterprise - Part 2
SplunkLive! Analytics with Splunk Enterprise - Part 2Splunk
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014Dariusz Kalbarczyk
 

Semelhante a Components in AngularJS and React (20)

Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
Angular js is the future. maybe. @ ConFoo 2014 in Montreal (CA)
 
Angular js filters and directives
Angular js filters and directivesAngular js filters and directives
Angular js filters and directives
 
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
Hey, I just met AngularJS, and this is crazy, so here’s my JavaScript, let’s ...
 
ChocolateChip-UI
ChocolateChip-UIChocolateChip-UI
ChocolateChip-UI
 
Practical progressive enhancement
Practical progressive enhancementPractical progressive enhancement
Practical progressive enhancement
 
Tips for Angular Applications
Tips for Angular ApplicationsTips for Angular Applications
Tips for Angular Applications
 
iWebkit
iWebkitiWebkit
iWebkit
 
jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )
 
Controller in AngularJS
Controller in AngularJSController in AngularJS
Controller in AngularJS
 
20150515ken
20150515ken20150515ken
20150515ken
 
Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Using JIRA to build a culture of innovation - Atlassian Summit 2012
Using JIRA to build a culture of innovation - Atlassian Summit 2012Using JIRA to build a culture of innovation - Atlassian Summit 2012
Using JIRA to build a culture of innovation - Atlassian Summit 2012
 
React 16: new features and beyond
React 16: new features and beyondReact 16: new features and beyond
React 16: new features and beyond
 
Grails Advanced
Grails Advanced Grails Advanced
Grails Advanced
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
SplunkLive! Analytics with Splunk Enterprise - Part 2
SplunkLive! Analytics with Splunk Enterprise - Part 2SplunkLive! Analytics with Splunk Enterprise - Part 2
SplunkLive! Analytics with Splunk Enterprise - Part 2
 
Custom directive and scopes
Custom directive and scopesCustom directive and scopes
Custom directive and scopes
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 

Último

Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfMind IT Systems
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxBarakaMuyengi
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfICS
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...telebusocialmarketin
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityRandy Shoup
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfCloudMetic
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Inc
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJpolinaucc
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 

Último (20)

Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
 
Practical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdfPractical Advice for FDA’s 510(k) Requirements.pdf
Practical Advice for FDA’s 510(k) Requirements.pdf
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
Telebu Social -Whatsapp Business API : Mastering Omnichannel Business Communi...
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdf
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
Technical improvements. Reasons. Methods. Estimations. CJ
Technical improvements.  Reasons. Methods. Estimations. CJTechnical improvements.  Reasons. Methods. Estimations. CJ
Technical improvements. Reasons. Methods. Estimations. CJ
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 

Components in AngularJS and React