Your SlideShare is downloading. ×
  • Like
Internal Project: Under the Hood
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Internal Project: Under the Hood

  • 219 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
219
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Internal Project Under the hood
  • 2. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  • 3. OOP: CoffeeScript Javascript + Ruby = CoffeeScript Compiles to Javascript Follows JS best practices
  • 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. 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. 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. OOP: CoffeeScript http://coffeescript.org
  • 8. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  • 9. MVC: AngularJS MVC framework Logic / View separation Data binding
  • 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. MVC: AngularJS
  • 12. MVC: AngularJS http://angularjs.org
  • 13. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation
  • 14. Multiple UI: Responsibilities HTML: The data to be shown CSS: How the data should shown
  • 15. Multiple UI: CSS 3 Allows to separate presentation logic from html Rounded corners Multiple backgrounds Animations Media queries
  • 16. But CSS is still not perfect…
  • 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. Multiple UI: SASS
  • 19. Multiple UI: SASS http://sasslang.com
  • 20. Requirements Complex logic Object Oriented Programming Reusable core MVC Multiple UI Data / view separation