Tamarin and ECMAScript 4
      John Resig (ejohn.org)
       Mozilla Corporation
The Big Picture
                     ECMAScript 3


JavaScript 1.5   ActionScript 2      JScript        Etc.


SpiderMonke...
The Direction
                         ECMAScript 4


JavaScript 2         ActionScript 4      JScript       Etc.


      ...
Tamarin
✦   Tamarin
    ✦ New Virtual Machine from Adobe
    ✦ Perfect for ActionScript
      ✦ (a mutant cousin of JavaSc...
Three Monkies
✦   ActionMonkey
    ✦ Integrating Tamarin into SpiderMonkey
    ✦ Powering Firefox 4 (?) + JavaScript 2

✦ ...
Jav
                a




1999
                 Sc
                      rip
                         t1
                 ...
The JavaScript Language
✦   Current:
    JavaScript 1.5 (ECMAScript 3)
✦   JavaScript 1.6 (Firefox 1.5)
✦   JavaScript 1.7...
ECMAScript 4 Goals
✦   Compatible with ECMAScript 3
✦   Suitable to developing large systems
✦   Allow for reusable librar...
Features
✦   Classes and Interfaces
✦   Packages and Namespaces
✦   Type Annotations
✦   Strict Verification
✦   Optimizati...
Classes
Classes
✦   class Programmer {
       var name;
       var city = “Boston, MA”;
       const interest = “computers”;
     ...
Dynamic Classes
✦   dynamic class Programmer {
      var name;
      var city = “Boston, MA”;
      const interest = “comp...
Getters and Setters
✦   class Programmer {
       var _name;
       function get name(){ return _name; }
       function s...
Catch-Alls
✦   dynamic class Programmer {
      meta function get(name) { ... }
      meta function set(name, value) {
   ...
Inheritance
✦   class Artist {
       function draw() { alert(“Drawing!”); }
    }
    class Designer extends Artist {
   ...
Inheritance (cont.)
✦   ‘final’ methods can’t be overriden
✦   class Artist {
       final function draw() {alert(“Drawing!”...
Inheritance (cont.)
✦   ‘final’ classes can’t be inherited from
✦   final class Artist {
      function draw() { alert(“Draw...
Metaclass
✦   Provide global functions and properties on
    a class object
✦   class Users {
       static function find( ...
Interfaces
✦   Verify that a class implements another
✦   interface Artist {
       function draw();
    }
    class Desig...
Types
Numbers
✦   Numbers are now broken down into:
    ✦ byte
    ✦ int
    ✦ uint
    ✦ double (ECMAScript 3-style Number)
   ...
Type Annotations
✦   var name : string = “John”;
✦   let x : double = 5.3;
✦   function stuff( x: int, obj: Object ) :
    ...
Function Types
✦   Only return specific types:
    function isValid() : boolean { }
✦   Only be used on certain objects typ...
Rest Arguments
✦   function stuff( name, ...values ){
      alert( values.length );
    }
✦   stuff( “John”, 1, 2, 3, 4 );
 ...
Union and Any Types
✦   var test : (string, int, double) = “test”;
    test = 3;
    test = false; // ERROR
✦   type AnyNu...
Type Definitions
✦   type Point = { x: int, y: int };
✦   var p : Point = { x: 3, y: 24 };
Nullability
✦   Prevent variables from accepting null
    values
✦   var name : * = “John”;
✦   var name : String! = “John...
Initialization
✦   class User {
       var name : string!; // Must be initialized
       var last : string!;
       functi...
“like”
✦   type Point = { x: int, y: int };
✦   if ( { x: 3, y: 5 } like Point )
       alert( “That looks like a point to...
“wrap”
✦   Force a type if compatible one doesn’t
    exist
✦   type Point = { x: int, y: int };
    var p: wrap Point = {...
Parameterized Types
✦   var m: Map.<Object, string>;
✦   class Point.<T> {
       var x: T, y: T;
    }
✦   var p = new Po...
Structure
For .. Each
✦   For each loops through values
✦   let s = “”;
    for each ( let n in [“a”,”b”,”c”] )
        s += n;
    ...
let statements
✦   for ( let i = 0; i < a.length; i++ )
        alert( a[i] );
    // i is undefined
✦   Using block statem...
let (cont.)
✦   let expressions:
    var a = 5;
    var x = 10 + (let (a=3) a) + a*a;
    // x == 19
✦   let blocks:
    l...
Packages
✦   package simple.tracker {
      internal var count: int = 0;
      public function add(){
        return ++cou...
Namespaces
✦   namespace extra = “extra”;
✦   Pre-defined namespaces:
    ✦ __ES4__
      ✦ intrinsic
      ✦ iterator
    ...
Namespaces (cont.)
✦   import dojo.query;
    import jquery.query;
    use namespace dojo;
    query(“#foo”) // using dojo...
Multimethods
✦   generic function intersect(s1, s2);
    generic function intersect(s1: Shape, s2: Shape ) {
      // ...
...
Program Units
✦   use unit jQuery “http://jquery.com/jQuery”
    import com.jquery.*;
    new jQuery();
✦   unit jQuery {
...
Operator Overloading
✦   class Complex! { ... }

    generic intrinsic function +(a: Complex, b: Complex)
      new Comple...
Self-Hosting
Map.es
✦   The reference implementation’s classes are
    written in ECMAScript
✦   package
    {
      use namespace intr...
More Info
✦   ECMAScript site:
    http://ecmascript.org/
✦   ECMAScript 4 White Paper Overview:
    http://www.ecmascript...
Upcoming SlideShare
Loading in …5
×

Tamarin And Ecmascript 4

872 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
872
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tamarin And Ecmascript 4

  1. 1. Tamarin and ECMAScript 4 John Resig (ejohn.org) Mozilla Corporation
  2. 2. The Big Picture ECMAScript 3 JavaScript 1.5 ActionScript 2 JScript Etc. SpiderMonkey AVM JScript Engine KJS (Apple) Rhino Opera
  3. 3. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 JScript Etc. Screaming Tamarin KJS (Apple) Monkey Opera
  4. 4. Tamarin ✦ Tamarin ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) ✦ The Three Monkeys: ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey
  5. 5. Three Monkies ✦ ActionMonkey ✦ Integrating Tamarin into SpiderMonkey ✦ Powering Firefox 4 (?) + JavaScript 2 ✦ ScreamingMonkey ✦ Bringing Tamarin into Internet Explorer ✦ (Kicking and screaming?) ✦ IronMonkey ✦ Bringing Python + Ruby to Tamarin
  6. 6. Jav a 1999 Sc rip t1 .5 Jav a 2005 Sc rip t1 Jav .6 a 2006 Sc rip t1 Jav .7 a 2008 Sc rip t1 .8 Ja Path to JavaScript 2 va S cr 2008-2009 ip t 2
  7. 7. The JavaScript Language ✦ Current: JavaScript 1.5 (ECMAScript 3) ✦ JavaScript 1.6 (Firefox 1.5) ✦ JavaScript 1.7 (Firefox 2) ✦ JavaScipt 1.8 (Firefox 3) ✦ ... ✦ JavaScript 2 (ECMAScript 4)
  8. 8. ECMAScript 4 Goals ✦ Compatible with ECMAScript 3 ✦ Suitable to developing large systems ✦ Allow for reusable libraries ✦ Merge previous efforts (ActionScript) ✦ Fix ECMAScript 3 bugs ✦ Keep it usable for small programs
  9. 9. Features ✦ Classes and Interfaces ✦ Packages and Namespaces ✦ Type Annotations ✦ Strict Verification ✦ Optimization ✦ Syntax Shortcuts ✦ Iterators and Generators ✦ Self-hosting
  10. 10. Classes
  11. 11. Classes ✦ class Programmer { var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } ✦ var p = new Programmer; p.name = “John”; p.work(); p.work.apply( someotherp ); p.interest = “science”; // Error
  12. 12. Dynamic Classes ✦ dynamic class Programmer { var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } ✦ var p = new Programmer; p.lastName = “Resig”; for ( var i in p ) alert( i ); // alert( “Resig” );
  13. 13. Getters and Setters ✦ class Programmer { var _name; function get name(){ return _name; } function set name(value){ _name = value + “ Resig”; } } ✦ var p = new Programmer; p.name = “John”; alert( p.name ); // “John Resig”
  14. 14. Catch-Alls ✦ dynamic class Programmer { meta function get(name) { ... } meta function set(name, value) { alert(“Setting “ + name + “ to “ + value); } } ✦ var p = new Programmer p.name = “John”; // alert(“Setting name to John”);
  15. 15. Inheritance ✦ class Artist { function draw() { alert(“Drawing!”); } } class Designer extends Artist { override function draw() { alert(“Designing!”); } } ✦ var d = new Designer d.draw(); // alert(“Designing!”);
  16. 16. Inheritance (cont.) ✦ ‘final’ methods can’t be overriden ✦ class Artist { final function draw() {alert(“Drawing!”);} } class Designer extends Artist { // ERROR: Can’t override draw! override function draw() { alert(“Designing!”); } }
  17. 17. Inheritance (cont.) ✦ ‘final’ classes can’t be inherited from ✦ final class Artist { function draw() { alert(“Drawing!”); } } // ERROR: Can’t inherit from Artist class Designer extends Artist { override function draw() { alert(“Designing!”); } }
  18. 18. Metaclass ✦ Provide global functions and properties on a class object ✦ class Users { static function find( name ) { // ... } } ✦ Users.find( “John” );
  19. 19. Interfaces ✦ Verify that a class implements another ✦ interface Artist { function draw(); } class Designer implements Artist { function draw() { alert(“Designing!”); } } ✦ var d = new Designer(); if ( d is Artist ) alert(“Designers are Artists!”);
  20. 20. Types
  21. 21. Numbers ✦ Numbers are now broken down into: ✦ byte ✦ int ✦ uint ✦ double (ECMAScript 3-style Number) ✦ decimal
  22. 22. Type Annotations ✦ var name : string = “John”; ✦ let x : double = 5.3; ✦ function stuff( x: int, obj: Object ) : boolean {}
  23. 23. Function Types ✦ Only return specific types: function isValid() : boolean { } ✦ Only be used on certain objects types: function every( this: Array, value: int ) { for ( var i = 0; i < this.length; i++ ) alert( this[i] ); } every.call( [0,1,2], 3 ); // alert(0); alert(1); alert(2); every.call({a: “b”}, 4); // ERROR
  24. 24. Rest Arguments ✦ function stuff( name, ...values ){ alert( values.length ); } ✦ stuff( “John”, 1, 2, 3, 4 ); // alert( 4 ); ✦ function stuff( name : string, ...values : [int] ) : void { alert( values.length ); }
  25. 25. Union and Any Types ✦ var test : (string, int, double) = “test”; test = 3; test = false; // ERROR ✦ type AnyNumber = (byte, int, double, decimal, uint); ✦ var test : AnyNumber = 3 ✦ These are equivalent: ✦ var test : * = “test”; ✦ var test = “test”;
  26. 26. Type Definitions ✦ type Point = { x: int, y: int }; ✦ var p : Point = { x: 3, y: 24 };
  27. 27. Nullability ✦ Prevent variables from accepting null values ✦ var name : * = “John”; ✦ var name : String! = “John”; name = “Ted”; name = null; // ERROR ✦ function test( name: String? ) { alert( name ); }
  28. 28. Initialization ✦ class User { var name : string!; // Must be initialized var last : string!; function User( n, l ) : name = n, last = l { // ... } }
  29. 29. “like” ✦ type Point = { x: int, y: int }; ✦ if ( { x: 3, y: 5 } like Point ) alert( “That looks like a point to me!” ); ✦ if ( !({ x: 3 } like Point) ) alert( “Not a point!” ); ✦ // Loop over array-like things: function every( a: like { length: uint } ) { for ( var i = 0; i < a.length; i++ ) alert( a[i] ); }
  30. 30. “wrap” ✦ Force a type if compatible one doesn’t exist ✦ type Point = { x: int, y: int }; var p: wrap Point = { x: 3, y: 8 }; ✦ var p: Point = { x: 3, y: 8 } wrap Point; ✦ var p: Point = { x: 3, y: 8 } : Point;
  31. 31. Parameterized Types ✦ var m: Map.<Object, string>; ✦ class Point.<T> { var x: T, y: T; } ✦ var p = new Point.<double>; p.x = 3.0; p.y = 5.0;
  32. 32. Structure
  33. 33. For .. Each ✦ For each loops through values ✦ let s = “”; for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc”
  34. 34. let statements ✦ for ( let i = 0; i < a.length; i++ ) alert( a[i] ); // i is undefined ✦ Using block statements: { let x = 5; { let x = 6; alert( x ); // 6 } alert( x ); // 5 }
  35. 35. let (cont.) ✦ let expressions: var a = 5; var x = 10 + (let (a=3) a) + a*a; // x == 19 ✦ let blocks: let ( a=3 ) { alert( a ); // 3 } // a is undefined ✦ let a = function(){ };
  36. 36. Packages ✦ package simple.tracker { internal var count: int = 0; public function add(){ return ++count; } } ✦ import simple.tracker.* alert( add() ); // alert(“1”) count // ERROR, undefined
  37. 37. Namespaces ✦ namespace extra = “extra”; ✦ Pre-defined namespaces: ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta ✦ import dojo.query; import jquery.query; dojo::query(“#foo”) jquery::query(“div > .foo”)
  38. 38. Namespaces (cont.) ✦ import dojo.query; import jquery.query; use namespace dojo; query(“#foo”) // using dojo use namespace jquery; query(“div > .foo”) // using jquery
  39. 39. Multimethods ✦ generic function intersect(s1, s2); generic function intersect(s1: Shape, s2: Shape ) { // ... } generic function intersect(s1: Rect, s2: Rect ) { // ... }
  40. 40. Program Units ✦ use unit jQuery “http://jquery.com/jQuery” import com.jquery.*; new jQuery(); ✦ unit jQuery { use unit Selectors “lib/Selectors”; package com.jquery { class jQuery { function find() : jQuery {} } } }
  41. 41. Operator Overloading ✦ class Complex! { ... } generic intrinsic function +(a: Complex, b: Complex) new Complex( a.real + b.real, a.imag + b.imag ) generic intrinsic function +(a: Complex, b: AnyNumber) a + Complex(b) generic intrinsic function +(a: AnyNumber, b: Complex) Complex(a) + b
  42. 42. Self-Hosting
  43. 43. Map.es ✦ The reference implementation’s classes are written in ECMAScript ✦ package { use namespace intrinsic; use default namespace public; intrinsic class Map.<K,V> { static const length = 2; function Map(equals=intrinsic::===, hashcode=intrinsic::hashcode) : equals = equals , hashcode = hashcode , element_count = 0 { } // ... }
  44. 44. More Info ✦ ECMAScript site: http://ecmascript.org/ ✦ ECMAScript 4 White Paper Overview: http://www.ecmascript.org/es4/spec/overview.pdf ✦ Blogging: http://ejohn.org/

×