Home

Awesome

<img src="https://raw.githubusercontent.com/hviana/faster_react_core/refs/heads/main/docs/programmer-man.gif" width="125">

🚀 faster_react

[!IMPORTANT]
Please give a star! ⭐

🌟 Introduction

faster_react is a tiny Full-Stack React framework. He avoids Overengineering. This framework uses its own RSC engine, combining SSR and CSR, and automatically generates routes for React components. To utilize this, you must use the routes helper provided by the framework (React Router). The framework's configuration file is located at options.json.

🎯 What Does faster_react Do for You?

Focus solely on development! This framework handles:

Note: The project includes a simple application example demonstrating each functionality.

⚡ About Faster

This framework uses a middleware library called Faster. Faster is an optimized middleware server with an incredibly small codebase (~300 lines), built on top of native HTTP APIs with no dependencies. It includes a collection of useful middlewares:

Fully compatible with Deno Deploy and other enviroments. Examples of all resources are available in the README. Faster's ideology is simple: all you need is an optimized middleware manager; all other functionality is middleware.

📚 Contents

⚡ Benchmarks

faster_react has only 0.9% of the code quantity of Deno Fresh.

Benchmark Command:

# Deno Fresh
git clone https://github.com/denoland/fresh.git
cd fresh
git ls-files | xargs wc -l
# Output: 104132 (version 1.7.3)

# faster_react
git clone https://github.com/hviana/faster_react.git
cd faster_react
git ls-files | xargs wc -l
# Output: 1037 (version 17.6)

🏗️ Architecture

This framework utilizes Headless Architecture [1] to build the application, combined with the Middleware Design Pattern [2] for defining API routes in the backend.

Architecture Diagram

📂 App Structure

All application folders are inside the app folder.

📦 Get Deno Kv and Deno Kv Fs

On the backend, if a Deno KV instance is available, access instances via Server.kv and Server.kvFs:

import { Server } from "faster";

See Deno KV settings in options.json.

More details: deno_kv_fs

Note: The project includes a simple application example demonstrating each functionality.

📝 Backend API

🧩 Backend Components

📁 Backend Files

🖥️ Frontend Components

🎨 Frontend CSS

Application CSS style files.

📜 Frontend Files

🗂️ Static

Files served statically. Routes are generated based on the folder and file structure.

🧭 React Router

Since the framework has its own routing system, a third-party routing library is unnecessary. Use the framework helper:

Note: Direct form submissions for page routes path also work.

import { getJSON, route } from "@helpers/frontend/route.ts";

Interface Parameters:

interface Route {
  headers?: Record<string, string>; // When routing to a page, headers are encoded in the URL. Intercept them in ctx.url.searchParams in a backend/components file.
  content?:
    | Record<any, any>
    | (() => Record<any, any> | Promise<Record<any, any>>);
  path: string;
  startLoad?: () => void | Promise<void>;
  endLoad?: () => void | Promise<void>;
  onError?: (e: Error) => void | Promise<void>;
  disableSSR?: boolean; //For component routes. Disables SSR; defaults to false.
  elSelector?: string; // Required for component routes.
  method?: string; // Only for API routes. Optional; defaults to GET or POST.
}

Examples

Navigating to a Page with Search Params:

// URL search params passed as properties to the page. Props receive `{a:1}`
<button onClick={route({ path: "/pages/test?a=1" })}>
  Go to Test Page
</button>;

Passing Additional Parameters:

// Props receive `{a:1, example:"exampleStr"}`
<button
  onClick={route({
    path: "/pages/test?a=1",
    content: { example: "exampleStr" },
  })}
>
  Go to Test Page with Extra Data
</button>;

Using Asynchronous Content:

// Props receive `{a:1, ...JSONResponse}`
<button
  onClick={route({
    path: "/pages/test?a=1",
    content: async () => {
      return await getJSON({
        path: "/example/json",
        content: {
          test: "testData",
        },
      });
    },
  })}
>
  Go to Test Page with Async Data
</button>;

Programmatic Routing:

(async () => {
  if (user.loggedIn) {
    await route({
      path: "/pages/dash",
      content: { userId: user.id, token: token },
    })();
  } else {
    await route({ path: "/pages/users/login" })();
  }
})();

Loading a Component:

<button
  onClick={route({
    path: "/components/parts/counter",
    elSelector: "#counter",
  })}
>
  Load Counter Component
</button>;

Making an API Call:

<button
  onClick={async () => {
    const res = await getJSON({
      path: "/example/json",
      content: {
        test: "testData",
      },
    });
    console.log(res);
    alert(JSON.stringify(res));
  }}
>
  Fetch JSON Data
</button>;

📦 Packages Included

Several packages are included to assist in developing React applications. Here are some examples of imports you can use without additional configuration:

import {/* your imports */} from "react";
import {/* your imports */} from "react/";
import {/* your imports */} from "i18next";
import {/* your imports */} from "reactI18next";
import {/* your imports */} from "i18nextBrowserLanguagedetector";
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/jsx-runtime";
import {/* your imports */} from "render";
import {/* your imports */} from "htm/react";
import {/* your imports */} from "@helpers/frontend/route.ts";
import {/* your imports */} from "@helpers/backend/types.ts";

// **About Faster:**
// Faster is an optimized middleware server with an incredibly small codebase (~300 lines), built on top of Deno's native HTTP APIs with no dependencies. It includes useful middlewares: log file, serve static, CORS, session, rate limit, token, body parsers, redirect, proxy, and handle upload. Fully compatible with Deno Deploy. Examples are available in the README. Faster's ideology: all you need is an optimized middleware manager; all other functionality is middleware. See more at: https://deno.land/x/faster

import {/* your imports */} from "faster";
import {/* your imports */} from "deno_kv_fs";
import {/* your imports */} from "jose"; //manage tokens

import { options, server } from "@core"; // Useful for accessing the server instance.

🛠️ Creating a Project

You can simply download this repository. Alternatively, use the command (requires git installed and configured):

deno run -A -r "https://deno.land/x/faster_react_core/new.ts" myProjectFolder

Customize and configure the server in options.json.

🚀 Running a Project

Execute the command:

Development:

deno task serve

Production:

deno serve main.ts #Add your permissions, port, certificate, etc. see: https://docs.deno.com/runtime/reference/cli/serve

🌐 Deploy

Note: For production, set framework => "dev": false in options.json.

📖 References

<a id="1">[1]</a> Dragana Markovic, Milic Scekic, Alessio Bucaioni, and Antonio Cicchetti. 2022. Could Jamstack Be the Future of Web Applications Architecture? An Empirical Study. In Proceedings of the 37th ACM/SIGAPP Symposium on Applied Computing (SAC '22). Association for Computing Machinery, New York, NY, USA, 1872–1881. DOI: 10.1145/3477314.3506991

<a id="2">[2]</a> Brown, Ethan. Web Development with Node and Express: Leveraging the JavaScript Stack. O'Reilly Media, 2019. URL: http://www.oreilly.com/catalog/9781492053484

👨‍💻 About

Author: Henrique Emanoel Viana, a Brazilian computer scientist and web technology enthusiast.

Improvements and suggestions are welcome!