Five steps to tell you how to develop web applications

This is a question that is often asked, and it’s a given. As a programmer, why do I have to be thought of as knowing how to develop web applications? There is no easy answer to this question, and even educational institutions may not have a clear answer; the university I attended did not offer any courses on the subject. So, like most web developers in this field, I learned this just by doing it and experimenting. No one told me how to do it, I started by making something for myself, and learning how to develop web applications was a by-product of the process. This is a very effective way to learn any language.

Lucky for you, I'm going to talk about the main process of how to develop a web application here. Hope this helps you get started. `

The difference between web applications and websites

First of all, I want to explain that developing a web application is different from developing a website. While there are great similarities overall, there are huge differences in the time it takes to develop them. So what is the difference between web applications and websites? Usually, Wikipedia can help us explain this problem. Let's take a look at how Wikipedia defines application software:

Application software, often also called applications, refers to software that is specifically designed to help users perform one or more Computer software designed for a specific task. Enterprise software, accounting software, office suites, drawing software, media players, etc. all fall under this category of software.

In contrast to application software, system software and middleware manage computer performance and manage how to integrate with the computer, but usually these tasks are not directly reflected in the execution of tasks that benefit users. For example, a not very appropriate physical analogy, the relationship between application software and system software is like the relationship between a light bulb and a power plant. The power plant (system software) only produces electricity and does not have any real power of its own. Purpose, unless an application tool such as a light bulb is used to provide services to users.

From inside, I summarized my own definition of web application:

A web application is a website that allows users to complete certain tasks. And the main goal of a normal website is to provide users with information (blogs, news, guidance, etc.).

Web Application Development Process

Now that the characteristics have been clarified, we can start to define the entire process of developing a web application. Of course, depending on the size of the project, some steps in the process may be small enough to do in your head, but it's always good to see the whole thing. It is also important to understand that this article does not provide an in-depth description of each step.

Step 1: Analysis

The first step in developing a web application is to analyze your needs. You should now define as comprehensive a list of features as possible that your application should provide. If you're doing this for a client, you need to understand what they want (and make sure you both know what the other is talking about). From your discussion, you can summarize the requirements and software specifications. Even if you are developing it for yourself, I recommend that you write down the functions you want this web application to do.

Step 2: Design

Once you figure out what the web application needs to do, you can start designing. This step is usually repeated many times, each time the design is refined. The first thing you need to do is draw a page flow diagram (on paper, or use a software tool, whichever you prefer. I like using paper so I can make changes more quickly). Page flow diagrams are usually very abstract black and white drawings of what the web application you will implement will look like (you can add some color, but try to keep it simple).

This step allows you to know what your application will look like in the end. Contrary to what 37signals advocates, I suggest using some word descriptions and being moderately detailed. When I get a good idea, or an idea of ​​how something should be done, I'll mark it on paper (for example, when this button is clicked it should cause another element to change or hide, I'll write this down in the process on the picture).

When you are satisfied with the sketch you have made, you can start making the physical model.

The physical models are still patterns, but with colors and details. The final mockup should look like a screenshot of the web application you will implement. If you develop for a client, he will look at these things and give you his approval. However, many people like to skip this step (mostly non-designers) and they like to go straight to the web prototype.

Prototypes are developed in HTML and rendered using CSS (and sometimes Javascript). The page layout needs to be made, links can be clicked, colors, fonts, and font sizes need to be set (this will be easy if you make a physical model). This step is very important because everything here can be used in your final application. If possible, do some usability testing on your prototype. This will save you a lot of mistakes in the long run.

At the end of this step, you basically know how your web application is organized together. What is the login page and how does the user go from the homepage to each page?

Step 3: Implement

Choose a framework

Now that we know what we want to develop, we need to make it. This part is a lot of work and you will spend most of your time on it. The first decision you have to make is how to start, what technology and what framework to use. You have many options to choose from, and you need to choose the one that suits you. Here is a list of the most commonly used frameworks:

ASP.NET

Any process framework on PHP

Python with Django

Ruby on Rails

There is no clear standard to say which framework is the best. They are all different and each has its own strengths. The most important thing you need to know is that any of them will allow you to develop useful web applications.

Development

Once you know how to develop, it’s time to get started. This development work can be seen as having many pieces, but at the end of the day, these are standard programming activities. Behind the scenes, you create classes, objects, services, procedures, and persistence layers to save these objects to the database. The background is the core of the entire application. For any application, it is no different from ordinary programming. Next comes the development of the front desk. The code you write now is the real operating interface for users. You integrate the background program and prototype interface, and integrate all parts of the system together. You can also use JavaScript to implement some cool little functions that you think of during the development process.

Again, there are many ways to implement background programs. It is recommended that you read the information related to the framework of your choice to figure out how to implement this part of the work. Typically, this knowledge will be related to object-oriented programming, but some frameworks are slowly moving toward domain-driven design.

Step 4: Polishing

Now the application has been developed and the independent modules have been integrated together. You need to test to ensure that the requirements and software specifications you defined in step 1 are implemented (this question should be kept in mind throughout the development process). You want to make sure that stupid users can't break your application by trying to do something you haven't implemented yet. You also need to ensure that your program can run correctly in various browsers (hopefully not IE6).

Now is also the time to make some small tweaks to improve the feel of your app and make it perfect.

Step 5: Release and follow-up work

This last step (but not the end) is to release your application so that users can actually use it (if this application is a public-developed application, don’t forget to do press promotion). If you want, release a beta version first so that only a small number of users can find big problems in your application (because there will definitely be bugs in your program), and they will help you improve the quality of your program. Don't rush to add features, focus on making your current program solid.

When you have passed the beta stage and your program has become very stable, listen to user feedback and try out your application yourself, you can start thinking about how to make the application better. Find the discordant areas and eliminate them. Each subsequent iteration will go through the five steps mentioned above, but like I said initially, you now have a working application, and it is easy to complete these steps directly in your mind and go directly to the next iteration. Test your functionality in code.