Laravel Livewire pour Django? Dite bonjour à Unicorn!

Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Aujourd'hui je suis très excité car j'ai une nouvelle extra pour les amoureux de Django.

Un nouvel outil Django est disponible depuis peu et il s'appelle Unicorn

Qu'est-ce que Unicorn ?

Unicorn est à Django ce que Livewire est à Laravel : un framework full stack qui permet de créer une interface utilisateur réactive riche en fonctionnalités sans API et sans javascript uniquement en Django et python.

En passant, je ne suis en aucun cas associé à Unicorn. Je suis juste fan de leur travail.

Exemple de l'utilisation de Unicorn

Supposons que vous souhaitiez créer une liste de tâches mais que vous ne souhaitiez pas rafraichir le navigateur lors de l'ajout ou de la suppression d'une tâche.

Normalement, vous utiliserez javascript pour implémenter ce type de fonctionnalité. Pas avec Unicorn !

Unicorn permet de créer un modèle Django et une vue Django qui peut faire exactement cela.

Voici un exemple de modèle Django :

<!-- unicorn/templates/unicorn/todo.html -->
<div>
  <form unicorn:submit.prevent="add">
    <input type="text"
      unicorn:model.defer="task"
      unicorn:keyup.escape="task=''"
      placeholder="New task" id="task"></input>
  </form>
  <button unicorn:click="add">Add</button>
  <button unicorn:click="$reset">Clear all tasks</button>

  <p>
    {% if tasks %}
      <ul>
        {% for task in tasks %}
          <li>{{ task }}</li>
        {% endfor %}
      </ul>
    {% else %}
      No tasks 🎉
    {% endif %}
  </p>
</div>

Comme vous le voyez, unicorn:model map le input à la variable task.

Tandis que unicorn:click="add" appel la fonction 'add' lors du click du bouton

La fonction add et la variable task se trouve définit dans le composante todo.py:

# unicorn/components/todo.py
from django_unicorn.components import UnicornView
from django import forms

class TodoForm(forms.Form):
    task = forms.CharField(min_length=2, max_length=20, required=True)

class TodoView(UnicornView):
    task = ""
    tasks = []

    def add(self):
        if self.is_valid():
            self.tasks.append(self.task)
            self.task = ""

La beauté de cette fonction c'est quelle est exécuté sans rafraichir le navigateur. Seul le contenu qui à changer sera re-actualisé dans le navigateur.

Comme mentionné au début du texte, c'est exactement le même principe qu'avec Livewire (Laravel)

Excité?

Mois je le suis! Unicorn peut littéralement changer le spectre de ce que nous pouvons faire avec les templates Django.

Il offre la puissance d'un SPA sans quitter le confort de Django.

Si vous voulez plus d'informations, vous pouvez consulter un exemple visuel sur leur site Web :
https://www.django-unicorn.com/

Vous pouvez également consulter le git hub et attribuer une étoile au projet pour les encourager à continuer.
https://github.com/adamghill/django-unicorn