Tamarin and ECMAScript 4

8,523 views

Published on

The rough presentation that I gave at the Ajax Experience, Adobe Max Tokyo, and Mozilla Japan/Shibuya.JS.

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

No Downloads
Views
Total views
8,523
On SlideShare
0
From Embeds
0
Number of Embeds
278
Actions
Shares
0
Downloads
125
Comments
0
Likes
3
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 .6 Jav a 2006 Sc rip t1 .7 Jav 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/

×