Coffeescript: Fad or Useful Tool? Socal Code Camp Fullerton 2015

Coffeescript:Coffeescript: Worthless Fad orWorthless Fad or
Useful 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.

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.
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.
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.
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.
String interpolationString interpolation

●
Similar syntax to Javascript.
●
Multi-line array literals are allowed.
●
Commas at end of lines are optional with multi-line syntax.
ArraysArrays

●
A 'begin' and 'end' number inside the square brackets for an array can be
used to designate a slice of the array.
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.
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.
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.
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.
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.
If - elseIf - else

A one-line if statement can be written by appending the if clause after the
executable statement.
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.
SwitchSwitch

●
"Pseudo-classical object orientation".
●
Use class keyword to begin a class definition.
●
Use indentation as a delimiter, indenting everything after the class
keyword.
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.
ClassesClasses

ClassesClasses
●
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 Mann
slideshare.net/backbonerails/coffeescript-no Feb 2014
BOOK: CoffeeScript: Accelerated JavaScript Development
Trevor Burnham – Pragmatic Programmers 2ndEd Feb 2015
VIDEO: Jeremy Ashkenas: A Cup of CoffeeScript
youtube.com/watch?v=A5Sg04IEkvk 2010/2013
VIDEO: CoffeeScript: The Good Parts by Azat Mardan
youtube.com/watch?v=WX5Y6Dq1OHE Aug 2014
ResourcesResources

Coffeescript: Fad or Useful Tool? Socal Code Camp Fullerton 2015

Recommended

Recommended

More Related Content

Similar to Coffeescript: Fad or Useful Tool? Socal Code Camp Fullerton 2015

Similar to Coffeescript: Fad or Useful Tool? Socal Code Camp Fullerton 2015 (20)

Recently uploaded

Recently uploaded (20)

Coffeescript: Fad or Useful Tool? Socal Code Camp Fullerton 2015