Workflow Dance

Wie wir unseren Workflow für CMS-basierte Projekte optimierten und alle vor Glück tanzten.

04. Mai 20186 Minuten

Brunch.io - Das Frontend Build Tool

Egal welches CMS — ob Wordpress, Joomla, Contao oder ProcessWire— bisher realisierten wir unsere CMS-basierten Webprojekte indem wir das Theme direkt im System entwickelten.

Konzept > Wireframe > Layout > CMS/Theme

Im Grunde eine gängige Herangehensweise, jedoch für uns nicht die Beste, wie die Nachteile zeigen.

Nachteile
  • Arbeit mit mehreren Entwicklern (Frontend, Backend) schwierig.

  • Stagnierende Geschwindigkeit im Laufe des Projekts.

  • Eine Weiterentwicklung des Themes kaum realisierbar.

  • Schlechte Qualität des Codes.

Problematik

Die Problematik war, dass es keine klare Trennung der einzelnen Kompetenzen gab. Das eigentliche "Theme" das angewendet werden sollte, könnte man eigentlich komplett als statisches HTML-Gerüst aufbauen, ohne sich mit CMS-spezifischen Dingen beschäftigen zu müssen. Genauso gut sollten auch CMS-spezifische Probleme unabhängig vom eigentlich "Theming" entwickelt werden können.

Lösungsansatz

VOLL Blog Post Image

Es musste also möglich sein mit dem Theming zu beginnen, ohne sich Gedanken über die Hürden und Hindernisse des CMS zu machen und umgekehrt.

Der Weg zum Glück

Wir probierten rum und tüftelten lange an dem richtigen Setup für zukünftige Projekte. Wir probierten einiges aus, unter anderem Webpack, Grunt & Gulp. An sich gute Tools, aber für unseren Use-Case des rein statischen HTMLs mit Skripten und Styles viel zu überladen. Eines der Probleme war immer die Erstkonfiguration und das "schnelle" Starten des Themes.

VOLL Blog Post Image

Plötzlich stieß einer von uns auf Brunch — und wir alle so YEEEEEAAAHHHHHHH!

Was kann dieses Brunch?

In erster Linie bietet Brunch eine vielfach kleinere Konfigurationsdatei als alle anderen.

Des Weiteren bietet Brunch sogenannte Skeletons. In einem Skeleton kann man sich seine eigene Konfiguration zusammenstellen, NPM-Komponenten implementieren und in einer eigenen Repo bei GitHub ablegen.

Dieses Skeleton kann man dann, sobald man ein neues Projekt startet, direkt verwenden und das alles mit nur wenigen Befehlen in der Kommandozeile zum Laufen bringen.

Also bauten wir uns ein solches Skeleton und nutzen dieses für nahezu alle unsere neuen Projekte.

Was beinhaltet unser Skeleton?

Styles - PostCSS inklusive Autoprefixer, cssnext und weiteren Plugins wie custom-media, postcss-extend und postcss-import.

Skripte - Alle Skripte werden von Babel transformiert und werden somit schon mit den neuesten Features aus der ECMAScript Spezifikation enwickelt.

Templates - Unsere Templates basieren auf pug (früher Jade), welches auch für rein statisches HTML viele Goodies mitbringt und ein schnelleres Arbeiten ermöglicht.

Kleines Beispiel gefällig?

Wir starten ein neues Projekt. Dazu einfach folgende Schritte befolgen.

Schritt 1

Neues Projekt initialisieren.

$ brunch new -s https://github.com/volldigital/voll-brunch [projectname]

$ cd [projectname]
Schritt 2

Wir haben nun unser neues Projekt initialisiert. Mit dem nächsten Befehl werden die node_modules installiert und der mitgelieferte Webview inkl. Autoreload unter localhost:3333 für gestartet. In diesem Schritt geschieht die eigentliche Arbeit. Das ist sozusagen der Dev-Mode.

$ npm start
Schritt 3

Alle Dateien werden in das /web Verzeichnis gerendert. Um nun den Code dann für die Weiterentwicklung im System verwendbar zu machen, buildet man ganz einfach das ganze und bekommt somit alles beautified gerendert.

$ npm run build
Vorteile & Fazit

Wir würden nicht sagen, dass dies der Beste Weg für jeden WebDev oder jedes WebDev-Team ist, aber unserer ist es auf jeden Fall.

Kleine Änderungen sind schnell und sicher gemacht, wir sind schneller, effizienter, können einen sehr hohen Qualitätsstandard halten, können immer wieder ohne Bauchschmerzen weiterentwickeln und testen und müssen uns keine Gedanken darüber machen Live-Systeme zu zerstören.

Nützliche Links