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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Angular js vs. Facebook react

Ähnlich wie Angular js vs. Facebook react (20)

Mehr von Keyup

Mehr von Keyup (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Angular js vs. Facebook react