/tetra

Tetra - A full stack component framework for Django using Alpine.js

Primary LanguagePythonMIT LicenseMIT

Tetra

Full stack component framework for Django using Alpine.js

Tetra is a new full stack component framework for Django, bridging the gap between your server logic and front end presentation. It uses a public shared state and a resumable server state to enable inplace updates. It also encapsulates your Python, HTML, JavaScript and CSS into one file for close proximity of related concerns.

See examples at tetraframework.com

Read the Documentation

pip install tetraframework

What does Tetra do?

  • Django on the backend, Alpine.js in the browser

    Tetra combines the power of Django with Alpine.js to make development easier and quicker.

  • Component encapsulation

    Each component combines its Python, HTML, CSS and JavaScript in one place for close proximity of related code.

  • Resumable server state

    The components' full server state is saved between public method calls. This state is encrypted for security.

  • Public server methods

    Methods can be made public, allowing you to easily call them from JS on the front end, resuming the component's state.

  • Shared public state

    Attributes can be decorated to indicate they should be available in the browser as Alpine.js data objects.

  • Server "watcher" methods

    Public methods can be instructed to watch a public attribute, enabling reactive re-rendering on the server.

  • Inplace updating from the server

    Server methods can update the rendered component in place. Powered by the Alpine.js morph plugin.

  • Component library packaging

    Every component belongs to a "library"; their JS & CSS is packed together for quicker browser downloads.

  • Components with overridable blocks

    Component can have multiple {% block(s) %} which can be overridden when used.

  • JS/CSS builds using esbuild

    Both for development (built into runserver) and production your JS & CSS is built with esbuild.

  • Source Maps

    Source maps are generated during development so that you can track down errors to the original Python files.

  • Syntax highlighting with type annotations

    Tetra uses type annotations to syntax highlight your JS, CSS & HTML in your Python files with a VS Code plugin