DEV Community: Sungmin

How to Set up Node.js with Typescript

Sungmin — Wed, 30 Sep 2020 20:23:23 +0000

First thing first, we need to install all packages for typescript.

Install Packages

yarn add -D @types/node typescript
yarn add ts-node

@types/node: contains all type for Node.js.

typescript: supports typescript on the app.

ts-node: tool that read typescript files.

Add `start` script on `package.json`

"scripts": {
  "start": "ts-node src/index.ts"
}

We also need to create tsconfig.json to understand .ts file and set up compiler options.

npx tsconfig.json

It will ask you what framework you are using. I will choose node.

Let's run typescript. We are going to run the .ts file without transpiling. Create src/index.ts and type like this

console.log('hello world') // hello world

and run command yarn start. And you will see hello world on the console.

Add `tsc -w` on package.json

When you run typescript files, there are a coule of things you worry about

Compiler compiles typescript files and run the app, which it is slow to execute.
You are not sure what bugs come out before you transpile .ts especially when you build the production code.

So what I am going to do is transpiling the .ts to .js, and run only .js file, not .ts

Open package.json and add watch flag

// package.json
"scripts": {
  "watch": "tsc -w",
  ...
}

tsc -w command is one of Typescript CLI command and simply transpiles .ts files and generate .js files.

But you need to tell Typescript CLI in which folders you are going to put .js files transpiled by tsc -w command.

So open tsconfig.json and add option "outDir": "./dist"

{
  "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "lib": [
         "dom",
         "es6",
         "es2017",
         "esnext.asynciterable"
      ],
      ...
      "outDir": "./dist"
      ...
  }
}

You can change the directory whenever you want. You just change "outDir": "yourDir".

Okay. Let's try this out. Open package.json and add dev script like this.

// package.json
"scripts": {
  "watch": "tsc -w",
  "dev": "node dist/index.js"
  ...
}

Open two terminals and run yarn watch and yarn dev. And you will see compiler is running .js files that transfiled from .ts.

Learning Hapi.js (1) - How I feel when I learned Hapi.js for the first time

Sungmin — Fri, 08 May 2020 01:23:33 +0000

Learning Hapi.js (1) - How I feel when I learned Hapi.js for the first time

I've ever heard of a couple of Node.js Framework like Express.js and Koa.js, but I've never heard of Hapi.js before I start working for the current company. However, I feel like what Hapi.js looks like(I mean syntax) is similar to the syntax of Express.js and, just for my personal opinion, Hapi.js looks easier to read for me than Express.js. Because of several reasons, I would like to dive into Hapi.js.

What is Hapi.js?

Hapi.js is an open-source framework like Express.js and Koa.js. It was created by the mobile team at Walmart Labs - led by Eran Hammer - to handle heavy traffic for events like Black Friday.

Why Hapi.js?

According to Eran Hammer, who is the creator of Hapi.js, there are several reasons why you consider Hapi.js (Why you should consider Hapi.js)

Readability vs Performance

Eran chooses the code readability instead of the performance. Readability and performance are in conflict. The performance keep getting better and faster as machines get improved. However, most issues were found and resolved easily since the codes kept being readable. This point lets him choose the code readability in terms of 'Humans' performance.

Minimal Dependencies

If you followed recent news, this is a big deal

He created Hapi.js without any external dependencies except for one external dependency. I think he really cares about keeping Hapi.js to be maintainable and preventing it from being crashed down by external dependencies. He gives this link and you feel why he considers not to introduce external dependencies.

100% Code Coverage and Style

Hapi was required to have 100% test code coverage. Hapi Team wrote their own test code when existing test tools are not enough to cover. And they keep revising the style as better approaches are developed and all code bases are introduced with the new approaches.

Less Open Issues

There are 27 modules for the entire framework. Except for Joi module, the rest of the modules have 6 open pull requests, 9 open reported issues and 19 open feature requests or questions. This is a significant low number of reporting issues.

Comparison Hapi.js and Express.js

Since I have learned Express.js, my perspective was stick to Express.js syntax and had negative thoughts on learning new Node.js framework. But after I've learned Hapi, my perspective has changed in a good way.

1. Easier to read code

I realize that Hapi.js is somewhat wordier than Express.js, but Hapi.js explicitly describes url, request method, request body, and params. This characteristic is powerful when APIs are getting growing and complex. Because we don't need to take a look at what query or request body looks like.

  /**
    Assuming that you create getUser() and loginUser() method.
  */

  /* #### Express.js #### */
  // GET /user
  // Params: id
  app.get('/user', getUser);

  /* #### Hapi.js #### */
  server.route({
    method: 'GET',
    path: '/user',
    config: {
      handler: getUser,
      validate: {
        query: {
          id: Joi.string()
        }
      }
    }
  })

  /*  =======================================  */

  /*  #### Express.js #### */
  // POST /user
  // Body: username, password
  app.post('/user', loginUser);

  /*  #### Hapi.js ####   */
  server.route({
      method: 'POST',
      path: '/user',
      config: {
        handler: loginUser,
        validate: {
          payload: {
            username: Joi.string(),
            password: Joi.string()
          }
        }
      }
    })

2. Provided data validation by default

Hapi.js provides you with type validation for input from client with Joi package. When invalid input comes from HTTP Request to certain endpoints, the endpoints throw the error and block to execute handler method at the request level.

  server.route({
      method: 'POST',
      path: '/user',
      config: {
        handler: loginUser,
        validate: {
          payload: {
            username: Joi.string(),
            password: Joi.string()
          }
        }
      }
    })

Above example, if username is 123234 which is number, that endpoint throw the error and block to execute loginUser method. So it is much safer and easier to find what invalid data comes in.

Conclusion

Hapi.js gives me chances to learn other Node.js Framework and the pursuit of Hapi.js. I feel like the creator of Hapi.js really understand how developers feel when they work. I don't know much about Hapi.js so there probably are lots of features to comfort developers.

I am coming back to the next article soon!!

DEV Community: Sungmin

How to Set up Node.js with Typescript

Install Packages

Add start script on package.json

Add tsc -w on package.json

Learning Hapi.js (1) - How I feel when I learned Hapi.js for the first time

Learning Hapi.js (1) - How I feel when I learned Hapi.js for the first time

What is Hapi.js?

Why Hapi.js?

Readability vs Performance

Minimal Dependencies

100% Code Coverage and Style

Less Open Issues

Comparison Hapi.js and Express.js

1. Easier to read code

2. Provided data validation by default

Conclusion

References:

Add `start` script on `package.json`

Add `tsc -w` on package.json