Frontend Architecture
The App frontend architecture is server-first.
Pages are server-rendered Django templates styled using TailwindCSS.
Where necessary we use AlpineJS and HTMX to add interaction to the page and HTMX.
Django templates with AlpineJS and HTMX
- Using server-side rendered Django templates allows us to leverage a lot of Django's value i.e. views, templates, forms, sessions, and authentication.
- A lot can be achieved using HTMX, but the templates have to be well organized for the project to scale. See the Django templates
TailwindCSS
- TailwindCSS is a utility-first library that allows you to build beautiful interfaces quickly and effortlessly.
- One downside of TailwindCSS is that it does not abstract away the creation of components e.g.
cards
or dropdowns
. Initially, this can take some getting used to if you are coming from UI Kit frameworks like Bootstrap or Bulma.
- The project includes basic core components that you can reuse, eg. form inputs, buttons, and checkboxes.
- There are also several open-source tailwind component libraries to get you started. See here for a full listing.
For most projects, this setup will be MORE THAN sufficient to build a solid product in record time. The Vanty Starter Kit can also serve other modern javascript frameworks e.g React/Svelte or flutter.
Adding a Client-side framework
The backend includes all exposes all the core endpoints via an API. You can easily plug in any modern client-side javascript framework. See the following pages for more info:
- Modern Javascript docs on how to add Modern Javascript framework components to your project.
- Headless API docs if you want to completely replace Django's templates with a SPA.
Copyright © 2022 www.advantch.com