DEV Community: UJJWAL GUPTA

Express 5 is here, what’s new?

UJJWAL GUPTA — Tue, 03 Dec 2024 12:13:29 +0000

Expressjs is a popular framework for nodejs, you can say its foundation of nodejs. The current version is express 4 which is the most popular and stable version and work on next version Express5 was being done but super slow.

Express5 is finally released after wait of 10 years with some major changes. In this article we are going to cover all these changes.

If you prefers to watch videos, i have created a video with proper explanation and comparision with expressjs4.

Here are 10 major changes in express 5.

1. Support for es6

Express5 now supports es6 which means we can use import instead of require and all other modern ecmascript features. This allows developers to write much cleaner code and use all modern javascript syntax.

2. Promise rejection support

In express4 if you are using promise/async await code and if error happens, you had to manually catch the exception and then pass the error in next middleware.

Express5 automatically handles this which means focus on your logic not handling the exception.

3. Builtin body parser

In Express 4 we had to install seperate library “body-parser” for handling post data.

Express 5 has body-parser integrated internally which means no extra dependency.

4. req.param(name) removed

In earlier version of express — you could extract forms data using

req.param(name)

This could be data from query, param or even body which confuses the source of data. This was already deprecated.

But in express it has been completely removed. Now you need to explicitly use — req.query, req.body or req.param based on where data is coming from.

5. app.del replaced with app.delete

In express 4 — the HTTP DELETE route was registered using app.del but in express5 it has been replaced with more explicit word delete, so you need to now use app.delete

6. app.param(fn) middleware is removed

In express4 app.param middleware was used to defined middleware that executes whenever the route param was found. This was used to preprocess some data, for example — if a route param has userId then find the user from database and attach to the request which would be needed later.

In express5 this has been removed and developers are encouraged to use more explicit approach that is use a middleware just before the route. This makes the things much clear and easy to debug.

7. `res.send(status)` replaced with `res.sendStatus(status)`

In express 4 you could send a response without data using res.send which confused developers like where is the data, is it a bug or something different.

In express5 an explicit method res.sendStatus is introduced for sending response with only status code and no data.

8. `res.send` sends data only

In express 4, you could send response with status code and data using

res.send(stauts, data);

but in express5, the send method only accepts one parameter which is data and a method status has been added to send the status.

res.status(status).send(data);

9. `req.query` is read only

In express 4 , you could mutate the req.query — add aadditional property or remove.

req.query.id =5 ;

this creates confusion as source of data was not request but set somewhere explicitly in the code.

In express 5, req.query is read only which means no more changes on the req.query

10. `req.body` is undefined by default

In express 4, req.body value was empty object {}by default. So if you are in get request or you have not configured body parser the value of req.body will be empty object.

But in express5, it will be undefined. Which will explicitly states that there is no body data.

Conclusion

Express 5 majorly focuses on -

Express 5 focuses on making things more clear and explicitly defined.
Remove confusing parts
Move external dependency to internal dependency
Internal optimization
Support for modern javascript

👉 Thanks for reading everyone. Please let me know what do you think about express5 in the comments and follow me for more such articles.

💁‍♂ Also if you like to watch tech videos, please subscribe to my youtube channel. Where i share lot of tech tips, news, experiment etc.

https://www.youtube.com/@codewithujjwalgupta

Connect with me at -

Twitter — https://twitter.com/ujjwal_kr_gupta

Linkedin — https://www.linkedin.com/in/ujjwalkrgupta/

Github — https://github.com/ujjwalguptaofficial

Fort.js: Revolutionizing Node.js Development - Simplicity, Speed, and Component-Based Modularity

UJJWAL GUPTA — Wed, 24 Jan 2024 13:37:44 +0000

Introduction

In the ever-evolving landscape of web development, Node.js stands tall as a powerhouse for building scalable and efficient applications. However, the available frameworks often lead developers down a path where the focus is primarily on immediate application development, potentially sacrificing long-term maintainability and code cleanliness. This can pose challenges for new team members trying to understand and contribute to the codebase.

Contrast with Java and C# Ecosystems

In ecosystems like Java and C#, developers benefit from robust frameworks that prioritize maintainability, making it easier for new team members to dive into the code. Fort.js emerges as a solution in the Node.js world, aiming to bridge the gap between powerful development and sustainable, understandable code.

The Fort.js Approach:

Fort.js leverages the strengths of modern JavaScript and TypeScript to address the challenges faced by Node.js developers. It introduces simple APIs and adopts the Fort architecture, promoting modularity through components without compromising on performance – reportedly three times faster than Express.js.

Here is link to fortjs docs - https://fortjs.net/

The Component Advantage:

One of Fort.js's standout features is its robust support for component-based development. Components enable developers to break down their applications into modular, self-contained units. This approach enhances maintainability, encourages code reusability, and facilitates collaboration among team members.

Key Features of Fort.js with Component Support:

Dependency Injection: Similar to Nest.js, Fort.js embraces dependency injection, a cornerstone for building loosely coupled and easily testable components.
MVC Architecture: Fort.js adheres to the Model-View-Controller (MVC) architecture, providing a structured approach for organizing components and promoting a clean separation of concerns.
Express Middleware Support: Seamless integration with Express middleware ensures compatibility with a wide array of existing middleware modules, allowing developers to leverage the Node.js ecosystem.
Typescript Friendliness: Fort.js fully supports TypeScript, offering developers the advantages of static typing for improved code quality and enhanced development experience.
Component-Based Modularity: Fort.js empowers developers with a robust component system, enabling them to modularize their code for enhanced maintainability and reusability. Components can be easily managed, tested, and reused across different parts of the application.

Comparison with Nest.js

Nest.js, a widely adopted framework, embraces the architecture of Angular and is built on top of Express.js. While Nest.js attempts to address the challenges that Fort.js aims to solve, it can be perceived as complex, especially in simpler scenarios.

The unnecessary abstraction and concepts such as modules, imports, providers, and exports may lead to a steeper learning curve and increased verbosity in Nest.js. Developers may find themselves entangled in solving issues related to dependency injection, module configuration, and order of operations, which can consume a significant amount of time.

In contrast, Fort.js takes a different approach. Each API and functionality, including Dependency Injection (DI) and validation, is designed to be used in a straightforward manner. The goal is to enable developers to focus on the application's development rather than spending time fixing framework-related errors.

Let's see an example of Dependency injection -

import { Controller, singleton } from "fortjs";
import { UserService } from "@/services";

export class UserController extends Controller {
    service: UserService;

    constructor(@singleton(UserService) service) {
        super();
        this.service = service;
    }
}

You just need to pass your class in singleton decorator and it will be injected and also managed as singleton. Much simple right?

You can also inject dependency into route methods as required, check docs here - https://fortjs.net/docs/concepts/dependency-injection#inject-into-controller-methods

The Fort.js framework aims to provide simplicity and clarity, ensuring that even in complex scenarios, developers can navigate and implement functionalities efficiently without unnecessary complications.

Comparative Analysis

Let's compare Fort.js, Nest.js, and Express.js, emphasizing Fort.js' ability to simplify development without compromising advanced features, especially in contrast to Nest.js complexity.

Feature	Nest.js	Express.js	Fort.js
Dependency Injection	Yes	No	Yes
MVC Architecture	Yes	No	Yes
Express Middleware	Yes	Yes	Yes
Typescript Support	Yes	Yes	Yes
Component-Based Modularity	Yes (Complex)	No	Yes
Performance	-	-	3x faster than Express.js

Supporting Fort.js

If you find Fort.js intriguing and would like to support the project, consider starring the Fort.js GitHub repository. Each star serves as motivation and helps boost confidence in the journey of refining and enhancing the framework.

Conclusion

Fort.js not only offers a compelling alternative to Nest.js but does so with a focus on simplicity, speed, and component-based modularity. Addressing the potential complexities of Nest.js, Fort.js stands as a groundbreaking solution for teams seeking a more straightforward yet powerful approach to Node.js development.

Please share the article and also please star the fortjs github repo at - https://github.com/ujjwalguptaofficial/fortjs

Here are some links :

Fortjs doc link - https://fortjs.net/
Fortjs github link - https://github.com/ujjwalguptaofficial/fortjs
Fortjs examples - https://github.com/ujjwalguptaofficial/fortjs-examples
Fortjs Author twitter handle - https://twitter.com/ujjwal_kr_gupta
Fortjs Author linkedin handle - https://www.linkedin.com/in/ujjwalkrgupta/

Introducing Mahal.js

UJJWAL GUPTA — Mon, 03 Oct 2022 16:06:26 +0000

I have been working on an awesome project since last two years and now it is completed and I can't stop myself to share this with everyone. It was a very tough and interesting journey but i am glad i was able to finish it 😃.

The project is named mahaljs. It is a javascript UI framework similar to reactjs but works without virual DOM similar to Svelte.

The project has been created from scratch. It has its own template engine, uses event based architecture(to make it feel native to javascript). All of its ecosytem projects like store, router etc has been also created from scratch.

These are some of awesome features -

Works without virtual DOM
Small in size but powerful - 7kb (minified + gzipped)
Truly reactive with two way binding
Better documenting - you can write documentation with yml syntax inside components
Event based architecture
Uses modern approach - class based components, decorators etc
Focuses on simplicity - simple API's and easy to learn

I have also created a documentation site. Here is link - https://mahaljs.com/docs/get-started/

The mahaljs is opensource and free to use. The project source code can be viewed on github - https://github.com/ujjwalguptaofficial/mahal

You might be wondering why i have created mahaljs, since already lots of framework exists. I have written a dedicated article to explain this, since everyone is asking the very same question - https://medium.com/@ujjwalkrgupta/why-i-created-mahal-js-9141b37fc64

I will request you to please try once 🙏 and share it with others if you liked it. Also feel free to contribute or create your own projects which can help community. Some of the projects ideas, i can think of are - bootstrap-mahal, materialize-mahal, alert UI, mahal-meta etc. Here is official ecosytem projects link - https://mahaljs.com/docs/ecosystem/

Also i am maintaining a dedicated blog for this projects, so that users can understand even smaller things and take advantage of it. Here is the link in case you want to join - https://medium.com/mahal-js

Thanks for reading it guys.

Let's learn and grow together, join me using below social links -

Twitter - https://twitter.com/ujjwal_kr_gupta
Linkedin - https://www.linkedin.com/in/ujjwalkrgupta/
Github - https://github.com/ujjwalguptaofficial

Browser indexeddb operation using jsstore

UJJWAL GUPTA — Wed, 15 May 2019 10:03:59 +0000

Introduction

IndexedDB is a NoSQL database technology in HTML5 which allows storing the data and doing different database operations in the browsers.

Properties of IndexedDB :-

It is a NoSQL Database technology.
It provides multiple APIs for different database operations. All APIs are async.
It allows to store files in the form of blobs.
It uses indexes to enable high performance search in the data.
It is an alternative to WebSQL since WebSQL is now deprecated.

In this article, I am going to describe how we can do CRUD operation in indexeddb using jsstore. I am going to explain the example given by JsStore. So, if you want to have a look or want to use it. Here is the link.

https://github.com/ujjwalguptaofficial/JsStore/tree/master/examples/Simple%20Example

Let's Code

First, create an HTML page, let's say index.html. Paste the below code inside index.html.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Crud Demo using jsstore</title>  
</head>  
<body>  

</body>  
</html>

Installation

There are different ways to install JsStore. Check out the installation doc - http://jsstore.net/tutorial/installation/

In this article, I am going to download JsStore from the official repository. Download the repo from https://github.com/ujjwalguptaofficial/JsStore and unzip it. Now, open the folder and navigate to - dist folder. There, you will see many files. For this article, we need to copy two files - jsstore.min.js, jsstore.worker.min.js.

Let's include the script in the HTML page, so now, our HTML becomes.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Crud Demo using jsstore</title>  
    <script src="jsstore.min.js"></script>  
</head>  
<body>  
<h4>We have included JsStore in this html code.</h4>  
</body>  
</html>

Now, we need to initiate the JsStore in order to use. You can see that in line 13, I have created an instance of JsStore and stored it in a variable connection.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Crud Demo using jsstore</title>  
    <script src="jsstore.min.js"></script>  
</head>  
<body>  
<h4>We have included JsStore in this html code.</h4>  
<script>  
    var connection = new JsStore.Instance(new Worker('jsstore.worker.js'));  
</script>  
</body>  
</html>

Now, the variable - "connection" will be used to perform the database operation.

Note :- When you open the HTML file, you will see an error in the browser. That is because the worker is not accessible in the file protocol in some browsers, like Chrome. So, please use an HTTP Server for making it work.

Create Database

JsStore follows SQL approach to create a database - A database consists of tables and a table consists of columns. Let's see how to create a database schema in JsStore.

function getDatabase() {  
    var tblStudent = {  
        name: "Student",  
        columns: [{  
                name: "Id",  
                primaryKey: true,  
                autoIncrement: true  
            },  
            {  
                name: "Name",  
                notNull: true,  
                dataType: "string"  
            },  
            {  
                name: "Gender",  
                dataType: "string",  
                default: 'male'  
            },  
            {  
                name: "Country",  
                notNull: true,  
                dataType: "string"  
            },  
            {  
                name: "City",  
                notNull: true  
            }  
        ]  
    }  
    var dataBase = {  
        name: "Students",  
        tables: [tblStudent]  
    }  
    return dataBase;  
}

So what we have done -

Created a function 'getDataBase' which will return the database schema. Inside the function, we have created a table - tblStudent. tblStudent has a property Columns which contains a list of columns.
A database is created with the name - "students" and tblStudent is passed to the database.
The interesthing thing to note here is that - we are using options like : autoIncrement, default, notNull etc. which is not supported by default in indexedDb. But jsstore provides it.

Now, we have easily created the DB schema. But the database is not created yet.

Now, let's create the DB.

function initiateDb() {  
    var DbName = "Students";  
    connection.isDbExist(DbName).then(function(isExist) {  
        if (isExist) {  
            connection.openDb(DbName).then(function() {  
                console.log('db opened');  
            });  
            showTableData();  
        } else {  
            var DataBase = getDatabase();  
            connection.createDb(DataBase).then(function(tables) {  
                console.log(tables);  
            });  
        }  
    }).catch(function(err) {  
        console.log(err);  
        alert(err.message);  
    });  
}

The above function, when called, checks whether a database is created or not. If it is created, then we open the DB, otherwise create the DB. You can see we are calling getDatabase for getting db schema and then passing it to createDb API.

Now, we need to call the initiateDb - we will call this in onload event.

window.onload = function() {  
    initiateDb();  
};

When the page is loaded - the connection variable is initialized and db is created or opened. When you create db, JsStore also opens the db connection.

So, now the connection variable knows that this is the database with which you want to perform the operations.

Insert Data

JsStore provides Insert API for inserting the data. Check out insert doc. We have created a table ' Student ' which has the columns - Id, Name, Gender, Country, City.

So a row (value) in the table student will be -

var value = {  
    Id: 1,  
    Name: 'durgesh',  
    Gender: 'male',  
    Country: 'India',  
    City: 'efr'  
}

But the Id is autoIncrement column, so we should not supply the value.

Now, let's insert the above values in table.

var value = {  
    // Id: 1,  
    Name: 'ffff',  
    Gender: 'male',  
    Country: 'USA',  
    City: 'efr'  
}  

connection.insert({  
    into: "Student",  // table name
    values: [value]  
}).then(function(rowsAdded) {  
    if (rowsAdded > 0) {  
        alert('Successfully added');  
    }  
}).catch(function(err) {  
    console.log(err);  
    alert('Error Occured while adding data')  
});

In the above code, we are calling the Insert API, passing the table name, and values to insert.

Read Data

JsStore has Select API for reading the data. Check out select docs for more info. So, let's say we want to read all the data in a table. The query will be like following.

connection.select({  
    from: "Student"  
}).then(function(datas) {  
    console.log(datas);  
}).catch(function(err) {  
    console.log(err);  
});

Now, let's say we want to select data from student whose id is 1. In that case we need to fliter row & JsStore provides - where to filter data. So the query will be like below.

connection.select({  
    from: "Student",  
    where: {  
        Id: 1  
    }  
}).then(function(datas) {  
    console.log(datas);  
}).catch(function(err) {  
    console.log(err);  
});

Update Data

JStore provides Update API for updating the data. Check out update docs. So, let's say we want to update the student name whose id is 1, then the query will be like.

connection.update({  
    in: "Student",  
    where: {  
        Id: 1  
    }  
}).then(function(rowsUpdated) {  
    console.log(rowsUpdated);  
}).catch(function(err) {  
    console.log(err);  
});

Delete Data

JsStore provides delete API for deleting the data. Check out update docs. Let's say we want to delete a student whose id is 2, then the query will be like below.

connection.remove({  
    from: "Student",  
    where: {  
        Id: 2  
    }  
}).then(function(rowsDeleted) {  
    console.log(rowsDeleted);  
}).catch(function(err) {  
    console.log(err);  
});

Summary

JsStore makes IndexedDB very simple and easy with its SQL like API. If you know SQL, then you already know the JsStore, you just have to start coding.

Reference

Rest API In Node.js Using TypeScript And FortJs

UJJWAL GUPTA — Tue, 26 Mar 2019 12:27:14 +0000

Introduction

Typescript is a great technology - which adds static typing to your javascript code, provides better intillisense support means faster development and much more. The popular client side framework Angular2 is an example of how typescript can be used to create a large project in less time.

Now you must be wondering - can we use the power of typescript to create a nodejs server ?

The answer is yes.

In this article :- we will use fortjs - a nodejs mvc framework fully compatible for typescript and next gen javascript - es6, es7.

Code

The codebase of this article can be downloaded at - Example link on github

Setup

Clone or download the typescript starter project of fortjs — https://github.com/ujjwalguptaofficial/fortjs-typescript-starter.

After you have downloaded the project. Open the console and move to project directory and do the following steps,

run the command - npm install
run the command - npm run start

Open the url - localhost:4000 in browser . You will see something like below,

REST

We are going to create the rest end point for entity user - which will perform the crud operations for user like adding user, deleting user, getting user, updating user.

A/c to REST,

Adding user - should be done using http method "POST"
Deleting user - should be done using http method "REMOVE"
Getting user - should be done using http method "GET"
Updating user - should be done using http method "PUT"

For creating an end point we need to create a controller. You can read about controller here - http://fortjs.info/tutorial/controller/

create a file user_controller.ts inside the contollers folder & Copy the below code inside the file,

import { Controller, textResult, DefaultWorker} from 'fortjs'  
export class UserController extends Controller {  
      @DefaultWorker()  
      async default() {  
          return textResult('you have successfully created a user controller');  
      }  
}

In the above code,

We have created a class "UserController" which is extending another class Controller from fortjs.
We have created a method default which is returning some result by using the method textResult from fortjs. textResult return http response with content-type 'text/plain'.
We have used a decorator DefaultWorker from fortjs. A worker makes the method visible for http request so that it can be called using http request (no worker means it just a function which is only available for this class). A default worker is a worker which add the route "/" for target method. Please take a look at worker doc - http://fortjs.info/tutorial/worker/
We have created a controller but its still unknown by fortjs & in order to use this controller ,we need to add this to routes. Open routes.ts inside folder src and add UserController to routes.

We have created a controller but its still unknown by fortjs & in order to use this controller ,we need to add this to routes. Open routes.ts inside folder src and add UserController to routes.

import {DefaultController } from "./controllers/default_controller";  
import { UserController } from "./controllers/user_controller";  

export const routes = [{  
    path: "/*",  
    controller: DefaultController  
},{  
    path: "/user",   
    controller: UserController  
}]

You can see we have added the path "/user" for UserController. It means when the path is "/user", UserController will be called.

Now open the url — localhost:4000/user. You can see the output which is returned from default method inside “UserController”.

One thing to notice here is that - codes looks very simple and nice. This is possible due to typescript & fortjs. And another fun is that - you will get intillisense support and this all make life easy for a developer :).

Service

Before moving further let’s write service code, which will help us to do crud operation.

Creating models

Create a folder “models” and then a file “user.ts” inside the folder. Paste the below code inside the file,

import { Length, Contains, IsIn, IsEmail } from "class-validator";  

export class User {  
    id?: number;  

    @Length(5)  
    password?: string;  

    @Length(5)  
    name: string;  

    @IsIn(["male", "female"])  
    gender: string;  

    @Length(10, 100)  
    address: string;  

    @IsEmail()  
    emailId: string;  

    constructor(user: any) {  
       this.id = Number(user.id);  
       this.name = user.name;  
       this.gender = user.gender;  
       this.address = user.address;  
       this.emailId = user.emailId;  
       this.password = user.password;  
    }  
}

I am using a npm plugin - "class-validator" to validate the model. This model “user” will be used by service and controller for transfer of data.

Create a folder “services” and then a file “ user_service.ts” inside the folder. Paste the below code inside the file,

import { User } from "../models/user";  

interface IStore {  
    users: User[];  
}  

const store: IStore = {  
    users: [{  
        id: 1,  
        name: "ujjwal gupta",  
        address: "Bengaluru india",  
        emailId: "admin-ujjwal@imail.com",  
        gender: "male",  
        password: "admin"  
    }]  
}  

export class UserService {

    getUsers() {  
        return store.users;  
    }

    addUser(user: User) {  
        const lastUser = store.users[store.users.length - 1];  
        user.id = lastUser == null ? 1 : lastUser.id + 1;  
        store.users.push(user);  
        return user;  
    } 

    updateUser(user: User) {  
        const existingUser = store.users.find(qry => qry.id === user.id);  
        if (existingUser != null) {  
            existingUser.name = user.name;  
            existingUser.address = user.address;  
            existingUser.gender = user.gender;  
            existingUser.emailId = user.emailId;  
            return true;  
        }  
        return false;  
    }  

    getUser(id: number) {  
        return store.users.find(user => user.id === id);  
    }  

    removeUser(id: number) {  
        const index = store.users.findIndex(user => user.id === id);  
        store.users.splice(index, 1);  
    }  
}

In the above code - we have created a dummy service. It contains a variable store which contains collection of users and the method inside the service do operation like — add, update, delete, get on that store.

GET

We are going to create an end point for getting user.

Let’s rename the default methods to “getUsers” which will return all users. Replace the code inside user_controller.ts by below code,

import { Controller, jsonResult, DefaultWorker} from 'fortjs'  

export class UserController extends Controller {  
    @DefaultWorker()  
    async getUsers() {  
       const service = new UserService();  
       return jsonResult(service.getUsers());  
    }  
}

As you can see - we are using DefaultWorker since its make the method visible for http request and add route "/" with http method "GET". So all these things using one decorator.

Let's try this using http client -

POST

We need to create a method which will add the user and only work for http method "POST". So now “UserController” looks like this,

import { Controller, jsonResult, DefaultWorker, HTTP_METHOD, HTTP_STATUS_CODE, Worker, Route } from 'fortjs'  

export class UserController extends Controller {  

      @DefaultWorker()  
      async getUsers() {  
          const service = new UserService();  
          return jsonResult(service.getUsers());  
      }  

      @Worker([HTTP_METHOD.Post])  
      @Route("/")  
      async addUser() {  
          const user = {  
              name: this.body.name,  
              gender: this.body.gender,  
              address: this.body.address,  
              emailId: this.body.emailId,  
              password: this.body.password  
          };  
          const service = new UserService();  
          const newUser = service.addUser(user);  
          return jsonResult(newUser, HTTP_STATUS_CODE.Created);  
      }  
}

In the above code,

We have created a method "addUser" & added a decorator “Route” with parameter “/” which will add the route to method "addUser". This means - method “addUser” will be called when url will be :- localhost:4000/user/.
In order to make this method visible for http request - we are using decorator “Worker”. The parameter “HTTP_METHOD.Post” makes the method only work when the request method will be POST.
The method addUser -takes data from body (post data) and add the user to store by calling service. After the successful addition , it returns the added user with http code - 201 (Resource Created).

In summary - we have created a method "addUser" which sole purpose is to add user. It only works for http method post & route "/".

You can test this by sending a post request to url - "localhost:4000/user/" with user model value as body of the request.

So we have successfully created the POST end point. But one thing to note here is that - we are not doing any validation for the user. It might be that invalid data is supplied in post request.

We can write code inside the method “addUser” to validate or write a seperate method inside a controller (like validateUser) for validation.

Let's add the validation code,

import { Controller, jsonResult, DefaultWorker, HTTP_METHOD, HTTP_STATUS_CODE, Worker, Route } from 'fortjs'  
import { User } from '../models/user';  
import { validate } from "class-validator";   

export class UserController extends Controller {  

    @DefaultWorker()  
    async getUsers() {  
        const service = new UserService();  
        return jsonResult(service.getUsers());  
    }  

    @Worker([HTTP_METHOD.Post])  
    @Route("/")  
    async addUser() {  
        const user = {  
            name: this.body.name,  
            gender: this.body.gender,  
            address: this.body.address,  
            emailId: this.body.emailId,  
            password: this.body.password  
        }  
        as User;  
        const errorMsg = await this.validateUser(user);  
        if (errorMsg == null) {  
            const service = new UserService();  
            const newUser = service.addUser(user);  
            return jsonResult(newUser, HTTP_STATUS_CODE.Created);  
        } else {  
            return textResult(errMessage, HTTP_STATUS_CODE.BadRequest);  
        }  
    }  


    async validateUser(user: User) {  
        const errors = await validate('User', user);  
        if (errors.length === 0) {  
            return null;  
        } else {  
            const error = errors[0];  
            const constraint = Object.keys(error.constraints)[0];  
            const errMessage = error.constraints[constraint];  
            return errMessage;  
        }  
    }  
}

Ok, so we have added the code to validation and it will work as expected but dont you think - our code looks little polluted and with the time it will look much pollute.

FortJs provides components for validation & any extra work, so that your code looks much cleaner and easy to manage.

FortJs says - "A worker should only have code related to its main purpose and extra code should be written into components."

There are three components of fortjs -

Wall - Used at app level
Shield - Used at controller level
Guard - Used at worker level

Let's implement the above validation using components - since we are doing operation on worker, we need to use Guard component.

Guard

Create a folder “guards” and a file “ model_user_guard.ts” inside the folder. Write the below code inside the file,

import { Guard, HttpResult, MIME_TYPE, HTTP_STATUS_CODE, textResult } from "fortjs";  
import { User } from "../models/user";  
import { validate } from "class-validator";  

export class ModelUserGuard extends Guard {  
    async check() {  
        const user: User = new User(this.body);  
        // here i am using a plugin to validate but you can write your own code too.   
        const errors = await validate('User', user);  
        if (errors.length === 0) {  
            // pass this to method, so that they dont need to parse again  
            this.data.user = user;  
            return null;  
        }  
        else {  
            const error = errors[0];  
            const constraint = Object.keys(error.constraints)[0];  
            const errMessage = error.constraints[constraint];  
            return textResult(errMessage, HTTP_STATUS_CODE.BadRequest);  
        }  
    }  
}

In the above code,

We are writing code inside the check method which is part of guard lifecycle. We are validating the user inside it.
If user is valid - then we are passing the user by using "data" property and returning null. Retuning null means guard has allowed this request and the worker should be called.
If user is not valid - we are returning the error message as text response with http code- "badrequest". We are retuning textResult which means the fortjs will consider this as response and worker wont be called.

Now we need to add this guard to method “addUser”,

@Guards([ModelUserGuard])  
@Worker([HTTP_METHOD.Post])  
@Route("/")  
async addUser() {  
    const user: User = this.data.user;  
    const service = new UserService();  
    return jsonResult(service.addUser(user), HTTP_STATUS_CODE.Created);  
}

In the above code,

I have added the guard - “ModelUserGuard” using the decorator - Guards .
With the guard in process, we dont need to parse the data from body anymore inside worker, we are reading it from this.data which we are passing from "ModelUserGuard" .
The method “addUser” will be only called when Guard allow means if all data is valid.

You can see that our worker method looks very light after using component.

PUT

Now we need to create a method which will update the user and will only work for http method — “PUT”.

Let’s add another method - “updateUser” with route “/” , guard — “ModelUserGuard” (for validation of user) and most important - worker with http method — “PUT”

@Worker([HTTP_METHOD.Put])  
@Guards([ModelUserGuard])  
@Route("/")  
async updateUser() {  
      const user: User = this.data.user;  
      const service = new UserService();  
      const userUpdated = service.updateUser(user);  
      if (userUpdated === true) {  
          return textResult("user updated");  
      }  
      else {  
          return textResult("invalid user");  
      }  
}

The above code is very simple, just calling the service code to update the user. But one important thing to notice is that we have reutilized the guard - “ModelUserGuard” and it makes our code very clean.

So we are done with,

GET - Returns all users
POST - add users
PUT - update user

Currently the GET request returns all the users but what if we want to get only one user.

Let’s see : how to do it,

We have created a method “getUsers” for returning all users. Now let’s create another method “getUser” which will return only one user.

@Worker([HTTP_METHOD.Get])  
@Route("/{id}")  
async getUser() {  
      const userId = Number(this.param.id);  
      const service = new UserService();  
      const user = service.getUser(userId);  
      if (user == null) {  
          return textResult("invalid id");  
      }  
      return jsonResult(user);  
}

In the above code - we are using a place holder in route. Now “getUser” will be called when url will be something like localhost:4000/user/1 The placeholder value is being consumed by using "this.param" .

REMOVE

We will use the same concept as get,

@Worker([HTTP_METHOD.Delete])  
@Route("/{id}")  
async removeUser() {  
      const userId = Number(this.param.id);  
      const service = new UserService();  
      const user = service.getUser(userId);  
      if (user != null) {  
          service.removeUser(userId);  
          return textResult("user deleted");  
      }  
      else {  
          return textResult("invalid user");  
      }  
}

In the above code - we are just calling the service to remove the user after getting the id from route.

Finally, we have successfully created a rest end point for user.

Summary

TypeScript makes the development very faster with static typing & intillisense support. On the other hand : fortjs - help you to write the server code which is very clean, modular & secure.

Reference

Storing Data In Browser

UJJWAL GUPTA — Tue, 19 Mar 2019 07:56:51 +0000

With the advancement in web technology - now we can make an web application which will work almost like native application. We can store data , work offline , send push notification etc.

In this article i will be talking only about storing data.

There are multiple ways to store data in browser -

localStorage
sessionStorage
WebSql
IndexedDB

localStorage

localStorage provides a way to save data in form of key and value. The key and value should be strictly string.

e.g -

//save data - key : 'hello', value : 'world'
        localStorage.setItem('hello','world');

//get data - you can get data by using key.

        localStorage.getItem('hello')

For more about localStorage : visit this link - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

sessionStorage

sessionStorage is similar to localStorage but data stored in localStorage has no expiration but data store in sessionStorage is expired as long as the browser session ends.

The browser session ends when the tab is closed.

e.g -

//save data - key : 'hello', value : 'world'
        sessionStorage .setItem('hello','world');

//get data - you can get data by using key.

        sessionStorage .getItem('hello')

For more about localStorage : visit this link - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

WebSql

WebSql provides a way to store data in forms of database which is relational database management system. So you can write sql query to do any operation.

Sounds great right ?

But due to the many problems WebSql is deprecated although chrome only supports WebSql.

The problems were -

WebSql is synchronous which means while querying it may freeze ui untill the result is evaluated.
It supported only basic data type while users wanted to store blob, binary type etc.
The size of the WebSql is limited and very low which depends from browser to browser.
The query takes more time when data is in large amount.
WebSql is not transaction based.

The main purpose of WebSql was to provide a way to store data in terms of database. It was able to do the work but due to these problems it was not upto the mark.

Since it is deprecated i am not providing any example.Neither i will suggest to use it.

IndexedDB

IndexedDB is next version of WebSql which solves all the problems which was in WebSql.

Lets see the feature of indexedDB -

It is asychronous which means it wont freeze ui - no matter how big query is runing.
It is NoSql db and supports advanced data type likes - array, blob etc.
It allows you to indexed data and due to this it is very fast.
It is transaction based.

So using indexeddb - you can store large amount of data in forms of object (since it is NoSql). But with the more features there comes a complexity : the same is with the IndexedDB.

IndexedDB provides many apis for every need. It provides event based api which makes it hard to learn and think in terms of storage.

For more about how to use indexedd, please read this article - https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

At the end - you will find this complex. But worry not, there are some library available to make this easy.

Some of them are -

JsStore - https://github.com/ujjwalguptaofficial/JsStore
Dexie - https://github.com/dfahlander/Dexie.js/

DEV Community: UJJWAL GUPTA

Express 5 is here, what’s new?

Here are 10 major changes in express 5.

1. Support for es6

2. Promise rejection support

3. Builtin body parser

4. req.param(name) removed

5. app.del replaced with app.delete

6. app.param(fn) middleware is removed

7. res.send(status) replaced with res.sendStatus(status)

8. res.send sends data only

9. req.query is read only

10. req.body is undefined by default

Conclusion

Fort.js: Revolutionizing Node.js Development - Simplicity, Speed, and Component-Based Modularity

Introduction

Contrast with Java and C# Ecosystems

The Fort.js Approach:

The Component Advantage:

Key Features of Fort.js with Component Support:

Comparison with Nest.js

Comparative Analysis

Supporting Fort.js

Conclusion

Introducing Mahal.js

Browser indexeddb operation using jsstore

Introduction

Let's Code

Installation

Create Database

Insert Data

Read Data

Update Data

Delete Data

Summary

Reference

Rest API In Node.js Using TypeScript And FortJs

Introduction

Code

Setup

REST

Service

Creating models

GET

POST

Guard

PUT

REMOVE

Summary

Reference

Storing Data In Browser

localStorage

sessionStorage

WebSql

IndexedDB

References

7. `res.send(status)` replaced with `res.sendStatus(status)`

8. `res.send` sends data only

9. `req.query` is read only

10. `req.body` is undefined by default