JavaScript 2 and the Future of the Web

Brendan Eich

Mozilla Corporation

JavaScript on the March

Where is JavaScript?

It's all over the Web

• Hixie's webstats: The script element was used on roughly half the pages we checked. The most common attributes: language src type defer charset id fptype for event name langauge class tppabs langugage languaje.
• Required for any modern ("Ajax", "Web 2.0") web application
• Tim O'Reilly, from this April's radar.oreilly.com: As you might expect, Javascript book sales are up 121%, driven by the new interest in AJAX. (We don't yet track Ajax as a separate category, choosing instead to include it with Javascript.)

What's Next?

• Not everything looks rosy on the JavaScript front
• Netscape's "JavaScript 2" / "ECMAScript Edition 4" proposals were too different from JS1
• JS2 implementations too long in coming
• Yet old proposals have high search rank
• And many people don't like what they saw in those proposals

Angst over JavaScript 2

Angst over JavaScript 2

• Paraphrasing from blisted.org, Scott S. McCoy's site:
• We don't need to change the language much
• JavaScript doesn't need to look like Java, or any other language
• "... if we change the language in the way suggested by JavaScript 2.0, [we will need] another JavaScript to fill the need it has successfully fulfilled."
• "JavaScript already has most of the features people complain about not having, in ways that aren't really that ugly or intrusive, despite popular belief."
• JavaScript does need a better extension mechanism

Selling Out?!

Selling Out?!

• From David Benjamin on Lambda the Ultimate
• "JavaScript... selling out?"
• Reaction to ActionScript 2 (based on Netscape's proposal)
• "I'm a fan of strong, dynamic typing, or static typing with inference; I have little desire for a weak, slightly static type system."
• "I've been impressed that a prototype-based OO language was able to fly under the radar and enjoy a moderate success for awhile, but it seems like JS is going the way of Java/C#"

Hell-raising

• https://www.zwetan.com/blog/ECMAScript/RaisingHell.html
• Could be summarized as "ECMAScript ain't got no class"
• And this (prototype, not class based OOP) is a good thing
• Misused class terminology leads people astray:

  class Singleton {
    private static var _oInstance : Singleton;
    private function Singleton() {}
    public static function getInstance() : Singleton {
      if (_oInstance == undefined)
        _oInstance = new Singleton();
      return _oInstance;
    }
  }
  

Free Advice that We Hear

Free Advice that We Hear

• Leave it alone
• Revise it in big, incompatible ways
• Fix it just a little bit (for 90 different values of little bit)
• Don't turn it into Java!
• Turn it into Python

Leave It Alone

• Browsers finally (mostly, sort of) interoperate at the core language level
• Closures for information hiding
• Objects for global namespace partitioning
• Singletons and data definitions (JSON)
• Constructors with prototypes, not classes
• Write code to assert and check invariants
• Put all effort into frameworks
  • Which ones?
  • Distributed how?

What's Wrong with This?

• Nothing is wrong with this -- on a small scale
• Browsers actually don't interoperate so well at the frontiers
  • Different time/space trade-offs and outright bugs
  • Disagreement on, e.g., whether alert.apply should work
• Closures for private members are fine for many workloads
• Object namespaces requires cooperation and benign code
• Nothing wrong with singletons/JSON except safety hazards
• Explicit type checking code is tedious and error prone
• Frameworks must be shared, distributed, edge-cached, URI-named

Environments as Objects

• Let's dig into the first item, constructor environment return
• Measure the cost of private members via closures:

  function Point(x, y) {
    return {
      getX: function () { return x },
      getY: function () { return y }
    }
  }
  
  for (var i = 0, a = []; i < 1e5; i++)
      a[i] = new Point(i, i)
  

What's the Cost?

• Over 3x slower and 3x the memory use of

  function Point1(x, y) {
    this.x = x
    this.y = y
  }
  

• For small object population, who cares?
• Object populations growing exponentially

Designing for the Next Ten Years

Designing for the Next Ten Years

• Other minimal JS1 solutions seem likely to scale poorly too
• We can't make so big a spec jump again, so this is it
• Browsers implementations should show up in 2007 (Mozilla, Opera, ...)
• Some browsers will lag, but let's think long-term: 2010
• Are there useful tools to speed migration?
  • A JS2 to JS offline translator, for example
  • Write your web app using JS2 exclusively
  • Run the translator over all of your JS2 code
  • Serve the translated files to old browsers

Motivation

• Fix problems in JS1 that bug people daily
• A type system to enforce invariants
  • instead of writing/debugging lots of value-checking code
  • optional annotations, an extension to JS1
• Programming in the large
  • Package system
  • Visibility qualifiers (namespaces, private internal public)
  • Optional static type checking
• Support bootstrapping and metaprogramming
  • Self-host most of the standard objects
  • Self-host compiler front end and type checker
  • Reduce need for future ECMA Editions

Why Now, After All These Years?

• Adobe heavily invested in ActionScript 3
• Apple along for the ride
• Microsoft based JScript.NET on Netscape's proposals
• Mozilla Firefox, its extensions, and other apps built on JS
• Opera web apps and "widgets" requirements
• Useful results from Programming Languages research community (hybrid type systems, contracts)
• Mainly, a healthy dose of "Web as Platform" co-opetition
  • Sparked by Web Browser competition

What's New

What's New

• A sound type system
  • Including nominal types (classes, interfaces)
  • And structural types (for better "duck typing")
• Namespaces and packages
• Block scope, block statements and expressions
• Destructuring assignment
• Iterators, generators, array comprehensions (Pythonic)
• Operator functions, optional decimal arithmetic
• Improvements to various standard objects

Too Much New?

• Foundational changes wrought by types are all-or-nothing
• Other changes solve frequently encountered bugs
  • With decimal, 0.1 + 0.2 === 0.3, not 0.30000000000000004
  • Generators avoid twisty mazes of callbacks, etc.
• Some changes are "just" surface syntax
  • Which would be standard macros with the right kind of macro system
  • But we are not attempting a macro system for this edition
  • So we are being generous with surface syntax (e.g. array comprehensions)

Type Soundness

• "It turns out that a fair amount of careful analysis is required to avoid false and embarrassing claims of type soundness for programming languages." - Luca Cardelli (1996)
• We have expert help on ECMA TG1:
  • Dave Herman, Northeastern University
  • Cormac Flanagan, U.C. Santa Cruz
• Currently modeling checkable semantics
• Hope to avoid embarrassments that other languages have suffered!

Types

• Well-known types: Object Array Function Boolean Number String Date RegExp ...Error
• New types: int double decimal Class Type *
• No more primitive types vs. wrappers
  • false == new Boolean(false)
  • false === new Boolean(false)
  • 42 === new Number(42)
  • "foo" === new String("foo")
  • Incompatible change, likely viewed entirely as a bug fix
• Object types are nullable by default
• Except for Boolean and the numeric types

Type Annotations

• var x : String; // defaults to null
• var x : String = y; // y converts to string
• var x : SubType = y; // downcast y, may throw

• function f(a : int, b : String, c : Object) : RetType
  {
    // arguments are guaranteed to match types
    // return value must convert to or match RetType 
  }
  

• function f(a : int, b : String, ...rest) {
    // rest is of type Array, contains actual trailing arguments
  }
  

Type Expressions

• Type annotation can be any constant type expression
• Parametric type: Array[[T]] for an Array of type T
• Structural type:
  • Record type: {p: T, q: U} where T and U are type expressions
  • Array type: [T, U, V] where any elements after index 2 are also of type V
• Function type: function (this: T, a: U, b: V): R
• Nullable and non-nullable type operators:
  • Object! does not include null
  • ?Number is the nullable number type

Classes

• A class defines a named record type derived from another class, or from Object if no supeclass is given
• By default a class is sealed against mutation

• class C extends B {
    function C(m) { mem = m }
    public function getmem() { return mem }
    private var mem : Object
  }
  var c : C = new C(new Date)
  

• C.prototype exists, but c.getmem() always refers to the declared class method

Interfaces

• An interface is a named record type, possibly derived from another interface, containing only function declarations

• interface I {
    function meth(int) : int
  }
  

• Each function declaration must have a name but no body
• A class may implement one or more interfaces, meaning it supplies function definitions for all interface methods

• class B implements I {
    public function meth(a : int) : int { return a * a }
  }
  

Structural Types

• type Q = {p: int, q: String}
  type R = {p: int, q: String, r: Boolean}
  

• type A = [int, String, Boolean, Object]

• type F = function (int, String, Boolean): Object
  type G = function (int, Object, Object): Number
  

• R is a subtype of Q and G is a subtype of F

• type U = (R, A, F)

• Type U is a union: any value of type U must be an R, A, or F
  There will be a typecase statement to select the dynamic type of a value of union type

Namespaces

• Built-ins: public, private, internal, intrinsic
• Declare your own: namespace improved
• Use it when defining:

  class C {
    public function frob(): int {...}
    public improved function frob(alpha: double): double { ... }
  }
  

• Qualify explicitly: c.improved::frob(1.2)
• Or implicitly:

  use namespace improved
  . . . c.frob(alpha)
  

Packages

• Wrap up related code in a first-class way

  package org.mozilla.venkman {
    class Debugger { . . . }
    class Inspector { . . . }
    class StackWalker { . . . }
  }
  

• Import names from a package:

  import org.mozilla.venkman.*
  // use Debugger, Inspector, etc. freely
  

• Or import selectively:

  import org.mozilla.venkman.Inspector
  // Use Inspector without qualification
  

Blocks

• let as a "better var":

  function f(v1: Vec3, v2: Vec3) {
    if (cross_product_only) {
      let a1 = v1[0], a2 = v1[1], a3 = v1[2]
      let b1 = v2[0], b2 = v2[1], b3 = v2[2]
      return new Vec3(a2*b3 - a3*b2, a3*b1 - a1*b3, a1*b2 - a2*b1)
    }
    . . .
  }
  

• let variables have block scope
• for loops contain an implicit block

  for (let i = 0; i < n; i++) sum += a[i]
  for (let key in obj) print(key, obj[key])
  

Block Statements

• JS1 idiom:

  (function (a, b) {
    var x = b, y = a
    var z = eval(s)
    commit(x, y, z)
  })(x, y)
  

• New syntax:

    let (x = y, y = x, z) {
      z = eval(s)
      commit(x, y, z) 
    }
  

Block Expressions

• The JS1 idiom could be used as an expression:

    return (function (a, b) {
      var x = b, y = a
      return commit(x, y, eval(s))
    })(x, y)
  

• New syntax:

    return let (x = y, y = x, z) commit(x, y, eval(s))
  

• The let variables are scoped to the expression

Destructuring Assignment

• Group assignment and return:

  // swap, rotate, permute in general
  [a, b] = [b, a]
  [p, q, r] = [q, r, p]
  
  // destructure a triple into fresh vars
  var [s, v, o] = db.getTriple()
  

• Works for objects too:

  let {'Title': title, 'Height': height, 'Width': width} = jsonResult
  

• Works in for-in loops:

  for (let [key, {'Title':title, 'FileSize':size}] in dict)
    print(key, title, size)
  

Iterators

• Stand on Python's shoulders
• let it = Iterator(["meow", "oink", "woof"])
• it.next() returns [0, "meow"]
• it.next() returns [1, "oink"]
• it.next() returns [2, "woof"]
• it.next() throws StopIteration
• The for-in loop handles StopIteration:

  for (let i in it) print(i)
  

Generators

• yield in a function makes a generator:

  function count(n : int) {
    for (let i = 0; i < n; i++)
      yield i
  }
  

• A generator function returns an iterator:

  var gen = count(10)
  gen.next() returns 0; . . .; gen.next() returns 9
  gen.next() throws StopIteration
  

• gen.send(value) passes value back to yield
• gen.throw(exception) throws exception from yield

Array Comprehensions

• Sugar for initializing an Array from iterators
• let squares = [i * i for (i in count(10))]
• print(squares) => "0,1,4,9,...,81"
• let odd_squares = [i * i for (i in count(10)) if (i % 2)]
• return [i * j for (i in it1) for (j in it2) if (i != j)]

Operators

• Much-requested ability to customize operators for new types
• Does not require dispatching based on argument type
• Example showing binary vs. unary operator handling:

  class Complex {
    var real:Number, imag:Number;
    public static function +(a:Object, b:Object):Complex {
      if (a is Complex && b is Complex)
        return new Complex(a.real + b.real, a.imag + b.imag)
      if (b == null)
        return (a is Complex) ? a : new Complex(a)
      return intrinsic::+(a, b)
    }
    . . .
  }
  

Decimal

• print(79.49 - 35.99) => 43.49999999999999
• "JavaScript math is broken" (it's the same as Java, C, etc.)
• Most-duplicated bug at https://bugzilla.mozilla.org
• Solution: new decimal type and pragma to use it

  {
    use decimal
    print(79.49 - 35.99) // => 43.50
  }
  

• Enough precision to represent all doubles
• Tracking IEEE 754r

Miscellany

• Object getters, setters, and "catch-alls":

    return {
      get x() { return this.inner.x },
      set x(nx) { this.inner.x = nx },
      get *(id) { return this.intrinsic::get(id) },
      set *(id,v) { return this.intrinsic::set(id, v) },
    }
  

• Date literals based on ISO 8601

  let today = 2006-05-12T
  let tomorrow_noon = 2006-05-13T12:00:00.000-07:00
  let showtime = T13:45-7
  

• Slice operators: s[i:j], a[-5:-2], etc.

Bug Fixes

• arguments delegates to Array.prototype
• Inner function this binds to outer this for direct calls
• typeof null === "null"
• Standard global properties (Date, String, etc.) immutable
• new RegExp("pattern") same as /pattern/
• Allow a trailing comma in object initialisers
• s[i] for fast/guaranteed s.charAt(i) alternative
• map and other generic functions on Array-likes

The Near Term

• Access to the ECMA TG1 wiki in June 2006
• JS1.7 in Firefox 2 this fall
  • let blocks
  • Destructuring assignment
  • Iterators
  • Generators
  • Array comprehensions
• JS1.9 (probably) in Firefox 3, Q1 2007
• ECMAScript Edition 4 spec deadline: end of Q1 2007
• JS2 based on final ES4 in Q2 2007

The Future of JavaScript

• Web browsers under increasing size constraints
• JS likely to remain the only browser programming language
• JS2 will displace JS1 eventually (~4 years?)
• JS2 must be strong enough for the long run
  • Small dynamic prototypes
  • Programming in the large
  • Optimized for space and speed
  • Extensible enough to forestall JS3
  • Security through virtual machine techniques

The Future of the Web

• If new XML languages are the future of the Web
• And JS2 + XBL2 in browsers support new XML languages
• Then JS2 is vital to the future of the Web

Finis