Komponentenbasierter Framework-Aufbau

Ich bin mir sicher, die meisten von Ihnen verstehen, wie man mit einem Framework wie Bootstrap, Foundation oder Materialize arbeitet. Sie verwenden deren CSS und JavaScript. Sie verwenden auch deren HTML-Schnipsel, fügen diese zusammen und wenden Klassen nach Bedarf an, um das zu tun, was Sie tun müssen.

Sie sind auf sich allein gestellt, wenn es darum geht, das HTML zusammenzufügen. Das ist gut, denn es ist flexibel. Leute verwenden Frameworks wie dieses in allen möglichen CMSs und Backend-Systemen. Aber was, wenn Sie dem eine gewisse Struktur geben wollen, indem Sie aus den Ihnen vom Framework gegebenen Komponenten tatsächliche Komponenten machen?

Genau das hat Morgan Feeney im letzten Jahr in Component-Led Design Patterns with Nunjucks & Grunt getan.

Zum Beispiel gibt Ihnen Bootstrap etwas HTML für Benachrichtigungsnachrichten, das so aussieht:

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Wir könnten das in eine wiederverwendbare Komponente abstrahieren, indem wir

1. den Typ der Benachrichtigung übergeben (zweiter Teil der zweiten Klasse)
2. den Inhalt innerhalb der Benachrichtigung übergeben

Ich bin sicher, Sie könnten sich vorstellen, das im Backend oder einer Templating-Sprache Ihrer Wahl zu tun. Eine einzelne PHP-Datei, in der Sie Variablen setzen, die diese Dinge darstellen, bevor Sie sie includen. Ein Rails-Partial, dem Sie locals übergeben. Eine tatsächliche React-Komponente in JSX, der Sie die Dinge als Props übergeben. Diese Art von Dingen erleichtert die Wiederverwendung dieser Muster erheblich.

Morgan hat das mit Nunjucks gemacht

{% macro alert(class="success", text="<strong>Well done!</strong> You successfully read this important alert message.") %}
  <div class="alert alert-{{ class }}" role="alert">
    {{ text | safe }}
  </div>
{% endmacro %}

Ich halte das für äußerst überzeugend und für die Art von Dingen, die wir zunehmend tun werden, da Designsysteme zu einer gängigeren Praxis werden.

Ich finde Nunjucks auch ziemlich verdammt cool.

Ich habe Morgans Idee (die bereits ein Repo ist) in ein CodePen Project portiert, wenn Sie dort etwas ausprobieren möchten.