How real-world web development projects are built

Are you a student or a beginner who wants to know how real-world web development projects or websites are built by companies?

I am going to show you exactly that in this article along with few other things you should know if you want to build a career in web development.

Let’s suppose you have learned a language, for example, PHP, java, c#, etc and you want to know how these languages are used to build real-world applications then you are at the right place.

In this article, I will show you the most important things used in web development which you should know if you are planning to become a web developer. I will also provide you insights of working of a real-world company.

One thing you need to understand is that programming languages are always used with some framework for building web development projects. For example c# in Dotnet framework, laravel for PHP, spring for java, etc.

The things I am explaining here applies to almost all frameworks available be it Dotnet, Java, PHP, MEAN stack, etc. So let’s start

1) Project  architecture 

In companies, a web application project contains multiple layers. There are different architectures available like 

a) 3 tier Architecture

It consists of 3 layers

a) Presentation layer – Its work is to pass data coming in request to the business logic layer and return data coming from the business logic layer. The presentation layer can only access the business logic layer, it cannot access the data access layer directly, it has to go through the business logic layer.

b) Business logic layer – Its work is to get data from the data access layer, process that data, and return it to the presentation layer. It only has access to the data access layer.

c) Data access layer – Its work is to communicate with the database i.e. insert and retrieve data from the database.

b) Onion Architecture

Onion Architecture was designed to solve few issues relating to 3 tier architecture. It consists of 4 layers

a) Presentation layer – It has access to the service layer

b) service or business logic layer – It has access to the repository layer

c) repository or data access layer

d) Domain entities layer – It consists of all the models of the entities of your project like user, teacher, student, etc

The presentation, service, and repository layer, all are dependent on domain layer. This helps make your code loosely coupled as dependence of first 3 layers on each other gets reduced.

2) Frontend and Backend

a) Front end – It consists of HTML,CSS and javascript

b) Back end – API and database

-> API can be in PHP, DotNet, java

->Database can be MySQL, Oracle, Microsoft SQL server

Depending on the size of the project a company can have separate teams for frontend and backend or a single team for both where a developer would work as a full-stack developer working on both front end and backend.

3) Layout in web development

The front end of every project consists of a layout.

When you visit a website you see a menu and footer on every page. That menu and footer are not added separately on every page. Instead, we make a separate file as layout which consists of header and footer and insert the contents of each page inside that layout.

It reduces repetition of code. Every framework has different style to create layouts so you need to learn it depending on the framework you choose to build your website.

4) Exception handling in web development

It is the most important part of any application that how you handle the errors. There can be infinite reasons for errors occurring in your application. For example database not working, memory out of bounds, type conversion fail etc etc . There are different ways to handle errors and it also depends on the framework you use. Several ways are

a)Try catch block – It is the most popular way to handle exceptions be it any language or framework.

b)Global exception handling – Although try-catch is useful but in bigger projects where you have hundreds of functions, using try-catch in each one of them leads to repetition of code. Therefore almost all frameworks allows global exception handling.

In global exception handling, you define a function to handle exceptions in a class and register it globally. Whenever an exception comes in your application the control will directly go into this function and that exception will be handled and can be logged as required.

5) Logging in web development

 Logging means making a systematic record of events. The events can be anything like an exception or user request and responses. The most common is exception logging. Logging of exception is really important and helps us figure out where exactly the error occurred. So we can take action immediately otherwise we will have to debug the entire application to find out the bug.

There are several ways to do logging like

a) Logging in database – We create a table in the database and store information in that table.

b) Logging in a text file – We can create text files on the server where our project is deployed to store logging information.

Logging also depends on the architecture of your application and you can log exceptions from a central place or logging it separately in each layer. If you implement logging properly, you can tell the exact place where an error has occurred and take action immediately. Which saves a lot of time and cost and adds a lot of value to your project. As a web developer, you will have to implement logging in all your projects.

6) Authentication in web development

Authentication is the most important part of any application. Servers, where your application is hosted, are stateless meaning even if you have logged in to your application,  the next time you visit the server, it will not remember who you are. 

When I say you visit the server what I mean is that, a website has multiple pages. And When you click on a link the request goes to the server and server returns the response which contains the requested page and its information.

When you go from one page to another, even if you have logged in earlier the server will not remember who you are and will again tell you to log in.

So once you have logged in to your application, and you visit another page from your homepage, how to tell the server that you have already logged in?. There are several ways available to let the server know that you have already logged in so it will not ask for your credentials again like

a)Cookies – Cookies are stored on the user’s browser once the user logs in. Then with each request to different pages on the website, the cookie is sent along with request which tells the server that this user is already logged in please allow him. When the user logs out the cookie is deleted from client’s browser. so next time he visits the website he will again have to log in.

b)Tokens – Tokens are more secure and better way to authenticate users. Most applications nowadays use tokens instead of cookies. JWT – JSON web token is most widely used token which I use as well.

The process of authentication using token is similar to cookies. When user logs in the token is created on server and then sent and stored on user’s browser. With every following request it is sent along with request to the server, server authenticates it and allows the user. When the user logs out the token is deleted from the user’s browser.

7) Authorization in web development

Let’s say you have 3 kinds of users on your website admin, teacher, student. There are few pages which only admin can access. There are few pages which only teacher can access. Other pages which are only for students, how would you implement that?  This is where authorization comes into picture. You will have to create 3 different roles  – admin, teacher, and student and implement role wise authorization.

So when a request comes from a teacher, the teacher will see only those pages which it has access to. real-world projects widely use Role-based authorization. It is very important for you to learn if you are planning to become web developer. Every framework provides ways to implement authorization and you need to learn it depending on the framework you choose.

8) Team structure for web development projects

Now as a student or a beginner you might be wondering about team structure in companies and how projects are build by them. Let me explain

a) Small project – If it is a smaller project then there is one team lead and few developers who are all full-stack developers who handles everything frontend, API, and database.

b)Mid-size and large projects – If it is a large project with lots of pages then company might decide to have separate teams for frontend and backend. Many companies, especially in banking sector, have 3 different teams, a front-end team, API team, and database team.

c)Code sharing – The coordination between a team is very important for the success of a project. This is why source control is really important. All the team members are working on the same project. It is possible that one member is dependent on the work of another member and this is where code sharing tool helps. GIT is the most widely used source control tool to share code. No matter where and in which company you work you will be using git in some way or another. Learn different concepts like push, pull, repositories, etc. Which will help you a lot in your career as a web developer. Github is a great platform to host your repositories.

d)Tasks – A project consists of different modules(for example different pages in a website). These modules can also be further divided into small parts. Now each of these small parts are considered as a task which is assigned to a developer to complete within a given time frame. It can be 8 hrs(1 day) or 16 hrs(2 days) or more depending on the size of the task.

9) Routing in web development

Routing is an essential part of every web application. for example, domain/home or domain/profile or domain/contact are routes to a page. For every route defined you have separate page where once you call that route request goes to the server and in response, a page defined for that route is returned.

Every framework provides a way to set up routing. As a web developer, it is absolutely essential to know how routing works especially in the framework you choose to work with.

10) data handling between frontend and backend

Proper Data handling between frontend and backend is really important. Therefore as a web developer, you need to figure out how to send data from frontend to backend API and vice versa.

whether you want to make direct calls or AJAX calls. Initially, you might face difficulties but only with practice, you will learn.

you need to define proper models, do proper validations, handle null values. These days most frameworks use JSON to communicate between frontend and backend and also provides built-in methods to process JSON.

Model binding should be done properly and also make sure no loss of data happens and if done correctly it will save you a lot of errors. One thing you need to know is that data in database is always accessed using APIs and never directly.

11) global settings in web development projects

Every application has few things or settings which are used at many places. Let me explain

Let’s suppose you have an admin email id which you are showing at many places in your website. Now let’s say tomorrow the admin email changes and the old email is used at 100 places on your website. Now you will have to go to 100 places and change the old email with the new one. Another example is connection string of your database.

Instead, every framework provides a global appsettings or configuration file where you can place things which are used at multiple places. Now you can use the variable of that configuration file at all 100 places to access that email. If later any change comes in the email you only have to change at one place i.e. in the global appsettings file.

12) Encryption and Decryption in web development projects

It is of great significance for all companies especially for financial sector companies where user data is very critical. Few cases where encryption is used is

a) Storing passwords in database – We never store passwords in plain text directly in the database. Instead, we create a hash of the password and store it in the database using algorithm like MD5. So next time when user details comes we convert the password received into a hash using same algorithm. Compare that hash with the hash stored in the database and if it matches we allow user access otherwise we deny it. This is a widely used strategy and using this no one apart from you,  not even the database administrator can read or know your password.

b) Data communication between front end and backend – Many companies especially in the banking sector pass encrypted data between frontend and backend using RSA algorithm. Which is widely popular for its asymmetric approach using public key and private key. Before sending data to backend, the data is encrypted using a public key. Then sent and decrypted at server side using private key. When data is sent from backend to frontend, data is encrypted using public key and decrypted at client side using private key. Two sets of public key and private keys are maintained.

c) JWT token signature – server maintains a secret key to encrypt and decrypt jwt token signature. JWT token is used for authentication once user logs in.

13) Testing and deployment in web development projects

In a company, there are many processes which takes place between developer writing code and when that code reaches into production(production means live website). There are different stages which are as follows

a) Testing – After developer develops and completes its code, he has to do unit testing(execute each line of code he has written). Once it is completed the code is deployed onto testing branch(this is another server where your application is deployed for testing by the testing team). The testing team tests the task completed using the test cases they have written. If they find any bugs they let the developer know. If no bugs are found then they give signoff to be deployed on the UAT server.

b) UAT – This is another server where your tested application is deployed for high-level review by managers and clients as well. This is the final stage once application is approved from here then it is deployed in production.

c) Production – This is the live website to which the end-user interacts. After the application has passed UAT phase then it is deployed in production. It may be on another server or cloud.

14) writing CSS and javascript

There are different ways in which CSS and javascript can be written in web application. Let me tell you how one way is better than another

a) CSS and javascript inside HTML file  –  CSS and javascript can be written in the same HTML file where HTML code is written. But in real-world projects, CSS and javascript is never included in the same file. Because as the size of application increases the HTML file becomes messy and complicated.

b) CSS and javascript in external file – The best practice is to write css and javascript in separate files and then including them in HTML file. This is also used everywhere in real-world projects.

15) Bundling and minification in web development projects

Let me explain you something. All the images,  CSS, javascript files that you include in your HTML are all downloaded one by one on client’s browser from server during pageload. Now imagine you have lots of CSS and javascript files on your page. Their size is also big and you also have lots of images on that page. As all are downloaded one by one this will drastically affect the performance and page load time. To solve this problem most frameworks provided facility of bundling and minification.

a) Bundling – bundling means grouping all your CSS files into a single file. And all your javascript files into a single file. So now instead of many calls to the server from client during page load. Only 2 calls would be made 1 for CSS and 1 for javascript. This will improve the performance of your application and will also improve user experience.

b) Minification – Minification means reducing the size of your CSS and javascript files. Size is reduced through removing spaces, comments. Also reducing number of characters in variable names so after minification, a variable named “object” will become just “o”. The process of minification involves many more optimizations.

So by doing bundling and minification you are reducing number of calls as well as reducing the size of files as well. This will drastically improve performance. That is why it is widely used in the industry and as a web developer you should definitely know this.

16) Naming conventions

All user identifiers like class name, function name, or variable name should be defined in a descriptive manner. You should define it in such a way that if another person tries to read your code. He/she should understand the purpose of that user identifier from the name itself.

You can use camel or pascal case to define user identifiers. But make sure you use it consistently in the entire project.

17) Third-party tools for web development

If you want to show notifications, popups, chatbots, or create PDF or excel. For everything third-party tools are available in almost all frameworks in the market. Do not waste your time designing and making it manually when you can use awesome tools freely available to use.

18) Requirement understanding

When your team lead or your client is explaining you the requirement for the piece of application to be built, Focus and understand the requirement clearly at the same time. No matter how silly you think your question is just ask it. Because if you do not clear your doubts at that time and later go and ask them doubts they will feel frustrated. 

In conclusion, if you understand the requirement clearly, half the work is already done. You will be able to complete your work quickly. But if you do not even understand what you have to build then it will be really problematic for you. 

Thank you for reading this article. Have a good day.

Share :