Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Awesome React

Awesome React

Open Discussion about Modern Web Design, Solution Forum, FSOFT HCM 28/09/2016

Avatar for Nguyễn Nhật Hoàng

Nguyễn Nhật Hoàng

September 28, 2016
Tweet

More Decks by Nguyễn Nhật Hoàng

Other Decks in Technology

Transcript

  1. ?

  2. [{ "name": "Galaxy S5", "isOnline": true, "isUltilizing": false, "isFavorite": true

    }, { "name": "Galaxy Note4", "isOnline": false, "isUltilizing": false, "isFavorite": true }, { "name": "iPhone 5", "isOnline": true, "isUltilizing": true, "isFavorite": false }]
  3. [{ "title": "Awesome React", "upvotes": 90, "downvotes": 5 }, {

    "title": "Progessive Web App", "upvotes": 112, "downvotes": 11 }, { "title": "Modern Web Technologies", "upvotes": 20, "downvotes": 8 }]
  4. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property('topics') }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  5. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property('topics') }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  6. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } var Topic

    = Ember.Object.extend({ percent: function() { return (this.upvotes * 100 / totalVotes(this)).toFixed(2); }.property('upvotes', 'downvotes') }); var AppModel = Ember.Object.extend({ topTopics: function() { return this.topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }).slice(0, 3) }.property(‘[email protected]’, ‘[email protected]’) }); var appModel = AppModel.create({ topics: topics.map(function(topic) { return Topic.create(topic) }) })
  7. var app = angular.module('app',[]); app.controller('AvatarController', function($scope) { $scope.user = {

    username: 'codeaholicguy', fbid: '632571376813536', fullName: ‘Hoàng Nguyễn' } }); app.directive('fbAvatar', function() { return { restrict: 'E', scope: {user: '='}, template: '<div class="fbAvatar"><fb-pic user="user"></fb- pic>{{user.fullName}}</div>' } }) app.directive('fbPic', function() { return { restrict: 'E', scope: {user: '='}, template: '<img src="http://graph.facebook.com/{{user.fbid}}/ picture"></img>' } })
  8. var app = angular.module('app',[]); app.controller('AvatarController', function($scope) { $scope.user = {

    username: 'codeaholicguy', fbid: '632571376813536', fullName: ‘Hoàng Nguyễn' } }); app.directive('fbAvatar', function() { return { restrict: 'E', scope: {user: '='}, template: '<div class="fbAvatar"><fb-pic user="user"></fb- pic>{{user.fullName}}</div>' } }) app.directive('fbPic', function() { return { restrict: 'E', scope: {user: '='}, template: '<img src="http://graph.facebook.com/{{user.fbid}}/ picture"></img>' } })
  9. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } function renderApp(topics)

    { return DOM.ul({className: 'list'}, topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }) .slice(0, 3) .map(function(topic) { return DOM.li({className: 'item'}, topic.title, ' ', (topic.upvotes * 100 / totalVotes(this)).toFixed(2), '%' ); }) ); } var topics = getTopics(); render(renderApp(topics), document.body);
  10. function totalVotes(topic) { return topic.upvotes + topic.downvotes; } function renderTopic(topic)

    { return DOM.li({className: 'item'}, topic.title, ' ', (topic.upvotes * 100 / totalVotes(this)).toFixed(2), '%' ); } function renderApp(topics) { return DOM.ul({className: 'list'}, topics.sort(function(a, b) { return totalVotes(a) - totalVotes(b); }) .slice(0, 3) .map(renderTopic) ); } var topic = getTopics(); render(renderApp(topic), document.body);
  11. But

  12. Data binding systems with domain specific language are not statically

    analyzable. Linting - Minification - Type checking