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.3k
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
160
Prototyping all the things
polarblau
2
150
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
110
Enabling Design for a Complex Reality
polarblau
2
110
A primer on Content Security Policy
polarblau
1
340
Rails and the future of the open web
polarblau
3
110
Brief Ruby/Ruby on Rails intro
polarblau
3
150
Ruby Idioms
polarblau
3
540
How to ask questions and find the right answers
polarblau
2
320
Other Decks in Programming
See All in Programming
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
360
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
310
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
11k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
現場で役立つモデリング 超入門
masuda220
PRO
13
3k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.2k
offers_20241022_imakiire.pdf
imakurusu
2
370
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
620
Featured
See All Featured
Teambox: Starting and Learning
jrom
132
8.7k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Scaling GitHub
holman
458
140k
Building an army of robots
kneath
302
42k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Thoughts on Productivity
jonyablonski
67
4.3k
Adopting Sorbet at Scale
ufuk
73
9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Why Our Code Smells
bkeepers
PRO
334
57k
Practical Orchestrator
shlominoach
186
10k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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