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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Internal Project: Under the Hood

244

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
244
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
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

×