Unsere WordPress Boilerplate – Performance, Qualität und maximale Flexibilität
Benno Purin
Director Clients & Operations, Co-Founder @ Digit-One
Um unseren Kunden maximale Flexibilität, Qualität und Performance zu garantieren, setzen wir bei Digit-One auf unsere eigene WordPress Architektur.
Der Start des Digit-One WordPress Boilerplates
Im Laufe der verschiedensten Projekte – von Landing Pages, Onepagern und Corporate Websites bis hin zu Plattformen und Serviceportalen mit Drittanbieter Integration – haben wir eine standardisierte Basislösung entwickelt, die unsere Effizienz steigert, indem sie Kosten und Zeit einspart bei der Implementierung von Basis Funktionalitäten.
Wir setzten bei unserer sogenannten Boilerplate auf Vue.Js, Tailwind & Browsersync. Unsere Pipelines haben unterschiedliche Build-Prozesse für die entsprechenden Zielumgebungen (Development, Lokal und Produktiv). Unsere Entwicklungsumgebung befindet sich zwischen den Projekten in stetiger Weiterentwicklung. Im folgenden wird näher auf Funktion, Modularität und Zukunftsaussicht eingeangen.
Generelle Architektur unseres Boilerplates
Das Herz unseres Boilerplates besteht aus mehreren Technologien & Tools, um uns das Leben leichter zu machen und unsere WordPress Projekte performanter.
Unser Boilerplate basiert auf:
- Basis: Bedrock (Link zur offiziellen Dokumentation)
- WordPress Theme: VueJS & Laravel
- Build Prozess: laravel-mix
- Frameworks, Technologien und weitere Werkzeuge: Composer, Webpack, Yarn, Tailwind, ES6, Twig, prettier, stylelint, eslint, markdownlint, php-cs-fixes, Bitbucket Pipelines (CI/CD), documentation-guidelines, commit-hooks
Die Vorteile unseres Boilerplates
Flexibilität
Die Komponenten, die wir in unserem Theme verwenden haben die Besonderheit, dass sie vollkommen flexibel eingesetzt werden können. So gewährleisten wir maximale Flexibilität im Einsatz der entwickelten Module.
Performance
Durch Medienaufbereitung in moderne Formate (wie z.B. WebP) und intelligentes Caching, sorgen wir dafür, dass das WordPress Setup hervorragend performt hinsichtlich Page Speed und SEO.
Individualität
Dank intelligent gestalteten UI/UX Komponenten können wir mit höchster Flexibilität deine Brand und dein Unternehmen in Szene setzten. Wir entwickeln nur die Module, die du auch wirklich für deine Website brauchst.
Bedienung & Wartbarkeit
Durch modernste Technologien und regelmäßige Update Intervalle garantieren wir für die optimale Wartung der Website und bestmögliche Bedienbarkeit des Backends auch für ungeschulte Benutzer.
Daten Handling und Qualitätssicherung
Zum einen verwenden wir in der serverseitigen Methode Twig, das als Schnittstelle zwischen WordPress Backend und VueJS Frontend agiert. In komplexeren Headless Setups können wir alle Daten des Backends auch über definierte REST-Api Endpunkte, dh. clientseitig zur Verfügung stellen.
Qualitätssicherung in unserem Setup
Um exzellente Codequalität und Konsistenz zu sichern, haben wir derzeit diverse Linter und Automatisierungstools im Einsatz. Aktuell verwenden wir diverse Linter für:
- unsere Stylesheets
- unseren JS-Code
- unsere Vue-Komponenten
- unsere Markdown-Files
- für die allgemeine Formatierung unseres Codes
Des weiteren verwenden wir pre-commit hooks zur Automatisierung dieser Prozesse. In diesen Bereichen können wir als Entwickler keinen Mehrwert fürs Projekt schaffen. Außerdem hilft uns unser Setup dabei unseren Entwicklungsstandards gerecht zu werden und uns stetig weiterzuentwickeln und zu verbessern.
Unser Technisches Setup
Struktur
Unsere Boilerplate Struktur basiert auf Bedrock. Als Dependency Manager setzen wir auf Composer. Außerdem trennen wir Konfigurations- und Applikationsordner, um für mehr Sicherheit beim Hosting zu sorgen.Theme
In unserem Theme arbeiten wir mit einer Kombination aus Twig, Webpack, Vue.js und Tailwind. Darüber hinaus folgen wir den WordPress Guidlines und nutzen den OOP Ansatz.OOP Ansatz
Wir folgen dem OOP Ansatz um das bestmögliche Level an wartbaren und nachhaltigen Code zu gewährleisten. Damit halten wir den Code so flexibel und einfach wie möglich, was uns Hilt best-practices zu folgen.Tailwind
Im Frontend setzen wir auf Tailwind CSS. Damit können wir auf eine große "best practice" Modulbibliothek zurückgreifen. Außerdem gewährleisten wir so höchste Einheitlichkeit und Flexibilität der verschiedenen Module.
Da wir uns ständig weiterentwickeln und neue Technologien ausprobieren und in unseren Workflow integrieren, ändert sich auch unser Boilerplate in regelmäßigen Abständen.
Anbei sind Themen aufgelistet, an denen wir bereits arbeiten oder die wir für die nächste Phase eingeplant haben:
- Verwendung einer neuen Template Engine als Twig Ersatz
- Maximales, serverseitiges Rendering
- Integration von Docker
- Vite als Webpack Ersatz
- Svelte anstelle von VueJS
- Integration von PHP Tests
- Höhere Testabdeckung
- Komplexere Implementierung von Accessibility Features
Über unsere Arbeit in den erwähnten Themengebieten sowie weitere Details über unser Boilerplate werden wir in Zukunft weiter berichten.