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.5k
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
330
Evolving the World's Most Popular Programming Language
dherman
0
660
Closing iterators
dherman
0
780
A better future for comprehensions
dherman
0
2k
Evolution is Awesome
dherman
0
580
Status Report: ES6 Modules
dherman
16
4k
Discussion with TC39 about the semantics of symbols
dherman
1
410
September 2013 Modules Status Update
dherman
2
1.2k
Rust: low-level programming without the segfaults
dherman
13
9k
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
900
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Porting a visionOS App to Android XR
akkeylab
0
680
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
350
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Site-Speed That Sticks
csswizardry
10
700
It's Worth the Effort
3n
185
28k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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