DEV Community: Yomesh Gupta

Build your own Express.js - Part One

Yomesh Gupta — Wed, 09 Oct 2019 17:43:48 +0000

This is going to be a multipart series in which we are going to build a minimal, simple and yet powerful version of Express.js, called Minimal.js. We are going to talk about Node.js in-built modules, HTTP server, routing, middlewares and much more.

We all are learning on the go so if you find any mistake or any better way to do certain things or just want to share your feedback then I am all ears and open to collaboration. Let me know your opinions here.

Introduction

Express has become the de-facto standard framework for web server applications in Node.js. It is easy to use, has a low learning curve, exceptionally well plug & play middleware system and it's minimal by design. As its homepage says,

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

In this series, we are going to build a similar (but quite simpler) web framework like Express. Our architectural decisions and API design will be as close to Express as possible. However, some implementations would be different so take it with a pinch of salt. :P

Prerequisites

The latest stable version of Node.js installed
Basic understanding of JavaScript and Node.js runtime.

Part 1

This part would be a very simple introduction to Node.js modules, HTTP and we are going to create a basic server from scratch. If you already know all this then you can skip this one and move to part 2.

I would recommend that you should code along. So, go ahead, clone the repo and checkout start branch

git clone https://github.com/yomeshgupta/minimaljs.git
git checkout start

HTTP

This page is generated by a mix of HTML, CSS, and JavaScript, sent to you by Devtools via the internet. The Internet is full of pages like this and a lot of cat pictures. ALOT! 🐱 These pages are hosted on different servers all around the world. When we visit the internet and access any content, our browser must ask the servers for the content it wants and then display it to us. The content here is also known as a resource that can be of varied types such as HTML files, images, videos, scripts and many more. The protocol which governs all this communication is known as HTTP.

HTTP stands for Hypertext Transfer Protocol (HTTP). It is a protocol that is used to structure communication between client and server. A client makes a request to the server and the server provides apt response. It is a stateless protocol i.e. two requests to a server are mutually exclusive and the server does not keep any data between those requests.

The transfer of resources between server and client happens using TCP (Transmission Control Protocol). When you type an url such as www.devtools.tech into your browser then you are asking it to open a TCP channel to the server that resolves to that url. The server receives the request, processes it, sends back the response to the client (your browser) and closes the connection. When you again open the url then the entire procedure is followed again.

HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. They are commonly referred as HTTP verbs. I am listing some verbs below:

GET - Requests made to retrieve data.
POST - Requests made to submit data to server, resulting in change of state or side effects on server.
PUT - Requests made to replaces all current representations of the target resource with the request payload.
DELETE - Requests made to delete the specified resource on the server.

Complete list can be found here.

Just like the requests method, we have response status codes that are important for interpreting the server's response on the client-side. Some of the status codes are

200 - Successful
404 - Not Found
500 - Internal Server Error
301 - Redirect

Complete list can be found here.

To read more about HTTP, checkout this MDN resource page.

Let's build

Node.js provides a lot of powerful modules built-in; HTTP is one of those modules. As docs put it,

The HTTP interfaces in Node.js are designed to support many features of the protocol which have been traditionally difficult to use.

We are going to require http in our server.js

const http = require('http');

It provides us a method createServer which takes a callback requestListener as an argument and returns a new instance of http.Server. Let's use this.

const http = require('http');

const server = http.createServer((req, res) => {
    // request handling
});

Now, we a http.Server instance in server variable. Calling, listen method on it will allow our server to receive requests as in it will bind the server to a port and listen for incoming connections.

...
const server = http.createServer((req, res) => {});

server.listen(8080, () => console.log("Server running on port 8080"));

By doing this much, our server is live! However, what to do when an actual request comes in?? How to handle that?

The requestListener we talked about earlier is the one which executes when a request comes in. It receives two parameters:

request object contains information about the current request such as URL, HTTP headers, and much more.
response object contains methods which are used to send data back to client.

...
const server = http.createServer((req, res) => {
    res.writeHead(200, {"Content-Type": "text/html"});
    res.write("Hello world");
    res.end();
});
...

In above code snippet,

We are calling response.writeHead() which sends a HTTP status code and a collection of response headers back to client. Here, we are setting statusCode 200 and Content-Type: text/html.
We are calling response.write() which is used to send data to the client.
By calling response.end(), we are informing the server that response headers and body have been sent and request has been fulfilled. Server closes the connection after this method call.

Let's refactor a bit and create a config.js file to store our app's configurations.

touch config.js

Add the following code to it and require it in our server.js

module.exports = {
    PORT: 8080 // or any other port you wish to run your server on
};

The road so far...

const http = require('http');
const { PORT } = require('./config');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write('Hello world');
    res.end();
});

server.listen(PORT, () => console.log(`Server running on ${PORT}`));

Our server works so far and we have implemented a catch-all route that serves the same Hello World content for any URL you visit on the server. Let's make it a little nice and show some actual good old HTML. 😄

Create a public folder in your root directory and inside that folder make an index.html

mkdir public
cd ./public
touch index.html

Add the following html to index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Minimal.js | Part 1</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
                font-family: 'Roboto';
            }
            html,
            body {
                width: 100%;
                height: 100%;
            }
            body {
                background-color: #ececec;
                background-image: url('http://wallpaper.yomeshgupta.com/images/5.jpg');
                background-size: contain;
                background-position: center top;
            }
            h1 {
                max-width: 400px;
                margin: 0 auto;
                padding: 40px 0px;
                font-size: 18px;
                text-align: center;
            }
            a {
                color: #f67b45;
            }
            a:hover {
                color: #227093;
            }
        </style>
    </head>
    <body>
        <h1>
            Hello World. To see more wallpapers like this and make your new tab more delightful. Check out this
            <a href="https://chrome.google.com/webstore/detail/backdrops/beanogjmmfajlfkfmlchaoamcoelddjf"
                >Chrome Extension</a
            >.
        </h1>
    </body>
</html>

Now, let's require two Node.js in-built modules, fs and path

const fs = require('fs');
const path = require('path');

fs module is the File System module which provides an API for interacting with the file system. Basically, if you want to read any file, write to any file, make a directory, change permissions or anything else file system related; fs is THE CHOSEN ONE.

path module is basically a collection of utilities which helps while working with file system. It provides capabilities like resolving a path, finding directory name, finding the extension of a given file/path and so much more!

Use these modules to read and serve our newly created index.html to incoming requests

...
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    fs.readFile(path.resolve(__dirname, 'public', 'index.html'), (err, data) => {
        res.setHeader('Content-Type', 'text/html');
        if (err) {
            res.writeHead(500);
            return res.end('Some error occured');
        }
        res.writeHead(200);
        return res.end(data);
    });
});
...

Here,

We are using fs.readFile() method to read the contents of our index.html. It takes two arguments, file path and callback which will be executed once the file is read.
In our callback, if we encounter any error then we are sending error response else we are serving index.html's content.
We are also using path.resolve to find the exact location of index.html on the disk.

You can read about these modules here.

Phew! Our first part is over. We, now, have our first without express HTTP server up and running! In part-2 we are going to take this up a notch and will start working on our framework. Stay tuned!

The complete code for this part can be found in this Github repo.

Wallpaper used in the example here comes bundled with a super amazing minimal chrome extension, Backdrops. Check it out here.

Hopefully, this article helped you in some way and if yes, then kindly tweet about it by clicking here. Feel free to share your feedback here.

Intro to React Hooks | Todo App

Yomesh Gupta — Mon, 23 Sep 2019 16:53:36 +0000

React is one of the most popular and growing UI libraries today. With every new release, there are new features and deprecations along with it. Let's talk about one of the newest features of React, known as Hooks.

Why React Hooks?

Hooks are a new addition to React 16.8 to provide state management and side-effects in function components.

1) Earlier, only class components were used for local state management and lifecycle methods. These lifecycle methods have been essential for introducing side-effects, such as data fetching, listeners and many more. This lead to a lot of refactoring from functional stateless components to stateful class components whenever a functional component needed to use state or lifecycle methods. With Hooks, we can use features like state and effects without actually any component transformation. We will talk more about useState and useEffect while building the app later in the post.

import React, { useState, useEffect } from 'react';

function Counter() {
    // Using state in a functional component
    const [count, setCount] = useState(0);

    // Using effects in a functional component
    useEffect(() => {
        document.title = `Counter: ${count}`;
    }, [count]);

    render(
        <div>
            <p>You have clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

2) Reusable stateful behavior between React Components is a bit tricky. Though, it can be done using patterns like render props and higher order components. Using such patterns, components have to be restructured which makes code harder to understand and maintain. With Hooks, stateful logic can be extracted from the components into their own custom hooks which allows them to be tested independently and can be reused.

Let's start building!

We are going to build a simple Todo App in this blog post. Demo for the same can be seen here and Github repo here.

import React, { useState } from 'react';

function Todos() {
    // Creating a todos state variable
    const [todos, setTodos] = useState({
        1552406885681: {
            todo: 'Complete this blog post',
            isComplete: false
        }
    });

    // Rendering the todos
    return <div className="wrapper">
        <ul id="todos">
            {Object.entries(todos).map(([key, value]) => <li key={key}>{value.todo}</li>);}
        </ul>
    </div>;
}

Defining state with useState()

Like mentioned earlier, now we can do state management in functional components and to do so React provides us with a hook called useState.

1) It takes an initial state. Unlike class component's state, useState's initial state need not be an object. It can be a string, boolean, object or any other possible value in JavaScript.

const [count, setCount] = useState(0); // number
const [name, setName] = useState('Yomesh'); // string
const [fetched, setFetched] = useState(false); // boolean
const [todos, setTodos] = useState({}); // object

2) It declares a "state variable" whose value presists between the function calls. It provides exact same capabilities as this.state.

3) It returns a pair of values: the current state and a function that updates it. We get these return values via array destructing const [todos, setTodos] = useState({});

In the above code example, we created a state variable called todos with default value as our current todos.

Fetching Todos

Earlier, we have provided a default value to our todos but what if we have to fetch those todos from a remote API? In such cases, we need something like componentDidMount for data fetching like we used to do in class components.

React provides us with a hook called useEffect which can be used directly into a component and provides a way to mimick these lifecycle methods and go beyond that. When we talk about effects, we are basically referring to things like data fetching, updates to the DOM, event listeners, and likes. Let's see this in action step by step.

import React, { useState, useEffect } from 'react';

const TODOS = {
    1552406885681: {
        todo: 'Complete this blog post',
        isComplete: false
    }
};

function Todos() {
    // Creating a todos state variable
    const [todos, setTodos] = useState({});

    // Setting up an effect
    useEffect(function() {
        // fetch(REMOTE_URL).then(response => setTodos(response));

        // mocking API call
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(TODOS), 2000);
        }).then(response => {
            // Updating state variable
            setTodos(response);
        });
    });

    // Rendering the todos
    return (
        <div className="wrapper">
            <ul id="todos">
                {Object.keys(todos).map(key => {
                    const value = todos[key];
                    return <li key={key}>{value.todo}</li>;
                })}
            </ul>
        </div>
    );
}

useEffect always run after the render. So, they are non-blocking in nature. Consider them like giving React an instruction and executing it after the DOM has rendered. It takes two arguments: a function which will be executed after the render and a dependency array (More on this below).

In the above code snippet:

1) We are setting up an effect which is used to fetch data from an API (mocking). So, initially, our todos will be empty and we won't be seeing anything. After the inital render, useEffect will execute and data is being fetched.

2) An effect hook should return nothing or a cleanup function. That's why you may see the following error in your developer console log - Warning: An Effect function must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, you may write an async function separately and then call it from inside the effect. We can fix this via

    ...
    // Setting up an effect
    useEffect(function() {
        function fetchData() {
            // fetch(REMOTE_URL).then(response => setTodos(response));

            // mocking API call
            new Promise((resolve, reject) => {
                setTimeout(() => resolve(TODOS), 2000);
            }).then(response => {
                // Updating state variable
                setTodos(response);
            });
        }

        fetchData();
    });
    ...
}

3) This is all good and fine but if you execute the code so far, you will see that fetchData will be called after every render as useEffect executes after every render too! Check out this sandbox to see what I mean.

To avoid this infinite loop and for optimisation, useEffect takes a second argument which is called a dependency array. In this array we can mention all the variables on whose value change -- execution of useEffect depends. Suppose, we have a use-case where we need to display a list of items, fetched from a remote API, based on an input query. In this case, input query would be part of the dependency array. Check out this sandbox for a live example.

But in our app, we only need to fetch data once after the initial load. We can do that by providing an empty array as the second argument to useEffect. By doing so, our effect will only run once after the initial render, acting just like componentDidMount here.

...
useEffect(function() {
    {
        /* some processing */
    }
}, []); // acts like componentDidMount
...

4) Now, the data fetching part is done. Focus on the code below

.then(response => setTodos(response));

As we discussed earlier, const [todos, setTodos] = useState({}) provides us two return values. Second value is a function which allows us to update the state variable. Here, it is same as doing this.setState({ todos: response })
in a class component.

Adding Loader and Empty State

We will add a Loader and Empty component. Initially, there would be no todos so Loader will be displayed and if the fetch returns no result then Empty state will be displayed.

...
function Loader() {
    return <div id="loader">Loading...</div>;
}

function Empty() {
    return <div id="empty">No todos found...</div>;
}

function Todos() {
    const [fetched, setFetched] = useState(false);
    const [todos, setTodos] = useState({});
    const keys = Object.keys(todos);

    useEffect(function() {
        function fetchData() {
            new Promise((resolve, reject) => {
                setTimeout(() => resolve(TODOS), 2000);
            }).then(response => {
                setFetched(true);
                setTodos(response);
            });
        }

        fetchData();
    }, []);

    function renderContent() {
        if (!fetched) {
            return <Loader />;
        } else if (!keys.length) {
            return <Empty />;
        }
        return (
            <ul id="todos">
                {keys.map(key => {
                    const value = todos[key];
                    return <li key={key}>{value.todo}</li>;
                })}
            </ul>
        );
    }

    return <div className="wrapper">{renderContent()}</div>;
}

Refactoring...

So far so good but we can take it up a notch. People coming from the realm of Redux will enjoy it.

Welcome useReducer!

It is an alternative to useState. It accepts three arguments -- reducer, initialState, init function and returns current state and dispatch function to update that state.

As per React documentation,

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

const [state, dispatch] = useReducer(reducer, initialState, init);

Let's refactor some of our code now.

import React, { useEffect, useReducer } from 'react';

const TODOS = {
    1552406885681: {
        todo: 'Complete this blog post',
        isComplete: false
    }
};

const initialState = {
    fetched: false,
    todos: {}
};

function reducer(state, action) {
    switch (action.type) {
        case 'REPLACE_TODOS':
            return { ...state, fetched: true, todos: action.payload };
        default:
            return state;
    }
}
...
function Todos() {
    const [state, dispatch] = useReducer(reducer, initialState);
    const { fetched, todos } = state;
    const keys = Object.keys(todos);

    useEffect(function() {
        function fetchData() {
            new Promise((resolve, reject) => {
                setTimeout(() => resolve(TODOS), 2000);
            }).then(response => {
                dispatch({
                    type: 'REPLACE_TODOS',
                    payload: response
                });
            });
        }

        fetchData();
    }, []);
    ...
}

We can use dispatch deep inside component hierarchy and update our state, just like good old plain Redux Actions!

Let's Save, Complete and Delete

In this section, we are going to add the following functionalities

Saving a new todo

Here, we declare a new state variable task and will add a form. We are going to capture the new todo in the state variable and add it to the list via dispatching a new action when the form submits.

...
const [task, setTask] = useState('');

function reducer(state, action) {
    switch (action.type) {
        ...
        case 'ADD_TODO':
            return {
                ...state,
                todos: {
                    ...state.todos,
                    ...action.payload
                }
            }
        ...
    }
}
...
function saveHandler(e) {
    e.preventDefault();
    dispatch({
        type: 'ADD_TODO',
        payload: {
            [+new Date()]: {
                todo: task,
                isComplete: false
            }
        }
    });
    setTask('');
}

return (
    <div className="wrapper">
        <form method="POST" onSubmit={saveHandler}>
            <input type="text" onChange={e => setTask(e.target.value)} value={task} placeholder="What needs to be done?" />
            <input type="submit" value="Add" />
        </form>
...

Marking a todo as complete

Now, we are going to add some controls to the todo list. I have highlighted the added code. As you can see, we have added a Check FontAwesomeIcon. Upon clicking the check control, an action is dispatch which updates our current state and sets the isComplete flag to true for that particular todo.

You can always refer to this sandbox for a live example to visualize it better.

...
function reducer(state, action) {
    switch (action.type) {
        ...
        case "COMPLETE_TODO":
            return {
                ...state,
                todos: {
                    ...state.todos,
                    [action.payload.id]: {
                        ...state.todos[action.payload.id],
                        isComplete: true
                    }
                }
            };
        ...
    }
}
function controlHandler(id, operation) {
    switch (operation) {
        case "complete":
            dispatch({
                type: "COMPLETE_TODO",
                payload: {
                    id
                }
            });
            break;
        default:
            console.log("This is odd.");
    }
}
...
    function renderContent() {
        ...
        return (
            <ul id="todos">
                {keys.map(key => {
                    ...
                    return (
                        <li key={key}>
                            <p className={isComplete ? "complete" : ""}>
                                {todo}
                            </p>
                            <div class="controls">
                                {!isComplete ? (
                                    <FontAwesomeIcon
                                        icon="check"
                                        title="Mark as Complete"
                                        className="control-icon"
                                        onClick={() =>
                                            controlHandler(key, "complete")
                                        }
                                    />
                                ) : null}
                            </div>
                        </li>
                    );
                })}
            </ul>
        );
    }
...

Removing it once it has served its purpose

Just like complete functionality, we will add a delete icon with a click handler which filters the todos and update our state. Below is the complete working code of our app. I have highlighted the part added for removing a todo item.

You can always refer to this sandbox for a live example to visualize it better.

/*
    Author: Yomesh Gupta (https://www.twitter.com/yomeshgupta)
*/

import React, { useEffect, useState, useReducer } from 'react';
import ReactDOM from 'react-dom';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheck, faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import './styles.css';

library.add(faCheck, faTrash);

const initialState = {
    fetched: false,
    todos: {}
};

const TODOS = {
    1552406885681: {
        todo: 'Complete this blog post',
        isComplete: false
    },
    1552406885682: {
        todo: 'Add everything to this blog post',
        isComplete: false
    }
};

function reducer(state, action) {
    switch (action.type) {
        case 'REPLACE_TODOS':
            return { ...state, fetched: true, todos: action.payload };
        case 'UPDATE_TODOS': {
            return { ...state, todos: action.payload };
        }
        case 'ADD_TODO':
            return {
                ...state,
                todos: {
                    ...state.todos,
                    ...action.payload
                }
            };
        case 'COMPLETE_TODO':
            return {
                ...state,
                todos: {
                    ...state.todos,
                    [action.payload.id]: {
                        ...state.todos[action.payload.id],
                        isComplete: true
                    }
                }
            };
        default:
            return state;
    }
}

function Loader() {
    return <div id="loader">Loading...</div>;
}

function Empty() {
    return <div id="empty">Seems kind of empty here...</div>;
}

function Todos() {
    const [task, setTask] = useState('');
    const [state, dispatch] = useReducer(reducer, initialState);
    const { fetched, todos } = state;
    const keys = Object.keys(todos);

    // Setting up an effect
    useEffect(function() {
        function fetchData() {
            new Promise((resolve, reject) => {
                // mocking API call
                setTimeout(() => resolve(TODOS), 2000);
            }).then(response => {
                // Updating state variable
                dispatch({
                    type: 'REPLACE_TODOS',
                    payload: response
                });
            });
        }
        fetchData();
    }, []);

    function saveHandler(e) {
        e.preventDefault();
        dispatch({
            type: 'ADD_TODO',
            payload: {
                [+new Date()]: {
                    todo: task,
                    isComplete: false
                }
            }
        });
        setTask('');
    }

    function controlHandler(id, operation) {
        switch (operation) {
            case 'complete':
                dispatch({
                    type: 'COMPLETE_TODO',
                    payload: {
                        id
                    }
                });
                break;
            case 'delete': {
                const clonedTodos = { ...todos };
                delete clonedTodos[id];
                dispatch({
                    type: 'UPDATE_TODOS',
                    payload: clonedTodos
                });
                break;
            }
            default:
                console.log('This is odd.');
        }
    }

    function renderContent() {
        if (!fetched) {
            return <Loader />;
        } else if (!keys.length) {
            return <Empty />;
        }
        return (
            <ul id="todos">
                {keys.map(key => {
                    const value = todos[key];
                    const { isComplete, todo } = value;
                    return (
                        <li key={key}>
                            <p className={isComplete ? 'complete' : ''}>{todo}</p>
                            <div class="controls">
                                {!isComplete ? (
                                    <FontAwesomeIcon
                                        icon="check"
                                        title="Mark as Complete"
                                        className="control-icon"
                                        onClick={() => controlHandler(key, 'complete')}
                                    />
                                ) : null}
                                <FontAwesomeIcon
                                    icon="trash"
                                    title="Delete Todo"
                                    className="control-icon"
                                    onClick={() => controlHandler(key, 'delete')}
                                />
                            </div>
                        </li>
                    );
                })}
            </ul>
        );
    }

    return (
        <div className="wrapper">
            <form method="#" onSubmit={saveHandler}>
                <input
                    type="text"
                    onChange={e => setTask(e.target.value)}
                    value={task}
                    placeholder="What needs to be done?"
                />
                <input type="submit" value="Add" title="Add Todo" />
            </form>
            {renderContent()}
        </div>
    );
}
const rootElement = document.getElementById('root');
ReactDOM.render(<Todos />, rootElement);

Finally, our app is complete! Phew! However, we can go ahead and implement more functionalities like error handling, more controls, due date etc!
There are more hooks provided by React itself and we can even write our own custom hooks! Let's keep that for a part two of this blog post.

Quick Links: Working Sandbox | Github Repo

A powerful and more advanced version of this Todo App, along with many more features, is shipped with a super awesome chrome extension called Backdrops. You should check it out.

Backdrops is an amazing chrome extension which turns your boring chrome new tab to something more delightful and useful. Check it out here.

Hopefully, this article helped you in some way. It was originally posted here. Feel free to share your feedback here.