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
Evolving the World's Most Popular Programming L...
Search
dherman
March 04, 2015
Programming
0
650
Evolving the World's Most Popular Programming Language
My presentation to Dawn Song's #wt294 course
dherman
March 04, 2015
Tweet
Share
More Decks by dherman
See All by dherman
Rust + Node = Neon
dherman
1
320
Closing iterators
dherman
0
760
A better future for comprehensions
dherman
0
2k
Evolution is Awesome
dherman
0
540
Status Report: ES6 Modules
dherman
16
3.9k
Discussion with TC39 about the semantics of symbols
dherman
1
390
September 2013 Modules Status Update
dherman
2
1.2k
Rust: low-level programming without the segfaults
dherman
13
8.9k
Rust
dherman
9
2.1k
Other Decks in Programming
See All in Programming
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
250
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
820
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
140
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
680
2025/3/18 サービスの成長で生じる幅広いパフォーマンスの問題を、 AIで手軽に解決する
shirahama_x
0
160
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
SQL Server ベクトル検索
odashinsuke
0
110
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
Speed Design
sergeychernyshev
28
860
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
GraphQLとの向き合い方2022年版
quramy
45
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How GitHub (no longer) Works
holman
314
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Adopting Sorbet at Scale
ufuk
75
9.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Evolving the World’s Most Popular Programming Language Dave
Herman, Mozilla Research
None
None
None
None
None
don’t break the web
<script type="application/javascript;version=4"> ! ! ! </script>
<script type="application/javascript;version=4"> function gen() {
yield 42; } </script>
<script type="application/javascript;version=4"> function gen() {
yield 42; } </script> ✘
<script type="application/javascript;version=6"> function gen() {
yield 42; } </script>
can haz one JS?
<script> function* gen() {
yield 42; } </script>
Evolution’s Evolutionary Advantage Focus: avoid scope creep, second system syndrome
Consistency: keep a unified development model Stability: apps keep working Adoption✨: lower opt-‐in costs, enable shims
apps browsers
http://babeljs.io
classes
function Stack() { this.elements = []; }
! Stack.prototype.isEmpty = function() { return this.elements.length === 0; }; Stack.prototype.push = function(x) { this.elements.push(x); };
.elements .isEmpty .push .pop .top Stack.prototype var
stack = new Stack();
class Stack { constructor() {
this.elements = []; } isEmpty() { return this.elements.length === 0; } push(x) { this.elements.push(x); } // ... }
function MyArray() { Array.call(this); // super (!!)
// ... } ! MyArray.prototype = new Array(); MyArray.prototype.foo = function() { // ... };
var a = new MyArray(); a[17] = "foo";
a.length // 0
class MyArray extends Array { constructor() {
super(); // ... } foo() { // ... } }
modules
var bytes = require("bytes"); var iconv = require("iconv-‐lite");
! module.exports = function(stream, opts, done) { // ... };
import bytes from "bytes"; import iconv from "iconv-‐lite";
! export default function(stream, opts, done) { // ... };
import bytes from "bytes"; import iconv from "iconv-‐lite";
! export default function(stream, opts, done) { // ... };
// phoneQuery.js ! // look up a phone number
or contact module.exports = function(query) { /* ... */ }; ! // initiate a phone call module.exports.call = function() { /* ... */ };
var ಠ_ಠ = require("phoneQuery"); ಠ_ಠ("Mom").mobile // "555-‐555-‐5555" ಠ_ಠ("Mom").email
// "
[email protected]
" ಠ_ಠ.call("Boss", "work") ಠ_ಠ.call(ಠ_ಠ, query) // boom!
// phoneQuery.js ! // look up a phone number
or contact export default function(query) { /* ... */ }; ! // initiate a phone call export function call() { /* ... */ };
// file.js var Folder = require("./folder.js"); // ...
! function File() { /* ... */ } File.prototype.dotSlash = function() { ... new Folder(...) ...; } module.exports = File;
// folder.js var File = require("./file.js"); // ...
! function Folder() { /* ... */ } Folder.prototype.contents = function() { ... new File(...) ...; } module.exports = Folder;
var Folder = require("./folder.js"); var File = require("./file.js");
// ... file.dotSlash() // object is not a function
// file.js import Folder from "./folder.js"; // ...
! export default class File { // ... dotSlash() { ... new Folder(...) ...; } }
// folder.js import File from "./file.js"; // ...
! export default class Folder { // ... contents() { ... new File(...) ... } }
generators
fs.readFile("/etc/passwd", function(err, data) { if (err) throw err;
console.log(data); }
fs.readFile("/etc/passwd", function(err, data) { if (err) throw err;
fs.readFile("~/.bashrc", function(err, data2) { if (err) throw err; fs.readFile(tmp, function(err, data3) { if (err) throw err; // ... } } }
fsp.readFile("/etc/passwd") .then(function(data) {
return fsp.readFile("~/.bashrc"); }) .then(function(data2) { return fsp.readFile(tmp); }) .then(function(data3) { // ... }) .catch(function(err) { throw err; });
function* f(x, y, z) { yield x;
yield y; yield z; } for (s of f("aloha", "howdy", "hey")) { console.log(s); // "aloha", "howdy", "hey" }
spawn(function*() { try {
var data = yield fsp.readFile("/etc/passwd"); var data2 = yield fsp.readFile("~/.bashrc"); var data3 = yield fsp.readFile(tmp); // ... } catch (err) { throw err; } })
async function f() { try {
var data = await fsp.readFile("/etc/passwd"); var data2 = await fsp.readFile("~/.bashrc"); var data3 = await fsp.readFile(tmp); // ... } catch (err) { throw err; } })
Much more • Default parameters, rest-‐params, argument spread •
Destructuring binding and assignment • Object, function, method shorthands • Proxy, Map, WeakMap, Set, WeakSet • Typed arrays • Lexical bindings • Unique symbols • String interpolation • Reflection API • Proper tail calls
asm.js
JavaScript lacks features as a target language. JavaScript is
slow. Even when it’s fast, JavaScript is unpredictable. JIT compilation can be janky.
Revolution: bytecode VM Evolution: • build a native
→ JS compiler • study and optimize code patterns it generates • close gaps where we aren't generating optimal code • formalize pattern as validator 㱺 AOT
function compiledCalculation() { var x = f()|0;
var y = g()|0; return (x+y)|0; }
var MEM8 = new Uint8Array(1024 * 1024); var MEM32
= new Uint32Array(MEM8.buffer); ! function compiledMemoryAccess() { MEM8[x] = MEM8[x+10]; MEM32[(x+16)>>2] = 100; }
A Safe ‟JS VM” • Static validation: no guards, deopts,
boxing • SFI: memory access constrained to binary buffer
Since day one, asm.js has worked across browsers.
None
The Extensible Web
design evaluate design evaluate design evaluate
do { product.build(); product.ship();
product.evaluate(); } while (!product.isPerfect());
do { standard.design(); standard.ship();
standard.evaluate(); throw new DontBreakTheWeb(); } while (!standard.isPerfect());
design evaluate design evaluate design evaluate
Prioritize the Gaps • Standardize low-‐level, general functionality •
Leave high-‐level experimentation to the market • Example: SharedArrayBuffer
browser vendors webdevs development workflow
browser vendors webdevs development workflow
Thank you