Forem: Dhinesh Kumar

Organizing Express Routes with a Route Loader

Dhinesh Kumar — Fri, 24 Feb 2023 08:31:16 +0000

Introduction

Express Js is one of the most widely used Node frameworks for developing web applications. Its robust features and minimalistic capabilities have made it popular with developers for its easy-to-use nature. However, as an application grows in complexity, organizing the code can become a challenge. Express doesn't impose any folder or architectural structure, which can lead to a cluttered and hard-to-manage codebase.

The Problem

As your application grows, the complexity of your API will grow in tandem. To organize your code, you may want to split up your routes into multiple files. You can structure your code based on technical responsibilities (e.g. controllers, models, services, utils, tests) or domain modules (e.g. users, orders, products). However, manually importing all your routes one by one into the app.js file is not ideal.

The Solution (using ESM)

The problem of splitting the routes into multiple files can be solved by using a Route Loader. A Route Loader is a function that takes a glob pattern and automatically imports all your route files. You only need to call the function once in your app.js file, and it will take care of the rest.


import { Router } from 'express';
import glob from 'fast-glob';
import fs from 'fs';
import path from 'path';

const BASE_DIR = path.join(__dirname, '..');

export default async function RouteLoader(globPattern) {
  let router = Router();
  let files = [];
  try {
    files = await glob(globPattern, { cwd: BASE_DIR });
  } catch (error) {
    console.error(error);
  }

  for (const file of files) {
    if (fs.statSync(file).isFile() && path.extname(file).toLowerCase() === '.js') {
      try {
        const routeModule = await import(path.resolve(file));
        router = (routeModule.default || routeModule)(router);
      } catch (e) {
        throw new Error(`Error when loading route file: ${file} [ ${e.toString()} ]`);
      }
    }
  }

  return router;
}

With this Route Loader, you can split up your routes into multiple files and organize them in a way that makes sense for your application. You only need to call the RouteLoader function once in your app.js file.
Here's an example of using the RouteLoader function in your main Express application file (usually named app.js or index.js). Let's assume you have your routes organized in a directory called "routes", with each file representing a different endpoint or resource. You can use the RouteLoader function to load all these routes into your application with the following code:

const express = require('express');
import RouteLoader from './RouteLoader';

const app = express();

const routes = await RouteLoader('routes/**/*.js');
app.use('/', routes);

app.listen(3000, () => {
    console.log('Example app listening on port 3000!');
});

Your router should be defined like this:

export default function (router) {
    // create a new user
    router.post('/api/users/create', passport.authenticate('jwt', { session: false }), async function (req, res) { 
        /** your route implementation here*/
    });
    return router; 
}

In this example, RouteLoader will look for all files with a .js extension in the "routes" directory and its subdirectories and load them as routes into the Express application. The use method on the app object is used to mount the routes on a specific path, in this case, the root / path.
You can also organize your routes by domain modules, for example, you can have separate files for handling users, orders, and products in separate files within the "routes" directory:

routes/
|- users.js
|- orders.js
|- products.js

In this case, you can modify the RouteLoader function to look for routes in the routes directory only, rather than its subdirectories:
const routes = await RouteLoader('routes/*.js');

Conclusion

Organizing your routes is an important step in keeping your Express application maintainable and scalable. By using a Route Loader, you can split your routes into multiple files, making it easier to manage your codebase and quickly add new routes as your application grows.

React Hooks vs Svelte - Why I chose Svelte?

Dhinesh Kumar — Thu, 12 Aug 2021 12:59:29 +0000

I work at ZoomRx and I have been developing web applications for the past 10 years. ZoomRx is a strategic healthcare consulting firm. All of my front-end colleagues are strong in Javascript fundamentals, so we have the leverage to adopt and experiment with new frameworks frequently. I experienced a lot of javascript libraries/frameworks, especially Jquery, Ember, Mithril, Angular, React and React with Hooks. I love a few aspects in each of these frameworks but I'm not fulfilled and never stopped looking for alternatives. I was just looking for a framework which is developer friendly and highly performant. I even had ideas for building my own framework. Then In the middle of 2019 I came across Svelte and was impressed by Rich Harris’s speech (It's worth a try even though it is an old one now). Svelte does the reactivity through the compiler and all of the heavy lifting has been done by the compiler.

React Hooks vs Svelte, There is a lot more to discuss about it but for this article I’ll give you my perspective about two important aspects of the frameworks, better developer experience and better user experience.

Better developer experience

Learning curve

Since Svelte tries to follow the web standard as much as possible, learning Svelte is very easy. As a javascript developer, it took just 5 minutes to understand to get the basic idea, and a few hours to master all concepts. I’m that curious guy who always jumps into the underlying framework code before using it. It makes me more comfortable while coding. So I forked the svelte compiler code and used TanLiHau’s compiler handbook to understand the compiler architecture. The whole process took a weekend to make myself comfortable. At the end of two days, I did some POCs like counter, todo lists, built a trello like app and a wrapper for flatpickr.

Although I knew the React class component well, it almost took a week to understand all the nuances of hooks like the why, where and how to use it effectively. This blog will help you to learn more about the underlying hooks system.

Apparently the Svelte learning curve was much smaller than React Hooks for me. With Svelte, any Javascript developer can learn the basic principles of a component state without getting confused by the details too much. Also Svelte store is simpler to learn and use when compared to Redux/ React’s context API/useContext /Zustand or Jotai etc.,

Readability and Maintenance

We have been using a lot of frameworks in our products. So readability and clarity are more important to me than any new fancy features.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” ― Martin Fowler

React Hook - sample code to capture mouse coordinates

Svelte - sample code to capture mouse coordinates

“Let us forget about the number of lines of code that we needed to write. Assume you just know Javascript well, you are reading how to capture mouse coordinates during movement. Which code looks more like what you actually need?”

As seen from above, Svelte does great things in a few lines of code. It's easier to read and understand by anyone who has some basic HTML/CSS/JS knowledge. It completely removes all of the unnecessary boilerplates like useState, useRef, useCallback, useMemo etc., from our application logic. Writing less code will help us with less maintenance and more time to develop new features. Read more about the readability part on Rich Harris’s blog. On a side note: If the same example was written using React class component, it would be way more readable than the one using Hooks.

External library integration

React uses Virtual DOM so we need a special wrapper to handle the state of the external library components. But, the React community is extremely huge so you can find wrappers or equivalent React implementation easily. On the other hand, Svelte deals with the real DOM. This makes things simple and easy when doing some CSS Animations and DOM manipulations. You can use any DOM libraries directly or you can write a simple wrapper by yourself.

Better User experience

Svelte surgically updates the DOM without relying on a middle interpreter or any complex reconciliation algorithm. It’s often beating out other frameworks on UI and JS speed. And it’s increasingly used in production on various popular and traction heavy sites.
React is fast enough to give a good user experience for the majority of use cases but when we have performance needs in terms of rendering, especially if we work around data visualization then it is not enough. Virtual DOM is a pure overhead. It doesn’t matter how efficiently the diffing algorithm evolves; it will always eat up client’s hardware resources.

Doesn’t Svelte have any flaws?

The syntax used for component props is a bit weird for me.
Svelte won’t listen for reference updates and array mutations, which developers need to actively look out for and make sure arrays are reassigned.
Compared to Svelte, React has a huge community and you can easily find a solution to any problem. As a React developer, I really like Svelte as well. However, I've only found Svelte useful in lightweight simple projects. I like Svelte API and reactivity out of the box, but for all its advantages, the ecosystem around svelte is lacking compared to react. To speed up development in a more complicated web app we need tools/libraries like svelte kit, svelte-query, svelte-yup etc., but these are not mature enough yet. Hopefully, Svelte's ecosystem will get better as more people start using it.

Conclusion

If you have Javascript knowledge and experience in other frameworks, you can adapt to Svelte quickly. Coding in Svelte feels effortless, development time is also blazing fast when compared to React or many other frameworks.
In my experience I observed that developers always find it difficult to switch from other frameworks to React Hooks. Trust me, I was a big fan of React hooks when it was introduced. I do like the idea of function components and hooks, but I certainly don’t enjoy working with them in a larger project.
See the below history, React keeps evolving but in the wrong direction, Svelte simply just chooses the right path.