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 tetra
-
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
-
Forms
FormComponents can act as simple replacements for Django's FormView, but due to Tetra's dynamic nature, a field can e.g. change its value or disappear depending on other fields' values.