Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Latest in JQuery, Javascript frameworks for Web development

DZone's Guide to

Latest in JQuery, Javascript frameworks for Web development

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

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 DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}