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
The future of JavaScript
Search
dherman
September 27, 2011
Programming
6
2.4k
The future of JavaScript
I've seen the future of JavaScript, and it's AMAZING
dherman
September 27, 2011
Tweet
Share
More Decks by dherman
See All by dherman
Rust + Node = Neon
dherman
1
290
Evolving the World's Most Popular Programming Language
dherman
0
590
Closing iterators
dherman
0
680
A better future for comprehensions
dherman
0
1.9k
Evolution is Awesome
dherman
0
430
Status Report: ES6 Modules
dherman
16
3.8k
Discussion with TC39 about the semantics of symbols
dherman
1
350
September 2013 Modules Status Update
dherman
2
1k
Rust: low-level programming without the segfaults
dherman
13
8.8k
Other Decks in Programming
See All in Programming
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
生成AIをkintoneに連携してみた
hideg
0
230
【Go言語】golangci-lintの使い方
tomo1227
0
270
CSC307 Lecture 10
javiergs
PRO
0
310
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
CSC307 Lecture 11
javiergs
PRO
0
240
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
CSC307 Lecture 05
javiergs
PRO
0
210
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1026
450k
We Have a Design System, Now What?
morganepeng
46
7k
Fireside Chat
paigeccino
25
2.8k
The Invisible Customer
myddelton
117
13k
A designer walks into a library…
pauljervisheath
201
24k
Clear Off the Table
cherdarchuk
89
320k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Happy Clients
brianwarren
94
6.5k
Web development in the modern age
philhawksworth
203
10k
Agile that works and the tools we love
rasmusluckow
325
20k
Done Done
chrislema
179
15k
Speed Design
sergeychernyshev
9
270
Transcript
I HAVE SEEN THE FUTURE OF JAVASCRIPT AND IT’S AMAZING
Hi, I’m dherman @littlecalculist
I — JavaScript and I love the language it almost
is...
None
None
POWER
Bits, bytes and blobs binary file and network I/O
var Point2D = new StructType({ x: uint32,
y: uint32 }); var Color = new StructType({ r: uint8, g: uint8, b: uint8 });
var Pixel = new StructType({ point: Point2D,
color: Color }); var Triangle = new ArrayType(Pixel, 3);
new Triangle([ { point: { x: 0,
y: 0 }, color: { r: 255, g: 255, b: 255 } }, { point: { x: 5, y: 5 }, color: { r: 128, g: 0, b: 0 } }, { point: { x: 10, y: 0 }, color: { r: 0, g: 0, b: 128 } } ])
Keep off my property private names
function Container() { var secret = 3;
this.service = function() { if (secret-‐-‐) { ... } }; }
var key = Name.create("secret"); function Container() { this[key] = 3
} Container.prototype = { service: function() { if (this[key]-‐-‐) { ... } } };
var markers = new WeakMap(); var tile = new Tile(...);
var results = [...]; tiles.set(tile, results);
var obj = Proxy.create({ get: function(...) {
... }, set: function(...) { ... }, delete: function(...) { ... }, ... }, proto);
Callbacks: the new goto? (well, no, but... still.)
Pour 1/2 cup water into pan. When you’re done: Bring
water to boil. When that’s done: Lower heat and add rice. After 15 minutes: Turn off heat and serve.
pan.pourWater(function() { range.bringToBoil(function() {
range.lowerHeat(function() { pan.addRice(function() { setTimeout(function() { range.turnOff(); serve(); }, 15 * 60 * 1000); }); }); }); });
pan.pourWater(function() { range.bringToBoil(function() {
range.lowerHeat(function() { pan.addRice(function() { setTimeout(function() { range.turnOff(); serve(); }, 15 * 60 * 1000); }); }); }); }); pyramid of doom
generators a.k.a. coroutines a.k.a. Interruptible functions
function* g() { yield 1;
yield 2; } var obj = g(); obj.next(); // 1 obj.next(); // 2
var task = new Task(function*() { var
text = yield XHR("file.txt"); yield timeout(1000); status.innerHTML = text; }); task.start();
Great languages deserve great libraries and that means modules
None
browser <script></script>
var Collections = (function() { function Dictionary()
{ ... } return { Dictionary: Dictionary }; })();
“The human compiler, at work.” — Paul Graham
module Collections { export function Dictionary() {
... } }
import { $ } from "jquery.js"; import { map, each
} from "underscore.js";
import { $ } from "jquery.js"; import { map, each
} from "underscore.js"; loaded once, before execution
Expressiveness artwork credit: sam flores
Death of a thousand cuts typeof null === "object" //
wtfjs? arguments isn’t an Array #$@?! var hoisting
function f(i, j, ...rest) { return rest.slice(i,
j); }
array.push(thing1, thing2, ...moarThings); var shape = new Shape(...points);
function img(src, width=320, height=240) { ... }
for (i = 0; i < a.length; i++) {
let x = a[i]; x.onclick = function() { x.toggle() }; }
for (i = 0; i < a.length; i++) {
let x = a[i]; x.onclick = function() { x.toggle() }; } block scoped
var { r, g, b } = thing.color; var [x,
y] = circle.center; [a, b] = [b, a];
var obj = { foo: "foo",
bar() { return this.foo }, [getName()]: 17 };
for (x in [3, 4, 5])
// 0, 1, 2 (d’oh) for (x of [3, 4, 5]) // 3, 4, 5 for (x of keys(o)) // keys in o for (x of values(o)) // values of o for ([k, v] of items(o)) // props of o
import iterate from "@iter"; obj[iterate] = function() {
return { next: function() { ... } } } for (x of obj) { ... }
[ x * y for (x of obj1) for (y
of obj2) ]
"<p>\nohai, " + firstName + " " + lastName +
"\n</p>"
`<p> ohai, ${firstName} ${lastName} </p>`
safeHTML`<p> ohai, ${firstName} ${lastName} </p>`
How soon is now?
We (Ecma) are working hard and fast on the spec.
We (vendors) will ship features before the spec is done. Transpilers as language shims: Traceur, Narcissus
None