# Unsere WordPress Boilerplate – Performance, Qualität und maximale Flexibilität ## Unsere WordPress Boilerplate – Performance, Qualität und maximale Flexibilität ### Benno Purin ![Porträt von Benno Purin, Director Clients & Operations und Co-Founder bei Digit-One](https://www.digit-one.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fp48sl94f%2Fproduction%2F514c41a28280e2171d543d6a9382763f2f4efdeb-2386x1915.jpg&w=1920&q=75) Director Clients & Operations, Co-Founder @ Digit-One 2022-07-18 Um unseren Kunden maximale Flexibilität, Qualität und Performance zu garantieren, setzen wir bei Digit-One auf unsere eigene WordPress Architektur. ## Unsere **WordPress Boilerplate** – Performance, Qualität und maximale Flexibilität 3 min. ## 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](https://roots.io/bedrock)) - 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 ![Screenshot eines Bitbucket-Repositorys der WordPress-Boilerplate](https://www.digit-one.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fp48sl94f%2Fproduction%2F8415ac12e6fef3c5ace3f82630c450dfa5ddf993-1074x718.jpg&w=1920&q=75) ## 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](https://www.digit-one.com/web/wordpress) 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. ![Symbolbild aus Programmcode als Muster](https://www.digit-one.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fp48sl94f%2Fproduction%2F04fc5aad429371019be4c8b8811c4f71c8d3b4c3-1074x718.jpg&w=1920&q=75) ## 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. [No-Code-Tools im Vergleich](https://www.digit-one.com/insights/elementor-webflow-shopify-co-no-code-tools-im-hands-on-vergleich) Blogbeitrag [Jetzt kontaktieren](mailto:benno.purin@digit-one.com) ### Benno Purin Director Clients & Operations, Co-Founder @ Digit-One “Interesse geweckt? Gerne erzähle ich dir mehr!”