Forem: Pratik Badhe

Still using Express.js ? THIS will BLOW your mind

Pratik Badhe — Mon, 13 Feb 2023 17:35:08 +0000

Launched in 2010, Express.js made spinning up a server and creating an API endpoint really easy, in just under 15-20 lines of code, you are good to go. Being a minimal and lightweight framework, it was (or still is) the go-to framework for node developers to set up their backend and start creating APIs.

But as time passed, new frameworks emerged and express… will didn’t evolve over time as it should have in fact, its v5 is still in beta even after more than 7 years. So it is time for us to move on from express.js and switch to a different alternative. This article is not a rant about how bad express.js is, or neither do I have any hatred toward express, but to just explore a better alternative with all the features that you usually need to pick and choose while using express.

Welcome Adonis.js

So let’s talk about the elephant in the room, Adonis. No, not the Greek god, but *A fully featured web framework *for Node.js that is Adonis.js. Adonis is a batteries-included web framework that follows the MVC pattern and ships with Authentication, Authorization, an SQL ORM, a template engine, a file storage engine, a CLI tool, social auth, and much more! Sounds too good to be true, right? But it actually is that amazing, let’s see how.

Installation

To install adonis, run the below command

npm init adonis-ts-app@latest project-name

After that, you will be asked what type of backend are you setting up, api, web, or slim.

api will generate backend-only code and install the packages required for it.

web will generate backend, frontend (using edge template engine) and install the required packages.

slim will generate the smallest possible AdonisJS application and does not install any additional packages except the framework core.

Below is the folder structure for web

 ┣ 📂app                  // this contains controllers, middlewares, etc.
 ┃ ┗ 📂Exceptions
 ┃ ┃ ┗ 📜Handler.ts
 ┣ 📂commands
 ┃ ┗ 📜index.ts
 ┣ 📂config               // this is where all the configuration options are
 ┃ ┣ 📜app.ts
 ┃ ┣ 📜bodyparser.ts
 ┃ ┣ 📜cors.ts
 ┃ ┣ 📜drive.ts
 ┃ ┣ 📜hash.ts
 ┃ ┣ 📜session.ts
 ┃ ┣ 📜shield.ts
 ┃ ┗ 📜static.ts
 ┣ 📂contracts
 ┃ ┣ 📜drive.ts
 ┃ ┣ 📜env.ts
 ┃ ┣ 📜events.ts
 ┃ ┣ 📜hash.ts
 ┃ ┗ 📜tests.ts
 ┣ 📂providers
 ┃ ┗ 📜AppProvider.ts
 ┣ 📂public
 ┃ ┗ 📜favicon.ico
 ┣ 📂resources
 ┃ ┗ 📂views
 ┃ ┃ ┣ 📂errors
 ┃ ┃ ┃ ┣ 📜not-found.edge
 ┃ ┃ ┃ ┣ 📜server-error.edge
 ┃ ┃ ┃ ┗ 📜unauthorized.edge
 ┃ ┃ ┗ 📜welcome.edge
 ┣ 📂start
 ┃ ┣ 📜kernel.ts
 ┃ ┗ 📜routes.ts             // this file contains all the route declarations
 ┣ 📂tests
 ┃ ┣ 📂functional
 ┃ ┃ ┗ 📜hello_world.spec.ts
 ┃ ┗ 📜bootstrap.ts
 ┣ 📜.adonisrc.json
 ┣ 📜.editorconfig
 ┣ 📜.env
 ┣ 📜.env.example
 ┣ 📜.env.test
 ┣ 📜.gitignore
 ┣ 📜ace
 ┣ 📜ace-manifest.json
 ┣ 📜env.ts
 ┣ 📜LICENSE
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜server.ts
 ┣ 📜test.ts
 ┗ 📜tsconfig.json

So let’s start by looking at all the functionalities one by one.

Features highlight

Adonis comes with a lot of features built-in and has many first-party packages which makes your job as a developer much much easier, and your DX also increases quite a lot. Let’s look at them one by one

Feature-rich router

Adonis’s router comes with many features that are not present in express such as grouped routes, prefixing, params matcher, domain lookup (helps when receiving requests from multiple domains/sub-domains), URL signature verifier, etc.

We will cover a few important features here, and you can check the rest on their docs.

Start your development server by using the command npm run dev and go to http://127.0.0.1:3333/

You will find your first route in the start/routes.ts file

// start/routes.ts

// for "web" setup, this will be the default route
Route.get('/', async ({ view }) => {
  return view.render('welcome')
})

// and

// for "api" setup, this will be the default route
Route.get("/", async ({ response }) => {
  return response.send({
    message: "Hello World",
  });
});

You can add more routes one below another.

Route group

This is one of my favorite feature, it just automatically makes your routes file clean, readable, and manageable. Using route group, it becomes easy to group your APIs, and by doing so, you can apply middleware to all the routes inside a route group like below

// start/routes.ts

Route.group(() => {
  // routes goes here

    // For all the routes in this group, below middleware is applied

}).middleware(async (ctx, next) => {
    console.log(`Inside middleware ${ctx.request.url()}`)
    await next()
  })

Route prefix

Using this feature API versioning cannot get any easier, better, and more readable, with just a single line of code all of the API endpoints are versioned, and this gives you the power to create the next version of API without any hiccups.

We can also use prefixes to clean your routes file like this

// start/routes.ts

Route.group(() => {
    // all users routes
  Route.group(() => {
        Route.post("/", async ({ response }) => { /* route logic goes here*/ }))
        Route.get("/:id", async ({ response }) => { /* route logic goes here*/ }))
        Route.put("/:id", async ({ response }) => { /* route logic goes here*/ }))
        Route.delete("/:id", async ({ response }) => { /* route logic goes here*/ }))
  }).prefix("users");

// all posts routes
Route.group(() => {
        Route.post("/", async ({ response }) => { /* route logic goes here*/ }))
        Route.get("/:id", async ({ response }) => { /* route logic goes here*/ }))
        Route.put("/:id", async ({ response }) => { /* route logic goes here*/ }))
        Route.delete("/:id", async ({ response }) => { /* route logic goes here*/ }))
  }).prefix("posts");
}).prefix("v1");

// now routes in the above group becomes
// http://127.0.0.1:3333/v1/users/REST_OF_THE_ENDPOINT

Params matcher

Having endpoints with query parameters is a common way of creating APIs, but while integrating APIs with the frontend, one can easily pass the wrong type of parameters, params matcher solves this problem by returning a friendly error message instead of generating unwanted server errors.

Route.get("/:id", async ({ response }) => {
      return response.send({
        message: "Hello World",
      });
    }).where("id", /^[0-9]+$/);
        // ^^^^^^^^^^^^^^^^^^^^^^^ this is where the magic happens

Controllers

As adonis is based on the MVC pattern, Controllers are how you handle HTTP requests, but the main reason why you would want to use them is to de-clutter your routes file and move your business logic into its own separate file so as your backend code grows it is manageable and readable.

You can create a new controller using the CLI command node ace make:controller Post it will create a new file in app/Controllers/Http/ folder, also it is not necessary to keep file in this specific folder you can save it anywhere.

But writing CRUD API routes like this will increase your routes file for no good reason.

Route.get("/", "PostsController.index")
Route.get("/:id", "PostsController.show")
Route.post("/:id", "PostsController.store")
Route.put("/:id", "PostsController.update")
Route.delete("/:id", "PostsController.delete")

Using Resources function you can do this in just one line, so using our previous example, our code will look like this

Route.group(() => {
    // all users routes
  Route.resource('users', 'UsersController')

    // all posts routes
    Route.resource('posts', 'PostsController')

}).prefix("v1");

Isn’t that amazing! You can easily replace 5 lines with just one.

Resource function will by default create 7 routes for frontend and backend combined, but you can choose only which one you want like this

Route.resource('posts', 'PostsController').except(['create', 'edit'])

Now our posts resource will generate the rest of the routes except create and edit. You can check all the routes registered in your application by this simple command node ace list:routes and it will print list in this nice format.

# terminal

GET|HEAD     /v1/posts ───────────────── posts.index › PostsController.index
POST         /v1/posts ───────────────── posts.store › PostsController.store
GET|HEAD     /v1/posts/:id ─────────────── posts.show › PostsController.show
PUT|PATCH    /v1/posts/:id ─────────── posts.update › PostsController.update
DELETE       /v1/posts/:id ───────── posts.destroy › PostsController.destroy

Authentication and Authorization

This is the most repeated and dreaded functionality that is needed in almost every web app, adonis provides a first-party package that provides this functionality while giving total control to the developer. Auth package provides three types of authentication methods, which are session-based auth, API tokens, and HTTP basic authentication.

Install the package using npm i @adonisjs/auth and configure the package by running node ace configure @adonisjs/auth

Lucid ORM

Based on active record pattern lucid ORM supports PostgreSQL, MySQL, MSSQL, MariaDB and SQLite. It uses Knex.js under the hook to create and execute SQL queries, lucid also have support for SQL transactions.

Using lucid ORM database interactions becomes way easier so that you can focus on writing business logic rather than fighting with SQL queries

Validators

Now that we have done setting up our routes and controllers, we need talk about how are going to handle what type of data that we are getting through requests, there should be a simple way to do this, right? Well there is adonis, with built in validators we are pretty much sorted.

Just import schema and write your validators something like this and you are good to go

const postSchema = schema.create({
    title: schema.string(),
    body: schema.string(),
    user: schema.string(),
    category: schema.string(),
    tags: schema.array().members(schema.string()),
  })

The above code will guarantee that the data we receive from the request will have all those properties and data types correctly.

When used in an example it will look like this

// app\Controllers\Http\PostsController.ts

import type { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import { schema } from "@ioc:Adonis/Core/Validator";

export default class PostsController {

  public async store({ request,response}: HttpContextContract) {
    const postSchema = schema.create({
      title: schema.string(),
      body: schema.string(),
      user: schema.string(),
      category: schema.string(),
      tags: schema.array().members(schema.string()),
    });

    const data = await request.validate({ schema: postSchema })

    // here "data" will be guaranteed to have the necessary values and data types so
    // that you can store it in the database

    // database.save(data)

    return response.send({
      message: "Post created",
      status:200
    })
  }
}

Edge templating engine

Adonis ships with its own template for the frontend part, it is quiet simple and doesn’t force you to write code in an opinionated way but rather let’s you add dynamic content by simply using {{ username }} two curly braces around a variable. Writing code for edge is like writing html but with some added functions to make it dynamic. Edge has components support like vue, react, or svelte, to reuse code and isolate state.

These were some of the best features of Adonis, and there are plenty more that I haven’t covered in this article (which would have made this article really loooong) that will make your life easier while creating APIs.

Adonis.js, in my opinion is really an amazing choice for the backend, having so many functionalities out of the box makes you focus on creating APIs rather than searching and choosing the right library/package.

Thank you for reading this far, and if you like this article, you can follow me on my socials to get notified when the next article is out, till then goodbye.

Social Handles:

Twitter: pratikb64

Linkedin: Pratik Badhe

8 Things I learned by doing an Internship as a Web developer

Pratik Badhe — Sat, 02 Jan 2021 08:30:43 +0000

Hey there, my name is Pratik. During this pandemic, I got an opportunity to do an internship as a web developer, and it was the first-ever real-world project I have ever worked on. We developed events hosting website(like Fandango) using Angular & firebase and here are 8 things I learned which I would like to share with you all.

(ps. This is the first article I have ever written, so if you find any mistakes or if you got any tips please do let me know in the comments below.)

So let's get started without wasting any more time.

1. Set deadlines

No matter whether you are working alone or in a team this tip will always come in handy. Having a fixed deadline automatically makes us more focused than we would normally be.

Being a big procrastinator myself I can assure you, if you set deadlines you will be at least 30-40% more productive and get things done faster.

2. Do your research

Doing research on frameworks/technologies and choosing the right tech stack is by far the most important part of the app/software development process, if you do this wrong you will spend a lot of time finding workarounds to solve the simplest tasks that you would easily solve using any other framework (or without even a framework).

3. Save work without fail

Like I said earlier being a procrastinator I always try to avoid doing things. While I was working on the project I used to upload my code on GitHub every 2-3 days instead of keeping it up-to-date daily, and one day the unfortunate happened WINDOWS CRASHED..... completely. Tried all the things but couldn't recover the data. But fortunately, I had uploaded my code early in the morning so I didn't lose my code. But it was a good lesson that no matter what happens just UPLOAD YOUR DAMN CODE DAILY !!

4. " FAILURE is the first step towards SUCCESS "

When I finally start working on the project I came to realized that I was making so silly mistakes they are so small and silly that I start doubting myself. Have I even learned anything in the past few months? How can I develop a whole app if I can't even remember these small things? so on and so forth. But I want to tell you that IT'S COMPLETELY OKAY TO MAKE MISTAKES, but once you grow past those there no stopping you.

(I have uploaded my first ever Youtube video do check it out Click me)

5. Smart work is better than Hard work

I am guilty of searching "How to center div" (for at least 5 times) it was when I just started web developing, but still that feeling of NOT knowing how to simply center a div is heartbreaking. When you are new to programming there will be time when you will spend 50-60% of your time reading(and copying) code from Stack overflow and other similar sites and again it is 100% okay to do it, you are not alone.

You should always TRY to solve problems on your own when you are new to programming and keep GOOGLE the last resort it will help you to remember the syntax of that particular language, but I think its okay to copy basic boilerplate code because it's not about how much code you write yourself rather it's about getting the job done in less time

6. Communication is the key

This is yet another important thing that can potentially save a lot of time-solving your queries and errors. You can reach out to people online on GitHub, etc. people in the developer community are so great they will definitely help.

7. Take short breaks

Coding is nothing but problems solving and it needs a lot of brainpower, after a while even if the problem is simple you might not be able to solve it because your brain is tired and it needs some rest, it's not about just getting tired but taking short breaks can also increase your productivity and get things done quickly.

8. “What we know is a drop, what we don't know is an ocean." — Sir Isaac Newton

I think no matter how much you know about programming there is something that you still don't know, programming is a never-ending learning process and the only way to move forward is to keep learning and improving.

Thank you so much for reading my first ever article, do let me know what you think and share your first experience in the comments below.
Check out my Youtube Channel Click me
Instagram