100xDevs Full Stack Web Development Cohort Journey

We have revised the foundation parts for the javascript for reference, promises, the asynchronous nature of JS, etc. The topics to be covered are the following

• Backend basics

• Express

Basics

• What is ECMAScript: Scripting language specification on which JS is based (Standard/rules/Documentation)

• what is JS: scripting language that conforms the ECMAScript specification; JS is beyond JS and includes additional features like DOM, functions like setTimeout(), and fs.readFIle, which are not part of ECMAScript.

• NodeJS ??: The traditional way of working with JS is a runtime embedded in the browser, preventing its scope beyond the browsers. So smart people around tech took the runtime from the browser and made something called NodeJS, which allows you to run JS code on your local machine. It's runtime to compile/run from outside the browser.

• What is Bun ?: Competitor for Nodejs, significantly faster than Nodejs. (written in zig)

Project ideas to learn Nodejs

• Create a command line interface

• Create a video player

• Create a game

• Create an HTTP server (Most used use-case)

HTTP server

To understand the server, we would like to get into the following topics for the HTTP client-side request, it consists of the following :

A. HTTP protocol

• Protocols are a set of rules for communication between machines or units of machines.

• This protocol is specifically for websites. It is the most common way for your website frontend to talk to its backend.

• For video lives, we use the WebRTC protocol

• 90-95% of frontend and backend interactions happen with HTTP, some others with web sockets, etc.

Let's take an example to understand this. Let's try asking chatgpt, what is 2+2?

B. Address (URL/IP/PORT) - the main domain URL for the website here its chat.openai.com

C.Route - it's like a room in a home (website), here its /backend-api/conversation

D. Headers-cookies (for ex, some websites directly login without actually logging in. This happens with the help of headers ),

E. Body( Usually in JSON ), and Query params - these are the ways to send data to the backend

F. method - POST, GET, UPDATE, PUT, DELETE… - GET to get the data from the backend.

Now, we would like to get into the following topics for the HTTP server-side response, it consists of the following :

A. Response Headers (mostly used for login purposes), Response Body (here it's - “2+2 is 4”) - these are the ways to send data from the backend to the frontend.

B. status code -200-OK,404-PAGENOT FOUND,403 - AUTHENTICATION ISSUES, 500 INTERNAL SERVER ISSUES. the backend throws some codes that indicate the status of the server rendering - for the rendering server is okay - 200

Internal working of the request and response processing

• while sending a request, the URL is parsed to get the main domain. The DNS is converted to an IP address (DNS Lookup ) as the backend would catch the server URL with the IP. Establishes a connection to the IP (does handshake)

• while sending response - receives input, calculates output, sends it (headers, body, status code)

• TASK - build an HTTP server in Rust with actix-web or with C/C++

Writing the code for the HTTP server

• We use the express JS library for creating the HTTP server, please follow the comments to understand the boilerplate code

•     // Import the Express module
      const express = require('express');
  
      // Create an instance of the Express application
      const app = express();
  
      // Define a route for the root path ('/')
      app.get('/', (req, res) => {
        // When a GET request is made to '/', send the response 'Hello, World!'
        res.send('Hello, World!');
      });
  
      // Specify the port for the server to listen on
      const port = 3000;
  
      // Start the server and listen for incoming requests on the specified port
      app.listen(port, () => {
        console.log(`Server is listening on port ${port}`);
      });
  

• In the upcoming weeks, we will learn about the middleware and deep dive into the express code.

Please follow the journey, even if you are not a part of the cohort, following the curriculum and assignments can make you a better developer at the MERN stack.

Please find the codes, and assignments for the cohort in the GitHub Repository

Stay tuned for the upcoming blogs and interesting algorithms.