These days, it's hard to imagine life without our devices—phones, computers, or iPads. They help us relax after a long day and assist us with countless tasks. One thing that we are all familiar with from the moment we first touched a computer until now is a web browser, most typically Microsoft's Internet Explorer, and Google Chrome. Web browsers help us access a larger world online by giving us access to all kinds of web applications from social media to daily newspaper applications. But have you ever stopped to wonder what a "web application" really is and how it works? In today's blog post, I'll break down how a web application works and the key elements that make up an application.
What is a web application?
A website or web application can be understood as a collection of web pages containing information, including images, articles, music, or anything else that the website creator wants to put up. For example, when accessing the Amazon website, we will see web pages such as the home page, product page, category page, and cart page. These web pages are typically accessible via the Internet and can be viewed using a web browser such as Google Chrome, Firefox, Safari, or Edge.
How does a web application work?
How a web application works can be summarized as follows:
After accessing the web browser via the Internet, the user will start typing on the URL bar above to go to a desired website. After the user presses Enter, the browser will find the place where the website is being stored (which we call the server). To find the server, first, our web browser will contact something called a DNS Server to find the IP address of that website by translating the website name we just entered in the URL bar, such as www.example.com, into a series of numbers called an IP address, such as 192.168.1.1.
After getting that IP address, which means we get the address of the server, our browser will send a request (or we often know it as HTTP requests) to the server where the website's data information is being stored and request the specific data that the user wants to access.
After the server receives the browser's request, it will respond to the browser with the status (whether it was successful or not) and the requested data.
Finally, when the browser receives a response from the server stating that it has been successful, it will start rendering the page.
Imagine this process as looking up a friend's phone number in a phonebook. You know the friend's name (the website address), but you need their phone number (the IP address) to call them. The DNS Server acts like the phonebook's lookup service and the IP address is like the phone number you need to dial to reach your friend.
What exactly is the term “Web Development”?
Web development is the process of creating websites and applications for
the Internet. It encompasses various aspects, including web design, web
content development, client-side/server-side scripting, and network security configuration. Web development can be divided into two main categories: Front-End and Back-End.
Front-End Development:
Front-end development is all about what you see and interact with on a website. Think of it as the "face" of the website. Here are the three basic parts that all website front ends must have:
HTML: HTML is like the skeleton of a webpage. It gives structure to the site, laying out where everything goes. Imagine the web application is like a house, HTML is like the wall, bricks, and everything that builds the house but we're not painting it yet. Every element on the page, like headings, paragraphs, and images, is defined using HTML.
CSS: CSS is what makes the website look good. It’s like the paint, furniture, and decorations you add to your house to make it stylish and comfortable. CSS lets you change colors, fonts, spacing, and layout to make everything look just right. Without CSS, websites would look plain and boring.
Javascript: JavaScript brings the website to life. It’s the magic that makes things move and respond when you click, type, or scroll. Think of it as the electrical wiring and plumbing in a house, making sure everything works smoothly and interactively. With JavaScript, you can create cool features like slideshows, form validations, and interactive maps.
Back-End Development:
Back-end development focuses on the server side of web applications. It involves managing databases, server logic, and application programming interfaces (APIs). Key components include:
Server: The server is a powerful computer that hosts websites and web applications. It handles requests from the client's browser and processes them. Servers can be set up using various technologies such as Node.js, Python (Django, Flask), Ruby on Rails, Java, and PHP.
Database: A database stores and manages the data used by a website or web application. Common databases include MySQL, PostgreSQL, MongoDB, and SQLite. Databases are crucial for storing user information, content, and other dynamic data.
API (Application Programming Interfaces): APIs allow different software systems to communicate with each other. In web development, APIs enable the front end to interact with the back end. They facilitate data exchange and functionality between the client and server.
Conclusion
In terms of "Web Development", we still have a lot of things to discuss in advance like responsive design, package management, front-end and back-end framework, database, and a lot of other things but by understanding these key elements, we can appreciate the complexity and intricacies involved in creating and maintaining websites. Web development requires a blend of creativity, technical skills, and problem-solving abilities to build functional and visually appealing web experiences.
Additional:
This blog post has been transformed into a video on our AlgoSync YouTube channel to reach a wider audience and share knowledge more broadly.
Link: Video's link
Top comments (0)