Internal Project: Under the Hood

480 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
480
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Internal Project: Under the Hood

  1. 1. Internal Project Under the hood
  2. 2. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  3. 3. OOP: CoffeeScript Javascript + Ruby = CoffeeScript Compiles to Javascript Follows JS best practices
  4. 4. square = (x) -> x * x CoffeeScript vs. JavaScript math = root: Math.sqrt square: square cube: (x) -> x * square x number = -42 if opposite cubes = (math.cube num for num in list) author = quote = sentence "Wittgenstein" "A picture is a fact. -- #{ author }" }" = "#{ 22 / 7 } is an approximation of π”
  5. 5. CoffeeScript vs. JavaScript var Animal, Horse, Snake, sam, tom, _ref, _ref1, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if function(child, (var (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new this.constructor ctor(); child.__super__ = parent.prototype; return child; }; Animal = (function() { (function() function Animal(name) { this.name = name; this.name } Animal.prototype.move = function(meters) { function(meters) return alert(this.name + (" moved " + meters + "m.")); alert(this.name (" "m.")); }; return Animal; })(); Snake = (function(_super) { (function(_super) __extends(Snake, _super); _super); class Animal constructor: (@name) -> (@name) function Snake() { _ref = Snake.__super__.constructor.apply(this, arguments); Snake.__super__.constructor.apply(this, move: (meters) -> return _ref; alert @name + " moved #{meters}m." #{meters}m." } Snake.prototype.move = function() { function() class Snake alert("Slithering..."); extends Animal alert("Slithering..."); move: -> return Snake.__super__.move.call(this, 5); Snake.__super__.move.call(this, alert "Slithering..." }; super 5 return Snake; })(Animal); class Horse extends Animal Horse = (function(_super) { (function(_super) move: -> __extends(Horse, _super); _super); alert "Galloping..." super 45 function Horse() { _ref1 = Horse.__super__.constructor.apply(this, arguments); Horse.__super__.constructor.apply(this, sam = new Snake "Sammy the Python" return _ref1; tom = new Horse "Tommy the Palomino" } Horse.prototype.move = function() { function() sam.move() alert("Galloping..."); "Galloping..."); alert( tom.move() return Horse.__super__.move.call(this, 45); Horse.__super__.move.call(this, }; return Horse; })(Animal); sam = new Snake("Sammy the Python"); Snake("Sammy Python"); tom = new Horse("Tommy the Palomino"); Horse("Tommy Palomino"); sam.move(); tom.move();
  6. 6. CoffeeScript vs. JavaScript class Animal constructor: (@name) -> (@name) move: (meters) -> alert @name + " moved #{meters}m." #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()
  7. 7. OOP: CoffeeScript http://coffeescript.org
  8. 8. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  9. 9. MVC: AngularJS MVC framework Logic / View separation Data binding
  10. 10. MVC: AngularJS <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div>
  11. 11. MVC: AngularJS
  12. 12. MVC: AngularJS http://angularjs.org
  13. 13. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  14. 14. Multiple UI: Responsibilities HTML: The data to be shown CSS: How the data should shown
  15. 15. Multiple UI: CSS 3 Allows to separate presentation logic from html Rounded corners Multiple backgrounds Animations Media queries
  16. 16. But CSS is still not perfect…
  17. 17. Multiple UI: SASS Syntactically Awesome Style Sheets Fills the gaps left open in CSS Variables Mixins Nesting Linking external files Compiles to vanilla CSS, the browsers love
  18. 18. Multiple UI: SASS
  19. 19. Multiple UI: SASS http://sasslang.com
  20. 20. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation

×