SlideShare une entreprise Scribd logo
1  sur  43
Throw-down
Node.pgh Meetup
Nicholas McClay
UX Designer & Developer




@nickmcclay
There are a lot of opinions
   about CoffeeScript
“You can take my JavaScript when you pry it from
“You can take my JavaScript when you pry it from
             my cold dead hands!”
              my cold dead hands!”
Let’s take a deep breath
and try and have an open
       mind here...
What is                                                   ?


 CoffeeScript is a small language that compiles into JavaScript

 Usable for client-side and server-side applications (Node.js)

 Has an opinionated alternative syntax for building JavaScript
 applications
What is a Trans-compiling
       Language?
       Language?

              Compile


    .coffee             .js
Pick your problem

“I want a better JavaScript!”

                                    “I want functional
                                     programming!”

         “I want strict typing!”
                                   Objective-J
                                   “I want Objective-C!”


  “I work at google!”
                                            http://altjs.org/
Why should I care about
    CoffeeScript?
Question: How many of
 you use CoffeeScript?
Question: How many of
you have used a module
written in CoffeeScript?
Isaac Schleuter (maintainer of Node.js / NPM)
        Node’s top contributors
            TJ Holowaychuk (express, Jade, Mocha)

       No   Mikeal Rogers (Request)
       No
       No   James Haliday "substack" (Browserify, dnode, Optimist)
       No   Guillermo Rauch (Socket.IO)
       No
       No   Aaron Heckmann (Mongoose)
       No
       No   Nathan Rajich "Too Tall Nate" (node-gyp)
       No
            Marak Squires (Hook.io, pdf.js, color.js)
       No
            Felix Geisendörfer
http://procbits.com/2012/05/18/why-do-all-the-great-node-js-develope
            Tim Caswell (NVM)
And Yet...
Larger Node Community


        Yes
 Currently ranked 4th as the
 most depended upon module in
           NPM


  More than Express! (just
         barely)
Getting Started with
    CoffeeScript
Learning CoffeeScript

  http://coffeescript.codeschool.com/




http://arcturo.github.com/library/coffeescript/
Give it a try!
                   Install
sudo npm install -g coffee-script

         Start the CoffeeScript REPL
coffee

  Compile a .coffee file into equivalent .js
coffee --compile <path to js file>


Compile .coffee file when source changes
coffee --watch --compile <path to js file>


   Compile and start file with Node.js
coffee --nodejs <path to node.js file>
Basic Node Connect Server
CoffeeScript Principles

       1 - Clarity

       2 - Uniformity

       3 - Ease of
       Translation
       to JavaScript
Clarity
Significant White Space




   1/2 to 1/3 compared to pure JavaScript
Keywords
Default Arguments
((Parentheticals) Optional)
Uniformity




      Everything is an expression!
Language Enhancements
 Array Comprehension, Classes, and much more...
Fix some JavaScript pitfalls
    http://bonsaiden.github.com/JavaScript-Garden/




  this, null and undefined, prototype wackiness, goodbye
  default global!
Ease of Translation to Javascript



 The golden rule of CoffeeScript is: "It's just JavaScript"

 The compiled output is readable and pretty-printed,
 passes through JavaScript Lint without warnings
Learning Pains
CoffeeScript Misunderstandings


 CoffeeScript is NOT a superset of JavaScript

 CoffeeScript is compiled NOT interpreted at runtime

 You must SHOULD learn JavaScript before using
 CoffeeScript

 Compiled CoffeeScript CAN be slower than pure JavaScript,
 but really this usually isn’t an issue.
Mind the gap...
Mind the gap...
Punctuation Counts...
Punctuation Counts...



   OR
CoffeeScript Pain Points?


Requires a compilation step (use file watcher or --watch)

Community is a subset of larger JavaScript community

Debugging...
CoffeeScript Debugging
       Strategies
Mental Map Debugging




 “You wanted to write it in CoffeeScript, you figure it out.”
Source Map Debugging

      .js   .map   .coffee
WebStorm + CoffeeScript




  http://www.youtube.com/watch?v=Sl1Uk3zT5Fg
Issue in WebStorm 6
          CoffeeScript gives you :



             WebStorm wants :

    Manually adjusting the source map
       reference makes it work...



http://youtrack.jetbrains.com/issue/WEB-7091
Even products that advertise CoffeeScript
       support can have issues...
Add “await” and “defer” keywords for async
Thanks!


@nickmcclay

Contenu connexe

Tendances

The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
Kyle Simpson
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
Rahul Nanwani
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
Hristo Chakarov
 

Tendances (20)

The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)The Once And Future Script Loader (v3)
The Once And Future Script Loader (v3)
 
Quo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynoteQuo vadis, JavaScript? Devday.pl keynote
Quo vadis, JavaScript? Devday.pl keynote
 
Js Automation. npm scripts & Gulp
Js Automation. npm scripts & GulpJs Automation. npm scripts & Gulp
Js Automation. npm scripts & Gulp
 
Testing Storm components with Groovy and Spock
Testing Storm components with Groovy and SpockTesting Storm components with Groovy and Spock
Testing Storm components with Groovy and Spock
 
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
 
React native
React nativeReact native
React native
 
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasImproving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10
 
Integrating grunt and bower with maven
Integrating grunt and bower with mavenIntegrating grunt and bower with maven
Integrating grunt and bower with maven
 
Scrabbly GTUG presentation
Scrabbly GTUG presentationScrabbly GTUG presentation
Scrabbly GTUG presentation
 
Java script introduction
Java script introductionJava script introduction
Java script introduction
 
Groovy - Why and Where?
Groovy  - Why and Where?Groovy  - Why and Where?
Groovy - Why and Where?
 
5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement Tips5 Quick JavaScript Performance Improvement Tips
5 Quick JavaScript Performance Improvement Tips
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
High performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrongHigh performance java script why everything youve been taught is wrong
High performance java script why everything youve been taught is wrong
 
Choosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkitChoosing the best JavaScript framework/library/toolkit
Choosing the best JavaScript framework/library/toolkit
 
Node.js Getting Started &amd Best Practices
Node.js Getting Started &amd Best PracticesNode.js Getting Started &amd Best Practices
Node.js Getting Started &amd Best Practices
 
Untangling - fall2017 - week 7
Untangling - fall2017 - week 7Untangling - fall2017 - week 7
Untangling - fall2017 - week 7
 
Gatsby vs. Next.js
Gatsby vs. Next.jsGatsby vs. Next.js
Gatsby vs. Next.js
 
Untangling - fall2017 - week6
Untangling - fall2017 - week6Untangling - fall2017 - week6
Untangling - fall2017 - week6
 

En vedette (8)

Learn to Be an Autism Entrepreneur
Learn to Be an Autism Entrepreneur Learn to Be an Autism Entrepreneur
Learn to Be an Autism Entrepreneur
 
Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...Frontend Development - Supercharge your frontend development with little lang...
Frontend Development - Supercharge your frontend development with little lang...
 
Intro to rising tide way
Intro to rising tide wayIntro to rising tide way
Intro to rising tide way
 
Grunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End TierGrunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End Tier
 
Uk norway ib directory
Uk norway ib directoryUk norway ib directory
Uk norway ib directory
 
Mac interval tree
Mac interval treeMac interval tree
Mac interval tree
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
 
JAWS-UG Meets Windows (JAWS Days 2017)
JAWS-UG Meets Windows (JAWS Days 2017)JAWS-UG Meets Windows (JAWS Days 2017)
JAWS-UG Meets Windows (JAWS Days 2017)
 

Similaire à Coffee script throwdown

Coffeescript unfancy javascript
Coffeescript unfancy javascriptCoffeescript unfancy javascript
Coffeescript unfancy javascript
Dimitris Tsironis
 
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
Spike Brehm
 
There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014
jbandi
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
jbandi
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
Spike Brehm
 

Similaire à Coffee script throwdown (20)

Writing Bullet-Proof Javascript: By Using CoffeeScript
Writing Bullet-Proof Javascript: By Using CoffeeScriptWriting Bullet-Proof Javascript: By Using CoffeeScript
Writing Bullet-Proof Javascript: By Using CoffeeScript
 
Smooth CoffeeScript
Smooth CoffeeScriptSmooth CoffeeScript
Smooth CoffeeScript
 
Foolangjs
FoolangjsFoolangjs
Foolangjs
 
The JavaScript Delusion
The JavaScript DelusionThe JavaScript Delusion
The JavaScript Delusion
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
 
Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*
 
DSLs in JavaScript
DSLs in JavaScriptDSLs in JavaScript
DSLs in JavaScript
 
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date. Let’s learn how to use JavaScript responsibly and stay up-to-date.
Let’s learn how to use JavaScript responsibly and stay up-to-date.
 
Survive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and TricksSurvive JavaScript - Strategies and Tricks
Survive JavaScript - Strategies and Tricks
 
Coffeescript unfancy javascript
Coffeescript unfancy javascriptCoffeescript unfancy javascript
Coffeescript unfancy javascript
 
Confoo - Javascript Server Side : How to start
Confoo - Javascript Server Side : How to startConfoo - Javascript Server Side : How to start
Confoo - Javascript Server Side : How to start
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
Beautiful code instead of callback hell using ES6 Generators, Koa, Bluebird (...
 
General Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScriptGeneral Assembly Workshop: Advanced JavaScript
General Assembly Workshop: Advanced JavaScript
 
There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014There is something about JavaScript - Choose Forum 2014
There is something about JavaScript - Choose Forum 2014
 
CoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copyCoffeeScript: A beginner's presentation for beginners copy
CoffeeScript: A beginner's presentation for beginners copy
 
Node.js #digpen presentation
Node.js #digpen presentationNode.js #digpen presentation
Node.js #digpen presentation
 
Javascript Apps at Build Artifacts
Javascript Apps at Build ArtifactsJavascript Apps at Build Artifacts
Javascript Apps at Build Artifacts
 
Kann JavaScript elegant sein?
Kann JavaScript elegant sein?Kann JavaScript elegant sein?
Kann JavaScript elegant sein?
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
 

Plus de Nicholas McClay

Plus de Nicholas McClay (7)

Intro to Sail.js
Intro to Sail.jsIntro to Sail.js
Intro to Sail.js
 
Node.js and Parse
Node.js and ParseNode.js and Parse
Node.js and Parse
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
 
Node.js Cloud deployment
Node.js Cloud deploymentNode.js Cloud deployment
Node.js Cloud deployment
 
Node.js 0.8 features
Node.js 0.8 featuresNode.js 0.8 features
Node.js 0.8 features
 
Node.js and NoSQL
Node.js and NoSQLNode.js and NoSQL
Node.js and NoSQL
 
Node.js debugging
Node.js debuggingNode.js debugging
Node.js debugging
 

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

Coffee script throwdown