internal project: under the hood

Internal ProjectInternal ProjectUnder the hoodUnder the hood

RequirementsRequirements

Complex logicComplex logic

Reusable coreReusable core

Multiple UIMultiple UI

Object Oriented ProgrammingObject Oriented Programming

MVCMVC

Data / view separationData / view separation

OOP: CoffeeScriptOOP: CoffeeScript

Javascript + Ruby = CoffeeScriptJavascript + Ruby = CoffeeScript

Compiles to JavascriptCompiles to Javascript

Follows JS best practicesFollows JS best practices

CoffeeScript vs. CoffeeScript vs. JavaScriptJavaScript

square = (x) -> x * xsquare = (x) -> x * x

math =math = root: Math.sqrtroot: Math.sqrt square: squaresquare: square cube: (x) -> x * square xcube: (x) -> x * square x

number = -42 number = -42 ifif opposite opposite

cubes = (math.cube num cubes = (math.cube num forfor num num inin list) list)

author = "Wittgenstein"author = "Wittgenstein"quote = quote = "A picture is a fact. -- "A picture is a fact. -- #{ author }#{ author }""sentence = sentence = ""#{ #{ 2222 / / 77 } } is an approximation of π” is an approximation of π”

CoffeeScript vs. CoffeeScript vs. JavaScriptJavaScript

classclass AnimalAnimal constructor: (constructor: (@name@name) ->) ->

move: (meters) ->move: (meters) -> alert alert @name@name + + " moved " moved #{meters}#{meters}m."m."

classclass SnakeSnake extendsextends AnimalAnimal move: ->move: -> alert alert "Slithering...""Slithering..." supersuper 5 5

classclass HorseHorse extendsextends AnimalAnimal move: ->move: -> alert alert "Galloping...""Galloping..." supersuper 45 45

sam = sam = newnew Snake Snake "Sammy the Python""Sammy the Python"tom = tom = newnew Horse Horse "Tommy the Palomino""Tommy the Palomino"

sam.move()sam.move()tom.move()tom.move()

varvar Animal, Horse, Snake, sam, tom, _ref, _ref1, Animal, Horse, Snake, sam, tom, _ref, _ref1, __hasProp = {}.hasOwnProperty,__hasProp = {}.hasOwnProperty, __extends = __extends = functionfunction(child, parent) { (child, parent) { forfor ( (varvar key key inin parent) { parent) { ifif (__hasProp.call(parent, key)) child[key] (__hasProp.call(parent, key)) child[key] = parent[key]; } = parent[key]; } functionfunction ctor() { ctor() { thisthis.constructor = child; } ctor.prototype = parent.prototype; .constructor = child; } ctor.prototype = parent.prototype; child.prototype = child.prototype = newnew ctor(); child.__super__ = parent.prototype; ctor(); child.__super__ = parent.prototype; returnreturn child; }; child; };Animal = (Animal = (functionfunction() {() { functionfunction Animal(name) { Animal(name) { thisthis.name = name;.name = name; }} Animal.prototype.move = Animal.prototype.move = functionfunction(meters) {(meters) { returnreturn alert( alert(thisthis.name + (.name + (" moved "" moved " + meters + + meters + "m.""m."));)); };}; returnreturn Animal; Animal;})();})();Snake = (Snake = (functionfunction(_(_supersuper) {) { __extends(Snake, ___extends(Snake, _supersuper););

functionfunction Snake() { Snake() { _ref = Snake.__super__.constructor.apply(_ref = Snake.__super__.constructor.apply(thisthis, arguments);, arguments); returnreturn _ref; _ref; }} Snake.prototype.move = Snake.prototype.move = functionfunction() {() { alert(alert("Slithering...""Slithering...");); returnreturn Snake.__super__.move.call( Snake.__super__.move.call(thisthis, 5);, 5); };}; returnreturn Snake; Snake;})(Animal);})(Animal);

Horse = (Horse = (functionfunction(_(_supersuper) {) { __extends(Horse, ___extends(Horse, _supersuper););

functionfunction Horse() { Horse() { _ref1 = Horse.__super__.constructor.apply(_ref1 = Horse.__super__.constructor.apply(thisthis, arguments);, arguments); returnreturn _ref1; _ref1; }} Horse.prototype.move = Horse.prototype.move = functionfunction() {() { alert(alert("Galloping...""Galloping...");); returnreturn Horse.__super__.move.call( Horse.__super__.move.call(thisthis, 45);, 45); };}; returnreturn Horse; Horse;})(Animal);})(Animal);sam = sam = newnew Snake( Snake("Sammy the Python""Sammy the Python"););tom = tom = newnew Horse( Horse("Tommy the Palomino""Tommy the Palomino"););sam.move();sam.move();tom.move();tom.move();

CoffeeScript vs. CoffeeScript vs. JavaScriptJavaScript

classclass AnimalAnimal constructor: (constructor: (@name@name) ->) ->

move: (meters) ->move: (meters) -> alert alert @name@name + + " moved " moved #{meters}#{meters}m."m."

classclass SnakeSnake extendsextends AnimalAnimal move: ->move: -> alert alert "Slithering...""Slithering..." supersuper 5 5

classclass HorseHorse extendsextends AnimalAnimal move: ->move: -> alert alert "Galloping...""Galloping..." supersuper 45 45

sam = sam = newnew Snake Snake "Sammy the Python""Sammy the Python"tom = tom = newnew Horse Horse "Tommy the Palomino""Tommy the Palomino"

sam.move()sam.move()tom.move()tom.move()

OOP: CoffeeScriptOOP: CoffeeScript

http://coffeescript.orghttp://coffeescript.org

RequirementsRequirements

Complex logicComplex logic

Reusable coreReusable core

Multiple UIMultiple UI

Object Oriented ProgrammingObject Oriented Programming

MVCMVC

Data / view separationData / view separation

MVC: AngularJSMVC: AngularJS

MVC frameworkMVC framework

Logic / View separationLogic / View separation

Data bindingData binding

MVC: AngularJSMVC: AngularJS

<div ng-app><div ng-app>

<div><div>

<label>Name:</label><label>Name:</label>

<input type="text" ng-model="yourName" placeholder="Enter a <input type="text" ng-model="yourName" placeholder="Enter a name here">name here">

<hr><hr>

<h1>Hello {{yourName}}!</h1><h1>Hello {{yourName}}!</h1>

</div></div>

</div></div>

MVC: AngularJSMVC: AngularJS

MVC: AngularJSMVC: AngularJS

http://angularjs.orghttp://angularjs.org

RequirementsRequirements

Complex logicComplex logic

Reusable coreReusable core

Multiple UIMultiple UI

Object Oriented ProgrammingObject Oriented Programming

MVCMVC

Data / view separationData / view separation

Multiple UI: Multiple UI: ResponsibilitiesResponsibilities

HTML: The data to be shownHTML: The data to be shown

CSS: How the data should shownCSS: How the data should shown

Multiple UI: CSS 3Multiple UI: CSS 3

Allows to separate presentation logic from htmlAllows to separate presentation logic from html

Rounded cornersRounded corners

Multiple backgroundsMultiple backgrounds

AnimationsAnimations

Media queriesMedia queries

But CSS is still not perfect…But CSS is still not perfect…

Multiple UI: SASSMultiple UI: SASS

Syntactically Awesome Style SheetsSyntactically Awesome Style Sheets

Fills the gaps left open in CSSFills the gaps left open in CSS

VariablesVariables

MixinsMixins

NestingNesting

Linking external filesLinking external files

Compiles to vanilla CSS, the browsers loveCompiles to vanilla CSS, the browsers love

Multiple UI: SASSMultiple UI: SASS

Multiple UI: SASSMultiple UI: SASS

http://sass-http://sass-lang.comlang.com

RequirementsRequirements

Complex logicComplex logic

Reusable coreReusable core

Multiple UIMultiple UI

Object Oriented ProgrammingObject Oriented Programming

MVCMVC

Data / view separationData / view separation