Secrets of the JavaScript Ninjas

August 13, 2008

One of the early technology decisions we made on Stack Overflow was to go with a fairly JavaScript intensive site. Like many programmers, I've been historically ambivalent about JavaScript:

However, it's difficult to argue with the demonstrated success of JavaScript over the last few years. JavaScript code has gone from being a peculiar website oddity to -- dare I say it -- delivering useful core features on websites I visit on a daily basis. Paul Graham had this to say on the definition of Web 2.0 in 2005:

One ingredient of its meaning is certainly Ajax, which I can still only just bear to use without scare quotes. Basically, what "Ajax" means is "Javascript now works." And that in turn means that web-based applications can now be made to work much more like desktop ones.

Three years on, I can't argue the point: JavaScript now works. Just look around you on the web.

Well, to a point. We can no longer luxuriate in the -- and to be clear, I mean this ironically -- golden age of Internet Explorer 6. We live in a brave new era of increasing browser competition, and that's a good thing. Yes, JavaScript is now mature enough and ubiquitous enough and fast enough to be a viable client programming runtime. But this vibrant browser competition also means there are hundreds of aggravating differences in JavaScript implementations between Opera, Safari, Internet Explorer, and Firefox. And that's just the big four. It is excruciatingly painful to write and test your complex JavaScript code across (n) browsers and (n) operating systems. It'll make you pine for the good old days of HTML 4.0 and CGI.

But now something else is happening, something arguably even more significant than "JavaScript now works". The rise of commonly available JavaScript frameworks means you can write to higher level JavaScript APIs that are guaranteed to work across multiple browsers. These frameworks spackle over the JavaScript implementation differences between browsers, and they've (mostly) done all the ugly grunt work of testing their APIs and validating them against a host of popular browsers and plaforms.

The JavaScript Ninjas have delivered their secret and ultimate weapon: common APIs. They transform working with JavaScript from an unpleasant, write-once-debug-everywhere chore into something that's actually -- dare I say it -- fun.

secrets of the javascript ninja

Frankly, it is foolish to even consider rolling your own JavaScript code to do even the most trivial of things in a browser now. Instead, choose one of these mature, widely tested JavaScript API frameworks. Spend a little time learning it. You'll ultimately write less code that does more -- and (almost) never have to worry a lick about browser compatibility. It's basically browser coding nirvana, as Rick Strahl noted:

I've kind of fallen into a couple of very client heavy projects and jQuery is turning out to be a key part in these particular projects. jQuery is definitely one of those tools that has got me really excited as it has changed my perspective in Web Development considerably from dreading doing client development to actually looking forward to applying richer and more interactive client principles.

There are several popular Javascript API frameworks to choose from:

  1. Prototype and Script.aculo.us
  2. JQuery
  3. Yahoo UI Library
  4. ExtJS
  5. Dojo
  6. MooTools

I don't profess to be an expert in any of these. Far from it. But I will echo what Rick said: using JQuery while writing Stack Overflow is probably the only time in my entire career as a programmer that I have enjoyed writing JavaScript code.

It's sure pleasant to write code against solid, increasingly standardized JavaScript API libraries that spackle over all those infuriating browser differences. I, for one, would like to thank John Resig and all the other JavaScript Ninjas who share their secrets -- and their frameworks -- with the rest of the community.

Posted by Jeff Atwood
128 Comments

Something has been bothering me about this the past week. The title is JavaScript Ninja, yet the illustration shows samurai armor. Ninja might have worn some light chain mesh under their clothes, but I don't recall seeing them in such bulky protective garb. Do you have a source link for that illo...?

(New JavaScript frameworks are nice ways to organize things, but projects still run in each different browser brand your audience may have. A framework can add developmental improvements, but not runtime improvements. A simple point, but many get confused.)

jd/adobe

John Dowdell on August 19, 2008 4:14 AM

I've got a small to medium sized brick of sites that I went back through and removed ALL Javascript from.

I got sick of those 'browser discrepancies' that came, admittedly, from hand written code because I didn't have TIME to 'learn a framework'. So whatever I had to do I now do it server side.

Personally, I can't wait for a day when everything is just run as Flash or Silverlight -- forget all of this javascript/html/brower BS and stick with a plugin that (as some of these frameworks apparently do) spackle over the top of them.

Perhaps it's foolish, but I don't like having to install outside 'frameworks' to work with a programming language (or framework in the case of .NET) just to get it to work in the first place.

N on August 19, 2008 8:21 AM

Yes! To those who asked, I write my own code.

You know why? Because I want to understand it. I have been smart enough to focus the functions on doing one thing and I have a few basic functions that deal with the DOM, mouse coordinates, element parameters, etc....that are cross-browser compatible.

I also keep my library files down to about 8k. And I can't tell you how many developers don't know what the hell they're doing. So many js examples on the web are totally bloated (not knocking the above mentioned libraries)

But the power of JavaScript combined with an intimate understanding of how it works gives me the ability to really produce anything I want. When a client says can you do this? I can almost always say yes and know exactly how to get it done.

However, I'm at the point where I know enough to be satisfied and will be reviewing the JQuery library.

Please, for the love of programming, understand how it works before using the library that does the work for you if you're going to call yourself a developer!

Jeremy on August 19, 2008 9:34 AM

I've been using a library called SmartClient (http://www.smartclient.com/#_Welcome) from IsoMorphic software for about a year now, and it seems to be the most robust and complete libraries I've used (Dojo, YUI, Prototype). It was originally developed as a proprietary library going back years. It originally used hidden iframes and remote scripting as the pre-ajax transport.

They have open sourced the client library and have kept the Java Server plugins proprietary. Their Java server libraries look incredibly powerful and allows you to drag n' drop server objects into the client designer. Since I work at a .net house I interface it to c# rest services.

Paul

picasso566 on August 20, 2008 6:29 AM

+1

I hate bloated javascript, i prefer to use flash instead to bloat with several javascript api.

Also i tried some of this api and even when they aren't a newcomer, still you can find some bugs, and debugging javascript IS NOT FUNNY AT ALL, specially since the difference between browser.

My experience :
Prototype fine but a bit bloat and i found some bugs.
Yahoo UI with bugs (or browser incompatibilities?).
Dojo overbloated.
Zapatec is awesome, a professional solution but it's bloated and not for free.
And almost any rich text input box is bloated to the extend that you want to use only one x page, in this case i suggest tinymce.

jorge on August 20, 2008 6:56 AM

NAN: Not a Ninja

rodverap on August 20, 2008 8:11 AM

I'm quite new in the Javascript world, cause I primarly worked for desktop environment, but surely I can state that going from plain javascript to JQuery increase the productivity enormously.

Actually JQuery is the only javascript library that I use, but I'm planning to look at others.

Surely you need to learn the language first, became familiar with stuff as closures, JSON, etc. But a strong javascript library can really save your day.

alk.

Gian Maria on August 20, 2008 1:20 PM

Javascript frameworks suck just in the same way it sucks to use a wheelchair when you don't have any legs.

Chepech on August 21, 2008 9:41 AM

Wow, a lot of strong opinions about javascript here. One thing I can say, I have used jQuery for over a year now. We took our web app to a whole new level by using this powerful, easy to use library. Sure, I've had to customize bits here and there, as any programmer is want to do, but the time it's saved me is so significant that I believe it's a major difference between success and failure for our product.

John Grimes on August 21, 2008 11:44 AM

i don't like javascript, mostly it is disabled. quit reading this blog.

gooofer on August 21, 2008 12:35 PM

If you would like to use JavaScript on the server as well, let me humbly suggest Myna (http://myna.emptybrain.info). It uses the Rhino JavaScript engine to wrap a Java servlet. It is basically Google Web Toolkit in reverse...instead of coding JavaScript in Java, you script your Java in JS.

Mark Porter on August 25, 2008 6:35 AM

Howdy Jeff, you do realize that you can do pretty advanced browser stuff without having to resort to JavaScript?
(Hint; follow my link)

Thomas Hansen on August 31, 2008 6:16 AM

Dave, I know that you know that it is impossible to compile and therefore 'hide' javascript source code in binary form.

So, the only other option _is_ to share. It is called Open Source or Free Software, depending on how you want to look at it and what 'camp' your ranting from.

Believe it or not, an entire Operating System used to power the New York Stock Exchange as well as that Mars Rover and countless other applications, is all created, distributed and made better through coder contributions both individually and corporate.

I remember just 5 years ago looking at some Javascript libraries that did menus and stuff, which they tried to sell for profits, by obtusing and compressing the JS.

Those days are over and make me laugh thinking back on it now.

BTW, my opinion about JS Libraries of choice are Dojo for whoppingly massive projects and beautiful complex UI to MooTools which is much more lightweight yet supporting a good set if common UI and FX + Ajax.

Matt K. on August 31, 2008 7:10 AM

In reference to the above post about the picture of a Samurai instead of a ninja?

Ninja's are master of disguise so the obvious explanation is that the picture is of a Ninja disguised as a Samurai.

http://www.dragonlasers.com
Sod

Sod on September 1, 2008 2:25 AM

Sod speaks the truth. Only Highly Visible Ninjas ( http://tvtropes.org/pmwiki/pmwiki.php/Main/HighlyVisibleNinja ) dress in black. This samurai is obviously a ninja in disguise.

Medinoc on September 1, 2008 4:28 AM

I really like this one: http://www.jslab.dk/projects.php Its an unobtrusive implementaion of the W3C DOM Event and HTMLElement interfaces for IE

Nadia on September 2, 2008 6:14 AM

Sigh. I wanted to become a JavaScript ninja and I am supposed to pick from one of seven frameworks without any guidance as to which one is worth learning.

That's the trouble with everything these days. I want to bone up on web design and I wind up scratching my head not knowing whether to drill down into RoR, Drupal, etc. Each IDE and language has a learning curve, and nobody will tell you up front which ones are worth the trouble.

mikey on September 15, 2008 6:34 AM

jQuery truly rocks.

No matter what you do, stay away from ExtJS. ExtJS is run by a bunch of rogues who will milk you dry. They started with a BSD license, then changed to a LGPL license and are now GPL. Moreover they initially said that I would be fine as long as I bought a single license but now state that I would need an OEM license (costs $$$). Don't let those shiny pixels fool you.

Alberto on September 18, 2008 12:12 PM

all of this words are very best!!!

adlin farwiza bt abd aziz on March 29, 2009 6:31 AM

I'm probably one of the few who still prefer prototype over jQuery!

But anyways, don't forget to mention Google's hosting of most of the above mentioned Javascript libraries (and Yahoo's hosting of YUI)
http://code.google.com/apis/ajaxlibs/

We take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc.

So not only is the pain gone but if everyone started using them then so would download times for users.

I visit (Site A) which uses a Google hosted version of a library and my browser downloads it. Then when I visit (Site B) which uses the same library I don't have to download it as I cached it when I visited (Site A) and so on!

Aaron Bassett on February 6, 2010 10:38 PM

JS library repositories... nice.

Whenever I do a site with heavy graphics (hosted in my low bandwidth basement) I offshore the acutal images/movies/sound to a faster provider... but to have someone who keeps my JS libs highly available and up to date is downright SWEET!

*Breathes deeply*

rwheadon on February 6, 2010 10:38 PM

People say one of the secret's of Perl's success is the CPAN. If someone else has written the code for you, then you just have to glue it together and you can get more done. Now it seems something similar has happened for javascript.

John Ferguson on February 6, 2010 10:38 PM

I started using JavaScript heavily at the end of 2004 and haven't regretted it. At the time, none of the currently-available JavaScript libraries/toolkits existed and it was rather laborious to get anything done, although I think I was farther along the journey to loving and grokking JavaScript than anyone else I knew because I forced myself to learn it and use it despite its legendary idiosyncracies. Now, I prefer writing JavaScript to C#, although with the introduction of anonymous types and better syntactic sugar for anonymous methods, I am starting to love C# more as well. One thing is for sure, ajax and closures are addictive.

I was glad to see at least one person thus far (Bart) has mentioned the excellent library MochiKit. I have used MochiKit for a bit over 2 years now and don't know how I would survive without it. MochiKit was written by Bob Ippolito, a Python developer, so the library is heavily influenced by Python, which I haven't found to be too big of a distraction (I don't know much about Python). The functional programming constructs MochiKit provides are very nice and I encourage anyone interested in functional programming to check MochiKit out.

I tried jQuery but didn't enjoy it as much because it lacks some facilities that MochiKit provides (for better or worse), not to mention I am not really a fan of using a fluent interface for this type of work, although I realize it isn't required for using jQuery. Unfortunately, the fluent interface seems to be the default modus operandi of jQuery users.

John mentioned CPAN contributing to the success of PERL and said something like that needs to be done for JavaScript. Well, that is already taken care of a la JSAN. Go google it.

One thing to note too is that some libraries have more of a widget slant than others - Dojo, YUI, ExtJS being the main ones I think of with regards to widgets. MochiKit is said to make JavaScript suck less - it isn't there to provide you with widgets and such, the intent is more to provide a cleaner API for JavaScript. Since I work on a lot of custom business applications, there are few common widgets out there that would help me, so I don't feel I am losing anything - I have to build my own regardless.

Jason Bunting on February 6, 2010 10:38 PM

I concur with Arkh. Once we also have these for CSS, then maybe web development in general won't suck.

Probably a tougher nut to crack, but it's also the more important one.

Aaron G on February 6, 2010 10:38 PM

Joost - what makes writing JavaScript by hand any worse than writing C# or Java or Ruby or name your own?

The idea that JavaScript is crap is held only by those that remain in ignorance to its strengths. While not perfect, JavaScript is much stronger than most people realize. Poor implementations of JavaScript interpreters have done a lot to sully the language's image, and the fact that most developers don't know enough about it to separate the language from its implementation by a give interpreter as well as separating the DOM API from the language itself.

Jason Bunting on February 6, 2010 10:38 PM

Whoa DerekSmith - first of all, JavaScript is not Java, nor related to it by anything other than name and syntax (which, of course, is C syntax). Second, JavaScript has become as essential to the web as HTML, so in turning it off you are only hurting yourself - why don't you turn off the HTML too?

Where did that chip on your shoulder come from? :P

Jason Bunting on February 6, 2010 10:38 PM

Newsflash: Web applications in the 21st century do NOT have to work with JavaScript turned off or crippled by NoScript (unless they're designed for mobile, obviously). The web sucks without JS.

So to all of the folks whining about non-graceful degradation and the glut of jQuery-like frameworks eroding the pool of m@d j4v45cr1p7 n1/\/j4 5k1lLz: cry me a river, you ossified reactionaries. You sound like COBOL dinosaurs whining about SQL and ADO abstracting away the wonderful ninja-style mechanics of data access and tokenizing. It's called progress.

Aaron G on February 6, 2010 10:38 PM

I would also like to point out that JavaScript has also become the default attack platform of security professionals and ner'-do-wells alike.

If you would like to see some of the cool things that JS can really do, check out the sla.ckers.org forum some time.

Matt Presson on February 6, 2010 10:38 PM

«Back

The comments to this entry are closed.