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
140
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
190
Ruby Idioms
polarblau
3
580
How to ask questions and find the right answers
polarblau
2
350
Other Decks in Programming
See All in Programming
Rancher と Terraform
fufuhu
2
170
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
Honoアップデート 2025年夏
yusukebe
1
890
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
個人軟體時代
ethanhuang13
0
280
旅行プランAIエージェント開発の裏側
ippo012
1
580
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
OSS開発者という働き方
andpad
5
1.6k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
740
Kiroで始めるAI-DLC
kaonash
2
500
為你自己學 Python - 冷知識篇
eddie
1
310
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Scaling GitHub
holman
463
140k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Code Reviewing Like a Champion
maltzj
525
40k
Code Review Best Practice
trishagee
70
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to train your dragon (web standard)
notwaldorf
96
6.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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