{% extends "layout.html" %}
{% block title %}My title{% endblock %}
{% from "bunch_of_macros.html"
import card_macro, another_macro %}
{% block content -%}
<div>
<h2>Hello {{ mistery or "World?" }}</h2>
<div>
{% call card_macro(div="So verbose") %}
{% for product in products %}
{{ another_macro(product) }}
{% endfor %}
{% endcall %}
</div>
</div>
{% with items=products %}
{% include "snippets/pagination.html" %}
{% endwith %}
{%- endblock %}
{#def products, msg="World!" #}
<Layout title="My title">
<div>
<h2>Hello, {{ msg }}</h2>
<div>
<Card div="So clean">
{% for product in products %}
<Product :product="product" />
{% endfor %}
</Card>
</div>
</div>
<Paginator :items="products" />
</Layout>
include and macros
css and/or js files
and can be copy/pasted to other projects without modifications.
Your Python code should be easy to understand and test.
Template code, however, often fails even basic code standards: long methods, deep conditional nesting,and mystery variables everywhere.
But when it's built with components, you see where everything is, understand what are the possible statesof every piece of UI, and know exactly what data need to have.
You can replace all your templates with components, or start with one section.