FastUI

Introduction to FastUI

Overview

FastUI is a ground-breaking framework for developing web application user interfaces with declarative Python code. The innovation enables developers, particularly those who specialize in Python, to construct responsive web interfaces without writing any JavaScript or relying on node package manager (npm). While the tool is designed to function efficiently with FastAPI, it does not strictly depend on it and can be employed across various Python web frameworks.

FastUI provides a clear separation between backend and frontend concerns. The backend carries the responsibility of defining the entire application, whereas the frontend focuses exclusively on user interface implementation. It leverages Pydantic models and TypeScript interfaces to define an application’s UI, ensuring validation both during compilation and at runtime.

Key Components

FastUI is composed of four main elements:

1. fastui PyPI Package: This package consists of Pydantic models for UI components along with handy utilities. Although it pairs naturally with FastAPI, its utility isn’t constrained to this framework alone.

2. @pydantic/fastui NPM Package: A React TypeScript library that allows developers to utilize FastUI’s machinery and types while developing their own components.

3. @pydantic/fastui-bootstrap NPM Package: This package represents the adaptation and customization of all FastUI components using Bootstrap, making it easier to integrate modern styling frameworks.

4. @pydantic/fastui-prebuilt NPM Package: This package provides a pre-built version of the FastUI React application. It's available on cdn.jsdelivr.com, enabling usage of the FastUI app’s capability without requiring front-end build processes.

Sample Application

Below is an example of a simple FastAPI application using FastUI to display user profiles, showcasing the integration of Python backend code with FastUI's declarative approach for UI components.

from datetime import date
from fastapi import FastAPI, HTTPException
from fastui import FastUI, AnyComponent, components as c
from fastui.components.display import DisplayMode, DisplayLookup
from pydantic import BaseModel, Field

app = FastAPI()

class User(BaseModel):
    id: int
    name: str
    dob: date = Field(title='Date of Birth')

users = [User(id=1, name='John', dob=date(1990, 1, 1)), ...]

@app.get("/api/", response_model=FastUI, response_model_exclude_none=True)
def users_table() -> list[AnyComponent]:
    return [c.Page(...components...)]

@app.get("/api/user/{user_id}/", response_model=FastUI, response_model_exclude_none=True)
def user_profile(user_id: int) -> list[AnyComponent]:
    try:       
        user = next(u for u in users if u.id == user_id)
    except StopIteration:
        raise HTTPException(status_code=404, detail="User not found")
    return [c.Page(...components...)]

@app.get('/{path:path}')
async def html_landing() -> HTMLResponse:
    return HTMLResponse(...)

Component Library

FastUI offers a robust library of components that can be seamlessly utilized to construct intricate user interfaces. The components are detailed and demonstrated within the demo application.

Architectural Principle

FastUI adopts a RESTful architecture, diverging from traditional implementations. The inspiration stems from Roy Fielding’s original REST Ph.D. dissertation, advocating for a frontend that dynamically constructs the application via guidance from the backend. This architecture divides concerns efficiently: frontend acts as a universal interface provider; backend orchestrates functionalities and interactions.

This approach yields numerous advantages, including single-point feature implementations and decoupled deployment for front-end and backend components. Moreover, it encourages the reuse of open-source components for reliability without dependency on context.

Beyond Python and React

The principles underlying FastUI extend beyond Python and React, proposing a framework where any agreed schema can facilitate communication, allowing flexible frontend and backend replacements. Future potential lies in creating web frontends using different JavaScript frameworks or even developing interfaces for other platforms like mobile or IoT.

FastUI is an exciting prospect for web developers seeking streamlined, declarative coding practices with Python while embracing the rich component ecosystem and potential to decouple backend development from the front end.