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 Language
Search
dherman
March 04, 2015
Programming
0
590
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
290
Closing iterators
dherman
0
680
A better future for comprehensions
dherman
0
1.9k
Evolution is Awesome
dherman
0
430
Status Report: ES6 Modules
dherman
16
3.8k
Discussion with TC39 about the semantics of symbols
dherman
1
350
September 2013 Modules Status Update
dherman
2
1k
Rust: low-level programming without the segfaults
dherman
13
8.8k
Rust
dherman
9
2k
Other Decks in Programming
See All in Programming
生成AIをkintoneに連携してみた
hideg
0
230
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 09
javiergs
PRO
1
500
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
AHC035解説
terryu16
0
730
小さな開発会社を作った理由
polidog
0
1.9k
CSC307 Lecture 06
javiergs
PRO
0
360
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
4
590
GraphQLとの向き合い方2022年版
quramy
36
13k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
A Modern Web Designer's Workflow
chriscoyier
689
190k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Infographics Made Easy
chrislema
238
18k
The Pragmatic Product Professional
lauravandoore
29
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Web development in the modern age
philhawksworth
203
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
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