Patterns in Nitro

Datum: August 2020
Lesedauer: 3 Minuten

In den letzten Wochen habe ich mich mit Patterns auseinandergesetzt. In diesem Blogpost erkläre ich, wozu und wie man sie verwendet.

Nitro

https://github.com/merkle-open/generator-nitro (opens in a new tab)

Obwohl der Fokus dieses Posts auf den Patterns liegt, ist es von Vorteil, wenn man Nitro ein wenig versteht.
Nitro ist eine Applikation für Node.js um die Frontend Entwicklung zu vereinfachen. Mit Nitro fällt es einem leichter, sein Projekt zu strukturieren.
Der Code wird durch die Scripts sauberer. Als Entwickler kann ich konfigurieren, wann welches Script ausgeführt wird.
Beispiel: Ich will meinen Code erst committen, wenn er fehlerfrei ist. Nun kann ich angeben, dass zuerst ein linter Script über die gewünschten Files läuft.

Generieren

Mit folgendem Code erstellt man ein Projekt:

npx -p yo -p generator-nitro@latest -- yo nitro

Nun hat man verschiedene Optionen:

Danach kann man die Seite in einem dev oder prod Modus laufen lassen:

Patterns

Patterns werden bei der Frontend Entwicklung eingesetzt, um Code aufzuteilen. Man findet sie unter src/patterns.

Wenn ich eine Webseite habe, brauche ich z.B drei Buttons auf meiner Seiten. Aus einem solchen Button kann ich jetzt ein Pattern machen. Diese Patterns kann ich dann auf der gesamten Webseite verwenden.

Handlebars

Standardmässig lauten die Endungen der Files, welche ähnlich wie html Dateien aussehen, hbs. In HBS Files kann HTML geschrieben werden. Es gibt jedoch Vorteile:

• Logik: Element können angezeigt werden, wenn etwas zutrifft ({{#if children}}...)
• Patterns: Namics hat einen Helper geschrieben, sodass die Patterns leicht in den Files eingebunden werden können

Auf der Handlebars Webseite findet man genauere Informationen:
https://handlebarsjs.com/guide/#what-is-handlebars (opens in a new tab)

Atomic Design

Beim Erstellen von Patterns muss man sich überlegen, was man will:

• Atom
• Molekül
• Organismus

Falls man mit den oben genannten Begriffen noch nicht vertraut ist, sollte man auf jeden Fall zuerst folgende Beschreibung lesen: https://bradfrost.com/blog/post/atomic-web-design/ (opens in a new tab)

Erstellen

Um ein Pattern zu erstellen muss man folgenden Code ausführen:

npm run nitro:pattern

Danach bekommt man Hilfe beim Anlegen.

Folgende Dinge werden abgefragt:

1. name (case sensitive)
2. type (atom, molecule, organism)
3. css modifier
4. js decorator

Inhalt

Ein Pattern besteht aus den folgenden Dingen:

button/
	data/
	css/
	button.hbs
	index.js
	readme.md
	schema.json

• data: darin befinden sich die json Files, welche Daten für den Inhalt beinhalten
• css: enthält scss Files für die styles
• js (in diesem Pattern nicht enthalten): enthält js Files für die Logik
• button.hbs: ist das Markup für den Button
• index.js: importiert js und scss
• readme.md: hier wird das Pattern dokumentiert
• schema.json: definiert welche Daten im Pattern erlaubt sind

Auf Seite verwenden

Um das Pattern anzuzeigen kann man es z.B. im index.hbs einbinden.

{{pattern name='button'}}

Abweichungen

Drei Buttons bringt man auch ohne Nitro auf eine Webseite. Jedoch gibt es einen entscheidenden Vorteil beim Verwenden der Applikation: Man kann einzelne Buttons beliebig verändern.
Unten sind die Buttons, welche auf meiner Webseite abgebildet sind. Folgende Dinge kann ich anpassen:

• Aussehen -> Modifier (SCSS)
• Funktion -> Decorators (JS)
• Daten -> Data Variations (JSON)
• Gesamtes Template -> second template (hbs)

In meinem _data Ordner habe ich nun ein weiteres json angelegt.
(variant kann durch eine beliebige Bezeichnung ersetzt werden.)

button/_data/button-variant.json

Genau dasselbe könnte man für JS oder SCSS Dateien machen.

button/css/modifier/button-<modifier>.scss
button/js/decorator/button-<decorator>.js

Danach kann ich die Datei bearbeiten. In diesem Fall setze ich disabled auf true. Diese Änderung ist klar sichtbar, da sich damit auch der Style des Buttons verändert.

{ "text": "do it", "disabled": true }

Nun habe ich immer noch die drei Buttons in meinem index.hbs. Um das button-variant File einzubinden muss ich es unter data angeben. Die Endung der Datei muss nicht angegeben werden, da man data schreibt.

{{pattern name='button'}}
{{pattern name='button'}}
{{pattern name='button' data='button-variant'}}

Mehr interessante Informationen findet man in diesem Readme:
https://github.com/namics/generator-nitro/blob/develop/packages/project-nitro/project/docs/nitro.md (opens in a new tab)

Fazit

Patterns finde ich sehr spannend und äusserst nützlich.