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
320
Evolving the World's Most Popular Programming Language
dherman
0
640
Closing iterators
dherman
0
750
A better future for comprehensions
dherman
0
2k
Evolution is Awesome
dherman
0
530
Status Report: ES6 Modules
dherman
16
3.9k
Discussion with TC39 about the semantics of symbols
dherman
1
380
September 2013 Modules Status Update
dherman
2
1.2k
Rust: low-level programming without the segfaults
dherman
13
8.9k
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
技術を根付かせる / How to make technology take root
kubode
1
250
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
WebDriver BiDiとは何なのか
yotahada3
1
150
sappoRo.R #12 初心者セッション
kosugitti
0
260
ARA Ansible for the teams
kksat
0
150
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
Spring gRPC について / About Spring gRPC
mackey0225
0
230
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.1k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
A Tale of Four Properties
chriscoyier
158
23k
GitHub's CSS Performance
jonrohan
1030
460k
What's in a price? How to price your products and services
michaelherold
244
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
It's Worth the Effort
3n
184
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Code Review Best Practice
trishagee
67
18k
Docker and Python
trallard
44
3.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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