Deferred in JQuery

Web applications are kept alive by data. These data usually retrieved from data sources. AJAX (Asynchronous JavaScript and XML) is a technique used to communicate with web servers to send and receive data asynchronously. Often you'll send a ajax request, wait for data to come inside callbacks and execute rest of the flow. Ajax uses XMLHttpRequest object to communicate with server side.


XMLHttpRequest object
Is used to exchange data between client and server. Using this you can update web pages without reloading or send data to server in background.

Below is how you can create a simple ajax request using jQuery. You can pass object to as a parameter which contains settings for the ajax request. jQuery.ajax() will return a jqXHR object. jqXHR is a superset of native XMLHttpRequest. As of jQuery 1.5, jqXHR object implements the Promise interface.

There are variety of options you can use to customize the ajax requests.



Also you can use jQuery.ajaxSetup() to set defaults for future Ajax requests but using this not recommended.

When you have multiple ajax requests to send you'll need some mechanism to chain them to have correct sequencing you desire. Also you'll need to make the requests asynchronously to make browser not getting freezed (you can make Ajax requests synchronous but it is not advisable). in jQuery you can use Deferred for this.

Read More

The Comparison of Continuous Integration, Deployment and the Delivery

What appears in title seems familiar? It should because these are the concepts (or you can say techniques) we use to deliver our products to stakeholders. Even though Continuous Delivery, Continuous Integration and Continuous Deployment are the buzzwords today most people often misunderstands the difference among each. 

First we'll look at what each of these are,..

Continuous Integration

Requires developers to integrate code into a shared repository or branch frequently. Each check-in of code is verified by an automated build. The idea here is to detect problems early.

Advantages

• Detect issues early and address them
• No more long integration processes
• Quick stakeholder feed backs
• You can make sure your product is stable

Continuous Delivery

This is deploying into a environment but to a set of users which can be QA or some customers for continual review and inspection. This is somewhat similar to Continuous integration but this can feed business logic tests which cannot be automated always. Continuous delivery ensures that the product is always in release-ready state.

Continuous Deployment

Deployment or release the code to production environment as soon as its ready. Any testing is done prior to merging and in a production like environment. This should be a automated process where anyone could do it.

After a deploy logs must be inspected to detect if the key metrics are affected (such as response time). See how Atlassian do continuous deployment.

http://guides.beanstalkapp.com/deployments/best-practices.html

References

Thoughtworks - Continuous Integration

Differences between 3 practices by assembla

Continuous Delivery.com - Difference between Continous Delivery and Deployment

image credit : qubiz.com

Read More

Performance tuning JavaScript

In this article we'll look at what is performance, 
why it is important, different ways of tracking performance issues 
and ways to solve them.

What and why performance is important?


Performance tuning is very important when an application gets larger. But it can be very crucial to retain the value of the software. When developing JavaScript applications there are variety of tools which you can use to tune the performance of a web application.

Memory can be held by an object in 2 different ways. directly by the object itself or implicitly by holding references to other objects. 

Different types of performance issues exists!

Memory leaks 
Memory leak is a gradual loss of available computer memory. 

Identifying performance issues

Before do any kind of performance tuning you need to identify what are the performance issues I have. You can use different tools and mechanisms to identify existing performance issues like memory leaks. 

Using Chrome Developer Tools for profiling

Use timeline in Developer tools to do profiling. Start with reading this introduction. 

Things to take

Memory leaks in JavaScript is based on reference counting
See JavaScript memory profling with Google Chrome


Using timers

Measure time to execute a function (SO) 

Using Google Chrome

finding JavaScript memory leaks with Chrome (SO)

You can also use V8 benchmark suite to profile JavaScript performance and identity bottlenecks. Checkout this link for more information. 

Not only in Google Chrome, but there are tools available in other major browsers as well. 

Writing memory efficient code is another important thing. You can also optimize existing JavaScript code in different ways.

Memory management in JS
http://stackoverflow.com/questions/23506064/how-do-you-detect-memory-limits-in-javascript
http://stackoverflow.com/questions/2936782/javascript-memory-limit

Performance of popular JavaScript MVC frameworks
http://www.filamentgroup.com/lab/mv-initial-load-times.html

Tips from W3Schools
Best way to profile JavaScript execution DOM interaction is expensive
http://andyshora.com/how-bad-is-dom-interaction-javascript.html 
http://stackoverflow.com/questions/8750101/multiple-small-dom-operation-vs-one-large-dom-operation 
http://stackoverflow.com/questions/6022396/too-many-dom-elements?rq=1
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
 

Memory leaks in JavaScript - Stackoverflow

Resources
http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/

Perceived Performance

image credit : devbridge

Read More