Onlangs lanceerden we ons nieuwe product Bit Social, een plugin die wordt gebruikt voor het delen van je WordPress content op sociale media. Hoewel veel plugins vergelijkbare functionaliteit bieden, wilden we iets maken dat zich onderscheidt door zijn gebruiksvriendelijke ontwerp en robuuste functieset. Bit Sociaal is voortdurend in ontwikkeling, met nieuwe functies die regelmatig worden toegevoegd op basis van feedback uit de gemeenschap, die overweldigend positief is. Bit Social en onze andere populaire producten zoals Bit Vorm en Bit-integratieshebben ook veel aandacht gekregen vanwege hun snelheid en intuïtieve interfaces. Met dit in gedachten wilden we graag de technische stack achter onze producten delen en de redenen waarom we voor deze technologieën hebben gekozen.
In dit artikel bespreken we de technologieën die we hebben gebruikt om Bit Social te maken en waarom we deze hebben gekozen. We zullen ook wat inzicht geven in hoe we deze technologieën gebruiken om een naadloze gebruikerservaring te creëren.
In WordPress is er geen specifiek framework of de facto standaard voor de structuur van plugins. Hoewel deze flexibiliteit een van de sterke punten van WordPress is, kan het ook ontmoedigend zijn voor ontwikkelaars die nieuw zijn met het bouwen van plugins. Ondanks het ontbreken van een vaste architectuur, zijn er fundamentele principes, best practices en essentiële veiligheidsmaatregelen die ontwikkelaars zouden moeten volgen.
Vanuit onze ervaring met Bit Form, geloven we dat het belangrijk is om een herbruikbare en onderhoudbare codebase te onderhouden. Om toekomstige ontwikkeling te stroomlijnen, hebben we besloten om een boilerplate/framework te maken dat herbruikbare componenten bevat en best practices volgt, om consistentie en efficiëntie in onze toekomstige producten te garanderen.
Het primaire doel van een boilerplate of framework is om een sterke basis te bieden voor het ontwikkelen van WordPress plugins. Het versnelt de ontwikkeling, verbetert de codestructuur en vereenvoudigt het onderhoud en testen op lange termijn. Het gebruik van een framework zorgt ook voor consistentie tussen verschillende plugins, wat een belangrijk voordeel is.
Onze frontend architectuur is gebouwd met Reageer opis een veelgebruikte JavaScript-bibliotheek voor het ontwikkelen van gebruikersinterfaces. De snelheid, eenvoud en flexibiliteit van React maken het ideaal voor het bouwen van dynamische, interactieve webapplicaties. Met TypeScript geïntegreerd in onze React-codebase, profiteren we van robuuste typecontrole, die helpt bij het opsporen van mogelijke fouten tijdens de ontwikkeling en zorgt voor schonere, beter onderhoudbare code voordat deze wordt geïmplementeerd.
Voor ons ontwerpsysteem maken we gebruik van Mier ontwerp, een populaire React UI-bibliotheek die een uitgebreide set kant-en-klare componenten en stijlen biedt. In combinatie met onze eigen ontwerprichtlijnen helpt Ant Design ons bij het leveren van een consistente, visueel aantrekkelijke gebruikersinterface, zodat al onze producten een naadloze ervaring bieden.
State management speelt een cruciale rol in moderne front-end ontwikkeling. Hoewel Redux al lang een keuze is voor velen, hebben wij gekozen voor Terugspoelen.js en Jotai voor het beheren van de toestand van de applicatie. Deze bibliotheken introduceren het concept van atomic stores, waardoor het beheer van de toestand modulairder en intuïtiever wordt. Hun lichtgewicht aard en React-achtige syntax bieden een beter leesbare, flexibelere en efficiëntere oplossing in vergelijking met Redux, waardoor ze ideaal passen bij onze applicatiearchitectuur.
Om een naadloze gebruikerservaring te bieden, besteden we veel aandacht aan het ophalen van gegevens en caching. In tegenstelling tot traditionele WordPress plugins, die hele pagina's herladen en gegevens opnieuw ophalen bij elke navigatie, verbetert ons ontwerp voor een enkele pagina toepassing (SPA) de gebruikerservaring door het herladen van volledige pagina's te vermijden. We maken gebruik van React-Query (van Tanstack), een krachtig hulpmiddel voor het beheren van het ophalen en cachen van gegevens, waarmee we de prestaties kunnen optimaliseren door alleen de benodigde gegevens op te halen, deze te cachen voor toekomstig gebruik en efficiënt om te gaan met paginering en foutstatussen. Dit zorgt ervoor dat gebruikers geen onnodige vertragingen ondervinden bij het navigeren door onze producten.
Om de kwaliteit van de code hoog te houden en best practices af te dwingen, integreren we ESLint en Mooier in onze workflow. ESLint helpt bij het opsporen van potentiële problemen en het afdwingen van coderingsstandaarden, terwijl Prettier zorgt voor een consistente opmaak van de code in de hele codebase. Daarnaast gebruiken we Git hooks zoals Lefthook en Commitlint om kwaliteitscontroles af te dwingen voor elke commit, zodat schone, betrouwbare code naar productie wordt gepushed.
Voor bundeling en bouwoptimalisatie vertrouwen we op Viteeen front-end tool van de volgende generatie die snelle builds, snelle vervanging van modules en geoptimaliseerde productiebundels biedt. De moderne benadering van Vite versnelt de ontwikkeling aanzienlijk en stroomlijnt ons bouwproces, waardoor het eenvoudiger wordt om onze producten efficiënt in te zetten en te onderhouden.
Deze architectuur zorgt niet alleen voor een soepele ontwikkelervaring, maar stelt ons ook in staat om hoogwaardige, performante en onderhoudbare producten te leveren aan onze gebruikers.
De kern van onze WordPress backend ontwikkeling wordt gevormd door de WordPress Plugin Richtlijnen en de best practices uit de industrie die zorgen voor uitstekende compatibiliteit, beveiliging en prestaties. Om de leesbaarheid en kwaliteit van de code te verbeteren, hebben we een modulaire architectuur gebruikt die is geïnspireerd op het populaire PHP-framework Laravel. Deze aanpak stelt ons in staat om belangrijke componenten te isoleren in herbruikbare pakketten, waardoor we consistentie kunnen behouden, duplicatie kunnen verminderen en de ontwikkeling van plugins kunnen stroomlijnen. Sommige van deze pakketten zijn open-sourced en beschikbaar op onze GitHub repository.
Enkele onderdelen van onze architectuur:
We hebben een set kerncomponenten ontwikkeld om essentiële taken af te handelen, zoals het ophalen van gegevens, caching en API-verzoeken. Centraal hierin staat onze wp-kit pakket, een verzameling herbruikbare, flexibele componenten die de ontwikkeling van plugins vereenvoudigen. Door wp-kit te gebruiken, zorgen we voor consistente code van hoge kwaliteit voor verschillende plugins, waardoor de ontwikkeling wordt versneld en er robuuste oplossingen met veel functies kunnen worden gemaakt.
Gegevensintegriteit en beveiliging zijn van cruciaal belang bij de ontwikkeling van plugins. Voor het afhandelen van verzoeken maken we gebruik van de WordPress REST API en wp_ajax. Om de gegevensbeveiliging verder te verbeteren, gebruiken we wp-validatorwp-validator is een open-source validatiepakket dat is geïnspireerd op het elegante validatiesysteem van Laravel. Met een schone en expressieve syntaxis stelt de wp-validator ontwikkelaars in staat om herbruikbare validatieregels en berichten te definiëren, waardoor het proces van het onderhouden van gegevensvalidatie op verschillende eindpunten wordt vereenvoudigd.
Voor database-interacties hebben we de wp-database pakket, ontworpen om CRUD-bewerkingen te vereenvoudigen en databasebeheer te stroomlijnen. Het abstraheert veelvoorkomende databasetaken zoals het opvragen, invoegen, bijwerken en verwijderen van records, waardoor het eenvoudiger wordt om met WordPress tabellen en aangepaste posttypes te werken. Daarnaast biedt het CLI-commando's voor databasemigratie en seeding, waardoor een moderne benadering van het beheren van WordPress databases ontstaat.
Om ervoor te zorgen dat we een schone, onderhoudbare codebase onderhouden, integreren we tools zoals PHP-CS-Fixer en PHPStan. Deze tools dwingen coderingsstandaarden af en voeren statische analyses uit, waardoor potentiële problemen in een vroeg stadium worden opgemerkt. Door deze processen te automatiseren, zorgen we ervoor dat elke plugin die we leveren betrouwbaar en veilig is en voldoet aan de moderne ontwikkelingsstandaarden.
Onze modulaire backend aanpak stelt ons in staat om snel schaalbare, veilige en hoogwaardige plugins te bouwen. We streven ernaar om meer van ons open-source werk te delen en de gemeenschap te voorzien van tools die de ontwikkeling van WordPress-plugins vereenvoudigen.
Testen speelt een cruciale rol in ons ontwikkelingsproces en zorgt voor de hoogste kwaliteits- en betrouwbaarheidsnormen voor al onze producten. Aan de achterkant gebruiken we PHPUnit voor eenheidstesten, maar we zijn bezig te migreren naar OngedierteEen moderner en ontwikkelvriendelijker framework dat zowel de efficiëntie als de ervaring van ontwikkelaars verbetert.
Voor de front-end, Vitest is onze tool voor unit- en integratietests, die ervoor zorgt dat elk React-onderdeel grondig wordt gecontroleerd en vrij is van bugs. Deze rigoureuze tests helpen ons om problemen in een vroeg stadium op te sporen, wat bijdraagt aan de algehele stabiliteit van onze applicaties.
Naast unit- en integratietests vertrouwen we op Cypres voor end-to-end testen. Met Cypress kunnen we echte gebruikersinteracties simuleren en onze applicaties testen op verschillende browsers en apparaten, waardoor we erop kunnen vertrouwen dat de gebruikerservaring consistent en betrouwbaar blijft onder verschillende omstandigheden.
Als aanvulling op onze testaanpak gebruiken we ook Verhalenboek voor componententests en visuele regressie. Storybook stelt ons in staat om individuele UI-componenten te isoleren en te testen, waardoor het gemakkelijker wordt om inconsistenties in het ontwerp en potentiële problemen op te sporen voordat ze de algehele gebruikersinterface beïnvloeden.
Door deze krachtige tools te combineren, behouden we een sterke focus op de kwaliteit van de code en de robuustheid van het product, zodat onze applicaties goed getest, visueel consistent en betrouwbaar zijn voor onze gebruikers.
Bij het implementeren van plugins gebruiken we de WordPress.org Plugin Repository als ons primaire platform om brede toegankelijkheid voor WordPress gebruikers wereldwijd te garanderen. Deze opslagplaats is de centrale hub voor de distributie van WordPress-plugins, waardoor miljoenen gebruikers plugins kunnen ontdekken, downloaden en rechtstreeks in hun WordPress-installaties kunnen installeren.
Om hoge kwaliteitsnormen te handhaven, volgen we strikt de richtlijnen voor WordPress-plugins. Deze richtlijnen omvatten alles, van codekwaliteit en beveiliging tot de juiste plugin-documentatie, en zorgen ervoor dat onze producten voldoen aan de hoogste normen voor compatibiliteit, prestaties en beveiliging. Door ons aan deze richtlijnen te houden, voorkomen we potentiële problemen zoals conflicten met andere plugins of updates voor de WordPress core.
Om het ontwikkelings- en implementatieproces te beheren, gebruiken we GitHub acties om continue integratie en continue implementatie (CI/CD) te automatiseren. Met deze aanpak kunnen we de releasecyclus van de plugin stroomlijnen. Met CI/CD wordt elke wijziging in onze codebase automatisch getest, gebouwd en klaargemaakt voor release. Deze automatisering minimaliseert menselijke fouten en garandeert dat onze plugins bijgewerkt blijven en betrouwbaar presteren voor gebruikers.
Deze naadloze workflow betekent dat gebruikers altijd zonder vertraging toegang hebben tot de nieuwste functies, prestatieverbeteringen en beveiligingspatches. Door gebruik te maken van deze systemen en best practices zorgen we ervoor dat onze plugins een uitstekende gebruikerservaring bieden en tegelijkertijd veilig, compatibel en goed onderhouden blijven.
Onze toewijding aan het leveren van gebruiksvriendelijke producten van hoge kwaliteit wordt weerspiegeld in de technologieën die we gebruiken en de ontwikkelpraktijken die we volgen. Door gebruik te maken van moderne tools en frameworks, creëren we robuuste, performante en onderhoudbare oplossingen die voldoen aan de veranderende behoeften van onze gebruikers. Bit Social is het eerste product dat we hebben gebouwd met behulp van onze boilerplate en we zijn enthousiast om door te gaan met het verfijnen en uitbreiden van onze producten om nog meer waarde te bieden aan onze gebruikers.
NL 
EN 
ES 
FR 
DE 
PT 
IT