Latest in JQuery, Javascript frameworks for Web development

Responsive Web Design is a useful paradigm where in your build a web application  and it runs on any device, adjusting itself with the layout. There are a few JQuery frameworks which enable this.

From past few days, I have been working with few good JQuery/ Javascript frameworks and understanding how they works. In this blog, I will show how JQuery works in a typical AJAX based environment. What are the few aspects that improves JQuery in writing better code. I will also show you, how some of the latest Javascript frameworks addresses these and how does the future of web development looks like.

What is AJAX, how Javascript frameworks helps in improving your application?

In the simplest terms, AJAX helps in partial rendering of a page, without loading the entire webpage, when a click event happens.

In a typical web application, for retrieving the data from the server, you typically do a server post back and reload the page and rebuild the page on the server side and return to the client. The disadvantage of this approach is you will have business logic in the view.

With JQuery you can separate the concerns as below,

<div>
<ul id="productCatalog">
</ul>
</div>
<div>
<!--Right side filter-->
<legend>Smart Wall</legend>
<form>
<textarea id="searchkey" rows="2" cols="20" ></textarea>
<br/>
<br/>
<button type="submit" id="submitButton">
<i></i>Search
</button>
</form>

</script>
$("#submitButton").click(function(){
key =  $("#searchkey").val();
alert('key=' + key);
var url = "https://www.googleapis.com/shopping/search/v1/public/products?key=AIzaSyDTkzeQAoJDJb5Yvy3-bzIBXywZBK4kjkA&country=US&q="+key+"&alt=json"
alert('url=' + url);
$.getJSON(url, function (data){
// Format the data using the catTemplate template
alert('data=' + data);
$("#flickrTemplate").tmpl(data.items).appendTo("#productCatalog");
});
});

</script>

<include src="./datatemplates/productcatalog.html" />

productcatalog.html looks as below,

 <script id="flickrTemplate" type="text/x-jquery-tmpl">
<li>
<div>
<a href="${product.link}" target="_blank" >
<img src="${product.images[0].link}" alt="" width="150px;" border="0">
</a>
<h5>${product.title}</h5>
<p>Price: $ ${product.inventories[0].price} &nbsp;&nbsp;<a href="${product.link}" target="_blank" >Buy</a></p>
</div>
</li>
<script>

How do you achieve separation of concerns in Javascript frameworks?

If you notice in the above example, there is no business logic in the html view. The magic is achieved by including jquery.tmpl.min.js in the html page as below,

<script src="assets/js/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>

The data binding in the template happens when you use ${product.link} syntax . This is an Underscore templating syntax. There are some other good template support in JQuery Handlebars + Mustache  to name a few.

How advanced frameworks take this further?

There are lot of great Javascript frameworks and there is a good article comparing them.

My personal favorite is Angular.js . As you notice they have much higher level abstraction like object binding, dependency injection on the client side to name a few. Angular.js has good documentation and tutorials to learn from.

About these ads

One thought on “Latest in JQuery, Javascript frameworks for Web development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s