0
The Future of JavaScript      John Resig (ejohn.org)       Mozilla Corporation
The Big Picture                     ECMAScript 3JavaScript 1.5   ActionScript 2        JScript       Etc.SpiderMonkey     ...
The Direction                         ECMAScript 4JavaScript 2         ActionScript 4       JScript 8      Etc.           ...
Tamarin✦   Tamarin    ✦ New Virtual Machine from Adobe    ✦ Perfect for ActionScript      ✦ (a mutant cousin of JavaScript...
Three Monkies✦   ActionMonkey    ✦ Integrating Tamarin into SpiderMonkey    ✦ Powering Firefox 4 (?) + JavaScript 2✦   Scr...
Jav                a1999                 Sc                      rip                         t1                           ...
The JavaScript Language✦   Current:    JavaScript 1.5 (ECMAScript 3)✦   JavaScript 1.6 (Firefox 1.5)✦   JavaScript 1.7 (Fi...
ECMAScript 4 Goals✦   Compatible with ECMAScript 3✦   Suitable to developing large systems✦   Allow for reusable libraries...
Features✦   Classes and Interfaces✦   Packages and Namespaces✦   Types✦   Strict Verification✦   Optimization✦   Syntax Sho...
Classes
Classes✦   class Programmer {       var name;       var city = “Boston, MA”;       const interest = “computers”;       fun...
Dynamic Classes✦   dynamic class Programmer {      var name;      var city = “Boston, MA”;      const interest = “computer...
Getters and Setters✦   class Programmer {       var _name;       function get name(){ return _name; }       function set n...
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 {       o...
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(“Drawing...
Metaclass✦   Provide global functions and properties on    a class object✦   class Users {       static function find( name...
Interfaces✦   Verify that a class implements another✦   class Artist {       function draw() { alert(“Drawing!”); }    }  ...
Types
Numbers✦   Numbers are now broken down into:    ✦ byte    ✦ int    ✦ uint    ✦ double (ECMAScript 3-style Number)    ✦ dec...
Type Annotations✦   var name : string = “John”;✦   let x : double = 5.3;✦   function stuff( x: int, obj: Object ) :    bool...
Function Types✦   Only return specific types:    function isValid() : boolean { }✦   Only be used on certain objects types:...
Rest Arguments✦   function stuff( name, ...values ){      alert( values.length );    }✦   stuff( “John”, 1, 2, 3, 4 );    //...
Union and Any Types✦   var test : (string, int) = “test”;    test = 3;    test = 3.4; // ERROR✦   These are equivalent:   ...
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       function User( n ) : name = n {     ...
“like”✦   type Point = { x: int, y: int };✦   if ( { x: 3, y: 5 } like Point )       alert( “That looks like a point to me...
“wrap”✦   Force a type if compatible one doesn’t    exist✦   type Point = { x: int, y: int };    var p: wrap Point = { x: ...
Parameterized Types✦   var m: Map<string, *>;✦   class Point<T> {       var x: T, y: T;    }✦   var p: Point<double> = new...
Structure
let statements✦   for ( let i = 0; i < a.length; i++ )      alert( a[i] );    typeof i == “undefined”✦   Using block statem...
let (cont.)✦   let expressions:    x = 10 + let (a=3) a*a;    // x == 19✦   let blocks:    let ( a=3 ) {      alert( a ); ...
Packages✦   package simple.tracker {      internal var count: int = 0;      public function add(){        return ++count; ...
Namespaces✦   namespace extra = “extra”;✦   Pre-defined namespaces:    ✦ __ES4__    ✦ intrinsic    ✦ iterator    ✦ meta✦   ...
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”✦   unit jQuery {      use unit Selectors “lib/Selectors”;     ...
Iteration✦   class Fib {       private var a=0, b=1;        iterator function get(deep:boolean = false) : IteratorType.<in...
For .. Each✦   For each loops through values✦   let s = “”;    for each ( let n in [“a”,”b”,”c”] )        s += n;    alert...
Operator Overloading✦   class Complex! { ... }    generic intrinsic function +(a: Complex, b: Complex)      new Complex( a...
Self-Hosting
Map.es✦   The reference implementation’s classes are    written in ECMAScript✦   package    {      use namespace intrinsic...
More Info✦   ECMAScript 4 White Paper Overview:    http://www.ecmascript.org/es4/spec/overview.pdf✦   Blogging:    http://...
Upcoming SlideShare
Loading in...5
×

The Future of JavaScript (Ajax Exp '07)

607

Published on

A talk I gave at the Ajax Experience 2007.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
607
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "The Future of JavaScript (Ajax Exp '07)"

  1. 1. The Future of JavaScript John Resig (ejohn.org) Mozilla Corporation
  2. 2. The Big Picture ECMAScript 3JavaScript 1.5 ActionScript 2 JScript Etc.SpiderMonkey AVM JScript Engine Rhino
  3. 3. The Direction ECMAScript 4JavaScript 2 ActionScript 4 JScript 8 Etc. Tamarin JScript Engine
  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 ✦ Forcing Tamarin into Internet Explorer ✦ (Kicking and screaming?)✦ IronMonkey ✦ Bringing Python + Ruby to Tamarin
  6. 6. Jav a1999 Sc rip t1 .5 Jav a2005 Sc rip t1 Jav .6 a2006 Sc rip t1 Jav .7 a2008 Sc rip t1 .8 Ja Path to JavaScript 2 va S cr2008-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✦ Types✦ 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✦ class Artist { function draw() { alert(“Drawing!”); } } class Designer implements Artist { function draw() { alert(“Designing!”); } }✦ if ( Designer 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 ) { for ( var i = 0; i < this.length; i++ ) alert( this[i] ); } every.call( [0,1,2] ); // alert(0); alert(1); alert(2); every.call({a: “b”}); // 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) = “test”; test = 3; test = 3.4; // ERROR✦ 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 function User( n ) : name = n { // ... } }
  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: int } ) { 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;
  31. 31. Parameterized Types✦ var m: Map<string, *>;✦ class Point<T> { var x: T, y: T; }✦ var p: Point<double> = new Point<double> p.x = 3.0; p.y = 5.0;
  32. 32. Structure
  33. 33. let statements✦ for ( let i = 0; i < a.length; i++ ) alert( a[i] ); typeof i == “undefined”✦ Using block statements: { let x = 5; { let x = 6; alert( x ); // 6 } alert( x ); // 5 }
  34. 34. let (cont.)✦ let expressions: x = 10 + let (a=3) a*a; // x == 19✦ let blocks: let ( a=3 ) { alert( a ); // 3 } typeof a == “undefined”
  35. 35. Packages✦ package simple.tracker { internal var count: int = 0; public function add(){ return ++count; } }✦ import simple.tracker.* alert( add() ); // alert(“1”) count // ERROR, undefined
  36. 36. Namespaces✦ namespace extra = “extra”;✦ Pre-defined namespaces: ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta✦ import dojo.query; import jquery.query; dojo::query(“#foo”) jquery::query(“div > .foo”)
  37. 37. Namespaces (cont.)✦ import dojo.query; import jquery.query; use namespace dojo; query(“#foo”) // using dojo use namespace jquery; query(“div > .foo”) // using jquery
  38. 38. Multimethods✦ generic function intersect(s1, s2); generic function intersect(s1: Shape, s2: Shape ) { // ... } generic function intersect(s1: Rect, s2: Rect ) { // ... }
  39. 39. Program Units✦ use unit jQuery “http://jquery.com/jQuery”✦ unit jQuery { use unit Selectors “lib/Selectors”; package com.jquery { class jQuery { function find() : jQuery {} } } }
  40. 40. Iteration✦ class Fib { private var a=0, b=1; iterator function get(deep:boolean = false) : IteratorType.<int> this public function next(): int { if ( b > 100 ) throw iterator::StopIteration; [a,b] = [b,a+b]; return a; } }✦ for ( let i in new Fib ) alert( i );
  41. 41. For .. Each✦ For each loops through values✦ let s = “”; for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc”
  42. 42. 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
  43. 43. Self-Hosting
  44. 44. 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 { } // ... }
  45. 45. More Info✦ ECMAScript 4 White Paper Overview: http://www.ecmascript.org/es4/spec/overview.pdf✦ Blogging: http://ejohn.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×