2. Today’s Agenda
1. Obecně Angular vs React
2. Hello World
3. Nahrání partialu stránky
4. Todo aplikace
5. Literatura a bitka
3. Motivace
“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.)
4. 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
7. 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]);
8. Bonus pro Viktora (a zbytek hate party)
angular.noop
- function in module ng
A 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?