Transcript
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
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
top related