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
570
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
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
250
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
WindowInsetsだってテストしたい
ryunen344
1
230
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
100
ふつうの技術スタックでアート作品を作ってみる
akira888
0
340
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
2.4k
GraphRAGの仕組みまるわかり
tosuri13
8
520
Select API from Kotlin Coroutine
jmatsu
1
220
Team operations that are not burdened by SRE
kazatohiei
1
290
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building an army of robots
kneath
306
45k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Making Projects Easy
brettharned
116
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Embracing the Ebb and Flow
colly
86
4.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
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