- Architecture of client-side code
- Responsibilities
- Less time spent teaching new hires
- Do more, write less
- Maintainability & knowledge sharing
- Community support for questions
- Plugins
- Testing
- 3rd party tools are well vetted for bugs, speed
- reduce AJAX calls, reduce number of trips, potential failure
- share data between views
- dynamic templates
- faster page transitions
- would make transitioning to single-page app easy (if/when)
- separation of concerns; static website == FAST
- use Rails as API
- Dependency injection
- Highly testable
- Separation of concerns
- Component/module pattern; app is a composition of modules
- Two-way data binding
- Declarative HTML
- Templates rendering to JS strings behind the scenes
- Great ecosystem
https://angular.io/docs/js/latest/quickstart.html
- Keep view and controller close
- Different provider types are functions that return functions
- Doesn’t feel like writing Javascript
- Upgrade path to version 2.0
- View and controller code in one file
- Promotes uni-directional data flow
- Follows existing javascript patterns
- Component-based
- Can be easily dropped into any existing project
https://facebook.github.io/react/docs/why-react.html
- Unstable ecosystem
- Being the “V” in MVC is limiting
- Polymer & web components
- Ember
- Backbone
Meh.
$.get(‘/api/investors’)
.done(function(response){
var ul = $(‘<ul class=“investors”>’);
$.each(response.investors, function(investor){
ul.append($(‘<li class=“investor”>’, investor.name + investor.cashMoney));
});
document.body.appendChild(ul);
});
$(‘.new-investor-button’).click(function(event){
event.preventDefault();
event.stopPropagation();
$.post(‘/api/investors’).done(function(response){
$(‘.investors’).append($(‘<li class=“investor”>’,
investor.name + investor.cashMoney);
});
});import React from ‘react’;
class Investors extends React.Component {
addNewInvestor () {
$.post(‘/api/investors’).done(function(response){
this.setState({investors: response.investors});
});
}
render () {
var investors = this.state.investors.map(function(investor){
return <li className=“investor”>{investor.name} {investor.cashMoney}</li>;
});
return (
<section>
<ul className=“investors”>
{investors}
</ul>
<button onClick={addNewInvestor}>Add new investor</button>
</section>
)
}
}
React.render(<Investors />, document.body);<body ng-app=“app”>
<investors></investors>
</body> angular.module(‘app’, [‘investors’]); angular.module(‘investors’, [])
.directive(function() {
return {
templateUrl: ‘app/views/directives/investors.html’,
restrict: ‘E’,
replace: true,
controller: ‘InvestorsController’,
controllerAs: ‘InvestorsCtrl
}
})
.controller(‘InvestorsController’, function(InvestorsResource){
this.investors = InvestorsResource.get();
this.addNewInvestor = function(investor){
this.investors.push(investor);
new InvestorsResource(investor).save();
};
})
.factory(‘InvestorsResource’, function($resource) {
return $resource(‘/api/investors’);
})<section>
<ul class=“investors”>
<li ng-repeat=“investor in InvestorsCtrl.investors”>{{investor.name}} {{investor.cashMoney}}</li>
</ul>
<button ng-click=“InvestorsCtrl.addNewInvestor(investor)”>Add new investor</button>
</section>Give it one, both, or another a try. Make the scope of the work small.
Choose one if you all enjoy writing in it, and it makes your lives easier.
Example: when would you choose Angular over React?