jQuery video series: The making of Address book


Hello friends,

I really enjoyed making these screen-casts for the first time and it was an awesome experience. I personally believed that to learn any new technology or library, one has to get acquainted with the basics and write a small generic application to get the hang of it. Below are the things that I’ve covered in this video series:

The Addressbook in jQuery
The Addressbook in jQuery
  • Basic Instinct 
    • Why to use jQuery and Where to get it from?
    • $ and beyond (overriding $)
    • Difference between document.ready and window.load
    • Selectors, dom traversing and events
    • Ajax and writing custom jquery function
  • Welcome to the jungle of jQuery
    • Selectors to fetch the values of form elements
    • Ajax calls to save the data (using php and mysql)
  • A list apart
    • List all the contacts in a tabular format
    • Delete contact functionality
  • Searching through
    • Search contacts by name or email

You can download the code from github.com.

References: 

P.S. There are many ways to improve the code. You can add edit-contact functionality or you can avoid unnecessary ajax calls to load forms/grids by simply keeping them in index.html and show/hide on demand instead of calling `$.load()` every time. Plus, its not always a valid choice to use only jQuery to write a Single Page app as there are lots of good MVC or MVVM frameworks available that can save your substantial amount of time and effort.

Advertisements