Formidablejs: The one person framework

Donald — Sun, 30 Jan 2022 22:10:11 +0000

What is Formidable?

Formidable (or formidablejs) is a Laravel inspired API framework for building backend applications. It uses Imba by default and has native support for JavaScript and TypeScript.

While Formidable is meant to provide a smooth process for building API applications, you may also use it to build Fullstack applications thanks to Inertia and Laravel Mix providing that "one person framework" feel.

Formidable borrows a lot of its features from Laravel, and also uses Fastify under the hood.

A few Formidable features

Database

Formidable has out of the box support for SQL Queries and Redis. The SQL data layer is powered by Knex.js, while the Redis data layer is powered by Node-Redis.

Migrations

Out of the box, Formidable provides a simple database migration system that allows you to define and share your database schema definition. This is a great way to ensure that your database schema is always in sync with your application code.

Auth

Formidable provides a starter authentication system for both session and jwt based applications. By default, session based authentication is enabled.

The session based authentication system enables the use of cookies, and stores the session data in memory, file or redis. While the jwt based authentication system enables the use of JWT tokens, and stores authentication data in the database.

Routing

Just like any other framework, routing has become a standard feature. Formidable provides a routing system similar to Laravel's router. You can easily group your routes, limit them to specific middleware's, etc.

Error Handling

Formidable has an Error Handler class which allows you to intercept any errors and return a different response. Formidable also provides Bugsnag out of the box.

CLI Tool

Craftsman is the command line interface included with Formidable. Craftsman is installed as a global package and on every Formidable application. It provides a number of helpful commands that can assist you while you build your application.

Project setup

First thing you want to do, is install the CLI tool:

$ npm i -g @formidablejs/craftsman

Once the CLI installation is done, run the following command:

$ craftsman new project-name --web

cd into the project folder:

$ cd project-name

Optional: should you want to install Vuejs or React, run the following commands:

$ craftsman inertia
$ npm run mix:dev

When done with everything, serve your application using the following command:

$ craftsman serve --dev

Once Formidable is running, you can go to http://localhost:3000 in your browser to see if your application was successfully created.
You should see the following:

Project structure

Lets take a look at what our project looks like:

Directory	Description
`/app`	Contains the core code of your application.
`/app/Http/Controllers`	Contains applicaiton controllers.
`/app/Http/Middleware`	Contains request middlewares.
`/app/Http/Requests`	Contains form and API requests.
`/app/Http/Models`	Houses `bookshelf` models.
`/app/Http/Resolvers`	Contains application service resolvers.
`/bootstrap/cache`	Contains the cached config file and database settings file.
`/config`	Contains application configuration files.
`/database/migrations`	Houses your application migration files.
`/public`	Houses your assets such as images, JavaScript, and CSS.
`/resources/lang`	Contains language files.
`/resources/views`	Contains Imba view class files.
`/routes`	Contains application routes.
`/storage/framework`	Contains core application data.
`/storage/session`	Contains application sessions.

Note: in some cases, you might see more folders; This is dependent on the type of project you created.

Demo

Creating your first Route

To add a new route, open the routes/web routes file and add the following lines at the bottom of the routes file:

Route.get '/ping', do 'pong'

Now, when visiting http://localhost:3000/ping, you should see pong.

Creating a Controller

In the section above, I showed you how to create a route. Now, let's create a controller and map it to the route:

$ craftsman make controller HelloController

Once created, you can open app/Http/Controllers/HelloController and you should see the following code:

import Controller from './Controller'

export class HelloController < Controller

Now create an action in the controller:

import Controller from './Controller'

export class HelloController < Controller

    def index
        'Hello World'

After adding the index action, you can go to your routes/web file import your new controller:

import { HelloController } from '../app/Http/Controllers/HelloController'

Once you've imported your controller, you can add a new route and map it to the action you created in the controller:

Route.get 'hello', [HelloController, 'store']

You should now see Hello World when visiting http://localhost:3000/hello

For a fullstack demo application with crud operations see: https://github.com/donaldp/pingcrm

Conclusion

While Formidable provides a lot of useful features, it still has a long way to go before hitting a stable release. For now, just play around with it, report bugs and contribute if you can!

Documentations: https://formidablejs.org
Github: https://github.com/formidablejs
PingCRM Demo: https://github.com/donaldp/pingcrm

DEV Community: Donald