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
140
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
100
Enabling Design for a Complex Reality
polarblau
2
110
A primer on Content Security Policy
polarblau
1
330
Rails and the future of the open web
polarblau
3
100
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
310
Other Decks in Programming
See All in Programming
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
CSC307 Lecture 09
javiergs
PRO
1
500
유연한 Composable 설계
l2hyunwoo
0
380
Namespace on read
tagomoris
2
370
小さな開発会社を作った理由
polidog
0
1.9k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
CSC307 Lecture 13
javiergs
PRO
0
150
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
127
8.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Designing the Hi-DPI Web
ddemaree
276
34k
Speed Design
sergeychernyshev
9
270
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Faster Mobile Websites
deanohume
303
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
For a Future-Friendly Web
brad_frost
173
9.2k
Raft: Consensus for Rubyists
vanstee
134
6.5k
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