How to develop web applications？

This is a question that comes up a lot and for good reason. As a programmer, how the hell am I supposed to learn how to develop web applications? There’s no easy answer and even learning institutions don’t seem to know exactly how to do it; the university I went to doesn’t offer any classes on the topic. So, as most other web developers in the field, I’ve learned by doing and trying. No one told me how to do it, I just started developing something for myself and learned how to develop a web application as a side effect. This is always a great way to learn how to program anything.

Fortunately for you, I’ll try to explain most of the process here. This should help you get started.

Difference between web application and website

First of all, I’d like to point out that developing a web application is not the same thing as developing a web site. Overall, the steps are quite similar, but the time spent on each of them will be very different. What’s the difference between a web application and a website? As usual, Wikipedia can help us here, let’s look at the definition for Application software:

Application software, also known as an application, is computer software designed to help the user to perform singular or multiple related specific tasks. Examples include enterprise software, accounting software, office suites, graphics software and media players.
Application software is contrasted with system software and middleware, which manage and integrate a computer’s capabilities, but typically do not directly apply them in the performance of tasks that benefit the user. A simple, if imperfect analogy in the world of hardware would be the relationship of an electric light bulb (an application) to an electric power generation plant (a system). The power plant merely generates electricity, not itself of any real use until harnessed to an application like the electric light that performs a service that benefits the user.

From that, I extracted my own definition of web application:

A web application is a website that allows users to accomplish specific tasks. A website that is not a web application is a website whose primary goal is to provide information to the user (blogs, news, tutorials, etc.).

Web application development process

Now that this particularity is clear, we can move on to defining the whole process used when developing a web application. Of course, depending on the size of the project, some of those steps will be very small or be done entirely in your head, but it’s always good to know the whole thing. It’s also important to note that this will not be an in depth description of each step.

Step 1: Analysis

The first step when developing a web app is doing an analysis of what is needed. This is where you will define a more or less thorough list of the features that your application will offer. If you are doing this for a client, that’s where you learn what they want (and make sure you both understand what each other is saying). From those discussions, you can extract requirements and specifications. Even if you are developing for yourself, I suggest that you write down what you want this web app to do.

Step 2: Design

Once you know what the web app should do, you should start designing it. There are usually many iterations here, each one adding more details to the design. The first thing to do would be to draw a wireframe (on paper or using a tool, whatever you prefer, I like paper because I can do more variations faster). A wireframe is usually a very abstract black-and-white drawing of your future web application (you can add a few colors, but keep it simple).
This step helps you get an idea of what the app will look like in the end. Contrary to what 37signals advocates, I suggest that you use words and a bit more details as you see fit. I like to write down annotations when I think of a cool idea or how things should behave (for example, if clicking on something should make another element change or disappear, I’ll write it down right in the wireframe).
Once you are satisfied with the wireframes you have created, you can start making mockups. Mockups are still drawings, but with colors and details. The final mockups should look like a screenshot of your future web application. If you are developing for a client, he should see those and give you his approval. However, some people like to skip this step (mostly non-designers) and go straight to prototypes.
Prototypes are written in HTML and make use of CSS (and JavaScript sometimes). The layout should be implemented, links should work, colors, sizes, fonts should be chosen (if you did mockups, this is easy). This step is great because everything you do can be used in the final application. If you can, run some usability tests on the prototypes, it could save you a lot of frustration in the long term.
At the end of this step, you should also know how the web application will be organized. What will be the landing page and how users will navigate from the home page to every other page.
I suggest listening to Ryan Singer’s talk that he gave at the Future of Web Apps conference where he describes 37signals’ design process.

Step 3: Implementation

Choosing a framework
Now that we know what we have to build, we have to build it. This is a huge step and will most likely be where you spend most of your time. The first decision you have to take is how you are going to build it, what technology are you going to use with which framework. There are so many ways you can do it, you just have to pick one that suits you well. Here’s a list of the most common frameworks:
ASP.NET

PHP with any of the most popular frameworks

Python with Django

Ruby on Rails

There’s no clear “best” framework. They’re all different and each one has advantages over the others. The important thing to know is thatyou can build a working web app with any of those.
Building it
Once you know how you’re going to build it, it’s time to get your hands dirty. There are many parts here, but in the end, this is mostly standard programming. There’s the back-end where you create classes, objects, services, processes and the persistence to save those objects in a database. The back-end is the core of the application and it’s no different from normal programming for any application. Then there’s front-end development where you actually code everything needed to serve a UI to the user. You integrate the back-end code with the prototypes and join all the parts together. You also write the JavaScript code to support all the nifty little features you thought of while developing the app.
Once again, there are a number of ways to write the back-end. I suggest you look at the various tutorials offered for the framework of your choice to learn how to do this part. Generally, this will involve some object-oriented programming, but some frameworks are slowly graduation towards domain-driven design.

Step 4: Polishing

Now that the app is built and the individual parts assembled. You should test to make sure that the requirements and specifications defined in step 1 are satisfied (this should always be in your mind while developing). You make sure that stupid users can’t break your application by trying to do things that shouldn’t be done (see white-box and black-box testing). You also make sure that it works correctly in the browsers you wish to support (hopefully not IE6).
This is also the time to apply tiny changes to improve the feel of the application, to make it perfect.

Step 5: Release and beyond

The final (not so final) step is to release the application, to make it available to the users (if it’s a public web app, make sure to spread the news). You can start with a beta if you like, so that only a couple of users will find the bigger issues (because there will be issues) and help you improve the quality of the app. Don’t add features just yet, focus on making your app rock-solid.
Once the beta phase is done or once the app is quite stable, listen to the feedback from your users, use the app yourself and start thinking about what you could do to make it even better. Identify where there’s friction and smooth it out. Each future iteration should also go through the 5 steps detailed here, but as I said earlier, now that you have a working app, it’s easy to do the steps in your head and jump straight to testing features right in the code.
Congratulations, you are now the proud creator of a web application.

Further reading

If you still haven’t figured out which framework is the right one, I suggest reading the following posts:
Why PHP is Fun and Easy But Python Is Marriage Material by Dharmesh Shah from OnStartups.

Language Wars by Joel Spolsky from FogCreek (FogBugz)

A rebuttal to “Language Wars” by David Heinemeier Hansson

I also suggest taking a look at some of the projects that aim to offer resources to learn about the web standards.
The Web Standards Project (WaSP)

Web Standards Curriculum by Opera