04.09.2019

Sahin Ucar

Boilerplates – die Schweizer-Messer, um mit Frameworks durchzustarten. Sie haben ihre Existenzgründe, auch bei TOWA.

In einer Serie von Blogbeiträgen und Cases geben wir tiefere Insights, wie wir mit unserem WordPress CMS Setup arbeiten. Im Verlauf dieser Blogbeiträge möchten wir auch unseren Boilerplate als ein Open-Source-Package veröffentlichen, worauf wir uns sehr freuen. 😍 Als Start dieser Serie gehen wir in diesem Beitrag auf die Grundstruktur und gewisse Aspekte unseres Boilerplates ein.

 

Vom Bedürfnis zum Boilerplate

Über die Jahre haben wir an verschiedenen Projekten gearbeitet – von kleinen bis großen, von One-Pagern über Plattformen, von Visitenkarten-Webseiten zu Serviceportalen mit Integration von Drittanbieter-Services. Während der Arbeit an diesen Projekten, kam die Einsicht und das Bedürfnis, Zeit und Kosten zu sparen und somit an Effizienz zu gewinnen. Damit nicht jede Code-Zeile und jeder Arbeitsschritt jedes Mal aufs Neue wiederholt werden muss, hat unser Team einen Common-Ground entwickelt. Dieser, da waren wir uns alle einig, bringt einen echten Mehrwehrt, nicht nur für den Arbeitsvorgang, sondern auch für die Kundenprojekte.

Somit stand fest, dass ein Grundbaustein gelegt werden soll – ein standardisiertes Fundament in unserer Arbeitsweise musste her – doch wie? Dies war der Startschuss für die erste Version von unserem TOWA Boilerplate. Die erste Version war recht einfach gehalten, hatte jedoch bereits einige sehr nützliche Features. Wir führten gulp als task runner ein und machten dieses zur Basis unseres Entwicklungs-Workflows. Zudem führten wir Technologien wie beispielsweise scss & browsersync ein und hatten unterschiedliche Build-Prozesse basierend auf der Ziel-Umgebung (Lokal, Produktiv).

Damit wir rasch zur Vorstellung unseres heutigen Boilerplates kommen können, machen wir in der Entwicklung nun einen großen Schritt nach Vorne und kommen zum heutigen Stand. Am Ende dieses Beitrags folgt noch ein Einblick, was sich gerade in der Weiterentwicklung unseres Boilerplates tut und was für Themen anstehen.

TOWA Boilerplate 2019

Nun zum wichtigen Teil dieses Beitrags. 😬

Lasst uns einfach mal alle Technologien & Tools zusammenführen, welche wir in unserem Boilerplate in Verwendung haben:

  • unsere Grundstruktur basiert auf bedrock (https://roots.io/bedrock)
  • unser benutzerdefiniertes WordPress-Theme ist von VueJS & Laravel inspiriert
  • unser Build-Prozess basiert auf laravel-mix
  • Technologien, Frameworks, Werkzeuge und andere Themen, die wir integriert haben:
    • composer, webpack, yarn, scss, es6, twig
    • prettier, stylelint, eslint, markdownlint, php-cs-fixer
    • buddy (ci/cd), documentation-guidelines, commit-hooks

Unser TOWA Boilerplate

The good parts

In der obigen Grafik sieht man, dass wir einige bekannte Werkzeuge und Frameworks benutzen. Das reibungslose Zusammenspiel dieser war ein Stückchen Arbeit, jedoch haben wir am Ende unser Ziel erreicht und diese in unserem Boilerplate zusammengeführt. Jedes dieser unterschiedlichen Bausteine hat seine ganz eigenen Vorzüge und über einige dieser sprechen wir im nächsten Abschnitt. 💬

Die Struktur

Unsere Boilerplate Struktur basiert auf bedrock und hat einige sehr nennenswerte Features inkludiert. Eines davon ist composer als dependency-manager, welches auch WordPress selbst inkludiert hat – was für eine Erleichterung aus Entwicklersicht. 🙌

Eine weitere wichtige Eigenschaft ist die Trennung von Konfigurations- und Applikationsordner, die uns zusätzliche Sicherheit im Hosting der Projekte gibt. Einfach erklärt: WordPress ist in einem Unterordner installiert und alle Konfigurations-Ordner (Zugansdaten, App-Einstellungen, etc.) sind eine Stufe höher abgelegt. Das Zugrifflevel für den Webserver wird dabei in den Unterordner eingestellt, was bedeutet, dass der Konfigurationsteil Teil von der Öffentlichkeit isoliert ist.

 

Unser Custom-Theme

Das Goldstück unseres Boilerplate. Unser Theme-Setup hat viel durchgemacht. Über die letzten zwei Jahre wurde es stabiler und wir haben es Stück für Stück weiterentwickelt. Weitere Ideen und Verbesserungen für die Zukunft stehen schon an und sind teilweise bereits in Entwicklung.

Eines der interessantesten Themen in unserem Boilerplate ist wahrscheinlich unsere Kombination aus webpack + vuejs + twig. Darüber hinaus folgen wir den WordPress Guidelines und nutzen dafür den OOP Ansatz.

 

OOP Ansatz

Kurzgesagt: Um ein besseres Level an wartbaren und nachhaltigen Code zu gewährleisten, folgen wir dem OOP Ansatz. Dieser hilft uns, unseren Code sauber zu halten und best-practices zu folgen. Um ein einfaches aber elegantes Beispiel zu nennen, ist in der nachfolgenden Grafik ein fluent-interface-design-pattern dargestellt, welches wir für unser Theme-Setup verwenden.

OOP WordPress Theme Setup

Wir haben einige Ideen, wie wir unseren Code weiterentwickeln und zusätzliche nützliche Features einbauen können. Dabei lassen wir uns gerne von der Community inspirieren und schauen auch in bekannte Frameworks, wie zB Laravel, rein.

Btw, wir verwenden auch Namespaces 😎

Vuejs, Twig & Rest-API

In unserem WordPress-Theme haben wir VueJS integriert. Dabei haben wir zwei Wege, wie wir die Daten an das Framework zur Verfügung stellen können. Eine davon ist die Server-Seitige Datenübergabe mittels der data-attributes. Diese sieht ungefähr so aus:

Datenübergabe an die Vue-Komponenten via twig

Die twig-engine, agiert als Schnittstelle zwischen dem WordPress-Backend und dem VueJS-Frontend. Als Alternative können wir über die definierten REST-Api Endpunkte Daten zur Verfügung stellen. In der nachfolgenden Grafik sind ein paar Beispiele dargestellt:

Datenübergabe über die REST-Api

Zusammengefasst: wir haben zwei Wege, wie wir Daten für die Vue-Komponenten zur Verfügung stellen. Der Weg über die REST-API ist wohl die bekanntere und flexiblere Methode. Die Kombination aus twig & vue ist eine Server-Seitige Methode, welche seine eigenen Vorteile hat. 🛠

Etwas Glitzer

Um unseren Entwicklungsprozess abzurunden, haben wir einige Praktiken integriert, die uns dabei unterstützen einen gewissen Qualitätsstandard zu erreichen. Diese hat eine Spannbreite von einfachen Code-Style-Regeln bis hin zu automatisierten Verifizierungen wie wir im Code arbeiten und welche Code-Konstrukte wir verwenden. Hier mal eine Liste an Tools die wir aktuell im Einsatz haben:

  • php-cs-fixer, für einen PHP-Coding-Regelstandard
  • wir verwenden linters für unsere Stylesheets
  • wir verwenden linters für unsere JS-Code
  • wir verwenden linters für Vue-Komponenten
  • wir verwenden linters für unsere Markdown-Files
  • wir verwenden prettier für die allgemeine Formatierung unseres Codes
  • wir verwenden pre-commit hooks zur Automatisierung

 

Unser Ziel mit diesen Tools ist es, unnötige Arbeit zu vermeiden, welche automatisiert durchgeführt werden kann. Das sind vor allem Bereiche, bei denen wir als Entwickler keinen Mehrwert fürs Projekt schaffen können. Zudem hilft das Tooling unsere Entwicklungs-Standards zu halten und stetig anzuheben. 👩‍💻👨‍💻

Was steht an?

Es passiert viel in der Webentwicklungswelt. Einiges davon betrifft uns direkt und beeinflusst somit unsere Arbeit & unsere Technologie-Standards. Anbei sind Themen aufgelistet, an denen wir bereits arbeiten oder für die nächste Phase eingeplant sind:

  • Headless CMS Setup mit WordPress & VueJS – WP
  • Erweiterung der Dokumentation-Standards – WIP
  • Gutenberg Integration in unsere Codebase
  • Docker-Integration in unser Boilerplate
  • Integration von GraphQL zu unserem Setup
  • Integration von PHP Tests
  • Integration von Frontend Tests

 

Es ist aufregend und essentiell zugleich, dass wir diese Themen weiterverfolgen. Wir sind allerdings auch sehr froh, dass wir in einem Umfeld arbeiten, welches uns dies ermöglicht. Über unsere Arbeit in den erwähnten Themengebieten sowie weitere Details über unser Boilerplate werden wir in Zukunft weiter berichten.

 

Bis Bald!

Your turn.

Sahin Ucar

Director Development

Senden Sie mir eine E-Mail und ich melde mich bei Ihnen!

Verkaufen Sie auf Amazon

Die Amazon Unit von TOWA verrät, warum sich das Verkaufen auf Amazon mehrfach bezahlt macht

Being a Remote Worker

Digitalagentur Vorarlberg Digitalagentur Wien Digitalagentur St. Gallen TOWA//creative TOWA//beta TOWA//crm TOWA//data

Cookie Einstellungen

Hier sind alle Cookies aufgeführt, die für unsere Marketingzwecke verwendet werden.

LinkedIn (cn_LinkedINActive)

LinkedIn uses cookies to recognize you, remember your preferences, personalize your experience, and to target advertisements, amongst other things.

Google Analytics (cn_AnalyticsActive)

Wird verwendet, um Daten über das Gerät und das Verhalten des Besuchers an Google Analytics zu senden. Verfolgt den Besucher über Geräte und Marketingkanäle.

Facebook (cn_FacebookActive)

Wird von Facebook genutzt, um eine Reihe von Werbeprodukten anzuzeigen, zum Beispiel Echtzeitgebote dritter Werbetreibender.

Pardot (Salesforce) (cn_PardotActive)

Pardot verwendet Cookies, um Ihre Interaktion mit unserer Website sinnvoller zu gestalten. Sie helfen uns, die Nutzung unserer Website besser zu verstehen, damit wir die Inhalte für Sie maßschneidern können.

DoubleClick (Google) (cn_DoubleClickActive)