Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Coffee scriptisforclosers nonotes

on

  • 1,462 views

CoffeeScript—that “little language” that compiles to JavaScript—has become something of a big deal over the last year. Is it all just hype, or does CoffeeScript really deliver on its promise ...

CoffeeScript—that “little language” that compiles to JavaScript—has become something of a big deal over the last year. Is it all just hype, or does CoffeeScript really deliver on its promise to give us JavaScript without the bad parts? Dare you even bother learning JavaScript at all? In this session, Brandon will make the case why you should learn CoffeeScript, then provide a zero to working overview of CoffeeScript: how to get it, how to learn it and how to start using it in your projects.

Statistics

Views

Total Views
1,462
Views on SlideShare
1,461
Embed Views
1

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NoDerivs LicenseCC Attribution-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • So that brings me to Axiom #2.Books and online resources are great, but I would argue that using CoffeeScript is another way to become a better JavaScript developer. I am actually spinning that it generates JS for you as a good thing. I personally learned a lot in the process.And this, for me, is only true because you still have to debug the JavaScript that CoffeeScript creates.
  • CoffeeScript Website - http://jashkenas.github.com/coffee-script/CoffeeScript Annotated Source - http://jashkenas.github.com/coffee-script/documentation/docs/grammar.htmlCoffeeScript Koans - https://github.com/sleepyfox/coffeescript-koansSmooth CoffeeScript Book - http://autotelicum.github.com/Smooth-CoffeeScript/Jeremy and Brendan @ JSConf 2011 - http://blip.tv/jsconf/jsconf2011-jeremy-ashkenas-5258082Bendan’s “Harmony of My Dreams” Post – http://brendaneich.com/2011/01/harmony-of-my-dreams/Slides for this talk - https://github.com/bsatrom/Presentations/tree/master/CoffeeScript

Coffee scriptisforclosers nonotes Coffee scriptisforclosers nonotes Presentation Transcript

  • CoffeeScript is For Closers Brandon Satrom @BrandonSatrom UserInExperience.com
  • Put the Coffee(Script) Down!Coffee(Script) is for Closers!
  • Or…JavaScript, Linguistics and Cockney Rhyming Slang View slide
  • Or…How CoffeeScript Made me aBetter JavaScript Developer View slide
  • So Who Am I?Husband and FatherWeb Developer & Evangelist, MicrosoftAustin, TX www.userinexperience.com @BrandonSatrom github.com/bsatrom
  • #html5tx
  • Agenda• The JavaScript Dialectic• What?• Where?• How?• Why?
  • VS.
  • A JavaScript Dialectic
  • Don‟t Be A JavaScriptster I loved JavaScriptbefore it was coolOf course, I also hated it back when everyone else did too…
  • Don‟t Be A CoffeeScriptster JavaScript is lame! Significant Whitespace FTW!Let‟s hope they don‟t notice that I still debug in JavaScript…
  • What is CoffeeScript?WHAT?
  • “It‟s Just JavaScript” Or “Unfancy JavaScript”
  • “A polyglot language”A Ruby, Haskell and Perl love child…
  • “A little language”Meaning…it‟s not DART
  • Transpiler vs. CompilerTranspiled Languages Compiled Languages• CoffeeScript • DART• Traceur • GWT• EcmaScript 5 Parser • Objective-J• Reflect.js • ClojureScript • JSIL • Script# • Emscripten • Haxe
  • More A Dialect, Less A Language Color === Colour function(foo) {} === (foo) ->
  • Subtle LinguisticsDave has two children. Dave has two children.His youngest is in His youngest is in Pre-Reception, and his K, and his favorite colorfavourite colour is is green. His oldest is ingreen. His oldest is Year 3rd Grade, and he loves4, and loves to ride the to ride the elevatorlift outside his flat. outside his apartment.
  • Not so subtle linguistics…Sentence Extended Rhymes With PhraseI‟ve got a sore billy. Billy Goat ThroatThat‟s a nasty old boris you‟ve got Boris Karloff Coughthere son.Ere, you‟ve got your brass wrong! Brass Tacks Facts„ow about a Brittney? Brittney Spears BeersWe‟re all in Barney! Barney Rubble TroubleThink he‟s been smoking a bit of Bob Hope (you get the idea)Bob
  • CoffeeScript is not areplacement for Learning JavaScript CoffeeScript Axiom #1
  • Compiles 1:1 to JavaScript 1:1 being Concept to Concept
  • Conceptual Equivalence CoffeeScript JavaScriptnumbers = [1..10] var num, numbers, printNum, _i, _len; numbers =printNum = (number) -> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log "This isnumber #{number}" printNum = function(number) { return console.log("This is number " + number);printNum for num in numbers }; for (_i = 0, _len = numbers.length; _i < _len; _i++) { num = numbers[_i]; printNum; }
  • Conceptual Equivalence CoffeeScript JavaScriptnumbers = [1..10] var num, numbers, printNum, _i, _len; numbers = [1, 2, 3, 4, 5, 6, 7, 8,printNum = (number) -> 9, 10]; console.log "This isnumber #{number}" printNum = function(number) { return console.log("This is number " + number);printNum num for num in };numbers for (_i = 0, _len = numbers.length; _i < _len; _i++) { num = numbers[_i]; printNum(num); }
  • Conceptual Equivalence CoffeeScript JavaScriptnumbers = [1..10] var num, numbers, printNum, _i, _len; numbers =printNum = (number) -> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log "This isnumber #{number}" printNum = function(number) { return console.log("This is number " + number);printNum num for num in };numbers for (_i = 0, _len = numbers.length; _i < _len; _i++) { num = numbers[_i]; printNum(num); }
  • Conceptual Equivalence CoffeeScript JavaScriptnumbers = [1..10] var num, numbers, printNum, _i, _len; numbers =printNum = (number) -> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log "This isnumber #{number}" printNum = function(number) { return console.log("This is number " + number);printNum num for num in };numbers for (_i = 0, _len = numbers.length; _i < _len; _i++) { num = numbers[_i]; printNum(num); }
  • Where do I get it?WHERE?
  • Ways to Get CoffeeScript• node.js & npm $ npm install –g coffee-script• Script Tags <script type=“text/coffeescript”></script> <script src=“coffee-script.js”></script>• Rails 3.1• SassAndCoffee (.NET)• CoffeeScript Packages
  • Tools for CoffeeScript• IDE Extensions/Plugins• Asset Pipeline Tools• Live Debugging/PreviewSee more at http://bit.ly/nx6JGo
  • How can I use, learn and automate it?HOW?
  • $ coffeecoffee> [1..10]REPL
  • $ coffee –o js/ -cw lib/COMPILE
  • COFFEESCRIPT BASICS
  • Assignmentname = “Brandon”married = yeschildren = 2var children, married, name;name = "Brandon";married = true;children = 2;
  • Functionssquare = (x) -> x * xprintInfo = (name, numChildren) -> “Hi #{name}, I see you have #{numChildren}children.”var printInfo, square;square = function(x) { return x * x;};printInfo = function(name, numChildren) { return "Hi " + name + ", I see you have " + numChildren + "children";};
  • Stringsnum = 99“I’ve got #{num} problems, and JavaScript ain’tone.”city = "Brooklyn""No. Sleep. Till. #{city}"var city, num;num = 99;"Ive got " + num + " problems, but JavaScript aintone";city = "Brooklyn";"No. Sleep. Till. " + city;
  • Objectskids = var kids; kids = { bigBrother: bigBrother: { name: “Benjamin” name: “Benjamin”, age: 2 age: 2 littleBrother: }, name: “Jack” littleBrother: { name: “Jack”, age: 1 age: 1 } };
  • Lexical Scopingouter = 42 var findMeaning, inner, outer;findMeaning = -> outer = 42; inner = 43 findMeaning = function() { outer var inner;inner = findMeaning() inner = 43; return outer; }; inner = findMeaning();
  • Lexical Scoping 2notGlobal = "Hello" (function() { var global, notGlobal;global = "Goodbye" notGlobal = "Hello"; global = "Goodbye";window.global = global window.global = global; }).call(this);
  • Everything, an Expressiongrade = (student) -> var eldest, grade; if student.excellentWork grade = function(student) { "A+" if (student.excellentWork) { else if student.okayStuff return "A+"; if student.triedHard then "B" } else if (student.okayStuff)else "B-" { else if (student.triedHard) { "C" return "B"; } else {eldest = if 24 > 21 then "Liz" return "B-";else "Ike" } } else { return "C"; } }; eldest = 24 > 21 ? "Liz" : "Ike";
  • Conditionalsmood = greatlyImproved if singing var lunch, mood; if (singing) {if happy and knowsIt mood = greatlyImproved; clapsHands() } chaChaCha() if (happy && knowsIt) {else clapsHands(); showIt() chaChaCha(); } else {lunch = if friday then water else showIt();redBull } lunch = friday ? water :options or= defaults redBull; Options || (options = defaults);
  • Operators and Aliases CoffeeScript JavaScript is, == === isnt, != !== not ! and && or || true, yes, on true false, no, off false @, this this of in in no equivalent
  • How I Use CoffeeScriptLet‟s pretend for a moment that how I use it, matters.
  • Coffee, Cake and Growl1. Cake (think Make or Rake)2. „watch‟ Task invoke build invoke tests3. wingrr (use node-growl for *nix) msg = All test pass sys.puts msg.green wingrr.notify msg
  • Why should I bother using it?WHY?
  • More succinct codePRO
  • Extra compile step between you and the “real”codeCON
  • hi == bye (function() { global = "everywhere?" var global; hi === bye; switch day global = "everywhere?"; when "Fri", "Sat" switch (day) { if day is bingoDay case "Fri": go bingo case "Sat": go dancing if (day === bingoDay) { when "Sun" then go church go(bingo); else go work go(dancing); } break; case "Sun": go(church);Avoid Snake Pits & Get JS Patterns for Free break; default:PRO } go(work); })();
  • Errors and Debugging: it‟s still JavaScript in thereCON
  • As fast or faster JavaScriptPRO
  • Dare I say it? Code Generation!CON
  • Shirts are for n00bs…Like all software is…OK, COFFEESCRIPT ISOPINIONATED
  • WITHAPOLOGIES TO THE NINJAS
  • The Five Stages of JavaScript1. Avoidance2. Concession3. Abstraction4. Failure5. Enlightenment
  • arr = new Array(4, 8, 15, 16);arr[4] = 23;arr[5] = 42;for (i = 0; i < arr.length; i++){ enterLottoNum(arr[i]);}
  • var arr = [4, 8, 15, 16, 23, 42];for (var i = 0; i < arr.length; i++) { enterLottoNum(arr[i]);}
  • var arr, num, _i, _len;arr = [4, 8, 15, 16, 23, 42];for (_i = 0, _len = arr.length; _i < _len; _i++) { num = arr[_i]; enterLottoNum(num);}
  • CoffeeScript made me want to be a better man
  • CoffeeScript can help youbecome a better JavaScript programmer CoffeeScript Axiom #2
  • But there’snothing wrongwith JavaScript!
  • let name = “block scoped!" const REALLY = "srsly" #add(a, b) { a + b } module Mod { export const K = “foo” export #add(x, y) { x + y } }INFLUENCING JS.NEXT
  • “The only thing that has happened when newlanguages pop up is that JavaScript getsbetter.”– Chris WilliamsWHITHER JAVASCRIPT?
  • JavaScript Gets Better JavaScript jQuery, et al. ECMAScript 5 CoffeeScript Harmony/JS.Next ?
  • "We are not just advocating a language on top of JS that you use to avoid JS (GWT, Haxe, Objective- J, etc.). We are advocating that you allhelp build a better JS onJS, which then becomes standardized asJS.next." - Brendan Eich CoffeeScript Axiom #3 IT’S NOT A REPLACEMENT FOR JAVASCRIPT
  • What Can I/We/Everyone Learn from CoffeeScript?THE JAVASCRIPT DIALECTIC, REVISITED
  • 1) It‟s not a replacement for learning JavaScript2) It can help you become a better JavaScript programmer3) It‟s not a replacement for JavaScriptTHOSE AXIOMS
  • Resources - http://bit.ly/...Slides - pLWIMfCoffeeScript Website - nfWYwnAnnotated Source - qdAXfnCoffeeScript Koans - o1K6bLSmooth CoffeeScript Book - nI7GEUJeremy & Brendan @ JSConf 2011 - o9KieZ“Harmony of my Dreams” - mQkdtp
  • @BrandonSatrombrsatrom@microsoft.comUserInExperience.comQUESTIONS?