The Future of Firefox and JavaScript

Slide 1: The Future of Firefox and JavaScript John Resig (ejohn.org) Mozilla Corporation / jQuery JavaScript Library October 3rd, 2007 - Future of Web Apps

Slide 2: The Future of Firefox Graphics ✦ ✦ SVG ✦ Canvas Video and Audio ✦ Offline Web Applications ✦ XMLHttpRequest++ ✦ Desktop Integration ✦

Slide 3: 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

Slide 4: Canvas 3D

Slide 5: 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/ ✦

Slide 6: 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>

Slide 7: <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/ ✦

Slide 8: Offline Web Apps Very new territory ✦ Three Specs: ✦ ✦ Mozilla ✦ Google Gears ✦ WHATWG Working to converge! ✦ ✦ A final amalgam will be in Firefox 3

Slide 9: 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) ✦

Slide 10: XMLHttpRequest++ Cross-domain XMLHttpRequest ✦ ✦ Already landed, in Firefox 3 JSON (De-)Serialization ✦ ✦ object.toJSONString(); ✦ string.parseJSON();

Slide 11: 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

Slide 12: 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 ✦

Slide 13: 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; }

Slide 14: JavaScript 2 Block-Scoped Variables ✦ ✦ let foo = “test”; Packages ✦ ✦ package com.mozilla.Foo; import com.jquery.query; query(“div”); Dictionaries ✦ ✦ Map.<*, int>

Slide 15: Tamarin Tamarin ✦ ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) The Three Monkies: ✦ ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey

Slide 16: 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

Slide 17: Server-Side JavaScript As old as JavaScript itself ✦ Seeing a strong resurgence ✦ Web Application Dev: ✦ ✦ Helma ✦ Phobos Application Dev: ✦ ✦ Spidermonkey ✦ Rhino

Slide 18: 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 ✦

Slide 19: Questions, et. al. Bright future! Enjoy! ✦ John Resig ✦ http://ejohn.org/