「frourio」 Super Light Framework that sets up a dream Full-Stack TypeScript Environment with just one command!
Tags: typescript, frourio
Published: 2020-11-16 16:06:55

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](https://dev-to-uploads.s3.amazonaws.com/i/vafyg1tg3yh5f1od53qv.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/woc0b8hl9l9cv4n7mcvt.png)

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.

```sh
$ npx create-frourio-app
```

```sh
$ yarn create frourio-app
```

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.

```sh
open http://localhost:3000 in the browser
```

![Frourio GUI 1](https://dev-to-uploads.s3.amazonaws.com/i/flmaftovl3yx8tdm94qq.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/5e49aw8etv58ey43pfsm.png)

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

![Frourio GUI 3](https://dev-to-uploads.s3.amazonaws.com/i/4w4huh19lld48vk8aau8.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/0ralrqti7pkxk39u1rlc.png)

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

![Frourio GUI 5](https://dev-to-uploads.s3.amazonaws.com/i/lhj0ix0p4j9bwztxpcav.png)

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

![Frourio GUI 6](https://dev-to-uploads.s3.amazonaws.com/i/clmmyvb190pqti1u2duz.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/tjuc81rbd1hm57mb4gm3.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/igk5mrvctt06h6x8b6d9.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/5kxjxsp71epv4adbmqm6.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3b92anxw0za93b99izst.png)

Next.js: pages/index.tsx

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3f6ok0vt8wilfgcoxbu4.png)

frourio: server/api/tasks/controller.ts

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3h0cy1g121gk0u37onqa.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/zrfqm4w6r6qw9e0heq4u.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rwi1624njpa0d97uzv7v.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/iupaw9j9qajxbw2vb7j2.png)

Here’s the test result.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q0yzb501ggf8b6oizxum.png)

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](https://github.com/frouriojs/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](https://dev-to-uploads.s3.amazonaws.com/i/9ufgywi4us0dqo2rg49u.png)

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