Step by Step Web Application Development

I get many questions on Quora where people ask how they can get into web application development. Everytime I used to find the correct sequence of my posts. So I though to summarize it in a post here itself.

If you are looking for mastering client side web application development, you need to start with basics at Introduction to Web Technologies. This talks about all aspects i.e. HTML, CSS as well as JavaScript.

If you are familiar with HTML and CSS and want to jump directly to basics of JavaScript, Javascript for Newbies is the place to start.

At this point I think it is good time for Getting Started with CoffeeScript. CoffeScript allows you to write neat code with simple syntax and verbs and compiles it into very good quality JavaScript code for browser. Or you may want to do it after jQuery as well.

Next I think you should learn Creating Web Applications using jQuery. jQuery is nothing but a library having a lot of functions for easing out your life. It is mostly syntactic sugar and standardization of interfaces across the functions as well as across the browsers.

If you like to go further advance you may want to take a look at Object Oriented Programing in JavaScript. There are some concepts you already know but they are presented differently in case of JavaScript.

Reaching this stage, you will start thinking of Single Page Applications (SPA) and will have a debate on which framework is good for developing SPA. The article Choice of Javascript MVC Framework: Backbone, Angular, Ember, Knockout etc. will not bring an answer for you but if you know nature of yourself and your application, it will help you find your answer.

From many SPA JavaScript frameworks, I choose 2 to talk about because I think they are of opposite nature.

Unlike other Angular JS presentations that pose it as a magic, Getting Started with Angular JS tries to find out how Angular is just a JavaScript library and still follows basics of HTML and JavaScript. Creators of Angular have creatively used some concepts to make it magical. This enables you also to create magic of your own.

I personally like BackboneJS more because it is not opinionated and gives more power to me rather than asking me to do stuff in a specific way. I know I need to write more code as compare to Angular to start with for normal use cases but I also know that I need to write less code as compare to Angular for specific use cases later. This is my personal bias and you should not be following that. Rather choose the framework that suites your situation better.

Creating Single Page Web App using Backbone JS step by step explains the process of creating a SPA using a sample application. The application code is available on Github and the application is also hosted for your use. This is a pure JS (and of course HTML and CSS) application that uses FourSquar and Google maps APIs as back end and creates a UI similar to Pintrest. The JS code is actually written in CoffeeScript but corresponding JavaScript code is also available. You can read whatever version you want and also compare them for ease of reading.

If you want to use JavaScript on server side as well, you may become interested in NodeJS.

Introduction to Node js talks about writing an application using the very basic and native NodeJS. You may never want to write a commercial application like this. The correct way is to use frameworks and middle wares. However, I recommend to read this to understand the philosophy behind NodeJS so that you can take a better decision which application you should write in Node and what precautions you should take.

Another useful stuff in JavaScript is CasperJS that is a wrapper over PhantomJS and is primarily used for testing UI programmatically. Testing Single Page Apps with Splinter and CasperJS talks about it briefly.

This concludes the Javascript stuff. Other posts you may find useful are:

Using Google App Engine Python

Managing Files with GIT

MongoDB workshop

There are other posts talking about solution to specific problems or explaining specific use cases but I am not sure if they are still relevant.

Getting Started with CoffeeScript

CoffeeScript is a small language that compiles into very good JavaScript.

I have seen some confusion around against CoffeeScript saying:
-- Not every browser understands CoffeeScript by default
-- If we used CoffeeScript JS in browser, it is very hard to debug the code.

Both these sayings are true.

But I do not used CoffeeScript directly into the browser. Rather, I write code in CoffeeScript taking advantage of syntax etc. and compile it into JavaScript on my machine itself. So even my unit testing happens with good quality JavaScript code.

This was also part of the workshop series on creating single page web apps and helped people read the code example in BackboneJS presentation.

CoffeeScript from Akshay Mathur

Creating Single Page Web App using Backbone JS

During the third workshop on the topic, we created an application that allows user to select a place on world map, brings photos of interesting venues from FourSquare and shows them in tiled format.

The app is hosted as explore-venues and its complete code is available at Github.

Screenshot of Explore Venues

The presentation here helps build/read the code in a systematic way.

Creating Single Page Web App using Backbone JS from Akshay Mathur

Tile Puzzle

Image Courtesy:  Thought Collage

My 8 year old son found an old sliding tile puzzle and liked it a lot. This gave me the idea of having the soft copy of it. We searched and found so many of them on Internet. But nothing beats the joy of using your own creation and we (my son too) decided to implement one more for ourselves.

If you are not interested in the story and just want to play or look at the code, jump to the results.

Choice of Technology:

Guess what technology we choose for this?

We decided to keep it very simple. Another requirement was to use the same app on laptop as well as on phone.

Very quickly, the skeleton in HTML was ready. 

For implementing the functionality, I took two liberties. One was using jQuery instead of native Javascript and the other was using Coffeescript (and compiling into Javascript) instead of writing directly into Javascript.

Initial Cut:

My son got exited as I shown him the blank boxes :) but start getting bored when I was writing logic for getting the shuffled list of numbers. He started working with me as soon as I shown him the boxes filled with numbers. And he spotted a bug .... simple sequence number gotcha .... two squares were empty instead of one.

Enhancement Phase 1:

After I gave him initial cut to play, he came up with two enhancement requests:

1. The hand pointer should show up only on movable tiles (actually it was a bug)
2. Moving only one tile per click is cumbersome. Allow moving any number of tiles (max 3 is  possible) in one click.

Enhancement Phase 2:

Now as number puzzle started working fine he felt adding picture as it happens on the back of number puzzle. 

On the following morning, when I was talking about it to a programmer friend, he thought I did something very complex and technically challenging :) and fired so many questions:

You must have used a image processing library for creating small tiles out of a big picture. 

And when the puzzle completes, you must be rejoining the tiles to match it with the original picture. 

Does Javascript has support for Image processing as well?

What language you used at backend for this? What kind of APIs have you created? 

Image Courtesy: Satellite Signals

He felt some disappointment when I told that I did not do any fancy stuff and my puzzle went colorful with picture tiles just working with CSS. I used the image in background for each tile and used different background positions so that the correct portion of image is visible.

Enhancement Phase 3:
Kids (especially the movers one) get bored very quickly. This time he wanted to use his own picture instead of what I provided. So I just added a text box so that user can provide an image on the fly.
After completing one game he came back saying I should add the same code that runs in page load on the button click as well because the game is not restarting when he changes the image.

The Result:
As result of the exercise, I earned a lot of happiness and joy (and understanding of some logic) from my son, a puzzle hosted and is available to everyone to play, a code repository at Github, and this blog post :)