Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular js vs. Facebook react

1.525 Aufrufe

Veröffentlicht am

Přednáška o rozdílech a společných vlastnostech Angular js. a Facebook react.

Veröffentlicht in: Software
  • If you’re struggling with your assignments like me, check out ⇒ www.WritePaper.info ⇐. My friend sent me a link to to tis site. This awesome company. After I was continuously complaining to my family and friends about the ordeals of student life. They wrote my entire research paper for me, and it turned out brilliantly. I highly recommend this service to anyone in my shoes. ⇒ www.WritePaper.info ⇐.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/YIZbD ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

Angular js vs. Facebook react

  1. 1. AngularJS vs. Facebook React David Pohan a Standa Jaša
  2. 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. 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. 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
  5. 5. 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>
  6. 6. 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’});
  7. 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. 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?
  9. 9. 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)

×