Why (I think) CoffeeScript Is Awesome
Upcoming SlideShare
Loading in...5
×
 

Why (I think) CoffeeScript Is Awesome

on

  • 3,593 views

Slides for a CoffeeScript presentation at Ruby on Rails Sydney user group on May 8.

Slides for a CoffeeScript presentation at Ruby on Rails Sydney user group on May 8.

Statistics

Views

Total Views
3,593
Views on SlideShare
3,334
Embed Views
259

Actions

Likes
3
Downloads
30
Comments
2

7 Embeds 259

http://www.scoop.it 203
http://testviolaine38.wordpress.com 38
https://twitter.com 9
https://si0.twimg.com 4
https://twimg0-a.akamaihd.net 3
http://us-w1.rockmelt.com 1
http://paper.li 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Why (I think) CoffeeScript Is Awesome Why (I think) CoffeeScript Is Awesome Presentation Transcript

    • Why CoffeeScript Is Awesome*@jocranford *IMOTuesday, 8 May 12
    • How CoffeeScript works Include via <script> webpage. file.coffee Compile file.js html  Tuesday, 8 May 12
    • Getting started was EASYTuesday, 8 May 12
    • Installation with Node Package ManagerTuesday, 8 May 12
    • Compiling a Coffee Script FileTuesday, 8 May 12
    • Compiling Multiple Coffee Script FilesTuesday, 8 May 12
    • Web Workbench Visual Studio PluginTuesday, 8 May 12
    • Autogeneration of JavaScriptTuesday, 8 May 12
    • Errors in Output WindowTuesday, 8 May 12
    • Basic SyntaxTuesday, 8 May 12
    • Object Definition var myPresentation = { title: "CoffeeScript", when: { day: "8 May 2012", time: "6:30pm" } };Tuesday, 8 May 12
    • Object Definition var myPresentation = { title: "CoffeeScript", when: { day: "8 May 2012", time: "6:30pm" } }; myPresentation = subject: "CoffeeScript” when: day: "8 May 2012" time: "6:30pm"Tuesday, 8 May 12
    • Object Definition var myPresentation = { title: "CoffeeScript", when: { day: "8 May 2012", time: "6:30pm" } }; myPresentation = subject: "CoffeeScript” when: day: "8 May 2012" time: "6:30pm"Tuesday, 8 May 12
    • Function Definition function startPresentation(subject) { alert("A presentation about " + subject + " is now starting!"); } var startPresentation = function(subject) { alert("A presentation about " + subject + " is now starting!"); }; startPresentation("JavaScript");Tuesday, 8 May 12
    • Function Definition function startPresentation(subject) { alert("A presentation about " + subject + " is now starting!"); } var startPresentation = function(subject) { alert("A presentation about " + subject + " is now starting!"); }; startPresentation("JavaScript"); startPresentation = (subject) -> alert "A presentation about " + subject + " is now starting!" startPresentation "CoffeeScript"Tuesday, 8 May 12
    • Function Definition function startPresentation(subject) { alert("A presentation about " + subject + " is now starting!"); } var startPresentation = function(subject) { alert("A presentation about " + subject + " is now starting!"); }; startPresentation("JavaScript"); startPresentation = (subject) -> alert "A presentation about " + subject + " is now starting!" startPresentation "CoffeeScript"Tuesday, 8 May 12
    • Operators CoffeeScript JavaScript is === isnt !== not ! and && or || of inTuesday, 8 May 12
    • Syntactic SugarTuesday, 8 May 12
    • String Interpolation var description = "This is a talk about " + myPresentation.subject + " by " + myPresentation.presenter + ". It will start at " + myPresentation.startTime + " and finish by " + myPresentation.endTime;Tuesday, 8 May 12
    • String Interpolation var description = "This is a talk about " + myPresentation.subject + " by " + myPresentation.presenter + ". It will start at " + myPresentation.startTime + " and finish by " + myPresentation.endTime; description = "This is a talk about #{myPresentation.subject} by #{myPresentation.presenter}. It will start at #{myPresentation.startTime} and finish by #{myPresentation.endTime}"Tuesday, 8 May 12
    • String Interpolation var description = "This is a talk about " + myPresentation.subject + " by " + myPresentation.presenter + ". It will start at " + myPresentation.startTime + " and finish by " + myPresentation.endTime; description = "This is a talk about #{myPresentation.subject} by #{myPresentation.presenter}. It will start at #{myPresentation.startTime} and finish by #{myPresentation.endTime}"Tuesday, 8 May 12
    • @ replaces this var Presentation = function(title, presenter) { this.getHeadline = function() { return title + " by " + presenter; }; this.showHeadline = function() { alert(this.getHeadline()); }; };Tuesday, 8 May 12
    • @ replaces this var Presentation = function(title, presenter) { this.getHeadline = function() { return title + " by " + presenter; }; this.showHeadline = function() { alert(this.getHeadline()); }; }; class Presentation constructor: (@title, @presenter) -> getHeadline: -> "#{@title} by #{@presenter}" showHeadline: -> alert(@getHeadline())Tuesday, 8 May 12
    • @ replaces this var Presentation = function(title, presenter) { this.getHeadline = function() { return title + " by " + presenter; }; this.showHeadline = function() { alert(this.getHeadline()); }; }; class Presentation constructor: (@title, @presenter) -> getHeadline: -> "#{@title} by #{@presenter}" showHeadline: -> alert(@getHeadline())Tuesday, 8 May 12
    • functions return the last value function add(x, y) { return x + y; }Tuesday, 8 May 12
    • functions return the last value function add(x, y) { return x + y; } add = (x, y) -> x + yTuesday, 8 May 12
    • functions return the last value function add(x, y) { return x + y; } add = (x, y) -> x + yTuesday, 8 May 12
    • Conditionals return automatically var textColor; if (result === "failed") { textColor = "red"; } else if (result === "not run") { textColor = "yellow"; } else { textColor = "green"; }Tuesday, 8 May 12
    • Conditionals return automatically var textColor; if (result === "failed") { textColor = "red"; } else if (result === "not run") { textColor = "yellow"; } else { textColor = "green"; } textColor = if result is "failed" "red" else if result is "not run" "yellow" else "green"Tuesday, 8 May 12
    • Conditionals return automatically var textColor; if (result === "failed") { textColor = "red"; } else if (result === "not run") { textColor = "yellow"; } else { textColor = "green"; } textColor = if result is "failed" "red" else if result is "not run" "yellow" else "green"Tuesday, 8 May 12
    • Protection from EvilTuesday, 8 May 12
    • In JavaScript, variables are global by default var tonightsPresentations = [ "CoffeeScript", "i18n", "Rails Conf"]; var whoopsie = function() { tonightsPresentations = []; return tonightsPresentations; }Tuesday, 8 May 12
    • In CoffeeScript, they are automatically scoped var tonightsPresentations = [ "CoffeeScript", "i18n", "Rails Conf"]; var whoopsie = function() { teamHugPresentationList = []; return teamHugPresentationList; } tonightsPresentations = [ "CoffeeScript", "i18n", "Rails Conf"] whoopsie = -> ! tonightsPresentations = [] ! tonightsPresentationsTuesday, 8 May 12
    • WTF ... 0 == "" and 0 =="0" are both TRUE ... but "" == "0" is NOT! false == "0" is TRUE ... but false == "false" is NOT!Tuesday, 8 May 12
    • WTF ... 0 == "" and 0 =="0" are both TRUE ... but "" == "0" is NOT! false == "0" is TRUE ... but false == "false" is NOT! is => === isnt => !== == -> ===Tuesday, 8 May 12
    • ✗ With ✗; ✗ Reserved KeywordsTuesday, 8 May 12
    • ConsistencyTuesday, 8 May 12
    • Example 1 var Presentation = function(title, presenter) { return { getHeadline: function() { return title + " by " + presenter; } } }; var myPresentation = Presentation("CoffeeScript", "Jo Cranford");Tuesday, 8 May 12
    • Example 2 var Presentation = function(title, presenter) { this.getHeadline = function() { return title + " by " + presenter; }; }; var myPresentation = new Presentation("CoffeeScript", "Jo Cranford");Tuesday, 8 May 12
    • Example 3 var Presentation = function(title, presenter) { this.title = title; this.presenter = presenter; }; Presentation.prototype.getHeadline = function() { return this.title + " by " + this.presenter; }; var myPresentation = new Presentation("CoffeeScript", "Jo Cranford");Tuesday, 8 May 12
    • CoffeeScript class Presentation constructor: (@title, @presenter) -> getHeadline: -> @title + " " + @presenterTuesday, 8 May 12
    • Less CodeTuesday, 8 May 12
    • Average Lines Of Code 40 1.8X 30 20 10 0 JavaScript CoffeeScriptTuesday, 8 May 12
    • For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { ! var city = listOfCities[i]; ! weatherInCities.push(city.name + ":" + city.weather); }Tuesday, 8 May 12
    • For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { ! var city = listOfCities[i]; ! weatherInCities.push(city.name + ":" + city.weather); } weatherInCities = (("#{city.name}: #{city.weather}") for city in listOfCities)Tuesday, 8 May 12
    • For Loop var i, weatherInCities; weatherInCities = []; for(i = 0; i < listOfCities.length; i++) { ! var city = listOfCities[i]; ! weatherInCities.push(city.name + ":" + city.weather); } weatherInCities = (("#{city.name}: #{city.weather}") for city in listOfCities)Tuesday, 8 May 12
    • For “Own” Loop var objectToString = function (obj) { ! var key, val, _results; ! _results = []; ! for (key in obj) { ! ! if (!obj.hasOwnProperty(key)) continue; ! ! val = obj[key]; ! ! if (val !== null) _results.push(key + ":" + val); ! } ! return _results.join(","); };Tuesday, 8 May 12
    • For “Own” Loop var objectToString = function (obj) { ! var key, val, _results; ! _results = []; ! for (key in obj) { ! ! if (!obj.hasOwnProperty(key)) continue; ! ! val = obj[key]; ! ! if (val !== null) _results.push(key + ":" + val); ! } ! return _results.join(","); }; objectToString = (obj) -> ! ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")Tuesday, 8 May 12
    • For “Own” Loop var objectToString = function (obj) { ! var key, val, _results; ! _results = []; ! for (key in obj) { ! ! if (!obj.hasOwnProperty(key)) continue; ! ! val = obj[key]; ! ! if (val !== null) _results.push(key + ":" + val); ! } ! return _results.join(","); }; objectToString = (obj) -> ! ("#{key}:#{val}" for own key, val of obj when val isnt null).join(“,")Tuesday, 8 May 12
    • Constructor - JavaScript var Region = function(states) { ! this.states = states; }; Region.prototype.findStatesBeginningWith = function(letter) { ! var matchingStates = []; for (var i = 0;i < this.states.length; i++) { ! ! state = this.states[i]; ! ! if (state.substr(0,1) === letter) { ! ! ! matchingStates.push(state) ! ! } ! } ! return matchingStates; };Tuesday, 8 May 12
    • Constructor - CoffeeScript class Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letterTuesday, 8 May 12
    • Constructor - CoffeeScript class Region constructor: (@states) -> findStatesBeginningWith: (letter) -> state for state in @states when state.substr(0,1) is letterTuesday, 8 May 12
    • this and that var Clickable = function (baseElement) { ! var that = this; ! this.displayAlert = function() { ! ! alert("You just clicked me!"); ! }; ! $(baseElement).click(that.displayAlert); };Tuesday, 8 May 12
    • this and that var Clickable = function (baseElement) { ! var that = this; ! this.displayAlert = function() { ! ! alert("You just clicked me!"); ! }; ! $(baseElement).click(that.displayAlert); };Tuesday, 8 May 12
    • this and that var Clickable = function (baseElement) { ! var that = this; ! this.displayAlert = function() { ! ! alert("You just clicked me!"); ! }; ! $(baseElement).click(that.displayAlert); }; class window.Clickable constructor: (@baseElement) -> $(@baseElement).click(@displayAlert) displayAlert: => window.alert("You just clicked me!")Tuesday, 8 May 12
    • this and that var Clickable = function (baseElement) { ! var that = this; ! this.displayAlert = function() { ! ! alert("You just clicked me!"); ! }; ! $(baseElement).click(that.displayAlert); }; class window.Clickable constructor: (@baseElement) -> $(@baseElement).click(@displayAlert) displayAlert: => window.alert("You just clicked me!")Tuesday, 8 May 12
    • Pattern Matching – Reading an Object var london = { lat: 51.5171, lng: 0.1062 }; var lat = london.lat; var lng = london.lng;Tuesday, 8 May 12
    • Pattern Matching – Reading an Object var london = { lat: 51.5171, lng: 0.1062 }; var lat = london.lat; var lng = london.lng; london = lat: 51.5171 lng: 0.1062 {lat,lng} = londonTuesday, 8 May 12
    • Pattern Matching var london = { lat: 51.5171, lng: 0.1062 }; var lat = london.lat; var lng = london.lng; london = lat: 51.5171 lng: 0.1062 {lat,lng} = londonTuesday, 8 May 12
    • Pattern Matching doSomethingWithPoint = ({lat,lng}) -> console.log(lat, lng); doSomethingWithPoint london createPoint = (lat, lng) -> { lat, lng }Tuesday, 8 May 12
    • Existing libraries just workTuesday, 8 May 12
    • JQuery $(document).ready(function() { var tip = $("#js-tooltip"); if (!tip.hasClass("hidden")) { tip.addClass("hidden"); } });Tuesday, 8 May 12
    • JQuery $(document).ready(function() { var tip = $("#js-tooltip"); if (!tip.hasClass("hidden")) { tip.addClass("hidden"); } }); $(document).ready(-> tip = $ "#coffee-tooltip" tip.addClass "hidden" unless tip.hasClass "hidden" )Tuesday, 8 May 12
    • JQuery $(document).ready(function() { var tip = $("#js-tooltip"); if (!tip.hasClass("hidden")) { tip.addClass("hidden"); } }); $(document).ready(-> tip = $ "#coffee-tooltip" tip.addClass "hidden" unless tip.hasClass "hidden" )Tuesday, 8 May 12
    • Easy to Test with JasmineTuesday, 8 May 12
    • Jasmine Test describe("The Game Object", function() { it("should have a score of 0 if I knock down no skittles", function() { var game = new Game(); game.roll(0); var score = game.score(); expect(score).toBe(0); }); });Tuesday, 8 May 12
    • Jasmine Test describe("The Game Object", function() { it("should have a score of 0 if I knock down no skittles", function() { var game = new Game(); game.roll(0); var score = game.score(); expect(score).toBe(0); }); }); describe "The Game Object", -> it "should have a score of 0 if I knock down no skittles", - > game = new Game() game.roll(0) score = game.score() expect(score).toBe 0Tuesday, 8 May 12
    • Clean, Efficient, Easy to Read JavaScriptTuesday, 8 May 12
    • class Presentation constructor: (@title, @presenter) -> getHeadline: -> "#{@title} #{@presenter}"Tuesday, 8 May 12
    • (function() { var Presentation; Presentation = (function() { Presentation.name = Presentation; function Presentation(title, presenter) { this.title = title; this.presenter = presenter; } Presentation.prototype.getHeadline = function() { return this.title + " " + this.presenter; }; return Presentation; })(); }).call(this);Tuesday, 8 May 12
    • (function() { var Presentation; Presentation = (function() { Presentation.name = Presentation; function Presentation(title, presenter) { this.title = title; this.presenter = presenter; } Presentation.prototype.getHeadline = function() { return this.title + " " + this.presenter; }; return Presentation; })(); }).call(this);Tuesday, 8 May 12
    • Of course, it’s not perfect Tuesday, 8 May 12
    • It IS an additional step Debugging Shouldnt we just write good JavaScript? Should we even be writing object oriented JavaScript?Tuesday, 8 May 12
    • References • http://coffeescript.org/ • http://www.weave.de/wp-content/uploads/2012/01/The-Little-Book-on- Coffee-Script.pdf • http://pragprog.com/magazines/2011-05/a-coffeescript-intervention • http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ • http://css.dzone.com/articles/source-maps-coffeescript • http://www.quora.com/CoffeeScript/What-are-disadvantages-of-using- CoffeeScript • http://www.readwriteweb.com/hack/2011/01/interview-coffeescript-jeremy- ashkenas.php • http://rzrsharp.net/2011/06/27/what-does-coffeescripts-do-do.html • http://stackoverflow.com/questions/643542/doesnt-javascript-support- closures-with-local-variables/643664#643664 • http://yannesposito.com/Scratch/en/blog/2011-01-03-Why-I-sadly-won-t- use-coffeescript/Tuesday, 8 May 12