Introducing Flect: A Python Framework for Full-Stack Web Development

Flect is revolutionizing the way developers build full-stack web applications. This Python framework seamlessly integrates backend logic with frontend UI using Pydantic models in the backend that correspond to React components in the frontend. With Flect, developers can quickly develop interactive and beautiful UIs using the power of Python.

Key Features of Flect

• Fast Development: Write your entire app with Python, integrating backend and frontend seamlessly.
• Easy Form Validation: Define a single Pydantic model for consistent form validation, enhancing development speed and reducing errors.
• Folder-Based Routing: Easily manage routes through folder structure for better organization.
• Client-Side Routing: Enjoy fast, smooth page transitions without reloads for a seamless user experience.
• SEO Friendly: Supports server-side rendering for improved search engine visibility.
• Custom Components: Utilize your own built React components conveniently within Flect.

Why Choose Flect?

Flect empowers developers by combining the strengths of both Python and JavaScript ecosystems, making web application development efficient and straightforward:

• For Python Developers: Build responsive web applications using React without writing JavaScript or touching npm.
• For Frontend Developers: Focus on building reusable components without the hassle of copy-pasting for each view.
• For Everyone: Achieve a true separation of concerns, with the backend defining the application while the frontend implements the user interface.

From FastUI

Example: Building a To-Do Application with Flect

Let's dive into an example of building a simple to-do application using Flect. As Flect is built on top of FastAPI, you can define routes using FastAPI’s syntax.

import json
from typing import Optional

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

# Define a model for creating new todo items with a single 'task' field
class TodoInCreate(BaseModel):
    task: 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(
        body=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",
                    model=TodoInDB
                )
            ]
        )
    )

# 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),
        )
    )

With Flect, developers can create powerful web applications with ease, leveraging the strengths of both Python and JavaScript ecosystems. Explore the possibilities with Flect and start building your next web project today!