FastUI: Rapid Development of Modern Web Applications with Python

Have you ever faced the dilemma of wanting to quickly develop a modern web application using Python, but having to switch back and forth between Python and JavaScript? The emerging framework FastUI might help you solve this pain point.

What is FastUI?

In simple terms, FastUI allows you to build responsive web interfaces using declarative Python code. This means you can focus on business logic without getting bogged down in the details of JavaScript.

Why is it worth trying?

If you are a Python developer, you can now directly use familiar Python to build modern web applications based on React, completely bypassing the steep learning curve of the JavaScript ecosystem. No more distractions from frontend trivialities like npm package management and build tools.

If you are a frontend developer, FastUI provides a reusable component system, eliminating the repetitive task of copying and pasting components across different pages. This allows you to focus more on refining and innovating user experience.

Benefits for team collaboration: This framework achieves true separation of frontend and backend—where the backend defines application logic and the frontend focuses on interface implementation, allowing both to be developed in parallel without interference.

Technical Architecture Overview

FastUI consists of four closely integrated parts:

  1. 1. Python Package (<span>fastui</span>)
  • • Provides Pydantic models and utility functions for UI components
  • • Works exceptionally well with FastAPI, but also supports other Python web frameworks
  • 2. TypeScript Core Package (<span>@pydantic/fastui</span>)
    • • Based on React and TypeScript
    • • Provides the infrastructure and type definitions needed to build custom components
  • 3. Bootstrap Theme Package (<span>@pydantic/fastui-bootstrap</span>)
    • • A ready-to-use component library based on Bootstrap
    • • Attractive interfaces out of the box
  • 4. Prebuilt Version (<span>@pydantic/fastui-prebuilt</span>)
    • • Directly referenced via CDN, zero configuration required
    • • Suitable for rapid prototyping

    Practical Application Example

    Let me illustrate with a specific example. Suppose we want to display a user list; we can implement it with FastUI like this:

    from datetime import date
    from fastapi import FastAPI
    from fastui import 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')
    
    # Simulated data
    users = [
        User(id=1, name='Zhang San', dob=date(1990, 1, 1)),
        User(id=2, name='Li Si', dob=date(1991, 1, 1)),
    ]
    
    @app.get("/api/")
    def users_table():
        return [
            c.Page(
                components=[
                    c.Heading(text='User List', level=2),
                    c.Table(
                        data=users,
                        columns=[
                            DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')), 
                            DisplayLookup(field='dob', mode=DisplayMode.date),
                        ],
                    ),
                ]
            ),
        ]

    This example demonstrates how to create an interactive user table using pure Python code, where clicking on a username can redirect to the details page.

    Design Philosophy and Advantages

    The core idea of FastUI is clear: follow the RESTful architecture, allowing the frontend not to need to understand the specific implementation details of the backend. The backend only needs to tell the frontend “what to display” without worrying about “how to display it.”

    This design brings several practical benefits:

    • • Functionality development only needs to be implemented once on the backend
    • • Frontend and backend can be independently deployed and evolved
    • • In theory, any frontend framework can be used to implement it, not limited to React

    Personal Experience

    From practical experience, FastUI is particularly suitable for data-driven management backends and internal tools. It significantly reduces the cost of frontend and backend coordination, allowing small teams to quickly produce high-quality web applications.

    Of course, for complex applications that require highly customized interactive effects, traditional frontend development methods may still be necessary. However, in most business scenarios, FastUI indeed provides a good balance.

    Conclusion

    FastUI opens a new door for Python developers, allowing us to develop modern web applications with a more familiar toolchain. If you are looking for ways to enhance full-stack development efficiency, this project is definitely worth a try.

    Project address: https://github.com/pydantic/FastUI

    Leave a Comment