Your SlideShare is downloading. ×
Shibuya.js Lightning Talks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Shibuya.js Lightning Talks

2,856
views

Published on

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

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,856
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ECMAScript 4: The Reckoning John Resig
  • 2. 2007: ShibuyaJS
  • 3. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 Tamarin JScript Etc. Screaming Monkey KJS (Apple) Opera
  • 4. A TON of new features!
  • 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. 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. 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. 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. Too much?
  • 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. 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. There are too many new features! Not enough attention was paid to security.
  • 13. Not enough attention was paid to security.
  • 14. We don’t like it.
  • 15. WAR! YES NO
  • 16. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 Tamarin JScript Etc. Screaming Monkey KJS (Apple) Opera
  • 17. Compromise: NO SYNTAX CHANGES
  • 18. Compromise: LESS NEW FEATURES
  • 19. ECMAScript 5!!
  • 20. JSON Parsing • JSON.parse(“true”) -> true • JSON.stringify(true) -> “true”
  • 21. Strict Mode • (function(){ “use strict”; // NO eval, with, etc. })();
  • 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. HARMONY: Build off of ES5
  • 24. What about Tamarin?
  • 25. Don’t need it! COMPETITION: Everyone got faster! Don’t need a new language to get faster.
  • 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. Processing.js John Resig
  • 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. 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. 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. Drawing ✦ Different drawing methods: ✦ line() ✦ rect() ✦ arc() ✦ ellipse() ✦ point() ✦ quad() ✦ triangle() ✦ bezier() ✦ All use stroke(), strokeWeight(), fill()
  • 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. 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. 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. 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. jQuery Mobile John Resig
  • 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. 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. 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