Over a million developers have joined DZone.

Latest in JQuery, Javascript frameworks for Web development

· Web Dev Zone

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

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

Make the transition to Node.js if you are Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Krishna Prasad, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}