Intercooler.js – A JavaScript-optional Ajax library

Intercooler.js – A JavaScript-optional Ajax library(intercoolerjs.org)

72 points by jgj 12 years ago | 17 comments

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

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

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

stepmr 12 years ago |

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

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.

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.

25cf 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.

carsongross 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?

25cf 12 years ago | | |

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

simonw 12 years ago |

Hhhhhhhhhhhhhhhhhhhhhhhthhhhh