Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CoffeeScript: JavaScript, but Better!

2,449 views

Published on

JavaScript is an awesome language but not without its faults. CoffeeScript aims to solve those and make JavaScript quicker and more efficient. Here's an introduction to it!

Published in: Technology

CoffeeScript: JavaScript, but Better!

  1. 1. COFFEESCRIPT:JAVASCRIPT, BUT BETTER
  2. 2. WHO AM I?www.jackfranklin.co.uk @Jack_Franklin
  3. 3. COFFEESCRIPT:JAVASCRIPT, BUT BETTER
  4. 4. GOLDEN RULE OF COFFEESCRIPT “it’s just javascript”
  5. 5. IN BRIEF, COFFEESCRIPT:1. COMPILES INTO REGULAR JAVASCRIPT2. SOLVES A LOT OF COMMON ISSUES & GRIPES3. MAKES JAVASCRIPT QUICKER & EASIER TOWRITE4. IS JUST JAVASCRIPT
  6. 6. JAVASCRIPT:$(“a”).click(function() { alert(“hi”);});
  7. 7. COFFEESCRIPT:$(“a”).click -> alert “hi”
  8. 8. DIFFERENCES:1. INDENTATION MATTERS (NO { } NEEDED)2. SEMI-COLONS NOT REQUIRED3. NO PARENTHESIS AROUND ARGUMENTS4. function() BECOMES ->
  9. 9. THREE EASY STEPS:1. WRITE CODE IN .COFFEE FILE2. COMPILE TO .JS (AND FIX ERRORS)3. INCLUDE .JS FILE IN WEBSITE
  10. 10. COMPILING1. INSTALL NODE.JS2. INSTALL NPM (NODE PACKAGE MANAGER)3. npm install -g coffee-script4. coffee --watch --compileexample.coffee
  11. 11. IF TERMINAL SCARES YOU1. WINDOWS:https://github.com/alisey/CoffeeScript-Compiler-for-Windows2. MAC OS X: http://livereload.com/
  12. 12. COFFEESCRIPT FEATURES
  13. 13. NO VAR:a=2#compiles to:var a;a = 2;
  14. 14. CODE IS PRIVATE:(function() { /*your code goes here*/}).call(this);
  15. 15. GETS RID OF == & === CONFUSION“true” == true //true“true” === true //false ( WTF? )
  16. 16. GETS RID OF == & === CONFUSION“true” is true //false“true” is “true” //true
  17. 17. launch() if ignition is onvolume = 10 if band isnt SpinalTapletTheWildRumpusBegin() unless answer is noif car.speed < limit then accelerate()winner = yes if pick in [47, 92, 13]
  18. 18. is <=> ===isnt <=> !==not <=> !and <=> &&or <=> ||true, yes, on <=> truefalse, no, off <=> false@, this <=> thisof <=> inin <=> //no JS equiv#in tests for array presence#of tests for object-key presence(
  19. 19. in tests for array presenceof tests for object-key presence
  20. 20. BASIC FUNCTION SYNTAXfunction heyBarcamp(m) { alert(“Hey Barcamp! “ + m);});
  21. 21. BASIC FUNCTION SYNTAXheyBarcamp = (m) -> alert “Hey BarCamp! “ + m
  22. 22. COMMENTING#this is a comment### block comment! OMG!###
  23. 23. PLAYS NICE WITH LIBRARIES (it’s just JavaScript, remember)$(function() { $(“body”).html(“HEY BARCAMP”);});
  24. 24. PLAYS NICE WITH LIBRARIES (it’s just JavaScript, remember)$ -> $(“body”).html “HEY BARCAMPERS”
  25. 25. LOVELY ITERATIONfor attendee in barcampers when attendee.age< 16 console.log “CHILD! “ + attendee.name
  26. 26. LOVELY ITERATIONtweets.push( tweet.text.toLowerCase()) for tweet in data
  27. 27. CLASSESclass Presentation constructor (room) -> @room = room startPresentation -> @loadSlideShow() loadSlideShow ->quiz = new Presentation “Pan’s Labyrinth”
  28. 28. CONDITIONALSsomeFunc() if y > 20x = 2 unless y > 10currentUrl ?= window.location
  29. 29. SPLIT ASSIGNMENT//regular JavaScript:var myName = [“Jack”, “Franklin”];var firstName = myName[0], surName = myName[1];//CoffeeScript:myName = [“Jack”, “Franklin”][firstName, surName] = myName
  30. 30. VARIABLES IN STRINGSheyBarcamp = (message) -> alert “Hello BarCampers! I’ve got a messagefor you #{message}”
  31. 31. VARIABLES IN STRINGSheyBarcamp = (message) -> alert “Hello BarCampers! I’ve got a messagefor you #{message.toUpperCase()}”
  32. 32. DEFAULT FUNCTION VALUESaddNumbers = (a, b = 2) -> alert a+b
  33. 33. WE’VE ONLY SCRATCHED THESURFACE!1. DOCS & ONLINE SHELL ON GITHUB:http://jashkenas.github.com/coffee-script/2. FUN FACT: COFFEESCRIPT COMPILER WASWRITTEN IN COFFEESCRIPT
  34. 34. THANKS FOR LISTENING...ANY (EASY) QUESTIONS?@JACK_FRANKLIN

×