Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CoffeeScript vs. ECMAScript 6
Search
Florian Plank
February 26, 2015
Programming
5
3.5k
CoffeeScript vs. ECMAScript 6
Florian Plank
February 26, 2015
Tweet
Share
More Decks by Florian Plank
See All by Florian Plank
Ready, set, immersion!
polarblau
0
170
Prototyping all the things
polarblau
2
170
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
130
Enabling Design for a Complex Reality
polarblau
2
130
A primer on Content Security Policy
polarblau
1
410
Rails and the future of the open web
polarblau
3
130
Brief Ruby/Ruby on Rails intro
polarblau
3
180
Ruby Idioms
polarblau
3
570
How to ask questions and find the right answers
polarblau
2
340
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
150
GPUを計算資源として使おう!
primenumber
1
290
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
820
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.6k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
500
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
10
1.9k
効率的な開発手段として VRTを活用する
ishkawa
1
180
Yes, You Can Work on Rails & any other Gem
kaspth
0
120
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
460
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Why Our Code Smells
bkeepers
PRO
337
57k
It's Worth the Effort
3n
185
28k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Visualization
eitanlees
146
16k
Documentation Writing (for coders)
carmenintech
72
4.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
Ruby ECMAScript 6 vs.
CoffeeScript ECMAScript 6 vs.
None
flickr.com/photos/mcgovernville
Disclaimer
CoffeeScript
Transpilers
The elevator pitch
“ Expose the good parts of JavaScript in a simple
way.
“ It’s just JavaScript.
Readable Natural language Speed Backward compatible Sturdy
Whitespace sensitive
user = name: "John" age: 23
No semicolons* No round brackets** No curly braces*** No “var”
user = name: "foo" ! if user.name is "bar" console.log
JSON.stringify user
Lexical scope and variable safety
name = "John" age = 23 ! ! (function() {
var age, name; name = "John"; age = 23; ! }).call(this);
<Opinion />
EcmaScript 6
ES6 also known as —
Harmony also known as —
ES.next also known as —
ES 2015 also known as —
JavaScript 2015 also known as —
JS 9000 also known as —
What’s in a name?
Mocha ! LiveScript ! JavaScript ! ! ! ! JScript
! ! ! ! ! ECMA–262 —The standard ECMAScript —The
language
“ ECMAScript was always an unwanted trade name that sounds
like a skin disease. ! — Brendan Eich
ES 1 ES 2 ES 3 ES 4 ES 5
ES 5.1 ES 6 ES 7 1997 1998 1999 — Abandoned 2009 2011 2015 — TBA
TC39
JavaScript 1.1 ECMAScript 1 JavaScript 1.5 ECMAScript 3 JavaScript 2.0
ECMAScript 6 (Harmony)
JavaScript™
Can I use it?
None
None
None
None
None
None
CoffeeScript vs. ECMAScript 6
JavaScript (ECMAScript 5)
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6)
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript And here’s why…
None
What’s common?
Classes
class Person extends Actor constructor: (@firstName, @lastName) -> fullName: ->
"#{@firstName} #{@lastName}"
class Person extends Actor { ! constructor(firstName, lastName) { this.firstName
= fistName; this.lastName = lastName; } fullname() { return `${this.firstName} ${this.lastName}`; } ! }
class Person extends Actor { get name() { // return
... } set name(value) { // ... } }
(Fat) arrow functions
Account = (customer, cart) -> @customer = customer @cart =
cart ! $('.cart').bind 'click', (event) => @customer.purchase @cart
function Account(customer, cart) { this.customer = customer; this.cart = cart;
$('.cart').bind('click', (e) => { this.customer.purchase(this.cart); }); }
Default function parameters
fill = (liquid = "coffee") -> # ...
function fill(liquid = "coffee") { // ... }
Destructured assignment
[name, age] = ["John", 23] ! response = name: "John"
email: "
[email protected]
" age: 23 ! {name, age} = response
var options = { repeat: true, save: false }; !
var { repeat, save } = options;
var options = { repeat: true, save: false, rules: {
custom: 10, } }; ! var { repeat, save, rules: { custom }} = options;
Rest and spread operators
String interpolation
What’s extra?
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
Block–scoped variables
var es = []; ! for (var i = 0;
i < 10; i++) { let c = i; es[i] = function () { console.log("ES" + c); }; } ! es[6](); // => ES6
const FOO = "bar"; ! console.log(FOO); // => "bar" !
FOO = "foo"; ! console.log(FOO); // => "bar" ! const FOO = "baz"; ! console.log(FOO); // => "bar"
Generators*
function* idMaker(){ var index = 0; while(true) yield index++; }
! var gen = idMaker(); ! console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2
Modules
// file A: export const sqrt = Math.sqrt; export function
square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } ! // file B: import { square, diag } from 'lib'; console.log(square(11)); ! // file C: import * as lib from ‘lib'; console.log(lib.square(11));
Promises
function timeout(duration = 0) { return new Promise((resolve, reject) =>
{ setTimeout(resolve, duration); }); } ! var p = timeout(1000).then(() => { return timeout(2000); }).then(() => { throw new Error("hmm"); }).catch(err => { return Promise.all([timeout(100), timeout(200)]); });
Sets and Maps
var s = new Set(); s.add(“a").add("b").add("a"); ! s.size === 2;
s.has("a") === true;
var m = new Map(); m.set("hello", 42); ! m.set(s, 34);
m.get(s) == 34;
Symbols
var firstName = Symbol(); var person = {}; ! person[firstName]
= "Nicholas"; console.log(person[firstName]);
var firstName = Symbol(); var person = {}; ! person[firstName]
= "Nicholas"; console.log(person[firstName]);
const MY_KEY = Symbol(); let obj = {}; ! obj[MY_KEY]
= 123; console.log(obj[MY_KEY]);
const MY_KEY = Symbol(); ! let obj = { [MY_KEY]:
123 };
const FOO = Symbol(); ! let obj = { [FOO]()
{ return 'bar'; } }; ! console.log(obj[FOO]());
Iterables & for … of loops
let values = [1, 2, 3]; ! for (let i
of values) { console.log(i); }
What’s missing?
JavaScript (ECMAScript 5) JavaScript (ECMAScript 6) CoffeeScript
List comprehension
say(letter) for letter in ['A', 'B']
johns = (n for n in ['John', 'Marcy'] when n
is 'John')
users = john: 23, marcy: 29 ! ageReport = for
name, age of users "#{name} is #{age}"
Whitespace sensitive
“Everything’s an expression” Implicit return
foo =-> "bar"
grade = (student) -> if student.excellentWork "A+" else if student.okayStuff
if student.triedHard then "B" else "B-" else "C" eldest = if 24 > 21 then "Liz" else "Ike"
[lastName, age] = if name == 'John' then ['Doe', 23]
else if name == 'Marcy' then ['Murcy', 29] else ['Unknown' ] ! console.log lastName, age
Postfix conditionals
console.log("42") if question is true
Operators and aliases
invite(user) if user? # typeof user !== "undefined" && user
!== null ! ! name = userName ? 'John'
launch() if ignition is on ! volume = 10 if
band isnt SpinalTap ! letTheWildRumpusBegin() unless answer is no ! letIn() if name in ['John', 'Marcy']
Ranges
countdown = (num for num in [10..1])
Verdict?
Try it now, switch later (where applicable)
“ But one thing is for certain: we must embrace
the moving target.
http://coffeescript.org/ https://kangax.github.io/compat-table/es6/ https://speakerdeck.com/polarblau/an-evening-with-coffeescript https://github.com/lukehoban/es6features https://leanpub.com/understandinges6/read http://www.wintellect.com/devcenter/nstieglitz/5-great-features- in-es6-harmony http://rauchg.com/2015/ecmascript-6/ http://code.tutsplus.com/articles/use-ecmascript-6-today-- net-31582
http://blog.500tech.com/on-coffeescript-and-es6/ https://github.com/ericdouglas/ES6-Learning
JOIN US!
THANKS! @polarblau