Angular js vs. Facebook react

AngularJS vs.
Facebook React
David Pohan a Standa Jaša

Today’s Agenda
1. Obecně Angular vs React
2. Hello World
3. Nahrání partialu stránky
4. Todo aplikace
5. Literatura a bitka

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.)

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]);

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?

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)
io/react/docs/thinking-in-react.
html
(filosofie Reactu)
io/flux/docs/overview.html
(Flux architekura)

Angular js vs. Facebook react

More Related Content

What's hot

Viewers also liked

More from Keyup

Recently uploaded

Angular js vs. Facebook react