Firefox, JavaScript, and the Future of the Web

Brendan Eich

Mozilla Corporation

Firefox 2 Launched

What's new in Firefox 2?

• JavaScript 1.7
• WHAT-WG DOM Storage
• Improved <canvas> performance
• Inline spell checking
• Undo Close Tab / Recently Closed Tabs
• Session Restore
• Anti-phishing
• More...

DOM Session Storage

• Per-domain, per-tab/window session storage

    <label>
      <input type="checkbox"
        onchange="sessionStorage.insurance = checked">
      I want insurance on this trip.
    </label>
  

• Use it to store and fetch any string value

    if (sessionStorage.insurance) { ... }
  

• Cloned into new tab or window
• Restored along with lost session
• Not kept across intentional close

DOM Global Storage

• Per-domain, browser-global persistent storage

    <p>You have viewed this page <span id="count">an untold
      number of</span> time(s).</p>
    <script>
      var storage = globalStorage['example.com'];
      if (!storage.viewCount) storage.viewCount = 0;
      storage.viewCount = parseInt(storage.viewCount) + 1;
      $('count').textContent = storage.viewCount;
    </script>
  

• Domains can access sub-domains
• Sub-domains can access super-domains
• But www2.example.com can't access www.example.com

JavaScript on the March

JavaScript Fun Facts

• 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.
• 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.)
• Open source optimizing VMs coming soon
  • Look for an announcement in a few weeks

JavaScript 1.7

• let blocks: let n=len(); for (let i=0; i<n; i++) ...
• Destructuring: [title, detail, size] = s.parseJSON();
• Iterators: for (i in array_iterator(nodelist)) ...
• Generators:

  function fib() {
    let [i, j] = [0, 1];
    while (true) {
      yield i; [i, j] = [j, i + j];
    }
  }
  

• Array comprehensions: squares = [i * i for (i in count(n)];

Angst over JavaScript

Why People Worry

• Netscape's "JavaScript 2" / "ECMAScript Edition 4" proposals looked "too different" from JS1
• JS2 implementations took too long in coming
• Yet the old proposals have high search rank
• And many people don't like what they saw in those proposals
• What will IE do?

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#"

Free Advice that We Hear

Free Advice that We Hear

• Leave JS 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
• Explicit type checking code is tedious and error prone

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
• 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: 2008
• Are there useful tools to speed migration?
  • A JS2 to JS offline translator, without GWT or other baggage
  • 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
• Some modeling of small-step semantics
• Building a reference implementation in ML
• It's still a dynamic language, no static soundness proofs
• Hope to prove and enforce safety properties instead

Types

• Well-known types: Object Array Function Boolean Number String Date RegExp ...Error
• New types: int uint double decimal 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 types: List.<T> for a List with items 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 superclass 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 in U must be an R, A, or F
  
• switch type statement selects the dynamic type of a value of union (or any) type

Namespaces

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

  class C {
    public function frob(): int {...}
    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 all public 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 catches StopIteration for you:

  for (let i in it) print(i) // no try-catch needed