Intercooler.js – A JavaScript-optional Ajax library

by jgj • 12 years ago

72 17 12 years ago

carsongross5• 12 years ago

Hey Everyone,

I'm the guy who built this, based on my own experience and DHH's comments on the Basecamp2 architecture. It's an attempt to keep things simple and lightweight while still getting many of the UX advantages of newer MVC frameworks.

I've tried a few different hooks for the project:

"Javascript-free AJAX"

"A simpler AngularJS"

"Declarative AJAX"

Any feedback on the best way to sell it would be appreciated.

Also, if anyone is interested in working on the project, there are two major areas left:

- Getting the History API smoothed out

- Making transitions pluggable

Please let me know if you are interested: @carson_gross

Drakim• 12 years ago

I would be careful in using the terminology "JavaScript-free".

What you mean by that is obviously that the user of the library doesn't need to write JavaScript to use your library. But when it comes to web design, here is actually such a thing as writing functionality that works without JavaScript enabled in the browser (often called graceful degradation).

Normally I would not fuss over such a detail, but since literal JavaScript-free/optional functionality is an actual topic in webdesign, I would encourage you to pick a better phrase for your library (which runs and requires JavaScript), as to avoid confusion that the library itself would work without JavaScript enabled.

I like the phrase "Declarative AJAX", although it might be a bit on the technical side of your target audience.

carsongross5• 12 years ago

Good points.

When I built the library it was partially out of frustration at how hard much code it was to build simple AJAX functionality out in jQuery, ember, etc. and that's reflected in the original hook, but, upon reflection, it can come across as both negative and confusing.

I think I'm settling on "Declarative AJAX"...

untilHellbanned• 12 years ago

I like the attempt to not require the developer to write more JS, but why didn't you just add these data attributes to "a" tags? The functionality of those tags are thrown away, e.g., the "href", and "span"s aren't semantic.

carsongross5• 12 years ago

I can't say I thought too much about it. I've used spans and divs as buttons in bootstrap, so I didn't think to restrict the attributes to only be on 'a' tags.

I guess one post hoc rationalization is that the library isn't designed to replace anchors and, where they make sense, you should just keep using them.

But I'm just making that up. ;)

netghost• 12 years ago

So along those lines, you could make it work with existing attributes. A blank `ic-src` could check for an `href` attribute on an element. An `ic-post-to` and friends could look for a parent form and grab the `action` attribute.

All in all, I think it's a neat idea. Since you give Rails examples, it might be nice to include some Rails helpers as separate project/gem that make it so you don't need to write so much boiler plate in your views.

malandrew• 12 years ago

This is also what I was thinking. By embedding the PVC metadata in the link you get fallbacks for free if the server is capable of rendering everything when the link is actually requested instead of intercepted by the framework.

I would certainly be interested in a project that does this but embeds all functionality in hyperlinks.

tg3• 12 years ago

I noticed that jQuery is required for Intercooler. If the purpose of the library is to enable nice UI interactions without writing jQuery, consider distributing a version of Intercooler that has jQuery bundled with it, or better yet just the parts of jQuery that Intercooler uses.

Looks like an interesting library, especially for backend focused devs.

stepmr• 12 years ago

This is awesome. Have you checked out Eldarion's declarative ajax project (https://github.com/eldarion/eldarion-ajax)?

25cf2• 12 years ago

Interesting, but I don't know if I would be able to use this for more complex uses of ajax, e.g. pjax/phah, etc. But I could definitely see how this could possibly be used over Angular for certain projects.

carsongross5• 12 years ago

I think it holds up well, compared w/ pjax at least. You can check out the tutorials for examples where I do some somewhat complicated stuff with it.

Search for "Implementing A Dynamic Progress Bar" on this page:

http://intercoolerjs.org/intro.html

for a fairly elaborate example.

That being said, Intercooler is not designed to handle 100% of the AJAX cases you might run into. If you have a crazy dynamic UI, like a live graph or drawing canvas, this isn't the right tool.

But, it will play well with whatever the right tool is. :)

pas• 12 years ago

Excuse me, what does phah mean?

25cf2• 12 years ago

http://www.xfront.com/microformats/AHAH.html

simonw• 12 years ago

Hhhhhhhhhhhhhhhhhhhhhhhthhhhh

zo1• 12 years ago

Interesting library + concept. I'll definitely keep an eye on it for future projects.

Some minor issues: The video tutorials are very hard to follow. I say this as someone that has never worked with Rails or Ruby.

So when you start talking about "routes", "partials" and I see code referencing "paginate" and erb files on your server code... In very alien-looking syntax, I might add. It makes for a very hard "tutorial" to follow.

I would definitely suggest making server tech-agnostic tutorials. Where you simply talk about the urls being requested, what they return and how they interact with the client-side. Please exclude specific server-side tech, no matter how cool or "fancy" it is, or how knowledgeable you are in it.

Intercooler.js – A JavaScript-optional Ajax library

Related Stories