BlogArsmp

Single File Component Di Django

aries -

Bagi pengguna framework javascript saya yakin pasti mengenal istilah single file component (SFC), yang saya pahami SFC ini membantu kita untuk membuat satu komponen antar muka yang mempunyai tugas spesifik namun juga fleksibel untuk digunakan dalam beragam hal.

Contoh paling umum SFC adalah seperti berikut, misalkan kita ingin menampilkan sebuah item entah itu daftar tulisan atau sebuah foto dalam bentuk card, dengan SFC kita bisa buat seperti ini

kode di bawah adalah pseudo code
// komponen card
<div class="card">
  <h1> {{ title }} </h1>
<slot>
</div>

Setelah memiliki satu komponen tersebut kita bisa menggunakannya di beragam hal, misal sebuah daftar tulisan di blog

for post in posts {
    <card title="post.title"> post.content </card>
}

for image in images {
  <card title="image.title"> <img src="image.url" /> </card>
}

Lalu bagaimana cara kita mengadaptasi skema SFC ini di Django?

TEMPLATE

Django sendiri sudah memiliki "template language" tersendiri, fungsi dari sistem template bawaan django sudah sangat cukup sebenarny untk membangun sebuah antar muka website, fitur-fitur seperti "{% extend %}", "{% include %}", "{% block %}

detail tentang template di django https://docs.djangoproject.com/en/5.1/ref/templates/language/

untuk membuat seperti pseudo code di atas dengan cara django bisa jadi seperti ini

{% for post in posts %}
    {% include "_post_item.html" with title=post.title %}
{% endfor %}

Lalu bayangkan jika kode seperti itu bisa diubah menjadi seperti ini

{% for post in posts %}
<c-components.card title={{ post.title }}>
    <p>{{ post.description }}</p>
</c-components.card>
{% endfor %}

Sekarang dengan menggunakan django cotton kita bisa membuatnya seperti itu.

Instalasi

Kalian bisa mengikuti tahapannya dengan membaca di halaman resminya https://django-cotton.com/docs/quickstart, di tulisan ini saya hanya berbagi pengalaman saya mencoba django-cotton bukan "tutorial".

Seperti yang saya tulis di atas menggunakan django-cotton membuat membangun tampilan antar muka terasa lebih rapi, terlebih jika menggunakan utility css seperti tailwind makin cocok dengan pendekatan SFC, berikut hal-hal yang menurut saya menjadi nilai lebih menggunakan django-cotton dibanding bawaan dari django template.

SFC

Sesuai tulisan di atas membuat SFC jaduh lebih mudah

// component
<div class="flex ...">
    <h2>{{ title }}:</h2>
    </slot>
</div>

// penggunaan
<c-card title="some title">
 <p> print slot </p>
</c-card>

Lalu bandingkan dengan

// "component"
<div class="flex ...">
    <h2>{{ title }}:</h2>
    {{ content }}
</div>

///penggunaan
{% include "component.html" with title="title" content=content %}

Bagi saya yang pernah pake vue, cara pendekatan django-cotton lebih menyenangkan.

Membuat Layout

Sudah dangat umum sebuah website memiliki beragam layout, katakanlah kita punya public dan admin

// layouts/admin.html
<html>
    <head>
        ...
    </head>
    <body>
        {{ slot }}
    </body>
</html>

// layouts/public.html
<html>
    <head>
        ...
    </head>
    <body>
      <h1> Ini public</h1>
        {{ slot }}
    </body>
</html>

Lalu di berkas yang akan menggunakan layoutnya

<c-layouts.admin>
   render di admin
</c-layouts.admin>

<c-layout.public>
   render di public
</c-layout.admin>

HTMX

django-cotton x HTMX (tulisan menyusul ~)

Karena dengan django-cotton mudah membuat sfc, kombinasi dengan htmx pun lebih rapi.