DEV Community

Cover image for 「frourio」 Super Light Framework that sets up a dream Full-Stack TypeScript Environment with just one command!
Solufa
Solufa

Posted on • Updated on

「frourio」 Super Light Framework that sets up a dream Full-Stack TypeScript Environment with just one command!

Allow me to introduce “frourio”, which was first released at the TypeScript Meetup #4 event in Tokyo in June 2020, and has received an update in October to make it even cooler!

frourio is a framework that compiles an entire application – from the frontend to the backend – and an object-relational (O/R) mapper in “one TypeScript”. It also enables integrated type checking.

It appears somewhat monolithic because it’s all contained in one directory, but the frontend and backend are separated into individual projects (via package.json), except for those that are connected by type.

This makes it possible to deploy the frontend to Vercel, or deploy the backend to AWS.

Architecture

Here are new features of NEW frourio

  1. The world’s fastest TypeScript framework
  2. Setting up a development environment including a frontend SPA + REST server + OR mapper using a single command
  3. Adapted to Vercel’s React Hooks Library「SWR」
  4. Capable of using Dependency Injection in function
  5. The logo is cute!

Let me explain one by one.

The world’s fastest TypeScript framework

Performance

Reference: https://github.com/frouriojs/benchmarks

There’s a reason why frourio is super-fast. Its server core is Fastify, which means frourio is wrapped around the world’s fastest engine.

However, using frourio is even faster than writing in Fastify by yourself.

frourio is designed to combine simple functions and prevent routing overhead. It performs optimizations based on the type information when compiling.

That’s how frourio fully utilizes the power of the Fastify web framework.

Setting up a development environment including a frontend SPA + REST server + OR mapper using a single command

*As of October 25, errors may result when performing installation in some Windows Subsystem for Linux (WSL) environments.

frourio can set up everything simply using a single command. This is just like the Next.js app when using the create-next-app, and the Nuxt.js app when using the create-nuxt-app.

Please run the following command.

$ npx create-frourio-app
Enter fullscreen mode Exit fullscreen mode
$ yarn create frourio-app
Enter fullscreen mode Exit fullscreen mode

Once installed, the message below will be shown and a browser window will be opened automatically.
*If a browser window does not open, please open the URL yourself.

open http://localhost:3000 in the browser
Enter fullscreen mode Exit fullscreen mode

Frourio GUI 1

Enter a project name in「Directory name」that is also used as the name of package.json.

I recommend Fastify for the core framework because it’s being actively developed and has a benchmark that is five times faster than other web frameworks.

You can choose either Next.js or Nuxt.js for the Frontend setting.

Frourio GUI 2

It’s up to you to decide how to proceed with the setup process until the Daemon process manager takes over.

Frourio GUI 3

Prisma is a decent database toolkit that is recommended for the O/R mapper.
SQLite is good enough for a trial.

No preinstallation is required, and it can be closed inside the project.

The DataBase file location for SQLite can be the default.

Frourio GUI 4

If you would like to see a sample Dependency Injection code, select Jest and click the Create button.

Frourio GUI 5

A modal window will be shown, and installation will be started in the terminal window.

Frourio GUI 6

Once installed, the browser will be reloaded automatically and the Next/Nuxt ToDo Lists app will be shown. After installation, the Build process will take a while.

Frourio GUI 7

Adapted to Vercel’s React Hooks Library「SWR」

If you selected Next.js, you can find the code below in pages/index.tsx

Alt Text

On line 10, useAspidaSWR is the SWR wrapper.
It sends the /tasks GET request with apiClient.tasks as a key.
Response data are exactly the same as the SWR.
In fact, this argument is statically connected with the frourio controller.
A type definition for this API is included in server/api/tasks/index.js
The directory names after server/api correspond to API URL.

Alt Text

Let’s change the type of resBody to string, for a test.

Alt Text

Next.js: pages/index.tsx

Alt Text

frourio: server/api/tasks/controller.ts

Alt Text

An error occurred both in Next.js and frourio, that’s the cool part of frourio!

Capable of using Dependency Injection in function

In frourio, everything except for validator is written in function.

Patterns that use Dependency Injection in the controller that have been written by function are usually not popular, but frourio has adopted a method called Functional Dependency Injection.

If you choose Jest as a test framework when installing, the frourio test code is included.

As seen in line 8 below, “findAllTask” which is the Prisma object injected, is defined.

Upcasting is performed by using “as” to make dependency injection easy to use later.

Alt Text

See line 7 below; “findAllTask” and “print” are injected into the controller.

Alt Text

Write test code using your favorite tool.
See line 7 below; controller and also findAllTask (on line 8) need dependency injection, that’s why it’s nested.
However, "print" doesn’t have a dependency, so it’s directly injected by the arrow function.

Alt Text

Here’s the test result.

Alt Text

As you can see, it’s written much more simply than typical Constructor-Based Dependency Injection.

This is realized by installing the library called velona.
(Actually, velona is a spin-off library that is created after seeking how to use Dependency Injection in frourio)

The logo is cute!

Cute Character logo is designed by Indonesian Designer!

Alt Text

Please Star us.
https://frourio.io/

Top comments (0)