DEV Community: sisrafilss

Introduction to Backend Web Development, APIs, and Express.js

sisrafilss — Thu, 30 Dec 2021 13:23:37 +0000

Backend development is the soul of web development process. Backend is a place where most of the business logic happened stealthily of the users. Backend is hosted in a special computer called server that runs 24/7 and is always connected to the internet. Today we will discuss about Backend Web Development, Introduce APIs and create a simple server using Express.js.

Backend Web Development Explained

Backend development means developing the server-side of a website, including databases. The front and backend are like a restaurant, with its kitchen with larder. The front side is the restaurant itself, decorated with chairs, tables, etc. It is a place that the client of the restaurant can see. Similarly, a front end of a website is the visual and graphical part of it that a visitor sees in the browser.

On the other hand, the backend or server-side is like the restaurant’ where all the cooking happens. The database is like the larder where all the necessary information is kept.

What is APIs

API - Application Programming Interface is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system.

There are various APIs, like weather API, Police API, Geolocation API, etc.

API Endpoints, Paths, and Parameters

When we discuss API, we need to think about a few things, including Endpoint, Paths, Parameters, and Authentication.

The Endpoint is a URL that is used to send GET requests to an API like
https://v2.jokeapi.dev/joke/Any

Sometimes it added a few words at the end of the endpoint like https://v2.jokeapi.dev/joke/Programming?contains=debugging
The last part after the endpoint after the “?” mark is divided by two-part by the “=” sign. These two parts are called key-value pairs. It is called a parameter.

We can add multiple parameters by separating them using ‘&.’ We have to start adding parameters after adding a “?” (question mark) after the endpoint.

What is Express?

According to Wikipedia, “Express.js, or simply Express, is a back-end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.”

Creating Our First Server with Express

Make a directory and run initialize npm using npm init. Create a .js file (i.e. server.js) install express using npm install express. It will automatically be downloaded and saved as dependencies.

To start server, first add express in the .js file (server.js) using

const express = require("express"); const app = express();
app.listen(3000, function() { console.log("server has started with port : 3000 });

Run it in the command line using node server.js to check. It will print the console. Browse localhost:3000 will show something like “Cannot GET /” if it was successful.

Handling Requests and Responses: the GET Request

Use another method called get, just above the listen method. get method will accept two parameters. The first is the path (“/” for root) and a callback function. The callback function will also receive two parameters, request and response. Standard is to call them req, res. i.e.

app.get("/", function(req, res) {
    res.send("<h1>Hello, wrld</h1>");
});

Understanding and Working with Routes

The first parameter inside the get method is called the route or path of a webpage. We can set it any as our requirement. I.e., “/contact”, “/about” etc. We can specify as many paths for the different pages using the get method multiple times.

To avoid manually stopping and starting the server, we can automatically control and restart the server.js after every save by installing an npm module called nodemon. Visit nodemon.io for detailed instruction.

Responding to Requests with HTML Files

Inside the get method, res.sendFile() sends any file to the browser. __dirname brings and adds the current folder location for dynamically adjusted file location. i.e., to send index.html to the browser, we have to use,

res.sendFile(__dirname + "index.html");

Processing Post Requests with Body Parser

Set the value of action attribute “/” (action=”/”) to send the user input to the server via post method (method=”POST”).

To capture the value of the input into the server and send back something to the user, we have to do two things.

First of all, set the app.post. Using:

app.post("/", function(req, res) {
    res.send("Send something to the user to show after submitting");
})

Secondly, we have to install and use the body-parser to capture the value of the input.
Install body-parser -

npm install body-parser

Require it -

const bodyParser = require(“body-parser”)

Use it using express -

app.use(bodyParser.urlencoded({extended: true});

To get all the user input values, use req.body inside app.post -

app.post("/", function() {
    req.body // Every input value will be in body object i.e to access the value of name="number", use req.body.number, etc.

} );

Basic concepts of JSX and Virtual DOM every React JS developer should know

sisrafilss — Thu, 30 Dec 2021 11:08:03 +0000

JSX and Virtual DOM are the two main concepts of React JS that powered React JS to reach its unique stage. Today we will discuss these two concepts in brief.

What is JSX?

JSX is an acronym of JavaScript XML. JSX is nothing but a syntactic sugar of creating React Element. It allows us to write HTML-like syntax in JavaScript function.

Why JSX?

Before going into detail about why JSX is used, let’s take a look at how HTML renders by the browsers.

We all know that browsers can only understand HTML code. But how does the browser run the HTML code under the hood and display the amazing pages? Basically, when the browser renders the HTML code, it passes them through HTML parser and creates an object-like structure called DOM tree (DOM stands for Document Object Model). The next step of rendering is Attachment. In the attachment phase, all the style rules are attached with DOM tree and sent to the Render tree. Finally, Render tree pains the element on the screen, and we can see them.

When browser converts the HTML to DOM tree, it used a document method called createElemet() for every HTML element. For example -

const root = document.getElementById("root");
const h2 = document.createElement("h2");
h2.innerText = "Hello, world!";
root.appendChild(h2);

In the above code, first, we have created an HTML element using document.createElement() method. The browser does the same for every HTML element on the page while parsing a page. When browser’s HTML parser finds any HTML element, it converts it to DOM element using document.createElement method. So, HTML is nothing but a syntactic sugar of createElement method, which allows us to create elements simply and concisely.

Similarly, React JS has a virtual DOM. It needs to create React Elements for its virtual DOM. We can create react elements using React.createElement method. But it is tedious to create multiple or nested elements by calling the React.createElement method again and again. JSX made a developer’s life easy and simple by enabling us to create react elements using simple HTML-like syntax. See the following examples -

To display hello h2 (wrapped in h2) and hello h3 (wrapped in h3) on the web page under root div using React.createElement we have to write -

const root = document.getElementById("root");

// Only using React.createElement
const element =  React.createElement('div', null, [
   React.createElement("h2", null, "Hello h2"),
   React.createElement("h3", null, "Hello h3"),
]);

ReactDOM.render(element, root);

But we can do the same using JSX like the following -

const root = document.getElementById("root");

// Using JSX
const element = <div>
   <h2>Hello h2</h2>
   <h3>Hello h3</h3>
</div>

ReactDOM.render(element, root);

Virtual DOM and Diffing algorithm

We have discussed the browser DOM in short in the JSX section. React JS stands on an idea of something similar to browser DOM called virtual DOM. Virtual DOM is a mirror copy of browser DOM. When we run a react app in the browser, React JS creates a copy of the browser DOM and holds it in the memory.

The reason React creates a virtual DOM is to identify any change of state on the DOM elements and update it to the UI quickly and efficiently.
When we change any element in the browser DOM, it needs to re-render the whole DOM tree. Modern single-page applications can have hundreds of thousands of states. Sometimes, it is costly to detect any state change and update the UI accordingly. React brought a revolution in this case of handling vast amounts of state very quickly and efficiently.

How actually React JS handle this using virtual DOM? Well, let me explain.

As I have mentioned earlier, React creates a virtual representation of browser DOM when the application renders for the first time on the browser. If any of the elements or states change in the page, react create another copy of the previous virtual DOM without re-rendering the browser DOM and compare the changes between the previous virtual DOM and newly created virtual DOM using diffing algorithm. React made it very efficient and quick to find out the difference between them because there is no UI painting involved there. After identifying the difference, React only update the differents part of the browser DOM without re-rendering the whole page.

Though React is not the best solution for all use cases, it performs better compared with vanilla JS or using jQuery, where needs to deal with a massive number of states like SPA because of its virtual DOM concepts. So we should keep a clear-cut concept of React virtual DOM as a React JS developer.