Embed Size (px)
Citation preview
AngularJS vs. Facebook ReactDavid Pohan a Standa Jaša
Today’s Agenda
1. Obecně Angular vs React2. Hello World3. Nahrání partialu stránky4. Todo aplikace5. Literatura a bitka
“Miško Hevery (autor Angularu) se vsadil o $10k, že přepíše
DoubleClick z 19 tis. loc v GWT na 1700 loc v angularu za 14 dní.” (Nakonec to trvalo tři týdny.)
Motivace
Angular vs React (obecně)
● V Googlu ~ 1200 aplikací
● HTML tagy● Testování ~ docs● Two-way
databinding● AngularDart● Sublime + Idea OK
● JSX skript● Virtuální dom ->
update pomocí diffu● One-way reactive
data flow
Hello World<html ng-app><head><script src=”angular.js”></script></head><body>
<input ng-model=”name” placeholder=”your name”><h1>Hello {{name}}</h1></body></html>
<script type=”text/jsx”>var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});
React.render(<HelloMessage name="John" />, mountNode);
</script>
Nahrání partialu - routing v Angularu// partial.html-------------------------------<div>param: {{params.bookId}}</div>// index.html--------------------------------<div ng-controller=”MainController”><a href=”Book/Gatsby”>Gatsby</a><div ng-view></div></div>// script.js-----------------------------------angular.module(‘ngRouteExample’, [‘ngRoute’])
.controller(‘MainController’, function ($scope, $route) {$scope.$route = $route;}).controller(‘BookController’, function ($scope, $routeParams) {$scope.params = $routeParams;}).config(function($routeProvider) {$routeProvider.when(‘/Book/:bookId’, { templateUrl: ‘partial.html’, controller: ‘BookController’});
ToDo aplikace<div ng-controller=”TodoController”><ul><li ng-repeat=”todo in todos”> {{todo}}</li></ul></div><script>angular.module(‘todoApp’, []).controller(‘TodoController’, [‘$scope’, function ($scope) {$scope.todos = [‘todo1’, ‘todo2’, …];}]);</script>
<script type=”text/jsx”>
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() {
return {items: [], text: ''};
},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
React.render(<TodoApp />, mountNode);
</script>
Bonus pro Viktora (a zbytek hate party)
angular.noop- function in module ngA function that performs no operations. This function can be useful when writing code in the functional style.
function foo(callback) { var result = calculateResult(); (callback || angular.noop)(result);}
WTF?
Literatúra● https://www.youtube.com/watch?
v=tnXO-i7944M (Angular in 20 mins)
● https://www.youtube.com/watch?v=M-MuOU3My-Y (Vojta Jína v Liberci)
● http://facebook.github.io/react/docs/tutorial.html(úvodní tutorial)
● http://facebook.github.io/react/docs/thinking-in-react.html(filosofie Reactu)
● http://facebook.github.io/flux/docs/overview.html(Flux architekura)
