The new Handcraft is here!

Scatter – Ajax without coding

Asynchronous Javascript and XML. With a mouthful of technical geekery, the term AJAX is actually pretty lame (no offence guys) as it mystifies a process that could’ve been described as something my mum would understand:

“Replacing webpage contents without doing a full page reload”.

Sure, Ajax can do a lot more than that, but for the sole purpose of dynamically refreshing parts of a webpage you still find yourself getting jQuery and doing javascript coding.

We think that shouldn’t always be necessary, especially when building an HTML prototype.

Scattering

We’ve been using an alternative approach to AJAX that we dubbed “scattering” (named after the process where particles deviate from their straight trajectory) and we’ve made it open source a few years back. It saves you a great deal of time when quickly mashing up your ideas in HTML so it’s a perfect match for Quplo. If prototyping HTML is your thing, be sure to give Scatter a try.

Here’s how it works

This example shows a simple sign-in link:

<div id="user-panel">
  <a href="/sign-in" rel="scatter">Sign in</a>
</div>

Notice the rel=”scatter” attribute? It makes the URL of the link be retrieved in the background. Any HTML contents that gets sent back will be checked to have matching id attributes on the current page. Positive matches will be replaced. Simple as that.

So all we need to do is send down some new HTML at the “/sign-in” URL:

<div id="user-panel">
  You are signed in!
</div>

The above example retrieves a new div with id “user-panel”. It already exists, so the entire div is overwritten with the new one. Now because Quplo is URL based, here’s a full example of how to go about it in Quplo:

A scatter example in Quplo.

A scatter example in Quplo.

Scattering can be applied to hyperlinks and forms (either GET or POST). Just adding rel=”scatter” will send all form values to the server like regular forms do, but after processing it the server can send down new HTML to be scattered on the page. The HTML that gets sent back is not limited to only one element though, you can send down as many as you want and only the top-level elements that have matching ids on the current page get replaced.

Where to start

Scatter is added to the Quplo Goodies page, but you can always grab a copy at google code. Include the script, and make sure you do an initial call to “Scatter.scanPage()”. Adding it to the body’s load event will do. Then add rel=”scatter” to any link or form that you want to have scattered, and make sure their URLs send down new HTML.

Still want to code?

Scatter may be small (only 1k minified and gzipped), but it has a very intuitive public API for embedding the scattering-process in full blown apps. Check it out on google code.

In Conclusion

Scatter doesn’t conflict with jQuery or any other javascript library, but it doesn’t require any either. The minified version is only 1kb, can be used standalone and is ideal for prototying AJAX patterns without any coding. One may argue that it may not be the best approach SEO-wise, or that it can be achieved using jQuery and some slight coding, but Scatter is just here as a simple alternative that takes the coding out of “replacing webpage contents without a page reload”.

13 Comments

Ping RSS

  • Brilliant, I must say. Why didn’t I think of that!

    Seems like a great addition to the immer growing Quplo universe.

    by Lon Boonen • Nov 30th 2010 • 13:11

  • This is actually a very elegant solution to simple AJAX interactions. 99% of the time is all you need to convert a non-AJAX site into an AHAH site that behaves a lot like one. Definitely worth a look :)

    by David • Nov 30th 2010 • 15:11

  • would be helpful if you provided a simple html project example… cannot seem to get to work but awesome concept!

    by bman • Nov 30th 2010 • 17:11

  • See also taconite or jquery-taconite – not quite the same, but also means server responses just replace parts of stuff on the page.

    by blah • Nov 30th 2010 • 19:11

  • Why the body/@onload instead of document.addEventListener ?

    by Matthew L Daniel • Nov 30th 2010 • 20:11

  • If there’s no example site, it doesn’t work.

    by Roger roger • Nov 30th 2010 • 22:11

  • [...] Eso exactamente es lo que hace una pequeña librería javascript (sólo tiene 1K) llamada Scatter. Sus creadores describen sus efectos como “Ajax sin programar”. Si marcas ciertos [...]

    Pingback

    by Scatter hace efectos “Ajax” sin Ajax « Conocimiento Libre (o lo que está detrás del Software Libre) • Dec 3rd 2010 • 04:12

  • [...] writing any Ajax is a little heavy-handed. The guys at Quplo thought so, too.So they wrote Scatter.Scatter is a JavaScript utility that makes it easy to simulate Ajax [...]

    Pingback

    by Scatter For Simulating Ajax in HTML Prototypes | ChurchCode • Dec 3rd 2010 • 14:12

  • [...] Scatter – Ajax without coding [...]

    Pingback

    by Cheatsheet: 2010 12.01 ~ 12.12 - gOODiDEA.NET • Dec 13th 2010 • 04:12

  • @matthew,

    Loading scatter can be done by any means. I think Martin didn’t want to show example code here involving attaching scatter to the domready event. It is not the point he wants to make.

    body onload is enough for a lot of cases (albeit a bit slower than domready)

    by Jaap • Dec 19th 2010 • 23:12

  • Aw, this was a very nice post. In thought I would like to put in writing like this moreover – taking time and actual effort to make an excellent article… however what can I say… I procrastinate alot and in no way appear to get one thing done.

    by Kaloian • Mar 11th 2011 • 00:03

  • [...] Scatter – Ajax without coding « Handcrafted This entry was posted in Interesting stuff and tagged interesting-stuff. Bookmark the permalink. ← In the Woods – 15 CSS Tricks That Must be Learned Daily round-up → [...]

    Pingback

    by Scatter – Ajax without coding « Handcrafted | thoughton:computing • Aug 27th 2011 • 11:08

  • [...] Scatter – Ajax without coding « Handcrafted [...]

    Pingback

    by Pinboard Links | Reverse The Web • Apr 12th 2012 • 21:04

  • Leave a reply

    You must be logged in to post a comment.