0
ECMAScript 4:
The Reckoning
John Resig
2007: ShibuyaJS
The Direction
ECMAScript 4
JavaScript 2 ActionScript 4
Tamarin
JScript Etc.
Screaming
Monkey
KJS (Apple)
Opera
A TON of new
features!
Classes
✦ class Programmer {
var name;
var city = “Boston, MA”;
const interest = “computers”;
function work() {}
}
✦ var p...
Catch-Alls
✦ dynamic class Programmer {
meta function get(name) { ... }
meta function set(name, value) {
alert(“Setting “ ...
Inheritance
✦ class Artist {
function draw() { alert(“Drawing!”); }
}
class Designer extends Artist {
override function dr...
Interfaces
✦ Verify that a class implements another
✦ interface Artist {
function draw();
}
class Designer implements Arti...
Too much?
The new features are important!
They give the language more power and
make large applications easier to create.
Plus appli...
The new features are important!
They give the language more power and
make large applications easier to create.
(Plus it’s...
There are too many new features!
Not enough attention was paid to security.
Not enough attention was paid to security.
We don’t like it.
WAR!
YES NO
The Direction
ECMAScript 4
JavaScript 2 ActionScript 4
Tamarin
JScript Etc.
Screaming
Monkey
KJS (Apple)
Opera
Compromise:
NO SYNTAX CHANGES
Compromise:
LESS NEW FEATURES
ECMAScript 5!!
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: ...
HARMONY:
Build off of ES5
What about Tamarin?
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-
...
Processing.js
John Resig
Processing
✦ Data visualization programming language
✦ Built on top of Java
✦ I ported it to JavaScript in 2008!
✦ Crude p...
The Language
✦ Strictly typed
✦ Has classes, inheritance
✦ A bunch of globally-accessible functions
✦ (Very flat API)
✦ set...
Draw A Line w/ Mouse
✦ While you hold the mouse down, draw a
line from the previous mouse point
✦ http://ejohn.org/apps/pr...
Drawing
✦ Different drawing methods:
✦ line()
✦ rect()
✦ arc()
✦ ellipse()
✦ point()
✦ quad()
✦ triangle()
✦ bezier()
✦ All...
The Canvas
✦ OpenGL-y
✦ Mutate the canvas rendering:
✦ translate()
✦ scale()
✦ rotate()
✦ Save and Restore the state of th...
Shapes
✦ A series of vertices, built into a shape
✦ fill(127);
beginShape();
for (int i=0; i<segments; i++){
vertex(ground...
Classes
✦ Hold data, do inheritance
✦ http://ejohn.org/apps/processing.js/
examples/topics/reflection2.html
✦ class Ground ...
Processing.js 1.0!
✦ Just released yesterday!
✦ Full API parity with Processing
✦ ALSO
✦ Full WebGL/3D support!
✦ A great ...
jQuery Mobile
John Resig
The Missing Gap
• Almost all mobile web development
focuses on modern WebKit
• There are far too many other platforms
• Bl...
Phase 1: jQuery Core
• We’re working to make jQuery core work
on all the popular mobile browsers.
• Building out our test ...
Phase 2: jQuery Mobile
• A complete framework for building mobile
web sites and applications.
• Provide all the widgets an...
Shibuya.js Lightning Talks
Shibuya.js Lightning Talks
Shibuya.js Lightning Talks
Shibuya.js Lightning Talks
Shibuya.js Lightning Talks
Shibuya.js Lightning Talks
Upcoming SlideShare
Loading in...5
×

Shibuya.js Lightning Talks

2,904

Published on

3 Lightning Talks that I gave as part of the Shibuya.js group while in Tokyo, November 2010.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,904
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Shibuya.js Lightning Talks"

  1. 1. ECMAScript 4: The Reckoning John Resig
  2. 2. 2007: ShibuyaJS
  3. 3. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 Tamarin JScript Etc. Screaming Monkey KJS (Apple) Opera
  4. 4. A TON of new features!
  5. 5. 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
  6. 6. 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”);
  7. 7. Inheritance ✦ class Artist { function draw() { alert(“Drawing!”); } } class Designer extends Artist { override function draw() { alert(“Designing!”); } } ✦ var d = new Designer d.draw(); // alert(“Designing!”);
  8. 8. 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!”);
  9. 9. Too much?
  10. 10. 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!
  11. 11. 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!)
  12. 12. There are too many new features! Not enough attention was paid to security.
  13. 13. Not enough attention was paid to security.
  14. 14. We don’t like it.
  15. 15. WAR! YES NO
  16. 16. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 Tamarin JScript Etc. Screaming Monkey KJS (Apple) Opera
  17. 17. Compromise: NO SYNTAX CHANGES
  18. 18. Compromise: LESS NEW FEATURES
  19. 19. ECMAScript 5!!
  20. 20. JSON Parsing • JSON.parse(“true”) -> true • JSON.stringify(true) -> “true”
  21. 21. Strict Mode • (function(){ “use strict”; // NO eval, with, etc. })();
  22. 22. 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; }   }); })();
  23. 23. HARMONY: Build off of ES5
  24. 24. What about Tamarin?
  25. 25. Don’t need it! COMPETITION: Everyone got faster! Don’t need a new language to get faster.
  26. 26. More about ES5 • http://ejohn.org/blog/ecmascript-5-objects- and-properties/ • http://ejohn.org/blog/ecmascript-5-strict- mode-json-and-more/
  27. 27. Processing.js John Resig
  28. 28. 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)
  29. 29. The Language ✦ Strictly typed ✦ Has classes, inheritance ✦ A bunch of globally-accessible functions ✦ (Very flat API) ✦ setup() and draw() methods ✦ Very OpenGL-like ✦ draw() is called continually at a specific framerate
  30. 30. 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); } }
  31. 31. Drawing ✦ Different drawing methods: ✦ line() ✦ rect() ✦ arc() ✦ ellipse() ✦ point() ✦ quad() ✦ triangle() ✦ bezier() ✦ All use stroke(), strokeWeight(), fill()
  32. 32. The Canvas ✦ OpenGL-y ✦ Mutate the canvas rendering: ✦ translate() ✦ scale() ✦ rotate() ✦ Save and Restore the state of the canvas: ✦ pushMatrix() ✦ popMatrix() ✦ http://ejohn.org/apps/processing.js/ examples/basic/arm.html
  33. 33. 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);
  34. 34. Classes ✦ Hold data, do inheritance ✦ http://ejohn.org/apps/processing.js/ examples/topics/reflection2.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??
  35. 35. Processing.js 1.0! ✦ Just released yesterday! ✦ Full API parity with Processing ✦ ALSO ✦ Full WebGL/3D support! ✦ A great API for doing graphical work.
  36. 36. jQuery Mobile John Resig
  37. 37. 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 sacrificing experience.
  38. 38. 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.
  39. 39. 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
  1. A particular slide catching your eye?

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

×