Intercooler.js Declarative Ajax
Written by Mike James   
Thursday, 24 April 2014

How can you make a dynamic client without writing a line of client side JavaScript? Easy - use intercooler.js to implement declarative Ajax. 

The client - server relationship in a web page isn't an easy one. How do do you best link static HTML entities with server end points? One particularly easy way is to make use of Intercooler.js, which makes Ajax declarative.

intercoolericon

The biggest problem intercooler.js has in attracting new users is getting across the idea of what it does.

In a standard Ajax application you set up some HTML to provide the user interface and then write some code to respond to what the user is doing by fetching data from the server using Ajax and then using the data to update the HTML. For example, if you set up on the server a URL that returns the number of an item in stock, then you can create a button that fires the Ajax request, get back the JSON data, parse the JSON data and finally load the stock level into a suitable element. 

This is all manageable, but it is a lot of code and most of it is fairly standard. Intercooler.js lets you do the same sort of dynamic update but without having to write any client side code at all. 

The first change is that the server has to return an HTML fragment that replaces the element's content.  So, for example, you can arrange to display the stock level using:

<span ic-src="/stocklevel">
 No Stock Level
</span>

where the URL identifies the endpoint that has the data that the span will display.

To actually get the stock level you have to use an action attribute with another element. For example if you set up a button using:

<button ic-post-to="/stocklevel">
Get Stock Level
</button>

then when the button is clicked a post is sent to the URL and the response from the server is automatically inserted into any elements bound to it - in this case the span. 

Notice that you now have full client-server update but without a single line of clientside code needing to be written. This is the sense in which this is a declarative approach. You bind elements to URLs as their data sources and set up other elements with action attributes to the same URLs and everything just works. When the action occurs the bound elements are updated. 

The principles are:

  • HTML Elements are declaratively bound to REST-ful HTTP endpoints via the standard HTTP verbs (GET, POST, etc.)
  • Dependencies between elements are encoded in their REST-ful path bindings
  • Server responses are HTML fragments that will be swapped in place of an existing element's content

Of course there are a few more intercooler.js attributes that you can use to achieve more complex behavior but this is the basic idea.  

If you find the idea of dynamic updates without having to write custom client side code appealing then you need to read the intercooler.js manual - it is all fairly easy. 

The pattern in use is sometimes called a Partial View Controller PVC;

intercooler

Credit: Intercooler.js web site

Other examples of PVC frameworks are Turbolinks and pjax. 

intercooler.js is open source, needs jQuery to work and it can be used on its own or with a range of other frameworks.  

One of the big advantages of intercooler.js is that it is so simple and it is easy to see the relationships between elements in the HTML.

 

intercoolericon

More Information

intercooler.js

Related Articles

Adobe Snap.svg JavaScript Library        

JSON Is Now An ECMA Standard       

 jQuery, Promises & Deferred      

Vanilla JS Used On More Sites Than jQuery        

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, FacebookGoogle+ or Linkedin,  or sign up for our weekly newsletter.

 

Banner


AWS Adds Support For Llama2 And Mistral To SageMaker Canvas
12/03/2024

As part of its effort to enable its customers to use generative AI for tasks such as content generation and summarization, Amazon has added these state of the art LLMs to SageMaker Canvas.



Opaque Systems Introduces Gateway GenAI Solution
14/03/2024

Opaque Systems has announced an early access program for Opaque Gateway, software designed to address data privacy, security, and sovereignty concerns in managing GenAI implementations.


More News

 

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

Last Updated ( Thursday, 24 April 2014 )