coffeescript: fad or useful tool? socal code camp fullerton 2015

Coffeescript:Coffeescript: Worthless Fad orWorthless Fad orUseful Tool?Useful Tool?

John R SchmidtJohn R Schmidt

SoCal Code CampSoCal Code Camp

Fullerton 2015Fullerton 2015

Install:Install:

REPL in your Terminal:REPL in your Terminal:

REPL in the Browser:REPL in the Browser:

coffeescript.orgcoffeescript.org

Or

[ 'TRY COFFEESCRIPT' tab ]

WELCOME . . .WELCOME . . .





● Introduction

● Setup & Installation, Terminal & Browser REPL, Coffeescript Compilation

● Coffeescript / Javascript Similarities & Differences

● Syntax Details

● Javascript vs Coffeescript Debate & Controversy

● ECMAscript5 / ECMAscript6 Changes & Coffeescript

● Code Examples

● Resources

OutlineOutline





● An alternate syntax for Javascript

● Compiles to Javascript

● Inspired by Ruby and Python syntax

● Strives to be simpler and cleaner than JS

● Mostly a strict one-to-one correspondence with JS

● A few extra features

● Classes – "pseudo-classical object orientation"

● Author: Jeremy Ashkenas

● Current version: 1.9.1

IntroductionIntroduction





Requires up-to-date, stable versions of NodeJS and NPM (Node Package Manager).

Setup & Installation, Terminal & Browser REPL, Setup & Installation, Terminal & Browser REPL, Coffeescript CompilationCoffeescript Compilation

Install:Install:





After installing Coffeescript, an REPL (an environment for entering and evaluating Coffeescript statements) is available in your terminal by entering either of these commands:


REPLREPL

Or

An REPL is also available in your browser at coffeescript.org . Select the TRY COFFEESCRIPT tab.

http://coffeescript.org/





To manually compile a Coffeescript file, enter coffee -c (or coffee --compile) in the terminal, followed by the filename (and path if in a subdirectory or other directory).


Compiling CoffeescriptCompiling Coffeescript





The most common option for the compile command is -b or --bare. This option will disable the function wrapper which is placed around the Javascript program by default.







Many frameworks and development environments will compile Coffeescript

files automatically.

Examples:

● Ruby on Rails, Sinatra: compile Coffeescript files automatically when

serving an HTTP request for the corresponding Javascript file.

● Many text editors, such as Sublime, and many IDEs, can automatically

compile Coffeescript files every time they are saved.

● Workflow managers such as Grunt can be configured to automatically

compile Coffeescript files as they are saved.







The Coffeescript compiler also has a -w or --watch option to automatically compile Coffeescript files as they are saved.







● With Coffeescript, you're still operating in the Javascript environment

● Slogan: "It's just Javascript"

● Use the same data types, standard classes and libraries

Coffeescript / Javascript Similarities & DifferencesCoffeescript / Javascript Similarities & Differences

DifferencesDifferences

SimilaritiesSimilarities

● Different syntax

● Blocks and statements marked by whitespace instead of { } and ;● No var, function or prototype keywords

● Coffeescript insulates you from certain Javascript snags

● Coffeescript must be compiled to JS but may be done automatically





** Syntax Details **** Syntax Details **● Statements and blocks

● Variables

● Operators and aliases

● String Interpolation

● Arrays

● Array ranges

● Comprehensions

● Objects

● Functions

● Fat arrows

● If – else

● Prefix and postfix conditionals

● Switch

● Classes





● You don't use semicolons ; .● Indentation is significant, and used to delimit blocks of multiple lines of

code.

● Indentation delimits blocks of code instead of curly braces { } .

● You don't need an end keyword at the end of a block, as in Ruby.

** Syntax Details **** Syntax Details **Statements and blocksStatements and blocks





● No var keyword.

● Variables are not global unless you use them somewhere in the global

scope.

● Coffeescript generates var statements and places them at the top of the

scope where they are used.

● This scheme precludes "shadowing". You cannot use the same variable name

within nested scopes and expect them to represent different variables.

** Syntax Details **** Syntax Details **VariablesVariables





● Either the keyword is or a double equal sign == will be compiled to a

Javascript triple equal sign === . Coffeescript will not compile anything

into the Javascript double equal sign == .

● The keywords and, or and not can be substituted for && , || and ! ,

respectively.

** Syntax Details **** Syntax Details **Operators and aliasesOperators and aliases





● If you place an expression inside of curly brackets preceeded by a sharp sign #{ } , and this construct is inside a string literal within a pair of quote marks, then when the string is accessed, it will evaluate the expression in the brackets and insert its equivalent string into the containing string.

** Syntax Details **** Syntax Details **String interpolationString interpolation





● Similar syntax to Javascript.

● Multi-line array literals are allowed.

● Commas at end of lines are optional with multi-line syntax.

** Syntax Details **** Syntax Details **ArraysArrays





● A 'begin' and 'end' number inside the square brackets for an array can be used to designate a slice of the array.

** Syntax Details **** Syntax Details **Array rangesArray ranges





● Both inline and multi-line syntax.

● Commas not needed for multi-line form.

● Quotes around key names are optional in object literals.

** Syntax Details **** Syntax Details **ObjectsObjects





● Use for iterations instead of loops.

● Syntax for array iterations is for item in array .

● Syntax for iterations over the keys of an object is for key, value of object .

● Just use one parameter to iterate over the keys only.

** Syntax Details **** Syntax Details **ComprehensionsComprehensions





● No function keyword.

● Use arrow -> instead.

● Function block is delimited with indentation.

● Place parameters in parentheses like in Javascript.

● When calling a function, parentheses are optional.

** Syntax Details **** Syntax Details **FunctionsFunctions





● Defining a function with a "fat arrow" => instead of a "skinny arrow" -> will

bind the value of the this keyword to the 'this' for the function in which it's

defined. This will prevent the 'this' reference from being diverted to

another scope by, for example, a function callback.

● In Coffeescript, the 'at' symbol @ is a convenient shortcut/alias for the this

keyword.

** Syntax Details **** Syntax Details **Fat arrowsFat arrows





● if - else statements are written without parentheses or curly brackets.

● Blocks are delimited by indentation.

● Use if and then for a single line if statement. Do not use the then keyword

when using the multi-line syntax.

** Syntax Details **** Syntax Details **If - elseIf - else





A one-line if statement can be written by appending the if clause after the executable statement.

** Syntax Details **** Syntax Details **Prefix and postfix conditionalsPrefix and postfix conditionals





● Use when and else keywords instead of case and default.

● Don't need to end each 'case' with a break keyword.

● Blocks for individual cases are delimited by indentation.

** Syntax Details **** Syntax Details **SwitchSwitch





● "Pseudo-classical object orientation".

● Use class keyword to begin a class definition.

● Use indentation as a delimiter, indenting everything after the class

keyword.

** Syntax Details **** Syntax Details **ClassesClasses

● Classes can extend other classes. Use the extends keyword.





● Create a new instance of the class with the new keyword, followed by a

space and then the class name, appended with a list of constructor

parameters in parentheses, if required.







● Define class instance methods with a colon : instead of an equal sign = .

● Constructor methods must be named constructor().

● Use the this alias @ to designate instance attributes.

● Use the this alias @ when referencing an instance method from elsewhere

within the class.





● Syntax issues – semicolons

● Syntax issues – curly brackets vs whitespace

● Compilation

● Learning curve and adoption

Javascript vs Coffeescript Debate & ControversyJavascript vs Coffeescript Debate & Controversy





Array iterator methods:

● forEach()

● map()

● filter()

● every()

● some()

● reduce()

● reduceRight()

● indexOf()

● lastIndexOf()

ECMAscript5 / ECMAscript6 Changes & CoffeescriptECMAscript5 / ECMAscript6 Changes & Coffeescript

ECMAscript5ECMAscript5





● Classes: class, constructor and extends keywords

● Modules: import and export keywords

● Arrows: Can use => instead of function for anonymous functions

● String Interpolation: Enclose expression to coerce into a string with $(),

enclose entire string expression with backtick `` characters instead of

quotes

ECMAscript5 / ECMAscript6 Changes & CoffeescriptECMAscript5 / ECMAscript6 Changes & Coffeescript

ECMAscript6ECMAscript6





github.com/jrschmidt/grandpa-basic-1980github.com/jrschmidt/grandpa-basic-1980

Code ExamplesCode Examples





OFFICIAL WEBSITE: coffeescript.org

SLIDES: Coffeescript: No really, it's just Javascript by Brian Mannslideshare.net/backbonerails/coffeescript-no Feb 2014

BOOK: CoffeeScript: Accelerated JavaScript DevelopmentTrevor Burnham – Pragmatic Programmers 2ndEd Feb 2015

VIDEO: Jeremy Ashkenas: A Cup of CoffeeScriptyoutube.com/watch?v=A5Sg04IEkvk 2010/2013

VIDEO: CoffeeScript: The Good Parts by Azat Mardanyoutube.com/watch?v=WX5Y6Dq1OHE Aug 2014

ResourcesResources

coffeescript: fad or useful tool? socal code camp fullerton 2015

Software

introduction coffeescript

coffeescript compiler

coffeescript statements

coffeescript compilation

compile coffeescript

terminal browser repl

try coffeescript tab

worthless fad oruseful