Shibuya.js Lightning Talks

ECMAScript 4:
The Reckoning
John Resig

The Direction
ECMAScript 4
JavaScript 2 ActionScript 4
Tamarin
JScript Etc.
Screaming
Monkey
KJS (Apple)
Opera

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
p.lastName = “Resig”; // Error

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”);

Inheritance
✦ class Artist {
function draw() { alert(“Drawing!”); }
}
class Designer extends Artist {
override function draw() {
alert(“Designing!”);
}
}
✦ var d = new Designer
d.draw();
// alert(“Designing!”);

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!”);

The new features are important!
They give the language more power and
make large applications easier to create.
Plus applications will be able to get faster!

The new features are important!
They give the language more power and
make large applications easier to create.
(Plus it’s close to what we’ve already
done in ActionScript!)

There are too many new features!
Not enough attention was paid to security.

Not enough attention was paid to security.

JSON Parsing
• JSON.parse(“true”) -> true
• JSON.stringify(true) -> “true”

Strict Mode
• (function(){
“use strict”;
// NO eval, with, etc.
})();

Object Properties
• var obj = {};
• Object.defineProperty( obj, "value", {
value: true,
writable: false,
enumerable: true,
configurable: true
});
• (function(){
var name = "John";

Object.defineProperty( obj, "name", {
get: function(){ return name; },
set: function(value){ name = value; }
});
})();

Don’t need it!
COMPETITION:
Everyone got faster!
Don’t need a new
language to get
faster.

More about ES5
• http://ejohn.org/blog/ecmascript-5-objects-
and-properties/
• http://ejohn.org/blog/ecmascript-5-strict-
mode-json-and-more/

Processing
✦ Data visualization programming language
✦ Built on top of Java
✦ I ported it to JavaScript in 2008!
✦ Crude port of the Processing Language +
✦ Porting the 2D Processing API
✦ All runs in JavaScript on top of HTML 5
Canvas
✦ Works in all browsers (IE with excanvas)

The Language
✦ Strictly typed
✦ Has classes, inheritance
✦ A bunch of globally-accessible functions
✦ (Very ﬂat API)
✦ setup() and draw() methods
✦ Very OpenGL-like
✦ draw() is called continually at a speciﬁc
framerate

Draw A Line w/ Mouse
✦ While you hold the mouse down, draw a
line from the previous mouse point
✦ http://ejohn.org/apps/processing.js/
examples/topics/continuouslines.html
✦ void setup() {
size(200, 200);
background(102);
}
void draw() {
stroke(255);
if (mousePressed) {
line(mouseX, mouseY, pmouseX, pmouseY);
}
}

Drawing
✦ Diﬀerent drawing methods:
✦ line()
✦ rect()
✦ arc()
✦ ellipse()
✦ point()
✦ quad()
✦ triangle()
✦ bezier()
✦ All use stroke(), strokeWeight(), ﬁll()

The Canvas
✦ OpenGL-y
✦ Mutate the canvas rendering:
✦ translate()
✦ scale()
✦ rotate()
✦ Save and Restore the state of the canvas:
✦ pushMatrix()
✦ popMatrix()
examples/basic/arm.html

Shapes
✦ A series of vertices, built into a shape
✦ fill(127);
beginShape();
for (int i=0; i<segments; i++){
vertex(ground[i].x1, ground[i].y1);
vertex(ground[i].x2, ground[i].y2);
}
vertex(ground[segments-1].x2, height);
vertex(ground[0].x1, height);
endShape(CLOSE);

Classes
✦ Hold data, do inheritance
examples/topics/reﬂection2.html
✦ class Ground {
float x1, y1, x2, y2, x, y, len, rot;
Ground(){ }
Ground(float x1, float y1, float x2, float y2) {
this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2;
x = (x1+x2)/2;
y = (y1+y2)/2;
len = dist(x1, y1, x2, y2);
rot = atan2((y2-y1), (x2-x1));
}
}
ECMAScript 4??

Processing.js 1.0!
✦ Just released yesterday!
✦ Full API parity with Processing
✦ ALSO
✦ Full WebGL/3D support!
✦ A great API for doing graphical work.

The Missing Gap
• Almost all mobile web development
focuses on modern WebKit
• There are far too many other platforms
• Blackberry, Opera,Windows Mobile,
Mobile Firefox, Symbian, etc.
• jQuery Mobile works everywhere - and
without sacriﬁcing experience.

Phase 1: jQuery Core
• We’re working to make jQuery core work
on all the popular mobile browsers.
• Building out our test suite and continuous
integration testing.
• Using TestSwarm to automate our testing
across all platforms.
• Fixing mobile bugs in core.

Phase 2: jQuery Mobile
• A complete framework for building mobile
web sites and applications.
• Provide all the widgets and layout
components necessary to build mobile
sites.
• Built on the principles of progressive
enhancement

Shibuya.js Lightning Talks

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Shibuya.js Lightning Talks (20)

More from jeresig (20)

Recently uploaded (20)

Shibuya.js Lightning Talks