Skip to main content

Turning ideas into web app fast.

Project description

flect

Turning ideas into web app fast.

Test

Explore the docs »

简体中文 · Report Bug · Request Feature

What is flect?

flect is a Python framework for building full-stack web applications. It constructs user interfaces by utilizing Pydantic models in the backend that correspond to the properties of React components in the frontend. This integration enables quick development of interactive and beautiful UIs using Python.

The key features are:

  • Fast development: Write your entire app with Python, seamlessly integrating backend logic and frontend UI.
  • Easy Form Validation: Define a single Pydantic model for seamless and consistent form validation across your app, enhancing development speed and reducing potential errors.
  • Client-Side Routing: Fast, smooth page transitions without reloads.
  • Folder-Based Routing: Easy route management through folder structure.
  • SEO Friendly: Supports server-side rendering for better search engine visibility.

Requirements

  • Python 3.9+

Installation

$ pip install flect

---> 100%

Example

  • The simple todo app is shown below.
import json
from typing import Annotated, Optional

from fastapi.encoders import jsonable_encoder
from pydantic import BaseModel
from flect import PageResponse
from flect import components as c
from flect import form as f
from flect.actions import Notify
from flect.response import ActionResponse

# Define a model for creating new todo items with a single 'task' field
class TodoInCreate(BaseModel):
    task: Annotated[str, f.Input(placeholder="Enter task...")]

# Define a model for todo items stored in the database, extending the creation model with an 'id' and 'completed' field
class TodoInDB(TodoInCreate):
    id: int
    completed: Optional[bool] = False

# Initialize a list of todo items
todos = [
    TodoInDB(id=1, task="Task 1", completed=False),
    TodoInDB(id=2, task="Task 2", completed=True),
    TodoInDB(id=3, task="Task 3", completed=False),
]

# Define the page
async def page() -> PageResponse:
    return PageResponse(
        element=c.Container(
            # support tailwind css
            class_name="container mx-auto px-32 py-10",
            children=[
                # Add a heading to the page
                c.Heading(
                    level=1,
                    text="Todo App",
                    class_name="text-3xl mb-10",
                ),
                # Add a form for creating new todo items
                c.Form(
                    model=TodoInCreate,
                    submit_url="/",
                    class_name="mb-5 border p-5",
                ),
                # Add a table displaying all todo items
                c.Table(
                    datasets=todos,
                    class_name="border p-5",
                )
            ]
        )
    )

# Define the form handling logic
async def post(form: TodoInCreate) -> ActionResponse:
    todos.append(
        TodoInDB(
            id=len(todos) + 1,
            task=form.task,
            completed=False,
        )
    )
    # Return a notification with the submitted form values
    return ActionResponse(
        action=Notify(
            title="You submitted the following values:",
            description=json.dumps(jsonable_encoder(form), indent=2),
        )
    )

Which renders like this: flect-todo

Demo

Check out the docs folder in the project repository. The documentation website is built directly from these sources.

License

This project is licensed under the terms of the MIT license.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

flect-0.1.0.tar.gz (251.8 kB view hashes)

Uploaded Source

Built Distribution

flect-0.1.0-py3-none-any.whl (255.1 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page