Ajax: Using the Scriptaculous Updater in Seaside

My favorite new tool is Scriptaculous, or more accurately, the Seaside integration of it. It's completely changed how I do web development and made my life a lot easier.

Since I've been using it, I've begun to think of web apps differently. I've begun to think of them simply as applications, forgetting about the whole page refresh thing. Seaside made me forget about state, and its callbacks allowed me to tie user actions directly to commands. Something like...

renderContentOn: html
    html anchor on: #search of: self.
    html div: self searchResults.

But I still knew when that was clicked, I'd go into the whole page request response re-render thing. But now, with AJAX so readily available via Scriptaculous, I also consider what needs to change on the page in response to an action. I only re-render that single piece, thus avoiding the page posting back and making the app look much snappier, and more impressive to the end user. So the code becomes...

renderContentOn: html
    html anchor
        onClick:(html updater
                      id: #results;
                      on: #renderResultsOn: of: self);
        on: #search of: self.
    html div id: #results; with: [self renderResultsOn: html].

renderResultsOn: html
    html text: self searchResults.

Using Scriptaculous almost forces one to factor your code well because you find yourself wanting to render each part of a page, individually, AJAX style, quite often. Another benefit of this style, is page size goes way down, since I don't render a bunch of hidden stuff and show and hide it with Javascript like I used to, rather, I simply render pieces only when necessary. I'm curious how this style of programming will affect server load and user experiences, I guess I'll find out soon enough.

Comments (automatically disabled after 1 year)

seaside newbie 6497 days ago

Scriptalicious == scriptaculous ?

Ramon Leon 6496 days ago

Yup, fixed now, I hadn't realized I was mis-spelling that.

Ramon Leon 6495 days ago

And #on:of: is just a shortcut for that verbose version, all I can say is make sure you're running the latest Scriptaculous and Seaside. I run only about 5 or so changes behind the bleeding edge versions. Seaside 2.7 and latest Scriptaculous.

Ignorant Bystander 6474 days ago

Do you have any examples of seaside applications you've written?

Ramon Leon 6474 days ago

Publicly, not yet, other than what I post on this site. I've been working on something at the office, several things actually, but we haven't released them yet, though we hope to soon.

Anxious Bystander 6455 days ago

Wow! I cannot tell you how incredibly helpful this series of posts has been for me.

Any chance you are digging into Magritte and will be shedding some light on the Seaside - Magritte - Scriptaculous trio? (I believe the last 2 don't quite play together yet).

Thanks a ton.

Ramon Leon 6454 days ago

Thanks, glad you liked it. Yes, I'll be doing something soon with Magritte, in fact I posted a screencast this morning using it. Also, it's not that they don't play well together, they certainly can, since Magritte is totally pluggable. It's just that currently, there aren't any ajaxy components, but you can write and use your own.

Anxious Bystander 6454 days ago

Yes, I saw the screencast. I liked how you automated the generation of Magritte descriptions. Will Tsunami++ at some point fit in?

Look forward to more!

Ramon Leon 6454 days ago

Tsunami, ha, didn't know anyone knew really noticed that. Yea, it'll fit in now actually, Tsunami just does accessors with objects and #doesNotUnderstand instead of requiring code. I'll do something showing that soon.

Anxious Bystander 6454 days ago

Could you share a couple of tips? - Could you share your code for generating the Magritte descriptions? - How do you put it on a menu &/or keyboard shortcut


Ramon Leon 6453 days ago

Sure, I just updated my squeak image, it now includes my custom browser with those modifications. Search for class named SentorsaCustomBrowser. I also updated all the packages to latest versions, added a few, removed a few. I'll be keeping this image up to date as my tastes change.

Anxious Bystander 6452 days ago

Thanks Ramon. For all your helpfulness.

I noticed that the browsers in your image are very about allowing the mouse to re-size their internal panels, compared to the standard Browser (on Win). Have you had the same?

Ramon Leon 6452 days ago

I think that's just the resize on all sides preference, it's not anything special I did.

about me|good books|popular posts|atom|rss