DEV Community: Mathieu Marteau

Introducing backhooks: hooks for the backend (nodeJS)

Mathieu Marteau — Tue, 24 Jan 2023 09:52:37 +0000

I wrote my first real open source project last week and I got 40 stars on Github, I'm so excited!

React has hooks, Vue has composables, but what does backend has?

When building a back-end app with NodeJS, we always struggle with context. How to inject dependencies etc...

NestJS came with a good solution and is now widely used for their strong typed dependency injection.

But! NestJS also relies on some specificities like decorators, that are not easy to work with in different environments.

Wouldn't you like to just write hooks for your application, and access the data you need when you need it?

Imagine this express app route:

import { useHeaders, hooksMiddleware } from '@backhooks/http'

app.use(hooksMiddleware())

app.use('/foo', (req, res) => {
  const headers = useHeaders() // <- this is a hook
  res.send(headers)
})

As you see, the useHeaders function is a global, unified function that could work for multiple runtimes, not only nodeJS - expressJS apps.

This makes it really easy to write functions, that are really easy to unit test:

export function useAuthorizationHeader () {
  const headers = useHeaders()
  return headers['authorization']
}

And the good news is that the library is entirely type safe!

Creating hooks

Creating hooks is really straightforward. You can create hooks that rely on other hooks, or create a hook that holds a state for a particular run context (a request in general in an http context)

Stateful hooks

Sometimes, you have the need to share data between hooks call during a request execution.

You could create a useCount() that would increment at each call in a specific request:

import { createHook } from "@backhooks/core";

const [useCount, setCount] = createHook({
  // Here, we define a `data` function that will return
  // the initial state of the hook. This function must
  // be synchronous.
  data() {
    return {
      count: 0,
    };
  },
  // The `execute` function uses the state, can mutate the state
  // and returns a value. This function can be asynchronous.
  execute(state) {
    state.count++;
    return state.count;
  },
});

That would result in the following:

app.get('/count', (req, res) => {
  console.log(useCount()) // Always 1
  console.log(useCount()) // Always 2
  console.log(useCount()) // Always 3
  res.send(useCount()) // Always sends 4
})

You can also use the setCount function to override any state on the hook:

app.get('/count', (req, res) => {
  setCount({
    count: 50
  })
  console.log(useCount()) // Always 51
  console.log(useCount()) // Always 52
  console.log(useCount()) // Always 53
  ...
})

Platform agnostic

You can use backhooks with any nodeJS application. Just run a context when you need it:

import { runHookContext } from '@backhooks/core'
import { useHeaders, configureHeadersHook } from '@backhooks/http'

runHookContext(async () => {
  setHeaders({
    headers: {
      authorization: 'Bearer abcd'
    }
  })
  const headers = useHeaders()
  console.log(headers.authorization) // Bearer abcd
})

Each hook call must be run into a runHookContext callback in order to correctly attach hooks to the correct context.

The middleware provided for express or fastify actually does that automagically for each request.

So if you want to create a library, that relies on http requests informations, and want it to be compatible with every runtime, like express, fastify or even h3, you can just write hooks and it should work!

Imagine how easy it would be to write a useUser() function and be able to use it through all of your application?

Class injection

With backhooks, you can even do class injection really easily. That would be the equivalent of a request scoped provider for NestJS:

import { useLogger } from "./useLogger";

export class MyProvider {
  constructor(private readonly logger = useLogger());

  foo() {
    this.logger.debug("bar!"); // Type safe
  }
}

and to register the hook:

import { createHook } from "@backhooks/core";
import { MyProvider } from "./MyProvider";

export const [useMyProvider] = createHook({
  data() {
    return new MyProvider();
  },
  execute(state) {
    return state;
  },
});

And then use it anywhere, not just in other hooks function.. It's entirely plug and play!

app.use("/", (req, res) => {
  const myProvider = useMyProvider();
  myProvider.foo(); // Logs "bar!", while being type safe ;)
  res.send("ok!");
});

If you like it, I invite you to leave a star on the repository on github to encourage me to go further with it, or comment something here!

https://github.com/coderhammer/backhooks

You can read the README of the repo if you want more informations and use case.

Cheers!

My logging strategy for Express

Mathieu Marteau — Thu, 05 Jan 2023 12:19:53 +0000

Logging has sometimes been a nightmare with my NodeJS applications.

Sometimes I get error logs and I'd like to find all the logs of a specific request.

Here comes AsyncLocalStorage to the rescue!

AsyncLocalStorage allows to identify a specific chaining of operations.

Here is how it basically works:

import { AsyncLocalStorage } from 'node:async_hooks';

const storage = new AsyncLocalStorage()

storage.run('abc', () => {
  const id = storage.getStore();
  console.log(id) // abc
})

Ok, so you might be wondering what the hell I'm trying to tell you. Just look at the code right now, try it at home and you'll notice that the console outputs abc.

Now, let's see the magic of AsyncLocalStorage and add an other function on the top level of your app. Log again and see:

import { AsyncLocalStorage } from 'node:async_hooks';

const storage = new AsyncLocalStorage()

const someOtherFunction = () => {
  const id = storage.getStore();
  console.log(id) // abc
}

storage.run('abc', () => {
  someOtherFunction()
})

See the magic? Even if someOtherFunction is called on the top level, the storage object is aware that it comes from storage.run('abc', ...).

This is really helpful for building a good logging strategy for Express.

I'll be using the winston package with express and create a middleware in order to configure my logger:

logger.js

import winston from 'winston'
import {v4 as uuid} from 'uuid'
import { AsyncLocalStorage } from 'node:async_hooks';

// Initialize an asyncLocalStorage to trace logs down to a specific request.
const asyncLocalStorage = new AsyncLocalStorage();

// Create a winston format to add the traceId information based on asyncLocalStorage
// This function will be run at each log entry.
const uuidFormat = winston.format((info, opts) => {
  return {
    ...info,
    traceId: asyncLocalStorage.getStore()
  }
})

// Define a middleware and wrap the next() function into 
// the asyncLocalStorage.run() in order to initialize tracing
// of the request
export const loggerMiddleware = (req, res, next) => {
  asyncLocalStorage.run(uuid(), () => {
    next()
  })
}

// Create a logger using our uuidFormat to inject our traceId into logs
export const logger = winston.createLogger({
  level: 'debug',
  transports: [
    new winston.transports.Console()
  ],
  format: winston.format.combine(
    winston.format.timestamp(),
    uuidFormat(),
    winston.format.json()
  ),
});

We can now enjoy our excellent logger in express really easily:

import express from 'express'
import { loggerMiddleware, logger } from './logger.js'

logger.debug('hello world!')

const app = express()

// Use the middleware we just created
app.use(loggerMiddleware)

app.get('/', async (req, res) => {
  logger.debug('In a request!')
  res.send({
    status: 'ok'
  })
})

app.listen(3000, () => {
  console.log('Listening to http://localhost:3000')
})

When making a request to http://localhost:3000, you'll notice the following log appearing on your server:

{"level":"debug","message":"In a request!","timestamp":"2023-01-05T12:07:52.289Z","traceId":"b68ab53c-aa14-47a1-a4ac-b9066375781d"}

Tell me in the comments if you found this helpful or if you didn't get the why I wrote this article, I'll be happy to respond!

Have a nice day

Introducing Dokoo: Headless CMS for E-Commerce

Mathieu Marteau — Thu, 17 Feb 2022 16:51:37 +0000

I'm really glad to introduce Dokoo. A headless CMS that we built and use in our every day life as e-commerce merchants.

We couldn't find any headless CMS with built-in functionalities that we needed for e-commerce like bulk update on entities.

We also use a new way of exporting the data using a feed builder. Think of it like a reversed GraphQL API where you choose which field to export in which feed.

Working with Dokoo has been a real breathe in our organisation and we hope that you will find some value in it for your usecases.

What is Dokoo?

Dokoo is a headless CMS.

The term "headless" refers to removing the dependency of knowing where data will be displayed and instead just holding the data to be used wherever the developer chooses. This is often used to describe a CMS where content can be entered, held, then where and how that content is displayed is decided separately.

How it works

Data Model

The goal of Dokoo is to administrate data on one or multiple objects named entities. Entities belong to a certain type of object named Custom Types. Each Custom Type uses multiple Attributes to define an entity.

🎯 If you are creating a Blog with Dokoo, you will create a custom type Article, that would have the attributes title, content. You would then create a new entity of type Article to write a new article.

Administrating Data

Dokoo provides an easy to use User Interface to allow content editors to create and update entities.

After custom types and attributes have been defined, content editors can create entities and issue commits over them. Commits are a single unit of data update. It means that even if you update 100 entities at the same time, the action of doing it is represented by a single commit.

Every commit is non destructive. It means that the updated data is never erased.

Exporting Data

Dokoo allows you to configure feeds, that will expose your data to the outside world the way you want it. Think of it like a reverse GraphQL API. It's not the client who choses the field, it's the content administrator that choses which field to expose to who.

Example

Space Creation

After logging in to the Dokoo user interface, we can create a space clicking on "Create a new Space" and providing a new space name.

Once the space has been created, we get on the space dashboard

This page is a recap of all the important informations that define your space. As you can see, at the moment, we have 0 Custom Type.

Custom Type Creation

Let's go ahead and create one by clicking the "+ Create" button:

For this example, we will name our Custom Type Blog Articles.

We'll be creating a custom type using the Basics template. This template automatically creates two attributes: Title and Image.

Entity Creation

After confirming the custom type creation, we get on the custom type recap:

We click on "+ Create" to create a new entity. This will get us on the entity editor page:

On the right, we have a list of available attributes for this type. We can attach one attribute to our entity or add them all by clicking on "Add All". This will add the appropriate inputs on the Entity Editor:

We just have to click on "COMMIT" on the right to save our changes.

Exporting Data

To export data, we have to go back to the main page of our Blog Articles custom type and click on the Feeds icon:

We can create one or multiple feeds for a specific custom type. Let's go ahead and create one by clicking on "Create Feed":

After creating "My main export" feed, we get on the feed editor page:

On the left, you'll find the feed editor. On the right, you'll find a preview of your feed and instructions to integrate your feed.

To add data to your feed, we click on "Add Data". A popover asks us if we would like to choose between a native field or an attribute field:

A native field is either the ID of an entity, its custom type id or the incremental ID of the entity. An attribute field is the value of attributes defined on the entity editor.

Let's go ahead and add the incremental_id and the title attribute:

After adding the feed fields, the preview shows our beautiful feed, ready to be consumed by other services on the internet:

Some details if you're interested

The application you are seing has been built with NuxtJS and Vuetify. So we thank them a lot for their work that allowed us to create this.

Hit me a message in the comments if you tried it or want to try it. This is the first time we post about it on the internet!

Give it a try at https://app.dokoo.io

I also wrote two articles if you want to discover how to use it with real use cases:

Nuxt Fetch - A renderless component

Mathieu Marteau — Mon, 03 Jan 2022 21:19:22 +0000

Hey, I'm writing my first blog post here to talk about a simple renderless component I wrote for NuxtJS that I use everyday.

It's a renderless component for NuxtJS that allows me to take advantage of VueJS slots to write less logic when fetching remote data.

Here is a basic copy/paste of the README:

Installation

yarn add @hammerbot/nuxt-fetch

Usage

<template>
  <div>
    <nuxt-fetch :fetch-fn="fetchFn">

      <template #default="{ data, fetching, error }">
        <p>
          {{ data }} - {{ fetching }} - {{ error }}
        </p>
      </template>

      <template #fetching>
        Fetching for the first time
      </template>

      <template #error="{ error }">
        Error handling {{ error }}
      </template>

    </nuxt-fetch>
  </div>
</template>

<script >
import NuxtFetch from '@hammerbot/nuxt-fetch' 

export default {
  components: {
    NuxtFetch
  },
  methods: {
    async fetchFn () {
      const { data } = await this.$api.get('/foo')
      return data
    }
  }
}
</script>

As you can see in the example, I don't need to use any v-if statement or anything. I'm just using slots here and I find it much less verbose.

Tell me if you like it! I will write a better documentation if someone in this world uses it.

Cheers and happy new year!

PS: If you like it, leave me a star on Github! If you don't.. Tell me why in the comments!

https://github.com/ElMatella/nuxt-fetch