Forem: Andrew Hu

Node.js animated: Event Loop

Andrew Hu — Sat, 05 Nov 2022 18:15:13 +0000

We have all heard about JavaScript and Node.js being single-threaded, but what does it mean in practical terms?

It means that JavaScript can do one thing at a time. For example, we cannot simultaneously multiply and sum numbers. We usually do operations in sequence. We add and then multiply or vice versa. Modern computers are fast, and the result of two or more consecutive tasks seems to be computed simultaneously, but there are exceptions.

We all have tried to scrape data from that slow website or waited more than thirty seconds before getting the result of a database query. Do we want to block our single thread from executing more tasks because of a slow database query? Luckily, Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.

The V8 JavaScript engine manages a call stack, an essential piece that tracks which part of our program is running. Whenever we invoke a JavaScript function, it gets pushed to the call stack. Once the function reaches its end or a return statement, it is popped off the stack.

In our example, the line of code console.log('Starting Node.js') is added to the call stack and prints Starting Node.js to the console. By doing so, it reaches the end of the log function and is removed from the call stack.

The following line of code is a database query. These tasks are immediately popped off because they may take a long time. They are passed to Libuv, which asynchronously handles them in the background. At the same time, Node.js can keep running other code without blocking its single thread.

In the future, Node.js will know what to do with the query because we have associated a callback function with instructions to handle the task result or error. In our case, it is a simple console.log, but it could be complex business logic or data processing in production applications.

While Libuv handles the query in the background, our JavaScript is not blocked and can continue with console.log(”Before query result”).

When the query is done, its callback is pushed to the I/O Event Queue to be run shortly*.* The event loop connects the queue with the call stack. It checks if the latter is empty and moves the first queue item for execution.

The code is available at https://github.com/fabrilallo/event-loop-1

Pop quiz on the event loop

Try to figure out what the following code prints on the console.

Conclusion

The event loop, the delegation, and the asynchronous processing mechanism are Node.js's secret ingredients to process thousands of connections, read/write gigantic files, handling timers while working on other parts of our code.

In the article, we saw the vital role of Libuv and its ability to handle numerous potentially long-running tasks. At the same time, we went through the event loop and its role as a bridge/connector between callbacks of asynchronous operations in the I/O event queue and the call stack. In the following articles, we will explore in greater detail how timers, I/O, promises, and ticks are handled by the different phases of the event loop.

If you liked the article, follow us on Twitter @fabriziolallo and @andrewhu368

Full-stack, type-safe applications development with Next.js and tRPC

Andrew Hu — Tue, 11 Oct 2022 07:59:46 +0000

Introduction
tRPC prerequisites
tRPC project bootstrap
tRPC backend development
UI development

Introduction

When working with a modern UI library, we often need to fetch data from an external source, a REST or GraphQL API. Synchronizing the client with a server state comes with some challenges, including type definitions and safety. All the external data sources define schemas, but they are not immediately consumable from our UI without redefining them, leveraging types generations libraries, or importing monorepo packages. The lack of immediately available types and the introduction of more dedicated tools create friction and slow developers’ productivity and velocity. Suppose your organization is also split into a front-end and back-end team. The communication overhead adds a layer of potential conflicts because the two parts must agree on the schema before starting the development of features.

tRPC provides all the tools to create full-stack end-to-end type-safe applications. It is a library that combines the power of TypeScript and react-query to register all the server endpoints and make them instantly available with types to the client. It increases team productivity because backend endpoints are just functions, and the developers can effectively work on the entire stack. Any team can significantly benefit from this tool because code generation, types package, and communication overhead are phased out.

tRPC also has some downsides. A single developer maintains it. Files cannot be uploaded without any 3rd parties services like Amazon S3. WebSockets have limited support, and data is limited to JSON.

Pros

Full-stack end-to-end type-safe application development.
Better team productivity and velocity.
Minimal communication overhead.
If you trust the type system and there is no complex business logic, unit tests may not be required.

Cons

Solo maintainer.
TypeScript could slow down your IDE.
Data is limited to JSON.
Limited support for WebSocket.

tRPC Tutorial

tRPC Prerequisites

The tutorial assumes you are familiar with the following libraries:

React,
Next.js,
Prisma or other ORMs,
react-query.

tRPC project bootstrap

Let’s initialize a new tRPC project with the create-t3-app CLI:

npx create-t3-app@latest

You will be prompted to answer some questions:

Name your application.
Select TypeScript.
Select Prisma and tRPC.
Initialize a git repository.
Run npm install.

Once the project is bootstrapped, navigate to prisma/schema.prisma and update it with a new Blog model.

model Blog {
    id        String   @id @default(cuid())
    title     String
    content   String
    createdAt DateTime @default(now())
}

From your terminal, run npx prisma db push to apply the model to a local SQLite database.

tRPC Backend development

We are ready to work on the backend of our application. Navigate to src/server/router and create a new file named blog.ts. Please copy the following code to create two endpoints. One handles the creation of a blog post, and the other lists the inserted articles.

import { createRouter } from "./context";
// `zod` is a schema declaration and validation library. We use it to define the shape of request arguments.
import { z } from "zod";

// `createRouter` exposes functions to create new API endpoints.
export const blogRouter = createRouter()
// A `mutation` defines an operation that modifies our data.
// It behaves like`POST`, `PUT`, `DELETE` operations.
// The input property accepts an optional `zod` schema to validate the request body.
  .mutation("create", {
    input: z.object({
      title: z.string(),
      content: z.string(),
    }),
// The API handler is a simple `resolve` function that contains all the business logic to handle the request.
    resolve({ input, ctx }) {
      return ctx.prisma.blog.create({
        data: {
          title: input.title,
          content: input.content,
        },
      });
    },
  })
// A `query` defines an operation that reads data from our backend.
// It behaves like a GET request.
  .query("all", {
    resolve({ ctx }) {
      return ctx.prisma.blog.findMany();
    },
  });

Once we have defined the routes, we can register them in src/server/router/index.ts.

// src/server/router/index.ts
import { createRouter } from "./context";
import superjson from "superjson";

import { blogRouter } from "./blog";

export const appRouter = createRouter()
  .transformer(superjson)
// Registering the blogRouter
  .merge("blog.", blogRouter);

// export type definition of the API
export type AppRouter = typeof appRouter;

UI development

Navigate to src/pages/index.tsx and paste the following code. The tRPC utilities that wrap react-query enable us to access the defined type-safe backend procedures.

import type { NextPage } from "next";
import { useState } from "react";
import BlogPost from "../components/BlogPost";
import Layout from "../components/Layout";

// import trpc utils that wrap react-query
import { trpc } from "../utils/trpc";

const Home: NextPage = () => {
// Hovering on data shows the types defined in our backend
  const { isLoading, data } = trpc.useQuery(["blog.all"]);

  return (
    <Layout>
      <h1>My personal blog</h1>
      {isLoading ? (
        <div>Loading posts</div>
      ) : (
        data?.map((blog) => <BlogPost blog={blog} key={blog.id} />)
      )}
      <CreatePostSection />
    </Layout>
  );
};

export default Home;

const CreatePostSection = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const ctx = trpc.useContext();
  const createMutation = trpc.useMutation("blog.create");

  return (
    <div>
      {createMutation.isLoading}
      <h2>Create a new blog post</h2>
      <div>
        <input
          name="title"
          placeholder="Your title..."
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </div>
      <div>
        <textarea
          rows={10}
          cols={50}
          value={content}
          placeholder="Start typing..."
          onChange={(e) => setContent(e.target.value)}
        />
      </div>
      <div>
        <button
          onClick={() =>
// mutate exposes the types of arguments as defined in our router
            createMutation.mutate(
              { title, content },
              {
                onSuccess() {
                  ctx.invalidateQueries("blog.all");
                  setContent("");
                  setTitle("");
                },
              }
            )
          }
          disabled={createMutation.isLoading}
        >
          Create new post
        </button>
      </div>
    </div>
  );
};

Run npm run dev to check the platform. You can further practice with tRPC by expanding the application with new features. Some examples are finding by id, deleting, or updating a single post. A complete solution can be found here https://github.com/andrew-hu368/t3-blog.