In this post, lets explore back-end web development 🚀 Questions like why and where it's used will be answered here. If you read my Node.js for Newbies series, all of that will now make more sense.
Contents 📜
How the Web Works ⚙️
This is just a broad overview of the behind the scenes
What happens when we enter a URL on our browser? In other words, what happens when we request from some API? Our browser(also called the client) requests the server where the webpage is hosted and the server sends back a response containing the webpage we requested.
This process is called the Request-Response model or Client-Server architecture
A URL contains:
A protocol (HTTP or HTTPS)
A domain name
A resource
In the above example jenkov is labelled as the domain but it's not really the address of the server we're trying to access. We used it as a convenient name to remember the URL. So, how do we convert the domain name to the address of the server that we're actually looking for? A DNS(Domain Name Server) is a special type of server that works like the phonebook of the internet. When we request a URL, the DNS looks up for the matching domain name and returns the browser the IP Address of the server.
Once the browser obtains the real web address, a TCP/IP socket connection is established between it and the server. This connection lasts until all the files of the website are transferred from the server.
What is TCP and IP connection though?
In networking, a protocol is a set of rules for formatting and processing data
TCP is the Transmission Control Protocol and IP is the Internet Protocol. They are the internet's fundamental control system. They are communication protocols that define how exactly data travels across the web.
Once the TCP/IP socket connection is established, the browser makes an HTTP(HyperText Transfer Protocol) request which is yet another protocol that allows the web servers and clients to communicate.
This is how a request message looks like:
// Start line: HTTP Method + request target + HTTP version
GET /maps HTTP/1.1
// HTTP Request Headers (many different possibilities)
Host: www.google.com
User-Agent: Mozilla/5.0
Accept-Language: en-US
// Request body (only when sending data to server like POST)
<BODY>
If the request target is empty, i.e., '/', we would be requesting for the root of the website.
Note: The main difference between HTTP and HTTPS is that HTTPS is encrypted using TLS or SSL.
Once the HTTP Request hits the server and it has figured out what exactly is to be sent, the server sends it back with an HTTP Response, which looks very similar to an HTTP Request. Something like this:
// Start line: HTTP version + status code + status message
HTTP/1.1 200 OK
// HTTP Response Headers (many different possibilities)
Date: Tues, 25 May 2021
Content type: text/html
Transfer-Encoding: chunked
// Response bodies (present in most responses)
<BODY>
Finally, when this response is received, the browser renders the HTML, CSS, JavaScript according to the website's specifications.
The job of the TCP is to break down the requests and responses into thousands of smaller chunks called packets and once they're processed the packets are assembled back into the original requests and responses. This would not have been possible if we send the data back and forth as a whole. IP carries out the transportation of the packets through the internet.
For the really curious ones out there: To view all of this in action 🎬 go over to any webpage, right-click and open Developer Tools. In the Network tab, you can see all the resources that our browser has requested the server. When you click any of the resources, you can see Request and Response headers under the Headers tab within it.
Frontend 🆚 Backend Development
Front-end development deals with everything that happens on the client side. It includes designing and building the website that will be visible to the user. Hence, the name "front-end."
Front-end technology stack includes HTML, CSS, JavaScript, React, Angular, Redux, GraphQL etc.,
Back-end development deals with everything that happens on the server side i.e., it is invisible to the final user. Hence, the name, "back-end."
A basic(static) server is really just a computer that consists of files of a website and runs an HTTP server that understands URLs, requests and sends back response. A dynamic server is capable of running our dynamic applications. A dynamic website usually uses a database to store users, application data, text to fill up templates etc.,
Back-end development handles operations like creating user profiles, perform log-ins, make payments, send emails, retrieve and send data from database, manipulate data in database, fill up templates and so much more!
Back-end technology stack includes NodeJS+MongoDB, PHP+MySQL, Python+PostgreSQL etc.,
Front-end + Back-end development = Full-stack development
Static 🆚 Dynamic API
First let's distinguish static and dynamic websites
A static/simple website contains the ready-to-be-served files(usually HTML, CSS, JavaScript, images etc.,). There is no work done by the server other than sending these files to the browser. There is no application running whatsoever.
Dynamic websites are built on the server each time a request comes in. Remember, the front-end JavaScript animations are not considered to be "dynamic" in this context. These websites have an application(like a Node.js app) running that interacts with the database. It creates webpages on the go using dynamic information to be filled in HTML templates. This process is called as server-side rendering.
For example, your Twitter feed is different every single day. Each user has a different feed. And every time you click on something, a new appropriate page is displayed. A dynamic website is also called as a web application (dynamic website + some functionality like creating user profiles, logging in etc.,)
An API(Application Programming Interface) also contains a database and an app running just like a dynamic website. But here, we send only the data to the browser(i.e., a JSON file). So, no HTML, no CSS or JavaScript is sent to the browser.
Once we build an API, we consume it on the client side; meaning, this is where the website is assembled by plugging in the data into templates. This is usually done using frameworks like React, Angular, Vue.js etc.,
Important: Dynamic websites build the website over the server(server-side rendered) but API-powered websites are built on the client side(client-side rendered)
Backend developers can just build the API and let the frontend developers work on building the website. Node.js is the perfect tool to do just this. Of course, we can also build dynamic server-side rendered websites.
The main advantage of building API-powered websites is that the JSON data can not only be consumed by the web browser, but also other clients like native IOS app, Android app, Windows application etc., 🤩
You've reached the end of this article. Comment down your views, questions, feedback etc., The next post I have for you will give you a deeper understanding of how Node.js works (event, event loop, streams etc.,). See you there ✌🏻