The Future of Firefox 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/

Sign up to vote on this title
UsefulNot useful