Skip to main content

Posts

Showing posts with the label JavaScript/jQuery

Backbone.js - Creating a RESTful CRUD application

I've been trying to build a CRUD application using Backbone.js and was able to retrieve a set of records into a collection using the fetch method. To perform other operations i.e. Create, Update and Delete I could always invoke Backbone.sync but I was exploring on the lines where this is performed implicitly. The fetch method sends an implicit GET request on url specified in the Collection, similarly I was looking for other methods that allow you to send POST, PUT and DELETE requests to the url. While I was building this application, I did come across a condition where Backbone was not sending a request. I was finally able to figure out as to why that happened and then it was a simple fix in my Backbone application as well as in the REST service.

Backbone.js - Parsing the response from the server

From past few weeks, I've been learning Backbone.js in great detail and I think it's a great framework that helps you modularize your code easily. Last week I wrote about 'Model validation in constructor' and then started to look at Collections in Backbone. The Model objects can be viewed as table rows and the Collection as a table. A Collection can declare the model property and indicate what kind of data it will hold. I was looking into ways in which a Collection can be populated by fetching the model data from the server. One way to do that is to ask the Model to fetch the data and then add the response to the Collection. The other way of doing this is to fetch the Collection data directly from the server i.e. instead of defining a Model you create a Collection by fetching the data from the server. Usually when you send a request to the server, the response data is essentially a collection of objects. In this case you really don't need a Model to be defined.

Backbone.js - Model validation in constructor

I've started to look at various Design Patterns in JavaScript and one of most popular Design Patterns in any language is the MVC Pattern. In JavaScript, there are various libraries out there which helps in modularizing the application. However, I've heard a lot about Backbone.js and I thought this would be the right time to give it a try. I've not learnt Backbone completely, but I've gained a good understanding of the Model part of the MVC in Backbone.

Pushing Ajax responses using Observer Pattern in JavaScript

Last week I'd played around with couple of design patterns in JavaScript (Constructor and Module pattern). I really liked the Module pattern i.e. the approach taken in JavaScript to enable encapsulation of data in a Class (functions in JavaScript). I was building an application using these Design patterns but found that making Ajax request inside a function in a module was not the right approach. JavaScript would send a request and start executing the next statement. I wanted to use an approach that would push the data from the Model whenever there was some new data available. This lead me to try the 'Observer pattern' in JavaScript.

Module Pattern in JavaScript

Couple of days back I wrote about the Constructor Pattern in JavaScript wherein I explained how classes can be simulated using functions in JavaScript. Also, on how the prototype property can be used to extend another class. The other important element in any of the Object-Oriented programming language is the concept of encapsulation i.e. providing private members that can be accessed only by the members of the same class. I came across the Module Pattern today and found that it is quite easy to achieve encapsulation in JavaScript. Though the variables in JavaScript can't be declared as private or public, but closures can be used to emulate encapsulation.

Constructor Pattern in JavaScript

Over the last few weeks I've been learning Object-Oriented concepts in JavaScript and have been building applications on top of it. I've an understanding of Object-Oriented concepts in many of the Server side programming languages and was trying to draw parallel lines with JavaScript. As it turns out, JavaScript is a class-less language but the concept of classes can be simulated using functions. In JavaScript, functions are not primitive types but are special kind of objects and hence you can set properties on them and can also invoke methods on them.

Uploading chunks of a large file using XHR2

I was having a conversation with my college friend about the enhancements in XHR2 and I was showing him how one can upload a file to the server using plain Ajax. He asked me whether I can upload a large file to the server such as a video file. I tried doing that but was bumped when the server reported with 400 error telling me that the 'POST size has exceeded maximum limit'. This got me thinking whether I can upload chunks of a large file to the server. I referred to the FileSystem API and came across the slice method that allows you to get a fragment of a file.

Using Source binding and templates in KendoUI

Yesterday I explored the MVVM design pattern in Kendo UI that allows the model data to be separated from the view. Also, whenever data in one of them changes it is reflected in the other. Today I was exploring various data bindings that can be used and one that caught my attention was the source binding. The source binding allows you to set the HTML content of the target element by rendering a Kendo template with a View-Model value. For example, say you have a combo box (select tag) and you want to populate it with data (option tags), then instead of writing several option tags you can define a template and provide source binding for the same. This will show a list of options from the ViewModel.

Using Model-View ViewModel design pattern in Kendo UI

Kendo UI is completely new to me and I got introduced to it when Brandon Satrom left Microsoft and joined the Kendo UI team. I had interacted with him when I was working on jQuery ‘Pinify’ plugin. Kendo UI is a HTML5, jQuery based framework for building both web and mobile applications. It not only provides a set of UI widgets and other data visualization components but also a framework for data binding, animation and drag-and-drop. Whilst I was looking into the framework I stumbled upon the Mode-View ViewModel (MVVM) design pattern built into it.

Anchor elements in jQueryMobile referring to the same page retain the state

This week I started to learn jQueryMobile and was going through the online documentation that explained the basics. While I was trying out the sample examples, I came across an issue that I thought I’ll share with you. I had posted this on the jQueryMobile forum but I didn’t receive any solution to this. The issue here is when you have two anchor elements with its ‘href’ attribute pointing to the same div (#child data-role=”page”) with one marked as a button and the other marked as a popup dialog, then which ever button you choose first its action will be applied to the other button as well. Say if you click the second button that shows the dialog box containing the page it works fine, but now when you click the first button it shows the dialog box instead of showing it as a page. This is how it works the other way too i.e. if you click the first button the page is shown (as expected), but on clicking the second button it shows the page instead of displaying it as a dialog box.

Using HTML5's Navigation Timing API to measure Page Load speed

To measure the time taken for a page to load one can use the Date object in the head section and calculate the time taken for the page to load in window.onload function. However, it calculates the time taken for the page to load after the first bit of JavaScript in the head is executed. This doesn't indicate the time taken by the web server to serve the requested page. The Navigation Timing API introduced in HTML5 provides data that can be used to measure the performance of a website. The API provides a PerformanceTiming interface which contains several attributes that can be used to get end-to-end latency data.

Using HTML5's PageVisibility API

Today I stumbled upon the PageVisibility API introduced in HTML5, which gives developers an opportunity to improve the performance of a web page and to better the user experience. Whenever a user opens a new tab or navigates to another tab, the behavior of the current page from which user navigated can be controlled using this API. Consider a webmail client that is trying to look for new mails every two seconds, if a user opens a new tab or minimizes the browser window then retrieving mails every two seconds would expend resources, whilst the user is not actively viewing the page. Here the PageVisibilty API would come handy and would allow developers to alter the behavior of the web page.

Building resposive Web applications with HTML5 Web Workers

One of the key aspects of building web applications that deliver great user experience is to build applications that are highly responsive. Browser vendors are trying to improve the speed of their JavaScript engines and are enabling the web applications to perform well. Since JavaScript was introduced, there has been no way to execute the code outside of the browser UI thread i.e. it has remained single threaded. The Web Workers API introduced in HTML5 enables web applications to run scripts in the background, independent of the UI thread.

The performance of a web application can be greatly improved by using Web Workers since each worker would spawn its own thread. These threads can be used to perform computationally intensive tasks in the background without affecting the performance of the entire application.

Kiss My App: Collaborating using HTML5 Canvas and WebSockets

The Canvas element introduced in HTML5 is the most talked about feature in HTML5. It allows a developer to draw on a rectangular area and the ability to control each pixel in it. I'm not a very big fan of powerful graphics and animation on the web, however I wanted to try Canvas in conjunction with another popular feature - Web Sockets. The idea is to use the mouse events to draw on the Canvas and then send the coordinates to remote clients using Web Sockets. I have used the pusherapp Web Socket library in my example and this video shows how two clients can play a Tic-Tac-Toe game:




As you can see in this video, the mouse movements made on the canvas will draw lines on it and also cause lines to be drawn on another browser window.

De-obfuscating javascript code in Chrome Developer Tools

I had blogged about JavaScript debugging with Chrome Developer Tools some time back, wherein I have explained how these developer tools can help in debugging javascript code. Today Google Chrome 12 was released and my Chrome browser was updated to this version. As with every release, there have been some improvements made on performance, usability etc,. One feature that stood out for me is the ability to De-obfuscate the javascript code.

What is Minification?

Minification is the process of removing unnecessary characters such as white spaces, comments, new lines from the source code. These otherwise would be added to make the code more readable. Minifying the source code helps in reducing the file size and thereby reducing the time taken to download the file. This is the reason why most of the popular javascript libraries such as jQuery are minified. A minified jQuery file is of 31 KB in size where as an uncompressed one is about 229 KB. Unfortunately, debugging minified javascript file…

Getting notifications of Network Status changes using online and offline events introduced in HTML5

I was working on an online\offline application, wherein I wanted to display a set of records stored in the local database to the user when he goes offline. The only way to determine the network status is to send a XHR request to the server at particular time intervals (polling). If the server responds back with some data it is understood that the user is online. However, I came across two event listeners 'ononline' and 'onoffline' which are triggered when the network status changes.

Drawing paths on Google Maps, the Indiana Jones way

I was looking into the Google Maps API the other day and came across some APIs which are really cool. I came up with a use case to show path from the current location to a particular destination entered by the user. I was also trying to achieve that Indiana Jones like effect on the map i.e. to show an animation of the path being drawn on the map.


The idea here is to show the moving path until the destination is reached and also to pan the map accordingly.



As seen in the video, a marker is added to the map specifying my current location (Bangalore, India). The current location data is retrieved using the HTML5’s Geolocation API. Once the latitude and longitude information are available, a marker can be added to the map. You can now enter one of your favorite destinations in the text box provided and click the Submit button to see a path drawn from your current location to the destination. The path is drawn using the Google maps ‘Polyline’ API.

JavaScript debugging with Chrome Developer Tools and some tips\tricks

Last Friday I was having a conversation with Ben Nadel and Jonothan Joyce on Twitter about examining the content of a JavaScript object. While the firebug add-on for Firefox comes in very handy in examining the request\response header and for various other internals, I can’t really debug the JavaScript code by adding breakpoints. I use Google’s Chrome browser for my day to day web application development. Both Chrome and Safari provide ‘Developer tools’ which help the user not only in debugging the JavaScript code but also in examining the content of an object at any point in time by providing watch expressions. What I like about debugging in Chrome is that it is very much similar to how I debug my server-side code using ColdFusion Builder or Eclipse. This certainly reduces the learning curve to understand debugging in a browser. However, Chrome has more to give when it comes to debugging web applications.
In this post I’ll explain how Google Chrome can help you debug web applications …

Game created with jQuery

Last week I had published an application on facebook "Which smartphone is for you?" which was created with javascript and HTML. I have always tried to experiment things with jQuery and HTML. I thought of making a good use of my jQuery skills in creating a game (a simple one - but still fun to play). Today I'm launching this game and it is titled "Shoot your friends". This application (game) pulls the pictures of your facebook friends and you can shoot them. Once you have hit enough, it will allow you to publish the results. You can either let the shot ones know that they have been shot by you or just publish the story to your wall. Login to your facebook account and try it out.

Which smartphone is for you: http://apps.facebook.com/sagarganatra/
Shoot your friends: http://apps.facebook.com/shootyourfriendsapp/