![]() ![]() You will note the django_html type annotation, which is an alias of str and indicates to your editor to syntax highlight the following string. Then there is the template this uses the standard Django template language. Finally, the value of the public title attribute is reset to an empty string, which will subsequently empty the input box after saving. This creates a new ToDo model instance, sets its title, and saves it. Next up, we have a "public method" these are available in the browser to your JavaScript / Alpine.js code. (More on this later) ToDoList(Component): There is also a load method - this is called both when initially rendering the component, and when the component is "resumed" from its saved state. We also create a "public attribute" named title the value of this is available to both your server side code / template and to your front end JavaScript / Alpine.js. Next, we create a ToDoList component by subclassing Component and registering it. # components.pyįrom sourcetypes import javascript, css, django_htmlįrom tetra import Component, public, Library Every component belongs to a "Library", and for this simple app we just need one named default. Session_key = models.CharField(max_length=40, db_index=True)ĭone = models.BooleanField(default=False)Īssuming we have installed and setup Tetra, next we create a components.py file to contain our components. If you haven't used Django before you should follow their tutorial before coming back here.įirst, we need a Django "model" for saving our 'to do' items: # models.py To introduce the main aspects of Tetra we will walkthrough the code implementing the To Do App demo on the homepage. Tetra takes the four "faces" of a component and combines them into one composable object. If you haven't previously used Alpine.js, now is the time to go and follow their brief tutorial. ![]() The server side Python/Django code, HTML template, front end JavaScript (using Alpine.js), and CSS styles are side by side.įurthermore, components can expose attributes and methods as public, making them available to the front end Alpine.js JavaScript code.Īlpine.js is a lightweight front end toolkit that exposes a reactive state to your html, providing a way to build front end components. Tetra components encapsulate all aspects of their functionality into one definition in a single file. Server side rendering allows you to move more quickly without having to create further layers and abstractions.įrameworks such as Laravel Livewire and Phoenix Liveview, which heavily inspired Tetra, have shown that server side rendering with smart "morphing" of the DOM in the browser is an incredibly efficient way to build websites and apps. Whilst it is important to keep your backend logic, front end JavaScript, HTML, and styles separate, it is also incredibly useful to have related code in close proximity.įront end toolkits such as Vue.js, with its single file components and newer "utility class" based CSS frameworks such as Tailwind, have shown that keeping related aspects of a component in the same file helps to reduce code rot, and to improve the speed at which developers gain an understanding of the component.īuilding APIs as a bridge between your server side and front end code adds complexity and developer overhead - Tetra allows for much less of this. Proximity of related concerns is as important as separation of concerns. It is built on a couple of key principles: Tetra is a full stack component framework for Django using Alpine.js, bridging the gap between your server logic and front end presentation.
0 Comments
Leave a Reply. |