Atomic Design & Pattern Lab 2

Dass ich großer Fan des Atomic Design Prinzips bin ist sicherlich keine große Neuigkeit. Die damit einhergehende, meistverwendete Software „Pattern Lab“ ist ein täglicher Begleiter während meiner Arbeit. Wahrscheinlich würde ich heute kein Projekt mehr ohne Pattern Lab beginnen.

Eine Entwicklung gefiel mir allerdings überhaupt nicht: Das letzte größere Update kam vom März 2014. Zwar war recht schnell klar, dass Dave, Brad und Bryan an einem größeren Update arbeiten, das Release ließ aber auf sich warten.

Die Alarmglocken wurden seitdem bei mir immer lauter, der Verdacht dass man sich übernommen hat und ein Release nicht mehr zu meiner Lebenszeit passiert, erhärtete sich. Und in der Tat suche und evaluiere ich eigentlich schon seit einigen Monaten nach einer guten Pattern Lab Alternative. [1. Offensichtlich mit wenig Erfolg. ]

Und nun ist es soweit: Pattern Lab 2 wurde released.

Pattern Lab 2: Template Ansicht
Pattern Lab 2: Seiten Ansicht mit Inhalte

Und viel wichtiger - mir gefällt es! Dave, Brian und Brad haben sich vieler Kritikpunkte angenommen und weitere Features hinzugefügt. Dazu haben die drei in einem sehr ausführlichen Artikel auf Smashing Magazine Pattern Lab 2 und den Atomic Design Workflow ausführlich vorgestellt.

Der Changelog sieht sich schonmal gut, ein paar Highlights:

  • complete rebuilding of core
  • support for Composer
  • support for more template languages (currently Mustache and Twig)
  • support for StarterKits allowing separation of a team’s unique needs from Pattern Lab proper
  • redesigned and rebuilt modal view
  • redesigned and rebuilt styleguide view
  • multi-source directory support
  • support for YAML in global data, pattern-specific data, and pseudo-patterns
  • can have multiple JSON/YAML files in ./_data/
  • patterns and pattern subtypes can be documented in the styleguide by using [pattern-name].md or [pattern-subtype].md
  • annotations can be defined using Markdown
  • patterns can be exported minus Pattern Lab mark-up

Modularität

Pattern Lab bestand bisher aus einen komplett miteinander verzahnten System. Zwar war es möglich dieses zu erweitern und seinen Gegebenheiten anzupassen. Dass solche Aktionen die Updatebarkeit in Zukunft erschweren, sollte aber klar sein.

Pattern Lab 2 ist nun deutlich modularer. Die einzelnen Komponenten sind in sogenannte Editions gebündelt. Diese lassen sich nach den eigenen Vorlieben zusammenstellen. Die Node Version verwendet NPM, die PHP Version Composer.
In der Dokumentation heisst es:

The flexibility of the Pattern Lab ecosystem means that teams can develop tools on top of Pattern Lab that meet their needs. Want to standardize and push entire data sets to teams? Want to develop with granular collections of components instead of entire StarterKits? Only want to customize the CSS for the default StyleguideKit and distribute it as part of your projects? All of this and more is possible. We feel we’re just scratching the surface on what it means to develop projects and design systems with a tool like Pattern Lab

Die Hauptbestandteile einer Edition sind:

Patternlab Core

Der Core ist die eigentliche Engine, genauer gesagt, dass was von Pattern Lab 1 übrig geblieben ist. Sie steht für sich und kann auch in Zukunft geupdated werden.

Pattern Lab Engine

Mustache war bisher das Maß der Dinge. Mustache muss man aber nicht mögen, und so einige Male bin ich auch recht schnell an die Grenzen von Mustache gekommen. Jetzt ist es möglich seine Template Engine auszuwählen. Zum Release stehen aktuell Mustache und Twig zur Auswahl, laut Dokumentation befinden sich eine Handlebars und Underscore Implementation in Entwicklung und wenn mit etwas Glück auch bald viel mehr.
Den Vorteil den ich hier sehe: Eine bessere Integration in bestehende Projekte. Zumindest wenn die jeweilige Template Engine durch das Zielsystem unterstützt wird.

Starter & Styleguide Kit

Wenn ihr euch auch in der Position seht, immer wieder dieselben Assets und Starter CSS Dateien zu kopieren und einzubauen, dann kommen euch die Starter Kits zur Hilfe. Starter Kits sind die Elemente die ihr bei jedem Start selbst bestimmen könnt. Wisst ihr z.B. dass ihr ein Projekt mit Foundation oder Bootstrap starten wollt gibt es bereits ein Starterkit. Oder habt ihr Team-Interne Standards, könnt ihr diese jetzt importieren.
Dies ist ein Feature dass sich durchaus spannend anhört, wahrscheinlich sogar eines der ersten Features ist die ich in Zukunft gerne ausprobieren möchte.

Zusätzlich lässt sich jetzt auch das Styleguide Kit definieren. Wer gerne seine Patternlab Installation in seinen Brand Farben aufbauen möchte, kann dieses jetzt zumindest modular machen.

Plugins

Wohl mit die wichtigeste Neuerung ist der Plugin Support. Initial klingen Plugins wie Faker, Data-Inheritance oder KSS bereits sehr interessant für mich. Auch wurden Patternlab Funktionen wie der Browserreload als Plugin ausgelagert.
Dies ist definitiv die Neuerung mit dem meisten Potential. Und dennoch kann ich bislang nur sehr wenig darüberschreiben. Ich hoffe hier dass die Community sich hier stark angesprochen fühlt mitzuwirken.[2. Und damit meine ich auch mich]

Bessere Annotationen

Wer das volle Potential von Pattern Lab ausnutzen möchte, d.h. auch die Nutzung als Living Styleguide als Referenz für zukünftige Erweiterungen, sollte Annotationen nutzen. Das Anzeigen von zusätzlichen Informationen und Links zu jeweiligen Elementen ist hierbei ein hervorragendes Tool. Nun fand ich persönlich das Annotieren in JSON eher sperrig als nützlich. Hier ist zuviel Angriffsfläche für Fehler. Und für Personen wie Projektmanager oder Designer ist JSON nicht sehr einsteigerfreundlich. Und so hat es sich oft ergeben, dass Designanmerkungen oft in undurchsichtigen Confluence Systemen oder diversen Mails versteckt sind. Und somit für zukünftige Projektteilnehmer für immer verloren.

Pattern Lab 2 gibt nun die Möglichkeit Anmerkungen in Markdown zu schreiben. Eine Syntax die vielen bekannt ist und auch leicht zu lernen ist. Ein zukunftssicheres Format was in vielen Tools genutzt wird und selbst in seiner unkompilierten Syntaxform gut lesbar bleibt. Diese Zeilen schreibe ich übrigens auch in Markdown.

Ausserdem wurde die Annotations Ansicht optisch optimiert. So ist jetzt die Code- und die Annotationsansicht in einem Fenster gebündelt.

Andere Verbesserungen

StyleModifier mit mehreren Klassennamen

Es können jetzt mehrere Klassennamen als Stylemodifier übergeben werden. Diese müssen mit einem Pipe Zeichen verbunden werden. Beispiel:

{{> patternType-pattern:styleModifier1|styleModifier2 }}

States als Markdown

Bislang wurden States, d.h. der Indikator in welchem Entwicklungsstand sich ein Element befindet, nur mit Dateinamen Suffixen wie 00-filename@inreview.mustache verwendet. Meiner Meinung nach immer etwas frickelig und war nach meiner Erfahrung schwierig konsequent durchzusetzen.
Zumindest die Nodeversion erlaubt jetzt auch die States in Markdown zu setzen. Vielleicht etwas was auch in der PHP Version übernommen wird. Markdown States, sowie weitere Optionen, werden wohl in allen Varianten kommen.

Eine bessere Pattern Lab Konfiguration

Die PHP Version benutzt jetzt YAML, die Node Variante JSON. Alles in allem ist es jetzt einfacher globale Pattern Lab Einstellungen anzupassen. Wie so etwas aussehen kann, steht hier.

Wie gehts weiter?

Der Schritt zu Version 2.00 ist ziemlich großer gewesen. Was ich mir jetzt persönlich erhoffe ist, dass ab jetzt mit öfter Updates kommen. Und zwar auch kleinere Features: Evolution statt Revolution. Schön wäre es auch wenn die die Node und PHP Version sich noch mehr entgegenkommen und es weniger Unterschiede in der Implementierung gibt.
Plugins hören sich sehr spannend an, brauchen aber noch eine größere Userbase und Vielfalt.

Mein nächster Schritt wäre diese Seite komplett in Pattern Lab 2 zu implementieren um mich mit den neuen Möglichkeiten vertraut zu machen. Und ein selbstgemachter Case kann nie schaden.