Tuesday, March 17, 2015

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:
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.