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

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:

Abfrage	Beschreibung	Standard
Desired Name	Name des Verzeichnisses	Name
Desired template engine	`hbs` / `twig`	`hbs`
Desired js compiler	`js` / `ts`	`js`
Using theming feature	Features, die beim Entwickeln helfen: Link	`false`
Using client side templates	Vorlagen für den Browser	`false`
Including example code	Beispiel Code	`false`
Installing nitro-exporter	Exporter kann Files zusammenstellen	`false`

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

Development	Production
`npm start`	`npm run prod`
standard	speziell
Seite wird bei jeder Änderung neu geladen	Seite wird bei Änderungen nicht erneut geladen
Themes werden einzeln gestartet	nur ein Server wird gestartet

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

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/

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:

name (case sensitive)
type (atom, molecule, organism)
css modifier
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)

btn

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.

button-variant.json


{ "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'}}

doit

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

Fazit

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