Skip to main content
Deno 2 is finally here 🎉️
Learn more

faster_react

It is a complete framework, with automatic compilation of components for the client side, Server Side Rendering, Hydration and interactive client-side components. It has folders in its structure for automatic inclusion of pages, routes, components and static files. It has automatic reload client side and compilation when "dev":true in options.json. There is also automatic generation of routes based on the file and folder structure. It focuses on performance and practicality. 100% Deno, no Node dependencies. About Faster, it is an optimized server middleware. See more at: https://github.com/hviana/faster

Contents

Framework structure

All these application folders are inside the app folder. Remember that any change in these folders will cause the framework to compile, cache, and deliver everything automatically to the client, also updating server-side resources. There is no need to restart the application.

frontend_pages folder

  • Use only frontend libraries here.
  • You can organize your files into subdirectories here.
  • The .tsx extension is used here.
  • These pages are rendered on the server and hydrated on the client.
  • Routes to these pages are generated automatically. For example, the path localhost:8080/pages/checkout/cart refers to the file app/frontend_pages/checkout/cart.tsx. It is important to note that the initial route will point to app/frontend_pages/index.tsx (ex:localhost:8080=>app/frontend_pages/index.tsx).
  • This file must have a default export with the React Function/Component.
  • The properties passed to the page includes:
    • Form-submitted data (or JSON POST);
    • URL search parameters, such as /pages/myPage?a=1&b=2 will result in {a:1, b:2};
    • options.json => framework;
    • backend_pages_props manipulations;
    • Request headers within the headers key.

frontend_components folder

  • Use only frontend libraries here.
  • You can organize your files into subdirectories here.
  • The .tsx extension is used here.
  • This file must have a default export with the React Function/Component.

frontend_scripts folder

  • Use only frontend libraries here.
  • You can organize your files into subdirectories here.
  • Here the extension .ts and .js is used.
  • You are free to make as many exports or calls (including asynchronous) as you want here. Different from frontend_pages frontend_components, the scripts here are not automatically delivered to the client. They need to be imported by the frontend_components or frontend_pages. The intention here is to group common functions/objects for React Functions/Components, such as form field validations. You can also have frontend_scripts in common for other frontend_scripts.

css folder

Application css style files.

  • You can have multiple CSS files and they are automatically compiled.
  • You can organize your files into subdirectories here.

static folder

Files that will be served statically. Routes are generated automatically based on the folder and file structure, for example localhost:8080/static/favicon.ico will match the file app/static/favicon.ico.

backend_api folder

  • You can import your backend libraries here.
  • You can organize your files into subdirectories here.
  • The .ts extension is used here.
  • The file and folder structure is free here and does not influence anything.
  • Here you are also free to define the routes in whatever pattern you want.
  • This file must have a default export with the function (which can be asynchronous).
  • This function has as input parameter an instance of Server of faster.
  • You can do your backend manipulations here. For example, getting data from the database. Including asynchronous calls.
  • Define your custom api routes. For help, see: https://github.com/hviana/faster

backend_pages_props folder

  • You can import your backend libraries here.
  • You can organize your files into subdirectories here.
  • The .ts extension is used here.
  • Each of these files must have the same folder structure and name as the corresponding page, with the difference in the extension, which here is .ts. For example app/frontend_pages/checkout/cart.tsx should have as a corresponding (if one exists) app/backend_pages_props/checkout/cart.ts here.
  • This file must have a default export with the function (which can be asynchronous) that will handle the props that will be passed to the page.
  • This function has as input parameter the props that will be passed to the page.
  • Only use JSON serializable data inside props.
  • You can do your backend manipulations here. For example, getting data from the database. Including asynchronous calls.

backend_files folder

  • You can import your backend libraries here.
  • You can organize your files into subdirectories here.
  • The .ts extension is used here.
  • You are free to make as many exports or calls (including asynchronous) as you want here.
  • The intention here is to group common functions/objects for backend_api, backend_pages_props (and backend_files, since you may have backend_files in common for other backend_files) files, such as user validations.
    • These libraries can only be imported dynamically (at top level, with #${Date.now()}) in backend_api, backend_pages_props (and backend_files). At top level means at the beginning of the file, without being inside any call. Don’t worry, when using the top level, the cache works. Examples (as an example, the general.ts file):
      const general = await import(
  `../backend_files/general.ts#${Date.now()}`
);
      So, you can use:
      general.myFuncExample(params);
await general.myFuncExample(params);
new general.MyClassExample(params);
//etc.
      Or, if you have a default export:
      const general = (await import(
  `../backend_files/general.ts#${Date.now()}`
)).default;
      So, you can use:
      general(params);
await general(params);
new general(params);
//etc.
      In the case of backend_file importing backend_files, replace ../ with ./

Packages included

There are several packages included to help you develop React applications. Here are some examples of imports that you can use without configuring anything:

import {/* your imports */} from "react";
import {/* your imports */} from "react/";
import {/* your imports */} from "react-dom";
import {/* your imports */} from "react-dom/server";
import {/* your imports */} from "react-dom/client";
import {/* your imports */} from "react-router-dom";
import {/* your imports */} from "react-router";
import {/* your imports */} from "react/jsx-runtime";
import {/* your imports */} from "render";
import {/* your imports */} from "htm/react";
import {/* your imports */} from "faster";

Creating a project

It is necessary to execute the command: deno run -A -r "https://deno.land/x/faster_react/new.ts" myProjectFolder. It is important to highlight that you need the git command installed and configured. You can make your customizations and configure the server in options.json.

Running a project

It is necessary to execute the command: deno task serve

About

Author: Henrique Emanoel Viana, a Brazilian computer scientist, enthusiast of web technologies, cel: +55 (41) 99999-4664. URL: https://sites.google.com/view/henriqueviana

Improvements and suggestions are welcome!