I <3 Steve McConnell*
Coding Horror
programming and human factors
by Jeff Atwood

August 13, 2008

Secrets of the JavaScript Ninjas

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.

[advertisement] Read the largest case study ever published about lightweight peer code review in Best Kept Secrets of Peer Code Review. Free book, free shipping.

Posted by Jeff Atwood    View blog reactions

 

« Music to (Not) Code By The Perils of FUI: Fake User Interface »

 

Comments

With Javascript's continued evolution, it's definitely exciting to see where things are going. I'm currently developing a web-based app that has traditionally been in the realm of desktop-based apps only, but using ExtJS has changed all that - I get the look and feel of a desktop app with the portability and speed of a browser app.

It also does away with the tag soup you mentioned previously, Jeff. The app is downloaded into the browser in JS form, and all data is obtained using AJAX and delivered in JSON format.

Steve on August 14, 2008 06:30 AM

I've been toying with a log of jQuery lately and I must say, there is no need to ever write custom JavaScript ever again. I got into an argument on this, but honestly: I'm fine with letting John and his team worry about all the browser specific behavior, I just want to write my (few lines of) code and have it work right out of the gate.

Chris Missal on August 14, 2008 06:37 AM

Might have to try one of these out... still writing Javascript by hand (and quite a bit of it) and struggling with getting things to work between IE and FireFox. Very frustrating that Microsoft has been so willing to go against web standards. Thankfully I develope for Intranet which means FireFox support is nice to have, but not required.

Kris on August 14, 2008 06:40 AM

JavaScript use to bother me with its dynamic typing and treating functions as first class variables but I've finally come to grips with it now.

o.s. on August 14, 2008 06:42 AM

I think it would be worth mentioning base2 (http://code.google.com/p/base2/) by Dean Edwards, which is my favourite choice if the amount of JavaScript we're talking about is like 50 LOC. It is a layer in between "nothing" and a full framework: It just evens out the browser incompatibilities so that programming to the DOM specs actually works. It provides some generic goodies inspired by ECMAScript 4, but no fancy utilities or an own API, just plain standards-dictated DOM Level 2 (plus a bit of 3). IIRC, it even drives one of the bigger frameworks (either Prototype or jQuery, I don't recall anymore).

While coding for the DOM isn't that much fun (braindead standards body, really...), it's lightweight and perfect for a small special effect on an otherwise static website.

Moe on August 14, 2008 06:48 AM

Jeff,

How do you feel about Graceful Degradation when you're working with Javascript? For example on your Stack Overflow site.

I remember from a while ago (prolly last year) there was a lot of buzz about all the JScript frameworks you've mentioned, but also a movement about micro-formats and graceful degradation of your site, when working with those frameworks.

Combined with proper CSS formatting, making it so that your entire site still works when Jscript and/or css is turned off.

Do you/are you going to invest time and energy in graceful degradation? Your point of view? :)

David Cumps on August 14, 2008 06:50 AM

Appendix to my previous comment:

I wanted to include an example by quoting picnicmob.org, but it's offline :(

I'll show the port I did for it instead: http://picnicmob.eu/ Disabled jscript should still allow everything to work, except you see the radio boxes now, while jscript enabled hides them. And without css you go back to (very) old-school looks :p

(Ps: The project of the site is dead, wasn't really much interest for in Belgium)

David Cumps on August 14, 2008 06:54 AM

How about the Google Web Toolkit? To heavyweight?

Scott Rosenbaum on August 14, 2008 06:56 AM

Hey, I like this blog and enjoy reading your posts...

...but sometimes I'd like to read an article with all the backlinks.

You end up refering to things you've posted before and by the end of it I will have needed to read the equvalent of a small book to really get your perspective on the subject.

It's irritating and I end up feeling like everything is an iside joke.

Joe on August 14, 2008 07:00 AM

I've been at a company now that uses prototype and the truth is it makes javascript really enjoyable.

Pat H on August 14, 2008 07:02 AM

"JavaScript use to bother me with its dynamic typing and treating functions as first class variables but I've finally come to grips with it now."

I wasn't aware that first class functions were a bad thing? I can understand being wary of a dynamic language - it's usually either For or Against.. but functions as first class citizens? Is there a negative?

`Josh on August 14, 2008 07:02 AM

You left out MochiKit! It's a fabulous framework that has totally revolutionised my JS code. I can do so much now with so little effort!

Bart.

Bart Busschots on August 14, 2008 07:03 AM

john resig is god!

randy on August 14, 2008 07:05 AM

What? Nobody else finds it odd that the cover of book entitled Secrets of the JavaScript Ninja instead features a samurai?

Joel F on August 14, 2008 07:05 AM

I used to be a "Javascript Ninja" and I wholeheartedly think that jQuery is the way to go, if you are going to craft your site in Javascript. I've looked at them all: YUI, Ext, Moo, scriptaculous, dojo and a ton more that aren't in the top 5. And JQuery is about as perfect as it gets in the Javascript world. Resig had a winner 18 months ago when it first started, and it's now a force to be reckoned with. But...

(There's always a but)

We (at our company) have veered off the Javascript road and are now blissfully speeding along the Google Web Toolkit superhighway. Like I said, I'm very comfortable writing Javascript. But the power and simplicity of GWT, especially when combined with a world class IDE like Eclipse (NetBeans is excellent too). It turns what can be a frustrating situation into a pleasure when writing and debugging code. If you are in a Java shop, or you're vaguely familar with Java, it's absolutely awesome. And if you're in love with a particular feature of a javascript library...they're fully compatible with each other. Once you set a break point on a client side line of code and step from client to server in the debugger...you'll never go back.

Like I said, I dig JQuery (I think I want to be Resig when I grow up) and a lot of the other libraries, but GWT is really a different approach to the problem.

Mike Shaffer on August 14, 2008 07:10 AM

And now, we just need something similar for CSS. Maybe during the "Web 3.0" era.

Arkh on August 14, 2008 07:11 AM

Can you tell us a few of these hundreds of differences in JavaScript implementations? What I understand the JavaScript implementations are quite identical (eventhough IE doesn't recognize delete keyword).

I reckon the main difference is that the browsers create different kinds of DOM trees from same HTML and CSS is interpreted with varying accuracy causing some of the HTMLElement attributes to differ accross the browser engines.

Urpo Taas on August 14, 2008 07:12 AM

@Josh
First class functions can add subtle errors to a program if they are used poorly. Also, it can make the code hard to follow sometimes. Note there are a few Java coders who don't want closures added to Java 7 for this reason:
http://david.blog-city.com/closure_headache.htm
However, its all in how the tool is used it can be either good or evil. A lot of typical coders just don't understand the nuances of the first class function concept to use it effectively which is where the negatives and maintenance headaches come in.

o.s. on August 14, 2008 07:14 AM

@o.s. appreciate the response, I'm only beginning to really look at the details of languages. I'm also glad you clarified how they can be used for good or evil - as any language or feature can be. I think in this case though, the problem would be the user of the tool not the tool itself?

That blog you posted pretty much sums it up nicely - 'I dont understand it, it's too hard, so I don't want it'. Forgive the tone I'm not taking a dig at you. I'd much rather read the thoughts and views on the subject of closures in Java from somebody that understood them and had what I feel are justified reasons.

I also think that Yegge has brainwashed me a little.

`Josh on August 14, 2008 07:26 AM

Word up. Jquery is pretty awesome. Call me a sickening individual, but I've always... wait for it... ENJOYED writing my own Javascript. It's a "lack of control" type of phobia, I guess. But Jquery makes me so much more productive, I can't look back. And I still feel in control because I understand how it works. It's a fabulous compromise. Thanks John Resig!

Josh Stodola on August 14, 2008 07:36 AM

Some co-workers and I have been talking about some of these frameworks for a while now (mostly about standardizing on one throughout the company) and this little gem came out. Useful for determining which framework to use if you're doing mostly DOM work with selectors..

http://mootools.net/slickspeed/

Sam on August 14, 2008 07:37 AM

Yeah, jQuery makes javascript into the second best dynamic language ever. Especially when you combine it with Ext for UI tasks.

(The best is still Ruby :) )

KTamas on August 14, 2008 07:41 AM

If you know Java already, GWT (Google Web Toolkit) can't be beat for cross browswer compatible JavaScript creation.

Charles on August 14, 2008 07:44 AM

@Joel F

I believe ninjas where often samurai on their night shift ;)

you can't see me on August 14, 2008 07:44 AM

If you're writing a modern web app or adding some dynamic functionality to a site, use a library -- there is not a single, solid argument against this. You'll save time by turning a blind-eye to browser consistency, creating DOM elements more easily and avoiding doing the same thing over and over again.

What concerns me is the tight coupling of JavaScript libraries to modern frameworks like Rails. Now that most of us web workers are in client-side scripting heaven, this is where I see the next big battle appearing...unless you're working with (the awesome) Django.

jQuery is by far the best library to use. Period.

Michael Thompson on August 14, 2008 07:52 AM

Good post, I too have finally come around to using javascript heavily in my applications, and it's 100% thanks to JQuery.

Ethan Vizitei on August 14, 2008 07:53 AM

Having coded in various Javascript frameworks, JQuery is the only one that makes Javascript enjoyable.

It's the only one that looks as though it's designed to work with the DOM: i.e. find object(s), then do something(s) with it/them.

The others generally look like Javascript: i.e. copying the syntax of an imperative language built to do anything and cope with a vast number of input types. Which is great, when you can't count on the DOM being there. For everything else, there's JQuery's approach.

Rob on August 14, 2008 08:02 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 August 14, 2008 08:04 AM

I have been following and using ExtJS for about 18 months now and must admit that when I started was a javascript novice. Using this framework has been a revelation and has led me to actually learn javascript properly. I would recomend anybody to look at this highly polished framework which has excellent API documentation and a very friendly and helpful user community on its support forums.

Nick on August 14, 2008 08:04 AM

Aaron, awesome, didn't knew Google did that for you, thanks! Going to start using that :)

Seems they even serve different versions, which you can select with a parameter :) (http://code.google.com/apis/ajaxlibs/documentation/index.html)

David Cumps on August 14, 2008 08:14 AM

Jeff Atwood allergic to writing his own code? Accusing those who do of being stupid?

Yawn. What else is new?

Mattkins on August 14, 2008 08:17 AM

I for one think that marrying the server side to the client side will be a huge win for web developers - a server side framework that let's me choose which client side lib I want to use to output rich UI widgets would be awesome. Say maybe YUI or Ext. That way I still get to choose which lib I prefer.

Let's not forget about Aptana Jaxer either.

aaron on August 14, 2008 08:20 AM

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 August 14, 2008 08:23 AM

I picked up Prototype a little more than a year ago and was really impressed... Until I saw JQuery, which does a lot more with a smaller download. At this point, I'd be strongly inclined to go with JQuery rather than prototype.

For some applications, however, these libraries are pretty large. Two years ago I wrote a simple 3-d engine in Javascript that uses AJAX to download geometry in XML format:

http://polyhedra.org/

The Javascript "applet" is an 8k download. I've thought about rewriting to improve it in a number of ways, in particular to use binary-space-partitioning so it can correctly draw more difficult shapes... One obvious thing to do is to base it on a library like JQuery or Prototype, but then you've got an 8k applet that depends on a 20k or 40k library, which is a big increase.

Paul A Houle on August 14, 2008 08:29 AM

"These frameworks spackle over []"

I guessed spackle was a euphemism for "urinate", but was wrong.

"smooths over", for non-US readers.

Adrian on August 14, 2008 08:29 AM

JavaScript used to be an unknown, weird, and scary due to its quirks. But once I learned about jQuery, I always look for opportunities to make use of it. It's just powerful and fun. Too bad my projects are using Prototype as the JS library of choice (it's Rails after all). So most of the time, if it's doable in Prototype, in Prototype it is done. Naturally, Prototype results in longer code than jQuery.

But above all, Firebug is for me the tool that makes JavaScript writable.

Hendy on August 14, 2008 08:36 AM

Actually, you're one generation behind, Jeff. Not only Javascript works, it's actually become assembly language and there is no longer any point in developing in it: just use GWT and not only do you get a fully statically typed and Eclipse supported development environment, but the generated Javascript is also extremely compact and filled with optimizations that would take hundreds of lines to write by hands (e.g. image bundles). And for these cases where you need to go "to the metal", you can still drop down to the Javascript level whenever you have to.

Cedric on August 14, 2008 08:41 AM

I guess I'm a Luddite or something...

Not very long ago, we used to write software to solve problems. Now we spend the bulk of our time trying make "widgets" "behave".

This is progress?

Wile_E_Coyote on August 14, 2008 08:52 AM

>> Not very long ago, we used to write software to solve problems.
>> Now we spend the bulk of our time trying make "widgets" "behave".
>> This is progress?

It's the difference between re-inventing the wheel, and figuring out what size wheel is right for your bike/car/whatever. If every car manufacturer had to re-invent the wheel for every car they made, we'd have a lot less cards, so yes it very much is progress IMHO.

Jeremy on August 14, 2008 09:09 AM

[caution] are those javascript ninjas on fire? /yikes

josh on August 14, 2008 09:13 AM

One interesting newer development along these lines is the rise of platforms such as Facebook's FBJS and Google's Caja which though intended to provide a "safe" sandbox for Javascript code as a side effect also take care of abstracting out all of the browser compatibility issues.

Jaime on August 14, 2008 09:18 AM

"Spackle" is a brand-name substance for filling in cracks, pits, chips, and other imperfections, such as prior to painting a wall.

One could say "smooth over" instead...

Steve on August 14, 2008 09:41 AM

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 August 14, 2008 09:42 AM

I'm a college student, but I have almost no web web development classes. I'm interested in the area but I find really hard to start doing something. Just looking at the Javascript entry on wikipedia frightens me. Can anyone give me some hints as to where I can find some good introductory course of web development and javascript for someone who only knows C, some Java, data structures and pointer stuff? How can I integrate code made in server side with other languages to produce something that a browser can understand? Anyone who can point me some URLs to start diggin on my own I would appreciate.

Hoffmann on August 14, 2008 09:42 AM

I mean, c'mon look at this thing:
http://ejohn.org/files/ecma-cloud.png
Where do I start?

Hoffmann on August 14, 2008 09:43 AM

The few that I looked at all have the same problem: the bulk of the code was dedicated to providing fancy selectors, animation, etc... rather than a minimal browser abstraction layer.

The programmers just can't stop themselves once they get started. Which I understand, but it seems like a lot of duplicated effort, and a missed opportunity for a minimal toolkit.

Jacob on August 14, 2008 09:45 AM

So I still browse most sites with JavaScript disabled. Am I missing much besides pop-ups, annoying ads, and buggy pages? I don't think so.

Adrian on August 14, 2008 09:48 AM

Hoffman:

To start pretty much any new web tech I always recommend W3 Schools (www.w3schools.com). But there are MANY, MANY Javascript tutorials out there (just Google "javascript tutorial"), and any number of them can get you started.

Jeremy on August 14, 2008 10:06 AM

I highly recommend David Flanagans "JavaScript: The Definitive Guide" - <a href="http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596000480">http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596000480</a>;

aaron on August 14, 2008 10:15 AM

i give up

aaron on August 14, 2008 10:18 AM

Jeff, do you do any kind of automated unit testing or integration testing on your javascript? It seems like a fine language to me, but very difficult to test properly.

Ben Fulton on August 14, 2008 10:30 AM

Thanks Jeremy for that website, it looks very dummy friendly. aaron, unfortunaly I can't buy any books (food or books, I go for food) and there is not a copy of that one at my college library, but thanks anyway.

Hoffmann on August 14, 2008 10:40 AM

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 August 14, 2008 11:05 AM

> If every car manufacturer had to re-invent the wheel for every car they made, we'd have a lot less cars

Actually, a few less cars would not be a bad thing in my opinion. :)

Humor aside, the only nit I would pick about JS frameworks is the fact that the framework, as a whole or in part, would be downloaded each time for each site, browser caching not withstanding. For example, in my browser cache currently I have two copies of Ajax libraries from TechNet *and* MSDN. Unfortunately, the alternative, I imagine, would be the JS version of "DLL Hell". As long as the libraries are well modularized and optimized for downloading, the impact would be minimal. I realize that a fat broadband pipe makes it a moot point, but some people still use dialup; dwindling numbers of them every day, but they're there.

Buck on August 14, 2008 11:07 AM

Seriously, does anyone still write their javascript by hand? Just the thought makes me shiver. What a pain! I'd rather drive a dirty steak nife through my hand.

joost baaij on August 14, 2008 11:13 AM

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 August 14, 2008 11:28 AM

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 August 14, 2008 11:35 AM

I've been messing around with jQuery lately, and I have to agree with Mr. Atwood here. It doesn't make me want to gouge my eyes out with a spork.

Now that I'm actually starting to figure it out, I'm quite impressed with what they've accomplished.

James P. on August 14, 2008 11:39 AM

Thanks for this post; you just made my life a lot easier.

Eric Bennett on August 14, 2008 11:46 AM

Finally.
I've been feeling more and more like a leper since realizing how much fun you can have with JS a couple years ago. With Prototype I went mostly crazy, I rewrite everything to be dynamic with AJAX. I use replace any XML I can with JSON... mostly because I can, all the while my peers have been looking down their nose and scoffing.

Slowly the tide is turning, and its about damned time.

Christopher TruLove on August 14, 2008 12:16 PM

Hi Jeff,
Enjoyed reading your post (wow, you get a lot of comments!).
Since someone pointed out Dean Edwards's base2 for a really lightweight solution, I thought I'd also recommend that you and your readers take a look at Robert Nyman's DOMAssistant (at http://www.domassistant.com/). It's quick and lean. Of course, I still prefer jQuery (I'm on the jQuery project team), but it's great to have other options, too, depending on the project.

Karl Swedberg on August 14, 2008 12:18 PM

@Scott Rosenbaum:
Google Web Toolkit isn't useful unless you're already working in Java. It literally turns Java code into Javascript.
On another subject, we use jQuery for our projects where I work... although one of the senior developers wants to move to ExtJS instead.

Powerlord on August 14, 2008 12:40 PM

Ever wondered what all those people do with NoScript after they have downloaded it?

They run it to block all your shitty Java, that's what.

DerekSmith on August 14, 2008 01:10 PM

jQuery rocks anyone's world, although I'm finding it's good also to learn the raw JS so that on the few occasions it doesn't work you can at least get under the hood and see what's what.

A few people mentioned the desirability of a cross-browser CSS framework - well, it's not perfect yet but Dirk Jesse's YAML (Yet Another Multicolumned Layout) is on the right track for sure.

http://www.yaml.de/en/

Tim Sewell on August 14, 2008 01:42 PM

Cover pic of that books shows a Samurai with too much espresso in its bloodstream.

Ninjas are just as pi$$ed off, but dressed in black and sporting shurikans.

BugFree on August 14, 2008 01:55 PM

I just had to go through the pain of trying to figure out which library/framework to use and "reviewed" some at http://www.emadibrahim.com/2008/08/10/the-best-javascript-library/

I was torn between the 2 finalists: YUI and jQuery... I made a decision and picked one but after reading some of the comments, I might use them both.

Emad Ibrahim on August 14, 2008 01:56 PM

One more thing... I just donated to jQuery about an hour ago... My first donation ever to an open source project. That's how much I love that library :)

You can donate at http://docs.jquery.com/Donate

Emad Ibrahim on August 14, 2008 01:58 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 August 14, 2008 02:24 PM

Wonderful!! Finally, SOMEONE agrees! Make the programmers actually THINK of rich and creative interfaces--instead of leaving it up to no talent, ugly scalable vectors, webs over-done and re-done in too much FLASH and XARA. Thank GOD for JavaScript! Great Post!

John M. Richardson on August 14, 2008 03:00 PM

Jeff you forgot to put MS Ajax on the list. It's a framework too.

john on August 14, 2008 03:02 PM

Checked out Google's Open Social API yet?

http://code.google.com/apis/opensocial/

I just finished a Myspace App backed by the OpenSocial API:

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=401330955

Zoasterboy on August 14, 2008 03:06 PM

If you want to know what the REAL javascript "ninjas" think about these frameworks, you should check out comp.lang.javascript

One comment, for example: "Prototype was written by people who don't know javascript for people who don't know javascript"

These frameworks lull people into thinking they know javascript, when the truth is they really don't.

But I don't expect it to change anytime soon. It's just "too hard" to learn how to write javascript correctly. It's so much easier to use these frameworks. And most employers don't want REAL "javascript ninjas", they want people who know their chosen framework, and they think that makes someone an expert.

Tony on August 14, 2008 03:58 PM

Ninjas are wussies. Pirates are cooler. JavaScript is for ninjas. (aka wussies) Pirates use C# on the desktop because Web 2.0 is for ninjas.

Calvin on August 14, 2008 04:20 PM

now if I could just find a framework that ran on Facebook :-(

Dave Hodson on August 14, 2008 04:26 PM

As others have already mentioned, if you've got a Java backend, the Google Web Toolkit (GWT) can't be beat.

The biggest problem with GWT is it's ability to integrate with existing Javascript, but it's been more then a year since I worked with it so I'm pretty sure many things have gotten better. I was a big fan of being able to deal with my presentation objects in both the client code and the server code... it felt like I wasn't doubling up on work which usually happens when you cross the language divide.

The website I was working on integrated the GWT with Google Maps. Even though it's pretty obvious Google Maps is written with GWT, it would have been nice to see better integration - but I guess this gets into the difference between their internal API's and their public ones.

David from Oz on August 14, 2008 04:43 PM

the ninja is hiding behind the samurai.

secretGeek on August 14, 2008 04:59 PM

thanks to john resig's jquery. I love writing many thing in javascript. before, I hate and doing lot of thing on the server side .. ;)

adwin on August 14, 2008 06:15 PM

don't you fucking dare make your website UNUSABLE with JS off.

Nicolas on August 14, 2008 07:07 PM

I'm going to join in on all of the love for jQuery - I started to learn it along with Drupal, and it's marvelous.

John Fiala on August 14, 2008 07:29 PM

How about ASP.NET AJAX. Works well with ASP.NET based web sites

Xander on August 14, 2008 10:17 PM

"What? Nobody else finds it odd that the cover of book entitled Secrets of the JavaScript Ninja instead features a samurai?" - Joel F

Not to take anything away from John's book, which I'm sure is great, but yes, I do find the cover image a bit odd considering the title.

jonny_noog on August 14, 2008 11:12 PM

I'm sorry to say this Jeff but I've come to the conclusion you're a hack.
This is the second article that's prominently advertised a book without so much as mentioning the content. The last was the Petzold text on Turing to which you dedicated a huge image and a one sentence review along the lines of "it's great! trust me!" (to paraphrase).
The ninja's book doesn't even get an explicit mention. I mean, I wouldn't mind if you just had random pictures in your post, like Joel likes to include for no apparent reason whatsoever, but this is outright advertisement.

Why don't you just come right out and tell people when you're spruking a product, rather than inventing a blog entry just so you can feature a product you obviously don't really care for?

Daniel on August 15, 2008 12:10 AM

Jeff, just wait until you've coded some actual javascript, cross browser, cross platform, etc.
You're going to hate it more then PHP... because quite frankly; Javascript DOESN'T work .. at least never at once ;-)

Take it from somebody who has done a lot of javascript coding!

JW on August 15, 2008 12:35 AM

> I'm sorry to say this Jeff but I've come to the conclusion you're a hack.

I'm just wondering what took you so long to figure this out!

I included the book because a) Resig is awesome and b) Ninjas are awesome.

Questions?

Jeff Atwood on August 15, 2008 02:35 AM

"These frameworks lull people into thinking they know javascript, when the truth is they really don't."

In the same way that C compilers lull people into thinking that they know assembly language?

Surely the whole point is that libraries/frameworks provide a level of abstraction that allows you to not have to worry about the low level stuff?

Personally, I've found jquery a joy to use, as I don't have to spend so much time battling against the browser implementation of Javascript/DOM - I can just get on with the task at hand. It's almost like writing in a high level language, but with the ability to drop to low level stuff as and when it becomes necessary.

Bob Armour on August 15, 2008 04:31 AM

Ajax??? "Click, click, click" ==> click the red X.

lmbo on August 15, 2008 04:57 AM

For those who want to use jQuery with Rails, there is jRails..

Discovered it, used it, loving it :)

blackspot on August 15, 2008 06:22 AM

>I'm just wondering what took you so long to figure this out!

Isn't it nice to be such a lightning rod, Jeff? Nice comeback. You must tell me where you acquired your Teflon shield against insults. Blogs and forums would be a better place if more people resisted flame bait the way you do.

Charles on August 15, 2008 06:35 AM

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 August 15, 2008 06:52 AM

I've been able to create quite a few mini web applications entirely in JavaScript with no server side code. They get their data as JSON. I can create a Yahoo! Pipe to transform any available XML data source into JSON to avoid cross-domain XMLHttpRequest restrictions. You can also load your JavaScript API frameworks from a Content Distribution Network and eliminate them from your web site's bandwidth. I've built my mini web applications into compiled HTML help files so my documentation includes working applications.

Robert S. Robbins on August 15, 2008 06:54 AM

> the ninja is hiding behind the samurai.
> secretGeek

Hahahaha... Very wise, LB.

Joel F on August 15, 2008 07:49 AM

jQuery is the bomb.

Bryan Murphy on August 15, 2008 08:07 AM

I am a jQuery evangelist myself, but for those wanting to know how to choose a library, you might find a post I wrote here interesting:

http://blog.reindel.com/2007/10/30/how-to-choose-a-javascript-framework/

Not to be a total pimp, but for those who are not just interested in finding a framework, but want to know what concepts they are built upon, then I suggest this:

http://blog.reindel.com/2007/10/16/mastering-javascript-concept-and-resource-guide/

The last link is great for students like Hoffmann (comment above) who really just want to know how to get started.

Javascript: The Definitive Guide is a great book, but is best as a reference read over time. Some of the best code nuggets I got were actually from John Resig's other book Pro JavaScript Techniques.

Brian Reindel on August 15, 2008 08:08 AM

The fact that there are now common apis "working" built on top of this quicksand only means that its easier to build a castle on quicksand. Most people don't like building anything on quicksand no matter how easy it is. There are other front end technologies that can be used that don't have Javascript underlying/underminning them. Javascript in a very very very limited fashion can ease site navigation, but thats all I use it for.

BTW talk about horrors...goto the National Vulnerability Database
http://nvd.nist.gov/nvd.cfm type in javascript and watch the known unpatched exploit list against javascript scroll, 535 items. "All your sites belong to us"


anubis on August 15, 2008 08:33 AM

>I included the book because a) Resig is awesome and b) Ninjas are awesome.
>Questions?

Are you being paid by the publisher or anyone else to feature it? It bugs me because you could have as easily picked any of the thousands of ninja images that I'm sure exist under creative commons to make your point. Yet you very particularly chose a book cover and even conveniently linked to amazon.

I just find it rather patronising because I come here in good faith to read your content which I (perhaps naively) I assume to have no corporate bias. The very least you could do is declare ads as ads instead of sneakily pretending it's all part of the show.

Poor form Jeff.

Daniel on August 15, 2008 09:35 AM

I should have checked the link more closely. It's not amazon you link to but Resig's publisher. And the book (his newest I guess) is apparently in early edition release. My, what a coincidence.

Daniel on August 15, 2008 09:42 AM

"don't you fucking dare make your website UNUSABLE with JS off."
-Nicolas

You can keep USENET, thanks. For "this" site, specifically, that wouldn't make much sense... but for the web at large?

Hobbling technology because some people don't want to use it... or more severely, coding multiple versions because some people don't want to accept changes in technology is contrary to the nature of the web. Doing it TOO SOON is ill advised: coding fully generated DHTML pages back in 2002 was bad... in 2008 its hardly notable. Same as (usually) an all Flash site.

1998 was a long time ago: We use css, Firefox, streaming video, Flash, and we don't restrict web pages to a size of less than 50k... (The samurai hiding ninja cover image is 56)... Its a different web. Screw the buzzwords and feigned business interest, the Web has Changed.

Pick up your Univac* Programmer's Manual and accept that things change. The "Hooded Monk" stubborn engineer paradigm doesn't work anymore, and hasn't for a decade.

Christopher
*(The system, not the bong)

Christopher TruLove on August 15, 2008 10:15 AM

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 August 15, 2008 10:57 AM

Boy, I hope the publisher picked that image and not the author. It kind of ruins your credibility as an author when you write about JavaScript "ninjas" and have a samurai on your cover (hint: they fought each other).

Ninjas considered themselves persecuted by the samurai, whereas the samurai consider the ninjas to be just criminals (of course, in many cases they were, but not all of them).

So that cover is pretty insulting to both parties.

Practicality on August 15, 2008 11:14 AM

There is no irony here
"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. "

There is sarcasm and humor, but no irony.

Otherwise, great post.

Jride on August 15, 2008 11:44 AM

"There are several popular JavaScript API frameworks to choose from:"

The term "several" here is understated.. however the relevant ones used today are listed and I would agree that JavaScript is much more enjoyable because of these.

Mike Bobiney on August 15, 2008 01:41 PM

There is no irony here
"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. "

Oooh, swing and a miss.
He says "golden age", but means something different. That's irony.

Sarcasm is in fact a form of irony, in that it means not just something different, but the exact opposite of the writer's statement.

From http://www.sarcasmsociety.com/sarcasmandirony/
"...sarcasm is a concept that utilizes irony. In many instances, sarcasm is a remark seasoned with irony. You can think of irony as a vessel to express many things in a sarcastic way..."

Tom on August 15, 2008 03:13 PM

"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. "

You are absolutely correct and John Resig and the jQuery team simply rock.

Calvin on August 16, 2008 01:59 AM

I really like and dislike Javescript! I like the fact that Ajax is really nice and useful however the coding is kinda awkward. Thanks for the API list.

Omar Abid on August 17, 2008 02:24 AM

Writing JQuery is fun. I enjoyed coding when I implemented JQuery in my home page. Its simple and powerful.

Veera on August 17, 2008 04:50 AM

Man, that's a samurai, not a ninja!

(This applies to Javascript frameworks in addition to the book cover you posted.)

david on August 17, 2008 05:43 PM

JavaScript now works? Well, it's helped introduce a whole new class of security vulnerabilities. But I'm sure you'll be checking your code for flaws, won't you Jeff?
http://en.wikipedia.org/wiki/Cross-site_scripting

Colossal Squid on August 18, 2008 02:55 AM

Bloaty Javascript frameworks make Baby Jesus cry.

David on August 18, 2008 07:57 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 07:21 AM

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 03:14 PM

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 08:34 PM

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 12:20 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 05:56 AM

NAN: Not a Ninja

rodverap on August 20, 2008 07:11 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 05:29 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 08:41 AM

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

gooofer on August 21, 2008 11:35 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 10:44 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 05:35 PM

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 05:16 PM

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 06:10 PM

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 01: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 03: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 05:14 PM

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 05:34 PM

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 11:12 PM

Fastners Nuts, Nut Bolts, U Bolt, Check nut, Check Nut And Bolt Supplier, Nut Cracker, Nut Trees, Nuts Magazine, Nut, Space Nuts, Nut Mag, Nuts, Track Nuts, Nuts And Bolts, Jam Nut, Fisher Nut, nuts & bolts, Lock Nut, Hex Nut, Head Nut, Auto Parts, jack nut, screws, washers, screws and nuts.

windsor exports on October 22, 2008 01:40 AM







(hear it spoken)


(no HTML)




Content (c) 2008 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved.