jQuery Deferred – one step closer to desktop apps

Every time I forget why I like jQuery, they keep reminding me. Not too long ago I came across jQuery deferred (even though it was added already in JQuery 1.5) and I immediately liked it. I feel this feature brings the web application development a bit closer to the desktop development. Deferreds simply let you add multiple callback to long lasting operation calls like Ajax requests. Long lasting operations without JQuery Deferred If you haven’t used deferreds, this is probably how you had done long lasting actions like ajax calls. Long lasting operations like ajax require a callback function. In this case the callback is given as a parameter to the caller. This is fine, but there is a way to add a callback separately from the call. Try it This is actually the simplest example of using Deferreds. JQuery ajax methods (get,post,ajax…) return an object which you can add callback methods to it. Why is it better? Simply because it lets you keep the logic of execution and the logic of the result separated. This makes a more readable and maintainable code. So what is a ‘Deferred’? Deferred is an object which lets you add multiple callback methods to Continue reading jQuery Deferred – one step closer to desktop apps

JavaScript encapsulation & the module pattern

Encapsulation is one of the key features of object oriented programming languages. In languages like Java, it is very straight forward concept to implement. Since I know JavaScript is considered an OO language, I decided to try to understand once and for all how to implement encapsulation in JavaScript correctly. Let’s say we have a function with one private field and one public field: Try It The fields are of course undefined since we need to call f1() in order for them to have values. Now let’s create an object from that function: Try It After instancing, x and y both have values, but of course, only y is public. Now lets encapsulate field x. Try It This is the most basic encapsulation and it works. But this approach has a problem, f1() is in fact a kind of constructor. Whenever an instance will be created than the getter method will also be created. This approach is not the preferred way to create methods in JavaScript. The preferred approach in JavaScript is to create the methods attached to the prototype. In this way they will only be created once. But this approach also has a problem, we cannot use it Continue reading JavaScript encapsulation & the module pattern

How to change pages in a web application in the age of HTML5

More and more web sites stop to use the old way of request-response page switches, where each page switch refreshes the entire page in the browser. Instead they refresh just the data and the page itself is not reloaded. This way has better for performance and it also makes a much smoother user experience. You can see a great example in github where you click on one of the files. In this post I am going to explain how this is achieved step by step. My Demo Requirements: For some reason, almost all of the examples I saw on the internet about this used jquery in one way or another. This post is NOT using any third-party libraries except for history.js script for browsers which do not support the history.pushState feature. I took this script from github. Step 1 – handle links We want that pressing a link will trigger a JavaScript function. You can do that in many ways. I have done it like this: It will go over all the links in the page and will attach a call to function goto(), but it will do it just for the links which points to inner pages. The goto() Continue reading How to change pages in a web application in the age of HTML5

4 JavaScript trivia questions that may help you understand the language a bit better

The next 4 Javascript questions may seem easy to some of you, but I am sure that more than a few will get confused. I believe that these 4 simple questions will help you understand a key feature of the language. Question: What will happen after executing the next JS code? 1. Nothing 2. alert ‘>undefined’ 3. alert ‘>1’ 4. alert ‘>2’ Answer: Nothing, because outer() returned a function but it wasn’t executed. Question: What will happen after executing the next JS code? 1. Nothing 2. alert ‘>undefined’ 3. alert ‘>1’ 4. alert ‘>2’ Answer: alert ‘>2’, because the x that inner() uses is the same x the outer() uses. Question: What will happen after executing the next JS code? 1. Nothing 2. alert ‘>undefined’ 3. alert ‘>1’ 4. alert ‘>2’ Answer: alert ‘>undefined’. Inner uses a variable x which is different than the outer x. The inner x is never initialized Question: What will happen after executing the next JS code? By now the answer should be obvious: alert ‘>3’ .