Today, at SXSW, I hosted a panel discussion on the “Secrets of JavaScript Libraries.” We set out to discuss the behind-the-scenes nitty-gritty code that powers the universal features of the most popular JavaScript libraries.
I think the presentation went quite well. I think we could’ve, easily, done a 2 hour talk with all the content that we had (we had to chop off, at least, two sections at the end in order to take questions). Here are the slides:
Some of the slides will be a little bit tricky considering that they rely on someone talking about them – I’ll be sure to do an audio-to-slide synchronization once the presentation podcast is released.
I want to thank all the panelists for participating: Sam Stephenson, Alex Russell, Thomas Fuchs, and Andrew Dupont. Together it helped make for a stand-out panel. Here’s hoping that SXSW decides to do more technical panels next year – if this panel was any indicator developers are hungry for more code talks.
theBorg (March 12, 2008 at 4:53 am)
What a great panel!!
Claudio (March 12, 2008 at 5:19 am)
why not ExtJS ?
curiosity (March 12, 2008 at 6:54 am)
You wouldn’t have the discussion on video to post on youtube would you?
Steve (March 12, 2008 at 8:08 am)
Interested in seeing the video or hearing the audio with this. When will it be available and where from?
Jörn Zaefferer (March 12, 2008 at 9:16 am)
Looking forward to the audio-with-slides versions. Those slides alone aren’t that great, and I think it’ll be much more interesting when you know who is talking about the current slide.
Ed Finkler (March 12, 2008 at 9:45 am)
I *definitely* was happy to see REAL CODE show up in a SXSW panel — it only took the third day! 8) More of this kind of thing would be great. I’m a bit biased towards RIA stuff, so discussion of the particular challenges of desktop apps using JS would be especially interesting to me.
Justin Thorp (March 12, 2008 at 9:54 am)
Dude, bummed I missed it. I had a flight I had to catch. It was great seeing you though. I definitely want to pop up to Boston soon… oh I hear you’re coming to BarCampRochester! I’ll see you then.
Chris Conley (March 12, 2008 at 10:10 am)
Thanks for putting this talk together; looking forward to diving in a bit more with the slides and audio!
John Resig (March 12, 2008 at 11:41 am)
@Claudio: I invited Jack Slocum – he didn’t accept. *shrug*
@curiosity: I, personally, don’t. I know that the SXSW staff audio records all the sessions so, at some point, we’ll be able to provide that.
@Justin: Awesome – it should be a good camp!
Samer Ziadeh (March 12, 2008 at 11:48 am)
great slide. and yea lol they were a little tricky w/o the audio ^.^
Dave Hyatt (March 12, 2008 at 12:09 pm)
Safari 3 supports display:none elements just fine via getComputedStyle. If you have a specific case where getComputedStyle is not working on a display:none element in Safari 3, I’d love to hear about it, but I believe what you put in your slides is inaccurate.
(Safari 2 did not work with display:none elements via getComputedStyle, but Safari 3 does.)
John Resig (March 12, 2008 at 12:58 pm)
@Dave: You are correct. Apparently this was the case in the Safari 3 Beta (which is when jQuery was adapted to work with it). Obviously this was a bug but when I talked with a WebKit dev (don’t remember who) I was told that “you can’t get the computed style for display: none elements since they aren’t visible – we won’t be fixing this” – hence the workaround. I had no reason to think that this would ever be fixed. Glad to see that it’s resolved – I can remove a bunch of code, now.
Andrew Dupont (March 12, 2008 at 2:10 pm)
@John: Audio of the panels is released in some sort of order at the rate of ~3 per week. Here’s the page. I’m subscribed to this RSS feed and will be sure to let you know when the audio gets posted.
Loved being on the panel. Thanks for putting it together and for including me!
Tom (March 12, 2008 at 3:30 pm)
Excellent! Can’t wait for the audio.
Michael Lee (March 12, 2008 at 5:25 pm)
@John: Interesting presentation, the audio would definitely help with some slides. Looking forward to that.
The Packaging section was especially interesting to me, as this is the area of JavaScript I’ve been working to improve for sometime now.
Along with the solutions you listed there is also Ajile – http://ajile.iskitz.com/ which is primarily focused on implementing packaging for JavaScript.
Here’s an example of it’s usage:
Namespace("my.library");
Import ("some.other.Library");
my.library.Module = function()
{
var a = Library.someProperty;
};
I’d be interested to hear your thoughts.
Clint Ecker (March 12, 2008 at 8:16 pm)
John, thanks again for putting this panel together. Like Ed, I was really happy to sit in on such an advanced panel. Judging from the number of people packing the place, I’d say there should be a lot more of them! :)
Alex Russell (March 12, 2008 at 9:15 pm)
Hey Michael:
I was responsible for the packaging parts of the talk, and while we didn’t get to them due to time constraints, I apologize for not including Ajile in the code examples. I wasn’t aware of your toolkit.
That said, I only included toolkits which I know to have recursive dependency satisfaction and build-tool support. Looking through the source of yours, it appears to use script tag includes which seems (to my eye) to preclude synchronous require()s and I wasn’t able to spot any tools on the project site to integrate packaging with build-time optimization.
Am I missing something?
Regards
Peter Michaux (March 12, 2008 at 9:51 pm)
Why do you need to sniff to set opacity?
Peter Michaux (March 12, 2008 at 10:00 pm)
Why do you need to sniff for script execution in slide 77?
http://groups.google.com/group/comp.lang.javascript/msg/5dccaa1a0c72ad58
Michael Lee (March 12, 2008 at 10:32 pm)
@Alex: Thanks for writing back.
Ajile provides a listener mechanism that can be used to guarantee dependency satisfaction. Ajile’s listener mechanism can also be used to create synchronous require()s. This is demonstrated in Ajile’s Examples page via its on-demand inclusion of SyntaxHighlighter via its JScript brush.
As for Ajile’s use of script tag includes, this is done to provide reliable cross-browser inclusion of both local and remote scripts. Script inclusion circumvents the same origin policy restriction encountered with current XmlHttpRequest implementations.
Shane W. (March 12, 2008 at 10:57 pm)
I really wish I would have been able to attend SXSW, would have been a worthwhile presentation.
I hope that next year that there will be more programming presentations and that I can get approval to bring my team down from Dallas to participate.
James Burke (March 13, 2008 at 12:53 am)
@Michael Lee: How does Ajile handle nested dependencies? Dynamically added script tags are loaded asynchronously, and in IE/Safari they can load out of order (not DOM order, but network receive order). Can Ajile handle something like:
Load("Shape.js");
Square = function() {};
Square.prototype = new Shape();
From my *very* brief look at Ajile, this does not seem possible.
For Dojo, to allow xdomain code loading via script tags, we run the .js files through a build process that wraps the code in a function so that it does not execute right away. Then when we know all the .js files have loaded, we call the functions in the right dependency order. That allows us to support the code pattern I mention above.
However, I would like to avoid that build step we do in Dojo. If you have found a way to avoid it, but to still properly evaluate nested dependencies in the right order and allow the “Square” example above, I would love to hear about the technique. Feel free to respond to me off the comment thread if you like: jburke at dojotoolkit dotorg.
bax (March 13, 2008 at 8:43 am)
I would’ve LOVED to have been there for this! Even more so to see it as a day-long event with all the big players and fan favorites – I’m talking adding ExtJS, MooTools and YUI to the list.
Still, I’m glad more serious attention is being brought to these sweet libraries!
Jonathan Snook (March 13, 2008 at 9:02 am)
It was definitely one of the more technical presentations which delighted the crowd to no end. I was surprised by how design/marketing/business focused the conference was. I hope that just means that the techies have to hit the panel picker a little harder to get the stuff they want to see into the list.
Patrick (March 13, 2008 at 12:19 pm)
@Jonathan – couldn’t agree more! In fact, this was one of 2 panels I was in this year that even showed code. That being said, Secrets of JavaScript Libraries was one of my favorite panels this year by a wide margin.
Brad Fults (March 13, 2008 at 9:16 pm)
I thought the presentation was too technical too fast and quickly got boring as each line of code was read without any overall commentary or design explanation.
Alex Russell was by far the clearest speaker both in enunciation and thought; I was pleasantly surprised.
I wasn’t enthused with the answers about Caja support, but I suppose anyone who wants to know the details should go digging on the mailing lists. I felt the overall attitude toward Caja was one indicating a lack of full understanding and direction among the library developers. This could be blamed on the implementation’s incompleteness and I’d believe it.
Overall I wish there had been time left to go through all of the slides — probably by cutting out the first part where every line of code on several slides was read very slowly.
Brad Fults (March 13, 2008 at 9:18 pm)
Ah I remembered too — always use a high-contrast display and larger font sizes when showing code in a presentation. White on black would have been infinitely more readable in this case.
Michael Lee (March 14, 2008 at 4:04 am)
@James Burke:
Sure, Ajile can handle the situation you mentioned. First, add a listener for the Shape module. Ajile will call the supplied listener when Shape becomes available.
Ajile.AddImportListener("Shape", function(module)
{
// Remove completed listener; module is set to "Shape"
Ajile.RemoveImportListener(module, arguments.callee);
useShape(); // Shape is available, so use it.
});
Second, include the Shape module:
Include("Shape");where Shape is defined in Shape.js as:
function Shape(x, y)
{
this.x = x || 5;
this.y = y || 5;
}
Lastly, actually use the imported Shape module:
function useShape()
{
/** Define Square type **/
function Square(size)
{
this.size = size || (this.x * this.y);
this.height = size;
this.width = size;
}
/** Create Square as an extension of Shape **/
Square.prototype = new Shape();
Square.prototype.resize = function (delta)
{
Square.call(this, this.size + delta);
};
/** Instantiate Square and use its Shape inherited members. **/
var a = new Square();
alert("a.x\t= " + a.x +"\n"
+"a.y\t= " + a.y +"\n"
+"a.size\t= "+ a.size +"\n"
+"a.resize(-3) . . .\n"
+(a.resize(-3)?'':'')
+"a.size\t= "+ a.size);
}
Andrew Dupont (March 14, 2008 at 10:23 am)
@Brad: Your speculation about Caja is correct. Ben Laurie posted on the prototype-core list a while back asking if we’d be interested in getting Prototype working with Caja. We said yes, of course, and he said he’d get back to us on what would need to be changed. That’s where things stand.
The dearth of commentary was a result of trying to cram too much into the time alloted, I think. If we could do it over again, I think we’d choose fewer topics and cover each one more thoroughly.
Alex Russell (March 16, 2008 at 8:27 am)
James:
Micahel’s system handles nested dependencies in the “return a deferred” method which I’ve repeatedly suggested that we augment Dojo’s (easier to use) existing package system with. It’s harder to reason about, but is functionally equivalent.
It’s clearly my fault for not including it. My apologies to Michael.
Regards
Michael Lee (March 17, 2008 at 10:40 am)
@Alex: No problem, next time ;-)
Glad to have some healthy discussion on the topic. Packaging/Namespacing and their related concepts are a real and continuing interest of mine.
Steven G. Harms (March 27, 2008 at 11:46 am)
John,
I agree that there simply wasn’t enough time for your panel to reach its true majesty and I want to see more technical sessions at SXSW. If anyone reading this wants to join me in pushing the SXSW management for more technical discussion, feel free to read my blog post on the matter. Let’s make sure we’re getting the technical enrichment we really want!
Your panel was both an excellent demonstration on “how to do a panel” as well as one of the few panels where I left feeling smarter!
Susan Shepherd (April 9, 2008 at 4:32 pm)
First saw about the tech. sessions at SXSW when we were clicking on material about JavaScript Lib.since the last week of March, when is it available in podcast? youtube? or just here?