internal project: under the hood
TRANSCRIPT
![Page 1: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/1.jpg)
Internal ProjectInternal ProjectUnder the hoodUnder the hood
![Page 2: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/2.jpg)
RequirementsRequirements
Complex logicComplex logic
Reusable coreReusable core
Multiple UIMultiple UI
Object Oriented ProgrammingObject Oriented Programming
MVCMVC
Data / view separationData / view separation
![Page 3: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/3.jpg)
OOP: CoffeeScriptOOP: CoffeeScript
Javascript + Ruby = CoffeeScriptJavascript + Ruby = CoffeeScript
Compiles to JavascriptCompiles to Javascript
Follows JS best practicesFollows JS best practices
![Page 4: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/4.jpg)
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 π”
![Page 5: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/5.jpg)
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();
![Page 6: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/6.jpg)
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()
![Page 7: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/7.jpg)
OOP: CoffeeScriptOOP: CoffeeScript
http://coffeescript.orghttp://coffeescript.org
![Page 8: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/8.jpg)
RequirementsRequirements
Complex logicComplex logic
Reusable coreReusable core
Multiple UIMultiple UI
Object Oriented ProgrammingObject Oriented Programming
MVCMVC
Data / view separationData / view separation
![Page 9: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/9.jpg)
MVC: AngularJSMVC: AngularJS
MVC frameworkMVC framework
Logic / View separationLogic / View separation
Data bindingData binding
![Page 10: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/10.jpg)
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>
![Page 11: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/11.jpg)
MVC: AngularJSMVC: AngularJS
![Page 13: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/13.jpg)
RequirementsRequirements
Complex logicComplex logic
Reusable coreReusable core
Multiple UIMultiple UI
Object Oriented ProgrammingObject Oriented Programming
MVCMVC
Data / view separationData / view separation
![Page 14: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/14.jpg)
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
![Page 15: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/15.jpg)
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
![Page 16: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/16.jpg)
But CSS is still not perfect…But CSS is still not perfect…
![Page 17: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/17.jpg)
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
![Page 18: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/18.jpg)
Multiple UI: SASSMultiple UI: SASS
![Page 19: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/19.jpg)
Multiple UI: SASSMultiple UI: SASS
http://sass-http://sass-lang.comlang.com
![Page 20: Internal Project: Under the Hood](https://reader035.vdocument.in/reader035/viewer/2022062703/554f4648b4c905423f8b4944/html5/thumbnails/20.jpg)
RequirementsRequirements
Complex logicComplex logic
Reusable coreReusable core
Multiple UIMultiple UI
Object Oriented ProgrammingObject Oriented Programming
MVCMVC
Data / view separationData / view separation