Building Responsive Web Apps Using jQuery Libraries

DZone 's Guide to

Building Responsive Web Apps Using jQuery Libraries

· Web Dev Zone ·
Free Resource

Many companies have jumped on the jQuery bandwagon, because of the ease it provides in development of web applications. Besides, developers find jQuery easy to learn and implement, owing to its short and simple code. But regardless of the unparalleled features it provides, it somewhere fails to offer desired solutions to some issues.

For instance, jQuery does not provide any clear way to design user interface (UI) for sophisticated web applications. What makes such a task difficult to be accomplished, is because of manual DOM (Document Object Model) manipulation and event handlers. One best way to achieve such an objective requires you to look for a library that helps in setting up a solid connection between the data model and UI of your web app. This is where JavaScript libraries such as Knockout.js and Total.js come in handy. These libraries help in creating responsive web app fully-loaded with great features.

What's more? The apps built using the Knockout.js and Total.js libraries are highly scalable and performs flawlessly. Most importantly, both of these libraries help in building complex app models. Through this post, I intend to provide you a good knowledge of how you can use the Total.js and Knockout.js for building highly responsive web apps.

An Overview Of Total.js and It's Criteria to Build an App

Total.js is a modern web application framework based on the MVC architecture, and helps in creating real-time applications that can run on any platform. The architecture of Total.js makes it perfectly-suited for building big applications (for enterprises).

In order to begin working with Total.js framework, you just need to add the below given code snippet in your “models/views/controllers” folder. In addition to this, Total.js even provides an extremely simple routing mechanism that requires you to perform mapping on each route of a JavaScript function.

exports.install = function(framework) {

framework.route('/users', listPersons)

framework.route('/users', addPerson, ['post'])

framework.route('/users/{id}' updatePerson, ['put'])

framework.route('/users/{id}' deletePerson, ['delete'])


function listPersons(){}

function addPerson(){}

function updatePerson(id){}

function deletePerson(id){}


Total.js functionalities are quite similar to Node.js framework. Besides this, the ample number of libraries present in the npm makes Total.js a reliable framework. Additionally, you get access to a wide collection of built-in tools as well as options that helps develop web applications in a smooth manner.

Furthermore, you can carry out many different functions such as websocket administration, file operations, etc. Plus, you can even create your own custom code for building modules tailored to your needs.

An Overview of Knockout.js

Knockout.js is another popular JavaScript library that helps in creating responsive user interfaces. Plus, it provides an uncluttered underlying data model. This framework is based on the Model-View-View-Model (MVVM) pattern. Let us now look at the key concepts of Knockout.js:

1. Declarative Bindings: With the help of this feature, Knockout.js provides helps connect different UI elements to your data model. Usually when the DOM is manipulated using JavaScript, you'll probably get the broken code while making modifications to the DOM hierarchy (or element IDs) in the future. But, thanks to declarative binding, not even a single change will be reflected in the parts of your UI when the DOM is being changed.

2. Templating: Knockout.js features flexible templates that provides a simple way to create complex user interfaces (UIs), containing nested or repeating blocks. Below are a few functions, you can perform with your templates with the help of Knockout.js framework.

  • The template includes ‘if’ parameter that helps to handle the output having a null value.
 <div data-bind="template: { name: 'nestedtl', 'if': myNestedObject, data: myNestedObject }"></div>
  • The template also consists of a ‘foreach’ element that gives you the ability to embed extra elements to the template. For array that is observable and changeable, the knockout automatically adds or removes DOM nodes instead of downloading the entire template.
 <ul data-bind="template: { name: 'itemtl', foreach: items, templateOptions: { selected: selectedItem } }"></ul>


Knockout also comes loaded with its own utility functions just like Total.js framework. These functions help in performing a wide range of tasks in the most efficient manner possible. For instance, the utility function such as ko.utils namespace can be used to build an app. Some other popular utilities of Knockout.js framework are: extend and unwrapObservable.

Let's Wrap Up!

No doubt, jQuery has proved a great replacement to the inconsistent DOM API. However, as web apps become non-trivial, they become more expensive and difficult to maintain. Thankfully, jQuery libraries, namely Knockout.js and Total.js offer right tools and functions required for responsive web andmobile application development   – that works well with all of the major devices.

Just remember that Total.js, by default, minifies web technologies like HTML/CS,JSS. And so, you might difficulty in debugging Javascript, if the code is written within the <script> tags in the markup. And if you would like to work with Knockout.js, keep in mind to place the code regarding the view model in a separate JavaScript file. And then, simply set the value of js-minify flag to false (that can be found in the config-debug file).

html5 ,javascript ,responsive design

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}