The Future ofFirefox and JavaScript

John Resig (ejohn.org)Mozilla Corporation / jQuery JavaScript Library

October 3rd, 2007 - Future of Web Apps

The Future of Firefox✦ Graphics

✦ SVG✦ Canvas

✦ Video and Audio✦ Offline Web Applications✦ XMLHttpRequest++✦ Desktop Integration

SVG✦ SVG Foreign Object

✦ Import normal HTML elements✦ Demo: http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/

✦ Speed Improvements in the pipeline✦ Joost built on Mozilla platform

Canvas 3D

Canvas 3D✦ Works like normal 2D Canvas✦ Thin layer to OpenGL✦ Can embed native shader scripts

✦ Run natively by the GPU✦ Extension: http://people.mozilla.com/~vladimir/canvas3d/

Shader Scripting✦ <script type=”x-shader/x-fragment”>

void main(void) { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); }</script><script type=”x-shader/x-vertex”> attribute vec4 myVertex; uniform mat4 myPMVMatrix; void main(void) { gl_Position = myPMVMatrix * myVertex; }</script>

<video/> and <audio/>✦ Pioneered by Opera✦ Generic means of playing video and audio✦ Full JavaScript API✦ Guaranteed to play, at least, Ogg Theora✦ Plugin more video/audio types✦ Demo: http://www.double.co.nz/video_test/

Offline Web Apps✦ Very new territory✦ Three Specs:

✦ Mozilla✦ Google Gears✦ WHATWG

✦ Working to converge!✦ A final amalgam will be in Firefox 3

Offline Web Apps✦ Global Storage

✦ Cookies++✦ File caching (CSS, Images, etc.)✦ offline/online-mode detection✦ File Uploads Queueing✦ Some SQL-like stuff (work in progress)

XMLHttpRequest++✦ Cross-domain XMLHttpRequest

✦ Already landed, in Firefox 3✦ JSON (De-)Serialization

✦ object.toJSONString();✦ string.parseJSON();

Desktop Integration✦ Webrunner

✦ Deployable web applications✦ (Built on XULRunner)

✦ Prism (Still in Planning)✦ Webrunner in Firefox✦ Bookmark puts an icon on the desktop✦ Launches a dedicated application

The Future of JavaScript✦ “Old” Versions:

✦ Firefox 1.5: JavaScript 1.6✦ Firefox 2.0: JavaScript 1.7

✦ New Versions:✦ Firefox 3: JavaScript 1.8✦ Firefox 4 (?): JavaScript 2

✦ Virtual Machines✦ Server-Side JavaScript

JavaScript 2✦ Optional Type Annotation

✦ var foo : string = “”;✦ type Pair = [ int, string ];✦ var bar : Vector.<Pair>;

✦ Classes✦ class User {

var name : string; var age : int;}

JavaScript 2✦ Block-Scoped Variables

✦ let foo = “test”;✦ Packages

✦ package com.mozilla.Foo;import com.jquery.query;query(“div”);

✦ Dictionaries✦ Map.<*, int>

Tamarin✦ Tamarin

✦ New Virtual Machine from Adobe✦ Perfect for ActionScript

✦ (a mutant cousin of JavaScript 2)✦ The Three Monkies:

✦ ActionMonkey✦ ScreamingMonkey✦ IronMonkey

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

Server-Side JavaScript✦ As old as JavaScript itself✦ Seeing a strong resurgence✦ Web Application Dev:

✦ Helma✦ Phobos

✦ Application Dev:✦ Spidermonkey✦ Rhino

Rhino✦ JavaScript implemented in Java

✦ Full JS 1.6 Support✦ Upcoming JS 1.7 Support

✦ Full access to Java packages✦ Weird fun:

✦ var myString = new java.lang.String();✦ Awesome new territory:

✦ var myThread = new java.lang.Thread();✦ DOM to the Server

Questions, et. al.✦ Bright future! Enjoy!✦ John Resig

http://ejohn.org/