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.

Introduction to Node js

Another session I did as part of Pune JS meetup.

This covers the basics of NodeJs, how to set-up first NodeJs Application and always remember for Single-threaded Processes and keep writing non-blocking code.

It also covers difference in philosophy in comparison to NodeJs and other languages/web server design.
About 60 people joined the meetup.

Introduction to Node js from Akshay Mathur

Thanks a lot to people at Webonize lab for hosting the meetup and clicking photos :)

Choice of Javascript MVC Framework: Backbone, Angular, Ember, Knockout etc.

As usage (read fashion) of Javascript in increasing, I get a Question often in different forms:

• Which JS MVC framework is best?
• Why did you choose BackboneJS for your app?
• What is the JavaScript MVC framework with the most momentum?

Recently when I was thinking about it, was hungry and entered into kitchen, a very good analogy struck my mind:

"Which knife is best?"

So the question arises, "For what purpose?"

Each one of them is created keeping a specific purpose in mind and works best for that purpose. If you use one for some other purpose, it will work. It may work well but may not be best.

The same is applicable for technology frameworks. You need to choose one that is suitable for your app. While talking on this topic with people, I found that many of them choose a framework that is popular. Without considering what exactly the framework brings for them. The popularity may be just a hype at that time and I do not see it wise to make such an important product decision based on just hype.

However, if your app is just another app like others, you may want to go with the popular one. The JS Toolbox maintain a chart showing popularity parameters (Watchers, forks and open issues) for different JS frameworks using Github APIs. Here is the snapshot of May 16 2014.

I met a person who went for KnockoutJS because he was able to build first version very quickly using its data bindings. He still loves data bindings but when a user changes something on a form and later decides to Cancel instead of Save, he runs into issue as the model is already changed because of data-binding. Now he implements two models and on save copy from the UI bound model to the model that save the data to the back-end.

I answers the question in just one line, "We choose Backbone because we wanted power with us (programmers) than with the framework. We do not like magic in general."

Now, other than the type of app, personal style also adds to the making a choice.

On the web, I read so many reviews and comparisons people did. Most of them clearly write what they are looking in the framework and declare a winner from their point of view. 

For example, Gordon Hempton in his article "The Top 10 Javascript MVC Frameworks Reviewed" on CodeBrief says that he is looking for 1. UI bindings 2. Composed Views 3. Web Presentation Layer and 4. If it plays well with others like jQuery. After his review (and re-review), he says that emberJS is best as it is the only one providing all four together. Still, I would suggest reading the article as he lists one liner pros and cons of all the frameworks. You may discard his decision and take your own decision based on his inputs.

Similarly, Steven Sanderson has done a good and lengthy job of discussing points that one considers for such selection. In some cases he also discuss the points where people do not agree and have different opinions. Finally, he does not give any verdict but lists bulleted points about each framework. His post Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012) is also worth considering while making a selection.

For making us choose right framework with a better hands-on feel, Addy Osmani (and friends) went ahead and created todomvc.com. It provides basic info about each framework, shows demo of ToDo List app using that framework and points you to a Github repository for code of the demo app. This gives a good feel of the framework even before you start and also allows you to compare as it is the same functionality implemented via different frameworks.

Addy also wrote a very good article on Smashing Magazine, Journey Through The JavaScript MVC Jungle. In the article, he not only discuss important points about selecting a framework (other than personal style and choice of features) but also suggests when to use what.

Here are a couple of quotes from his article:
BackboneJS

"I want something flexible which offers a minimalist solution to separating concerns in my application. ... I’d like some decisions about the architecture left up to me. ... As I may be building something complex, I’d like there to be an active extension community around the framework that have already tried addressing larger problems"

EmberJS

"I want something that tries to tackle desktop-level application development for the web. It should be opinionated, modular, support a variation of MVC, avoid the need to wire everything in my application together manually, support persistence, computed properties and have auto-updating (live) templates."

AngularJS

"I want something declarative that uses the View to derive behavior. It focuses on achieving this through custom HTML tags and components that specify your application intentions."

jQuery

"I want something that will help me build simple Web applications and websites. ... The solution should abstract away browser differences so I can focus on the fun stuff."

So the bottom line remains at its place :).
The selection of right framework is not that straight forward. It really depends on the nature of app and the developers.

The choice may go wrong for various reasons e.g. lack of big picture, time constraints etc. But keeping an eye and moving to a better suitable framework as soon as possible may help a lot.

In our case at ShopSocially, as we choose BackboneJS at the first place, we created our internal sub-framework as we realized a pattern and that is working beautifully.

Object Oriented Programing in JavaScript

JavaScript is a object oriented language. But does not work exactly same as other OO languages such as java or C++. 'Class' is a reserved keyword in JavaScript but it is not implemented.

Then how can we write object oriented code in JavaScript? What about inheritance as all?

JavaScript functions and objects can be used in many different ways and also JavaScript also supports something called prototypal inheritance. This allows you to write code that behaves like a class. The presentation here introduces this concept.

If you still want to write code the way you are more familiar i.e. defining a class using 'class' keyword and extending the class using 'extend', you can use CoffeeScript. I also have slides to help you move faster with CoffeeScript.

Object Oriented Programing in JavaScript from Akshay Mathur