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
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
970
Return of the Full-Stack Developer
simas
PRO
1
300
Functional APIから再考するLangGraphを使う理由
os1ma
5
650
PsySHから紐解くREPLの仕組み
muno92
PRO
1
510
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
180
プログラミング教育のコスパの話
superkinoko
0
110
RCPと宣言型ポリシーについてのお話し
kokitamura
2
140
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
520
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
Compose Navigation実装の見通しを良くする
hiroaki404
0
170
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
230
体得しよう!RSA暗号の原理と解読
laysakura
3
520
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
117
51k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
We Have a Design System, Now What?
morganepeng
51
7.5k
GitHub's CSS Performance
jonrohan
1030
460k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Statistics for Hackers
jakevdp
797
220k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A designer walks into a library…
pauljervisheath
205
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bash Introduction
62gerente
611
210k
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