April 29, 2021, 7:21 p.m. rtj Web Development IOT Mobile Development
This is an introductory post for web developement, that's what I have been doing the most. In this post we shall learn about the various terminologies used in web development and how these are coupled together to form a complete system of web applications. This shall be a complete theory post and involves a lot of concepts for building a firm base for any beginner who is enthusiastic about learning web development or others who wanna have a basic idea about the components of a web based system. It does not matter which web framework you pick up after this, because this post contains a generalised overview about the world of web development. So lets start with it,
Web applications are complete applications running on the browser though which user can interact with the server and database and flow of information can happen in two, ie user can not only get info from the database but also upload info on the database through the server. Eg Youtube The following image shows the architecture of a basic web application and tells what all things are involved.
This is the storage unit of all the information that exists on a website or webapp. It contains different tables which may or may not be associated with each other and each of the tables can contain some data. There are two types of Databases - SQL Databases and NoSQL databases.
SQL Databases - These are relational databases which contain information in a structured format and support the SQL query language. SQL databases are vertically scalable(means when application grows and number of users become high, we may need to add more RAM, storage space and CPU power to the existing database instances). Eg. Postgres, Mysql
NoSQL Databases - These are non relational databases which contain information in a non structured format and these do not support SQL databases. SQL databases are horizontally scalable (means when the app grows and number of users become high, we may need to increase the number of devices in our network on which the database can run). Eg. MongoDB, DynamoDB
In computing, a server is a piece of computer hardware or software that provides functionality for other programs or devices, called “clients”. It is a very important piece in the complete web development kingdom, it acts as a processing unit as well as an intermediate unit between the user and the database. There are different kinds of servers and a complete web application may interact with more than one servers to provide its user the best experience. So it is clear that a server always needs a computer system to be configured and run. Now when this computer system is the same system which is being used to develop and test the webapplication or website it is known as a local server also known as a localhost, it’s IP is http://127.0.0.1. Any application running on a localhost, can be accessed by the devices in the same network only if it is connected to a WIFI otherwise, if it is not connected to WIFI then the an application running on localhst can only be accessed from that particular system. When the server on which the website runs is at a remote location then it is known as a remote server. There is one more very common term used by web developers ‘Cloud’ - We need to understand this well, a server as we know is not the whole computer just a piece of software using a part of the whole computer’s CPU for processing, which means a single computer say my laptop can run more than one servers in parallel capable of performing different tasks. So companies like Amazon, Google and many others provide access to their remote servers via the internet. “The cloud” refers to servers that are accessed over the Internet. In order to access any computer system whether be local or remote(cloud) only the “Terminal” is needed. The terminal or the command line interface contains all the necessary features to operate the system, each and every task that we can do on our PCs can be done by the Terminal on our PC be it copy, paste, making new folder, downloading, etc. This is why a Hacker just needs access to your computer’s terminal or command line interface, he can do anything in your system sitting remotely just via the internet. I’ll make a separate post on this “How to access someone’s computer remotely and get into their system” . For web developers we also need access to remote servers terminal to run our webapplication globally such that it can be accessed from anywhere through the IP address. Now we need to know what is an IP address - “IP (Internet Protocol) Address is an address of your network hardware. It helps in connecting your computer to other devices on your network and all over the world”, IP address looks like 22.214.171.124 or similar to this. Next we need to know what is a port number - “Port number identifies a specific process to which an Internet or other network message is to be forwarded when it arrives at a server”, as we know in a computer there can be many services running, however IP address of that computer is one single address only, now imagine a message came to our computer’s IP address but how does it know that which server process should deal with it or handle it, for this there are total of 65536 ports available on any computer some of which are already being used internally and we don’t even come to know, some of them are empty these empty ports are used to configure our servers. So in all suppose I have configured two servers on my system, so the complete address of my servers could be given this format http://127.0.0.1:8000 and http://127.0.0.1:3000. The port number decides on which service the message has to go. Lastly in this section we need to know about Domain name - “So a domain is nothing but the servers complete address (IP and Port ) mapped to a string say http://example.com .
Client is basically any device which connects to the server to exchange or grab information, this could be a mobile app, a browser, a terminal or any other device. Client also has a complete IP address.
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree as we can see in the below image.
Wiki definition is “Representational state transfer is a de-facto standard for a software architecture for interactive applications that typically use multiple Web services. In order to be used in a REST-based application, a Web Service needs to meet certain constraints; such a Web Service is called RESTful.” Statelessness in REST APIs. Statelessness means that every HTTP request happens in complete isolation. When the client makes an HTTP request, it includes all information necessary for the server to fulfill that request. The server never relies on information from previous requests. If that information was important, the client would have sent it again in this request. Use Json format. The below image shows a REST API in json format supposedly for user, it also denotes the key value pairs used in json.
There are a lot of communication protocols which are used in real world systems. I have planned a separate session and post for this topic however in brief for web development only HTTP and HTTPS are important for now.
HTTP - Hypertext Transfer Protocol → Based on request and response architecture HTTPS - Secured HTTP → Works same as HTTP but is secured with SSL(a type of encryption) certificates Other protocols are WebSockets, WebRTC, MQTT, SMTP, etc.
According to Mozilla Docs HTTP is a protocol which allows the fetching of resources, such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is reconstructed from the different sub-documents fetched, for instance text, layout description, images, videos, scripts, and more. Clients and servers communicate by exchanging individual messages (as opposed to a stream of data). The messages sent by the client, usually a Web browser, are called requests and the messages sent by the server as an answer are called responses. HTTP Protocol comes with a facility called “requests/responses”, each communication that takes place on Internet with HTTP, involves the play of requests and responses. Requests are like a function which runs over the internet, takes in an endpoint, may or maybe some arguments and run, returning a response. Endpoint is the combination of IP and Port n.o which is mapped to a custom domain name, it looks like “http://126.96.36.199:8000", where former is the IP and later is the port no, it can be mapped to a domain like eg. www.example.com Requests are the medium to send data. The API accepts or sends requests, which are of GET,POST,PUT,DELETE, as name suggests GET is mainly for fetching useful data from api endpoint, POST is mainly for sending data to api endpoint and PUT for replace and DELETE for deletion of data from database at the server which serves the endpoint. The image below would explain well about HTTP protocol, with requests and responses.
CDN stands for a content delivery network. It refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content. The content may be a document, image or any file. A CDN basically provides an endpoint URL for a specific file which is served/accessed directly from the server. Eg. All the videos uploaded on Youtube are stored in various distributed buckets managed by a CDN. Similarly for any Image on google or any website.
In software engineering, version control is a class of systems responsible for managing changes to computer programs, documents, large web sites, or other collections of information. Eg. Git Version Control tools - Github(Open Source), Gitlab, Bitbucket. A version control system manages each and every change that we make in our code, if at any point in time we want to see what was the state of my project at a particular point throughout its development a VCS provides features for such things. No project should ever be made without using a VCS and for this I would recommend to learn the best VCS which is Git and also make an account on Github for beginners. Git is something which developers should use every now and then working on any project. The model of a VCS and how it manages the project is described in the image below.
In order to protect the privacy of information which is being shared on internet between different websites, apps and users from going into wrong hands(hackers) there are various techniques used which are covered under cyber security. A web developer needs to address those security measures properly while developing any production based websites. Some of these techniques involves, authentication, encryptions, two factor authentication, email verification, etc.
“Systems design is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements. Systems design could be seen as the application of systems theory to product development.” “Software architecture refers to the fundamental structures of a software system and the discipline of creating such structures and systems. It functions as a blueprint for the system and the developing project, laying out the tasks necessary to be executed by the design teams.” Both software archtecture and system design is very important when developing any web project. It combinely tells how the services and process are connected with each other. In a real world system a bad system design or software architecture could result in loss of heavy money when using cloud services. The image below shows how a system design looks like.
DevOps is a set of practices that combines software development and IT operations. It aims to shorten the systems development life cycle and provide continuous delivery with high software quality. Involves working with services like AWS, Microsoft Azure, Google Developer Cloud, Digital Ocean, etc. DevOps guys basically work on improvising the System Design of the product which I mentioned previously is very important. DevOps engineers may not develop the application, but are very important in a project. A web developer and especially fullstack and backend should know the basics of DevOps to plan their project well.
Thankyou for reading