Metaprogramming JavaScript Presentation
Tuesday, March 20, 2007
Update: Part 1 of the tutorial is now posted.
Here are the slides from my CRb presentation last night.
I think it went pretty well, especially considering it was my first real technical presentation like this. I certainly learned a few things, like not to take unnecessary shortcuts in my code, because I *will* get called out on it.
If you saw the presentation and have some feedback, please send it my way via the comments. Also don’t be shy if you have any questions.
I’ve got some other JavaScript goodies I’ll be posting soon. I also plan to write this presentation up in more of a blog/tutorial format in the next few weeks (with complete example code), so stay tuned.
Ken Barker 20-Mar-07 at 6:37 am
Adam, you did an excellent job presenting. It is hard for me to believe that this was your “first real technical presentation”. Thank you for preparing so thoroughly and delivering well.
Ken
adam 20-Mar-07 at 7:40 am
Thanks, Ken. That means a lot.
Ben 20-Mar-07 at 10:30 am
Thanks for sharing, Adam. I have to admit I got a little lost in the middle (mostly because I’ve never done metaprogramming in javascript before. I’m looking forward to reviewing your slides again.
Andy Dietz 21-Mar-07 at 6:09 am
I would also like to say, I thought it was a great presentation. I liked the code examples and the live demo. I also liked the fact that you had a problem to solved and you showed how to solve it through code examples. We are glad you stepped up and shared some of your knowledge with the group.
adam 21-Mar-07 at 6:51 am
Ben -
I’m sorry I lost you in the middle. Hopefully when I post it as a tutorial you’ll be able to follow it better.
Andy -
Thanks! I’m really glad you found it helpful.
adamlogic » Metaprogramming Linkage 21-Mar-07 at 9:57 am
[…] « Metaprogramming JavaScript Presentation […]
Andres Almiray 21-Mar-07 at 3:35 pm
Really nice presentation Adam! DSLs on JS (or any other language that support them for that matter) are a Good Thing to have.
Tiago Serafim 26-Mar-07 at 2:42 pm
Thanks Adam. As Ben, I got a little lost too…
But I’ll add your blog to my feed reader, so I can check when you post the tutorial.
Thanks again,
Jeremy Smith's blog 26-Mar-07 at 2:58 pm
I Program in JavaScript…
At one point in time, I primarily programmed in C, C++, VB, and Java (yes, this was when I was……
Brett 26-Mar-07 at 3:22 pm
Wow, this is truly excellent stuff. I only wish I had the opportunity to find this a few weeks ago, before I built a similar (and inferior) form behavior API! Thank you.
Chris Eidhof 26-Mar-07 at 3:44 pm
Really cool! I like pretty much everything you do in that presentation, except for the use of with. (Google for why with in JS is bad).
I really like the statement that for writing a DSL, you have to ask the question: how do I really want to write this?
Excellent!
jason 26-Mar-07 at 5:29 pm
This is beautiful beautiful code.
could you post it?
Sjoerd Visscher 26-Mar-07 at 5:56 pm
Nice presentation! But you really shouldn’t use eval. Learn about the closure effect of javascript functions and you’ll see you won’t need eval.
Mr eel 26-Mar-07 at 6:30 pm
Well… I’m a little gob-smacked to be honest. Form validation/manipulation is one situation where I have experiemented heavily, but never found a solution I was happy with. The issue of being able to easily modify behaviour easily in particular.
This has inspired me to revisit some of my earlier experiements and see how they could be improved.
Thanks very much for posting this!
adam 26-Mar-07 at 7:36 pm
Chris -
You’re correct that using with() can potentially cause performance problems, but I hold a firm belief that I don’t avoid something because it *can* be performance problem. I avoid something when it *becomes* a performance problem. In this case, with() is only used for a brief slice of code during the load event, so I let it slide.
Jason -
The code is coming. I’m working on a full tutorial right now that I’ll be posting soon.
Sjoerd -
There are certainly differing opinions on the use of eval(). See my comments above regarding with() to know mine. Still, I’m curious to know how using closures could help me accomplish what I’m currently using eval() for. Any insights?
Everyone -
Thanks for your thoughtful comments. This was my first real post to the blog, and I am feeling inspired to write more.
Dave 26-Mar-07 at 8:03 pm
This was a very interesting exercise and well worth reading. I would guess the presentation was fun to watch as well.
This is the way I’d do the one example in jQuery; it’s not as English as your new language but no invention is involved:
$(’us-state-code’).[
$(’country’).val()==’United States’?
’show’ : ‘hide’]();
Mislav 27-Mar-07 at 4:58 am
This is really cool!
I’m eagerly waiting for those “other JavaScript goodies” …
Marc-André Cournoyer’s blog 27-Mar-07 at 7:05 am
[…] Tuesday March 27th 2007, 8:05 am Filed under: js, links Reading Adam’s excellent Javascript metaprogramming presentation, I’m realizing how much constraining static languages can be. Even tough type […]
lol 27-Mar-07 at 8:19 am
lol
prototype
dont fear eval
use with()
ok, thanks for the laugh, this stuff is useless piece of crap.
Anonymous 27-Mar-07 at 8:52 am
Excellent stuff. The implementation is not insanely complicated, but the idea and reasoning behind it is a true eye-opener. Thanks for sharing!
Thomas Fuchs 27-Mar-07 at 5:30 pm
Cool stuff! Keep it coming!
links for 2007-03-28 « Richard@Home 28-Mar-07 at 12:19 am
[…] adamlogic » Metaprogramming JavaScript Presentation Some very cool javascript chaining here. I need to re-read this again when I have more time… (tags: javascript metaprogramming programming prototype toread) […]
Ajax Girl 28-Mar-07 at 1:35 am
[…] wish I could have seen Adam McCrea give a presentation on JavaScript Metaprogramming and how: PLAIN TEXT […]
Kevinin 28-Mar-07 at 7:19 am
Too bad I couldn’t see your live-presentation :/ Great slides!
fred janon 28-Mar-07 at 7:56 am
Good stuff! Reminds me of one of my C++ books: “C++ Template Metaprogramming”
Only easier to read and understand!
Would you mind posting the pdf file of the slides without the background? I’d like to print it to study it and 62 pages of black are eating up my cartridges…
I never used “with” and everyone says it’s evil, could you expand of that?
Thanks! Keep the good stuff coming!
adam 28-Mar-07 at 8:07 am
Fred -
“with” is evil, as far as I know, only because it is slow. That doesn’t mean not to use it, rather to use it with caution. In this case, it is only used once during the onload event, so it’s okay in my book.
Although I can’t redo the slides with a white background, I will be posting a series of tutorials which will be more printer-friendly. Thanks for the encouragement!
adamlogic » Metaprogramming JavaScript - Part 1 28-Mar-07 at 10:49 am
[…] Columbus Ruby Brigade meeting about metaprogramming JavaScript. Although I posted that presentation here, the slides were short on text, so I thought it would be more helpful if I wrote a series of […]
Ryan Johnson 28-Mar-07 at 12:32 pm
Adam, great stuff, really opened my mind further in terms of how much farther we can take JavaScript. Want to chime in with the chorus here on a few things. I’ve tried multiple times to use the “with” construct on a library level, and it *always* comes back to bite me in the ass. Sometimes in a well defined way (speed or scoping problems), and sometimes in a “just can’t put my finger on it, but something is wrong” sort of way. Sorry I can’t be more specific, but there is a reason everyone is chiming in saying “NOOOOO” about “with”. In regards to eval, maybe I’m missing something huge, but if the action pairs are just strings, bind will solve your scoping problems with action and opposingAction:
Form.Behavior.DependencyManger[action] = function(action,opposingAction,elementId){
return new Form.Behavior.Dependency(elementId,action,opposingAction);
}.bind(this,action,opposingAction);
I haven’t tried it, but I don’t see why not. Eval shouldn’t be nessecary. Every time I use eval I end up figuring a way not to use it later.
Thanks for posting this stuff, despite the little snags and a difference of opinion on “with”, fabulous work.
Adam McCrea 28-Mar-07 at 1:06 pm
Ryan -
You are absolutely correct about my usage of eval — it is totally unnecessary. In fact, I don’t think I even need to use bind(). I had already re-written this piece as:
F.B.DependencyManager[action] = function(elementId) {
return new F.B.Dependency(elementId, action, opposingAction);
};
The closure will trap the action and opposingAction in the outer scope. I’ll be including this change along with a few others in the tutorial.
Regarding with(), I just can’t write something off without understanding *why* it is so bad. It makes the code much more readable, so I need to stick with it until I feel the same pain you have.
Thanks for the comment!
scitesy 28-Mar-07 at 2:59 pm
Great job Adam! You did a wonderful job of explaining a complex concept. I attended your fine presentation and it was better in person. Congrats on the Ajaxian plug!
Justin Palmer 28-Mar-07 at 6:16 pm
This is great stuff! I had been thinking about how to implement something like Finder’s search for a while and just couldn’t sit down long enough to wrap my head around how to not make it suck.
Guess I know what I’ll be playing with over the next week or so.
Jay 28-Mar-07 at 8:01 pm
‘with’ is “evil” since you can’t easily tell if you’re setting properties on the object you’re “withing” or clobbering globals. I don’t know if that qualifies as evil, but it’s probably not super-awesome-good enough to justify the slight risk it introduces. Read all about: http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/
Stefan Tilkov's Random Stuff 29-Mar-07 at 1:11 am
Metaprogramming JavaScript…
A very cool presentation [via Obie]……
Adam McCrea 29-Mar-07 at 5:49 am
Jay -
Thanks for the info, and for the link. I can certainly see the issue now, but to me it still translates to “use with caution” (no pun intended), rather than “never ever use”. For small, very targeted bits of code like I’ve done here, it works for me. Still, everyone’s got their own view on it, so thanks for sharing.
Justin/scitesy -
Thanks, guys!
Brett 29-Mar-07 at 11:00 am
I’ve run into a snag based on the examples in these slides. I couldn’t find contact info on the site, so I’m posting here. I hope that’s okay.
Once we’re at the point where we start to use checkContainedTriggers, how can d=”field1″ …]
[input id=”field2″ …]
[/div]
require(’container’).when(’field1′).isNot(”);
require(’container’).when(’field2′).isNot(”);
In this case, if either field1 or field2 is not empty, div#container becomes required, which cascades the requirement to both field1 and field2. This will kick off a recursive checkContainedTriggers loop that I haven’t been able to easily escape from.
field1.checkDependency fires doAction, which fires checkContainedTriggers, which fires field1.checkDependency, which fires doAction, which fires checkContainedTriggers …
Brett 29-Mar-07 at 11:01 am
Ugh. Wordpress ate my comment. :/
ArtLung Blog » Daily Links 30-Mar-07 at 2:22 am
[…] adamlogic » Metaprogramming JavaScript Presentation Very slick, very smart, inspirational. (tags: javascript programming webdev) […]
Adam McCrea 30-Mar-07 at 3:10 pm
Brett -
You’re right that there is an issue with recursion in my current implementation. I plan to take this code a bit further in the tutorial, and this is definitely something that will be fixed.
Once I work out all the quirks and test across all major browsers, I’ll publish all of the code for anyone to use.
andyskipper.com - freelance web developer in london 05-Apr-07 at 3:31 am
[…] Metaprogramming with JavaScript Slides from a presentation by Adam McCrea on the use of Javascript for “Metaprogramming” - beautiful code! (tags: javascript) […]
Alex Hernandez 05-Apr-07 at 9:04 am
Excellent job man!
Is a very cool piece of work and in my opinion it can save a lot of developers.
Are you planning releasing a sort of library or prototype add-on soon? I haven’t seen it here.. or may be I’m just lost.
Thanks for sharing.
.::AleX::.
Ajax Girl 05-Apr-07 at 9:18 am
[…] library was inspired by Adam McCrea’s presentation on Meta programming with JavaScript, and is built on top of Prototype […]
Adam McCrea 05-Apr-07 at 11:08 am
Alex -
I will definitely be releasing the library once I get it to a point where I would be comfortable supporting it. Thanks for the kind words.
adamlogic » Event.Behavior JavaScript Domain Language 06-Apr-07 at 8:14 am
[…] Johnson over at Livepipe has taken my Form.Behavior DSL to the next level. Check out his Event.Behavior library and prepare to be impressed. His […]
Bill de hÓra 09-Apr-07 at 12:58 pm
Dumb and Dumber…
Dumb: I bought two books recently. One was called “Information Retrieval: Algorithms and Heuristics” and was reading it over the weekend. Or trying to. By the time I got to the material on Bayesian, I was getting lost. However this……
SourceCraft » Descobrindo ECMAScript (JavaScript) - Parte 3 19-Apr-07 at 2:50 pm
[…] referências: danwebb, adamlogic Tags: ECMAScript JavaScript meta programming object oriented OO programming languages […]
adamlogic 02-May-07 at 11:12 am
[…] Johnson over at Livepipe has taken my Form.Behavior DSL to the next level. Check out his Event.Behavior library and prepare to be impressed. His […]
Vetrov 17-May-07 at 7:24 am
Cool stuff! Thank you!

links for 2007-08-31 31-Aug-07 at 12:22 am
[…] Metaprogramming JavaScript Presentation (tags: Javascript Design-patterns metaprogramming) […]
Obsesik 03-Oct-07 at 1:52 am
I dream of __noSuchMethod__ in IE. Aside from my impossible dream, I’ll have to dissect those slides and rape them.
Metaprogramming Javascript For Dummies — Djief’s Blog 22-Nov-07 at 9:16 pm
[…] is another presentation to put your new knowledge to test that builds a small DSL for working with forms that allows for […]
Michael Schuerig » Blog Archive » Finite State Machines in JavaScript 22-Dec-07 at 1:26 pm
[…] machines and I wanted to try metaprogramming in JavaScript ever since I’d seen Adam McCrea presentation on the […]