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
660
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
330
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
Rust
dherman
9
2.1k
Other Decks in Programming
See All in Programming
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Comparing decimals in Swift Testing
417_72ki
0
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
130
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
構文解析器入門
ydah
7
1.9k
Jakarta EE Meets AI
ivargrimstad
0
460
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Building Applications with DynamoDB
mza
95
6.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Navigating Team Friction
lara
188
15k
Designing for Performance
lara
610
69k
Automating Front-end Workflow
addyosmani
1370
200k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
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