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
640
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
750
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
380
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
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
180
バッチを作らなきゃとなったときに考えること
irof
2
460
Pulsar2 を雰囲気で使ってみよう
anoken
0
240
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.4k
color-scheme: light dark; を完全に理解する
uhyo
7
470
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.1k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
220
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
sappoRo.R #12 初心者セッション
kosugitti
0
270
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
810
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
What's in a price? How to price your products and services
michaelherold
244
12k
Six Lessons from altMBA
skipperchong
27
3.6k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Making Projects Easy
brettharned
116
6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
A Tale of Four Properties
chriscoyier
158
23k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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
// "mom@example.com" ಠ_ಠ.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