Vor kurzem haben wir unser neues Produkt Bit Social auf den Markt gebracht, ein Plugin, mit dem Sie Ihre WordPress-Inhalte in den sozialen Medien teilen können. Während viele Plugins ähnliche Funktionen bieten, wollten wir etwas schaffen, das sich durch sein benutzerfreundliches Design und robuste Funktionen auszeichnet. Bit Social wird ständig weiterentwickelt, und es werden regelmäßig neue Funktionen hinzugefügt, die auf dem überwältigend positiven Feedback der Community basieren. Bit Social und unsere anderen beliebten Produkte wie Bit-Form und Bit-Integrationenhaben sich aufgrund ihrer Geschwindigkeit und ihrer intuitiven Benutzeroberflächen ebenfalls durchgesetzt. Vor diesem Hintergrund wollten wir den technischen Stack hinter unseren Produkten und die Gründe für die Wahl dieser Technologien mit Ihnen teilen.
In diesem Artikel werden wir die Technologien erörtern, die wir zur Erstellung von Bit Social verwendet haben, und warum wir sie ausgewählt haben. Außerdem geben wir einen Einblick in die Art und Weise, wie wir diese Technologien einsetzen, um ein nahtloses Benutzererlebnis zu schaffen.
In WordPress gibt es kein spezifisches Framework oder einen De-facto-Standard für die Plugin-Struktur. Während diese Flexibilität eine der Stärken von WordPress ist, kann sie für Entwickler, die neu in der Erstellung von Plugins sind, auch entmutigend sein. Trotz des Fehlens einer festen Architektur gibt es grundlegende Prinzipien, Best Practices und wesentliche Sicherheitsmaßnahmen, die Entwickler befolgen sollten.
Aus unserer Erfahrung mit Bit Form wissen wir, wie wichtig es ist, eine wiederverwendbare und wartbare Codebasis zu haben. Um die zukünftige Entwicklung zu rationalisieren, haben wir beschlossen, eine Boilerplate/ein Framework zu erstellen, das wiederverwendbare Komponenten enthält und Best Practices befolgt, um Konsistenz und Effizienz in unseren zukünftigen Produkten zu gewährleisten.
Das Hauptziel einer Boilerplate oder eines Frameworks ist es, eine solide Grundlage für die Entwicklung von WordPress-Plugins zu bieten. Es beschleunigt die Entwicklung, verbessert die Codestruktur und vereinfacht die langfristige Wartung und Prüfung. Außerdem gewährleistet die Verwendung eines Frameworks die Konsistenz zwischen verschiedenen Plugins, was einen erheblichen Vorteil darstellt.
Unsere Frontend-Architektur besteht aus Reagieren Sieeine weit verbreitete JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen. Die Geschwindigkeit, Einfachheit und Flexibilität von React machen es ideal für die Entwicklung dynamischer, interaktiver Webanwendungen. Mit TypScript in unsere React-Codebasis integriert ist, profitieren wir von einer robusten Typprüfung, die dazu beiträgt, potenzielle Fehler während der Entwicklung zu erkennen und einen saubereren, besser wartbaren Code vor der Bereitstellung zu gewährleisten.
Für unser Entwurfssystem nutzen wir Ameisen-Designeine beliebte React UI-Bibliothek, die ein umfassendes Set an vorgefertigten Komponenten und Stilen bietet. In Kombination mit unseren benutzerdefinierten Designrichtlinien hilft uns Ant Design dabei, eine konsistente, visuell ansprechende Benutzeroberfläche zu liefern, die ein nahtloses Erlebnis für alle unsere Produkte gewährleistet.
Die Zustandsverwaltung spielt in der modernen Frontend-Entwicklung eine entscheidende Rolle. Während Redux für viele seit langem eine gute Wahl ist, haben wir uns für Recoil.js und Jotai für die Verwaltung des Anwendungsstatus. Diese Bibliotheken führen das Konzept der atomaren Speicher ein und machen die Zustandsverwaltung modularer und intuitiver. Ihre leichtgewichtige Natur und die React-ähnliche Syntax bieten im Vergleich zu Redux eine lesbarere, flexiblere und effizientere Lösung, was sie zu einer idealen Lösung für unsere Anwendungsarchitektur macht.
Um ein nahtloses Benutzererlebnis zu bieten, konzentrieren wir uns stark auf das Abrufen und Zwischenspeichern von Daten. Im Gegensatz zu herkömmlichen WordPress-Plugins, die bei jeder Navigation ganze Seiten neu laden und Daten neu abrufen, verbessert unser Single-Page-Application (SPA)-Design das Benutzererlebnis, indem es das Neuladen ganzer Seiten vermeidet. Wir nutzen React-Query (von Tanstack), ein leistungsfähiges Tool für die Verwaltung von Datenabruf und Zwischenspeicherung, mit dem wir die Leistung optimieren können, indem wir nur die erforderlichen Daten abrufen, sie für die künftige Verwendung zwischenspeichern und Paginierung und Fehlerzustände effizient behandeln. Dadurch wird sichergestellt, dass die Benutzer beim Navigieren durch unsere Produkte keine unnötigen Verzögerungen erfahren.
Um eine hohe Codequalität aufrechtzuerhalten und bewährte Verfahren durchzusetzen, integrieren wir ESLint und Hübscher in unseren Arbeitsablauf integriert. ESLint" hilft dabei, potenzielle Probleme zu erkennen und Codierungsstandards durchzusetzen, während Prettier für eine konsistente Codeformatierung in der gesamten Codebasis sorgt. Darüber hinaus setzen wir Git-Hooks wie Lefthook und Commitlint ein, um vor jeder Übergabe Qualitätsprüfungen durchzuführen und sicherzustellen, dass sauberer, zuverlässiger Code in die Produktion gelangt.
Für die Bündelung und die Optimierung des Builds setzen wir auf ViteVite ist ein Front-End-Tool der nächsten Generation, das schnelle Builds, einen schnellen Austausch von Modulen und optimierte Produktionspakete bietet. Der moderne Ansatz von Vite beschleunigt die Entwicklung erheblich und rationalisiert unseren Build-Prozess, was die effiziente Bereitstellung und Wartung unserer Produkte erleichtert.
Diese Architektur sorgt nicht nur für eine reibungslose Entwicklung, sondern ermöglicht es uns auch, unseren Nutzern qualitativ hochwertige, leistungsstarke und wartbare Produkte zu liefern.
Bei der Entwicklung unseres WordPress-Backends halten wir uns an die WordPress Plugin Guidelines und folgen den Best Practices der Branche, um erstklassige Kompatibilität, Sicherheit und Leistung zu gewährleisten. Um die Lesbarkeit und die Qualität des Codes zu verbessern, haben wir eine modulare Architektur gewählt, die von dem beliebten PHP-Framework Laravel. Dieser Ansatz ermöglicht es uns, Schlüsselkomponenten in wiederverwendbaren Paketen zu isolieren, um die Konsistenz zu wahren, Doppelarbeit zu reduzieren und die Entwicklung von Plugins zu rationalisieren. Einige dieser Pakete sind Open-Source und in unserem GitHub-Repository verfügbar.
Einige Komponenten unserer Architektur:
Wir haben eine Reihe von Kernkomponenten entwickelt, die wichtige Aufgaben wie Datenabruf, Caching und API-Anfragen erledigen. Im Mittelpunkt steht dabei unser wp-kit Paket, eine Sammlung wiederverwendbarer, flexibler Komponenten, die die Plugin-Entwicklung vereinfachen. Durch die Verwendung von wp-kit gewährleisten wir konsistenten, qualitativ hochwertigen Code für verschiedene Plugins, beschleunigen die Entwicklung und ermöglichen die Erstellung robuster, funktionsreicher Lösungen.
Datenintegrität und Sicherheit sind bei der Entwicklung von Plugins von entscheidender Bedeutung. Für die Bearbeitung von Anfragen nutzen wir die WordPress REST API und wp_ajax. Um die Datensicherheit weiter zu erhöhen, verwenden wir wp-validatorwp-validator ist ein Open-Source-Validierungspaket, das von dem eleganten Validierungssystem von Laravel inspiriert ist. Mit einer sauberen und ausdrucksstarken Syntax ermöglicht der wp-validator Entwicklern, wiederverwendbare Validierungsregeln und -nachrichten zu definieren und so den Prozess der Datenvalidierung über verschiedene Endpunkte hinweg zu vereinfachen.
Für Datenbankinteraktionen haben wir die wp-database Paket, das die CRUD-Operationen vereinfacht und die Datenbankverwaltung rationalisiert. Es abstrahiert gängige Datenbankaufgaben wie Abfragen, Einfügen, Aktualisieren und Löschen von Datensätzen und erleichtert so die Arbeit mit WordPress-Tabellen und benutzerdefinierten Post-Typen. Darüber hinaus bietet es CLI-Befehle für die Datenbankmigration und das Seeding und damit einen modernen Ansatz für die Verwaltung von WordPress-Datenbanken.
Um sicherzustellen, dass wir eine saubere, wartbare Codebasis haben, integrieren wir Tools wie PHP-CS-Fixer und PHPStan. Diese Tools setzen Codierungsstandards durch und führen statische Analysen durch, um potenzielle Probleme frühzeitig zu erkennen. Durch die Automatisierung dieser Prozesse stellen wir sicher, dass jedes von uns gelieferte Plugin zuverlässig und sicher ist und den modernen Entwicklungsstandards entspricht.
Unser modularer Backend-Ansatz ermöglicht es uns, schnell skalierbare, sichere und hochwertige Plugins zu entwickeln. Wir sind bestrebt, mehr von unserer Open-Source-Arbeit zu teilen und der Community Tools zur Verfügung zu stellen, die die Entwicklung von WordPress-Plugins vereinfachen.
Das Testen spielt in unserem Entwicklungsprozess eine wichtige Rolle, um die höchsten Qualitäts- und Zuverlässigkeitsstandards für unsere Produkte zu gewährleisten. Im Backend verwenden wir PHPUnit für Unit-Tests, sind aber gerade dabei, auf Schädlinge, ein moderneres und entwicklerfreundlicheres Framework, das sowohl die Effizienz als auch die Erfahrung der Entwickler verbessert.
Für das Frontend, Vitest ist unser bevorzugtes Tool für Unit- und Integrationstests, mit dem wir sicherstellen, dass jede React-Komponente gründlich geprüft und frei von Fehlern ist. Diese strengen Tests helfen uns, Probleme frühzeitig zu erkennen und tragen so zur allgemeinen Stabilität unserer Anwendungen bei.
Zusätzlich zu den Unit- und Integrationstests setzen wir auf Zypresse für End-to-End-Tests. Mit Cypress sind wir in der Lage, echte Benutzerinteraktionen zu simulieren und unsere Anwendungen über eine Vielzahl von Browsern und Geräten zu testen, was uns die Gewissheit gibt, dass das Benutzererlebnis unter verschiedenen Bedingungen konsistent und zuverlässig bleibt.
Zur Ergänzung unseres Testansatzes verwenden wir auch Märchenbuch für Komponententests und visuelle Regression. Storybook ermöglicht es uns, einzelne UI-Komponenten zu isolieren und zu testen, wodurch es einfacher wird, Design-Ungereimtheiten und potenzielle Probleme zu erkennen, bevor sie sich auf die gesamte Benutzeroberfläche auswirken.
Durch die Kombination dieser leistungsstarken Tools legen wir großen Wert auf die Qualität des Codes und die Robustheit des Produkts und stellen sicher, dass unsere Anwendungen gut getestet, visuell konsistent und für unsere Benutzer zuverlässig sind.
Bei der Bereitstellung von Plugins verwenden wir das Plugin-Repository von WordPress.org als primäre Plattform, um eine breite Zugänglichkeit für WordPress-Nutzer weltweit zu gewährleisten. Dieses Repository ist der zentrale Knotenpunkt für die Verteilung von WordPress-Plugins. Es ermöglicht Millionen von Nutzern, Plugins zu entdecken, herunterzuladen und direkt in ihren WordPress-Installationen zu installieren.
Um hohe Qualitätsstandards aufrechtzuerhalten, halten wir uns streng an die WordPress Plugin Guidelines. Diese Richtlinien decken alles ab, von der Code-Qualität über die Sicherheit bis hin zur korrekten Plugin-Dokumentation, und stellen sicher, dass unsere Produkte die höchsten Standards für Kompatibilität, Leistung und Sicherheit erfüllen. Die Einhaltung dieser Richtlinien hilft uns, potenzielle Probleme wie Konflikte mit anderen Plugins oder Updates für den WordPress-Kern zu vermeiden.
Zur Verwaltung des Entwicklungs- und Bereitstellungsprozesses verwenden wir GitHub-Aktionen zur Automatisierung der kontinuierlichen Integration und der kontinuierlichen Bereitstellung (CI/CD). Dieser Ansatz ermöglicht es uns, den Plugin-Release-Zyklus zu rationalisieren. Mit CI/CD wird jede Änderung in unserer Codebasis automatisch getestet, erstellt und für die Veröffentlichung vorbereitet. Diese Automatisierung minimiert menschliche Fehler und garantiert, dass unsere Plugins stets auf dem neuesten Stand sind und für die Benutzer zuverlässig funktionieren.
Dieser nahtlose Arbeitsablauf bedeutet, dass die Benutzer immer Zugang zu den neuesten Funktionen, Leistungsverbesserungen und Sicherheits-Patches haben, und zwar ohne Verzögerung. Durch die Nutzung dieser Systeme und Best Practices stellen wir sicher, dass unsere Plugins ein hervorragendes Nutzererlebnis bieten und gleichzeitig sicher, kompatibel und gut gewartet sind.
Unser Engagement für die Bereitstellung hochwertiger, benutzerfreundlicher Produkte spiegelt sich in den von uns verwendeten Technologien und den von uns angewandten Entwicklungsverfahren wider. Durch den Einsatz moderner Tools und Frameworks schaffen wir robuste, leistungsfähige und wartbare Lösungen, die den sich wandelnden Anforderungen unserer Nutzer gerecht werden. Bit Social ist das erste Produkt, das wir unter Verwendung unserer Boilerplate entwickelt haben, und wir freuen uns darauf, unsere Produkte weiter zu verfeinern und zu erweitern, um unseren Benutzern einen noch größeren Nutzen zu bieten.
DE 
EN 
ES 
FR 
PT 
IT 
NL