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
400
Rails and the future of the open web
polarblau
3
120
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
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
VS Code Update for GitHub Copilot
74th
1
390
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Create a website using Spatial Web
akkeylab
0
300
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
550
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Site-Speed That Sticks
csswizardry
10
660
Designing Experiences People Love
moore
142
24k
The Language of Interfaces
destraynor
158
25k
Code Review Best Practice
trishagee
68
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Navigating Team Friction
lara
187
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Testing 201, or: Great Expectations
jmmastey
42
7.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