Nous avons récemment lancé notre nouveau produit Bit Social, un plugin utilisé pour partager votre contenu WordPress sur les médias sociaux. Alors que de nombreux plugins offrent des fonctionnalités similaires, nous voulions créer un produit qui se distingue par sa conception conviviale et son ensemble de fonctionnalités robustes. Bit Social est en constante évolution et de nouvelles fonctionnalités sont régulièrement ajoutées en fonction des commentaires de la communauté, qui ont été extrêmement positifs. Bit Social et nos autres produits populaires comme Forme du bit et Intégrations de bitsLes technologies de l'information et de la communication (TIC), par exemple, ont également gagné en popularité grâce à leur rapidité et à leurs interfaces intuitives. C'est dans cette optique que nous avons voulu partager la pile technologique qui sous-tend nos produits et les raisons pour lesquelles nous avons choisi ces technologies.
Dans cet article, nous discuterons des technologies que nous avons utilisées pour créer Bit Social et des raisons pour lesquelles nous les avons choisies. Nous donnerons également un aperçu de la manière dont nous utilisons ces technologies pour créer une expérience utilisateur transparente.
Dans WordPress, il n'y a pas de cadre spécifique ou de norme de facto pour la structure des plugins. Si cette flexibilité est l'un des atouts de WordPress, elle peut aussi être décourageante pour les développeurs qui n'ont pas l'habitude de créer des plugins. Malgré l'absence d'une architecture fixe, il existe des principes fondamentaux, des bonnes pratiques et des mesures de sécurité essentielles que les développeurs doivent respecter.
D'après notre expérience avec Bit Form, nous pensons qu'il est important de maintenir une base de code réutilisable et maintenable. Afin de rationaliser le développement futur, nous avons décidé de créer une base de données/un cadre qui inclut des composants réutilisables et suit les meilleures pratiques, garantissant ainsi la cohérence et l'efficacité de nos produits à venir.
L'objectif principal d'un boilerplate ou d'un framework est d'offrir une base solide pour le développement de plugins WordPress. Il accélère le développement, améliore la structure du code et simplifie la maintenance et les tests à long terme. L'utilisation d'un cadre garantit également la cohérence entre les différents plugins, ce qui constitue un avantage considérable.
Notre architecture frontale est construite à l'aide de RéagirReact est une bibliothèque JavaScript largement utilisée pour le développement d'interfaces utilisateur. La vitesse, la simplicité et la flexibilité de React en font un outil idéal pour créer des applications web dynamiques et interactives. Avec TypeScript intégré à notre base de code React, nous bénéficions d'une vérification de type robuste, qui aide à détecter les erreurs potentielles pendant le développement, garantissant un code plus propre et plus facile à maintenir avant le déploiement.
Pour notre système de conception, nous nous appuyons sur Conception de fourmisAnt Design est une bibliothèque React UI populaire qui offre un ensemble complet de composants et de styles préconstruits. Combiné à nos directives de conception personnalisées, Ant Design nous aide à fournir une interface utilisateur cohérente et visuellement attrayante, garantissant une expérience transparente pour tous nos produits.
La gestion des états joue un rôle essentiel dans le développement moderne d'applications frontales. Alors que Redux est un choix de longue date pour beaucoup, nous avons opté pour Recoil.js et Jotai pour gérer l'état de l'application. Ces bibliothèques introduisent le concept de magasins atomiques, rendant la gestion de l'état plus modulaire et intuitive. Leur légèreté et leur syntaxe proche de celle de React offrent une solution plus lisible, plus flexible et plus efficace que Redux, ce qui en fait une solution idéale pour l'architecture de notre application.
Pour offrir une expérience utilisateur transparente, nous mettons l'accent sur la récupération et la mise en cache des données. Contrairement aux plugins WordPress traditionnels, qui rechargent des pages entières et récupèrent des données à chaque navigation, notre application à page unique (SPA) améliore l'expérience de l'utilisateur en évitant de recharger des pages entières. Nous utilisons React-Query (de Tanstack), un outil puissant de gestion de l'extraction et de la mise en cache des données, qui nous permet d'optimiser les performances en n'extrayant que les données nécessaires, en les mettant en cache pour une utilisation ultérieure et en gérant efficacement la pagination et les états d'erreur. Cela permet de s'assurer que les utilisateurs ne subissent pas de retards inutiles lorsqu'ils naviguent dans nos produits.
Pour maintenir la qualité du code et appliquer les meilleures pratiques, nous intégrons les éléments suivants ESLint et Plus jolie dans notre flux de travail. `ESLint` aide à détecter les problèmes potentiels et à appliquer les normes de codage, tandis que Prettier assure un formatage cohérent du code dans l'ensemble de la base de code. De plus, nous utilisons des hooks Git comme Lefthook et Commitlint pour mettre en place des contrôles de qualité avant chaque validation, garantissant un code propre et fiable pour la production.
Pour le regroupement et l'optimisation de la construction, nous nous appuyons sur ViteVite est un outil frontal de nouvelle génération qui offre des constructions rapides, un remplacement à chaud des modules et des lots de production optimisés. L'approche moderne de Vite accélère considérablement le développement et rationalise notre processus de construction, ce qui facilite le déploiement et la maintenance de nos produits.
Cette architecture ne garantit pas seulement une expérience de développement fluide, mais nous permet également de fournir à nos utilisateurs des produits de haute qualité, performants et faciles à entretenir.
Au cœur du développement de notre backend WordPress, nous adhérons aux WordPress Plugin Guidelines et suivons les meilleures pratiques de l'industrie pour garantir une compatibilité, une sécurité et des performances de premier ordre. Pour améliorer la lisibilité et la qualité du code, nous avons adopté une architecture modulaire inspirée du célèbre framework PHP Laravel. Cette approche nous permet d'isoler les composants clés dans des paquets réutilisables, ce qui nous permet de maintenir la cohérence, de réduire les doublons et de rationaliser le développement des plugins. Certains de ces paquets sont en libre accès et disponibles sur notre dépôt GitHub.
Quelques éléments de notre architecture :
Nous avons développé un ensemble de composants de base pour gérer les tâches essentielles telles que la recherche de données, la mise en cache et les demandes d'API. L'élément central est notre kit wp un ensemble de composants réutilisables et flexibles qui simplifient le développement de plugins. En utilisant wp-kit, nous garantissons un code cohérent et de haute qualité pour les différents plugins, ce qui accélère le développement et permet la création de solutions robustes et riches en fonctionnalités.
L'intégrité et la sécurité des données sont essentielles dans le développement d'un plugin. Pour traiter les demandes, nous nous appuyons sur l'API REST de WordPress et sur wp_ajax. Pour renforcer la sécurité des données, nous utilisons wp-validatorwp-validator est un package de validation open-source inspiré par l'élégant système de validation de Laravel. Avec une syntaxe propre et expressive, wp-validator permet aux développeurs de définir des règles de validation et des messages réutilisables, simplifiant ainsi le processus de maintien de la validation des données à travers différents points de terminaison.
Pour les interactions avec la base de données, nous avons créé la fonction wp-database conçu pour simplifier les opérations CRUD et rationaliser la gestion de la base de données. Il abstrait les tâches courantes de la base de données comme l'interrogation, l'insertion, la mise à jour et la suppression d'enregistrements, ce qui facilite le travail avec les tables WordPress et les types d'articles personnalisés. De plus, il offre des commandes CLI pour la migration de base de données et l'ensemencement, apportant une approche moderne à la gestion des bases de données WordPress.
Pour garantir le maintien d'une base de code propre et facile à entretenir, nous intégrons des outils tels que PHP-CS-Fixer et PHPStan. Ces outils appliquent les normes de codage et effectuent une analyse statique, ce qui permet de détecter rapidement les problèmes potentiels. En automatisant ces processus, nous nous assurons que chaque plugin que nous livrons est fiable, sécurisé et conforme aux normes de développement modernes.
Notre approche modulaire du backend nous permet de construire rapidement des plugins évolutifs, sécurisés et de haute qualité. Nous nous engageons à partager davantage notre travail open-source, en fournissant à la communauté des outils qui simplifient le développement de plugins WordPress.
Les tests jouent un rôle essentiel dans notre processus de développement, garantissant les normes de qualité et de fiabilité les plus élevées pour tous nos produits. Au niveau du backend, nous utilisons PHPUnit pour les tests unitaires, mais nous sommes en train de migrer vers RavageursLa nouvelle version de l'application est un cadre plus moderne et plus convivial pour les développeurs, qui améliore à la fois l'efficacité et l'expérience des développeurs.
Pour le front-end, Vitest est notre outil de prédilection pour les tests unitaires et d'intégration, garantissant que chaque composant React est soigneusement vérifié et exempt de bogues. Ces tests rigoureux nous aident à détecter rapidement les problèmes, ce qui contribue à la stabilité globale de nos applications.
En plus des tests unitaires et d'intégration, nous nous appuyons sur Cyprès pour les tests de bout en bout. Avec Cypress, nous sommes en mesure de simuler les interactions réelles des utilisateurs et de tester nos applications sur une variété de navigateurs et d'appareils, ce qui nous donne l'assurance que l'expérience utilisateur reste cohérente et fiable dans différentes conditions.
Pour compléter notre approche des tests, nous utilisons également Livre d'histoire pour les tests de composants et la régression visuelle. Storybook nous permet d'isoler et de tester les composants individuels de l'interface utilisateur, ce qui facilite la détection des incohérences de conception et des problèmes potentiels avant qu'ils n'affectent l'ensemble de l'interface utilisateur.
En combinant ces outils puissants, nous nous concentrons sur la qualité du code et la robustesse du produit, garantissant que nos applications sont bien testées, visuellement cohérentes et fiables pour nos utilisateurs.
Lorsque nous déployons des plugins, nous utilisons le dépôt de plugins de WordPress.org comme plateforme principale pour assurer une large accessibilité aux utilisateurs de WordPress dans le monde entier. Ce dépôt est le centre de distribution des plugins WordPress, permettant à des millions d'utilisateurs de découvrir, de télécharger et d'installer des plugins directement dans leurs installations WordPress.
Pour maintenir des normes de haute qualité, nous suivons strictement les lignes directrices des plugins WordPress. Ces directives couvrent tous les aspects, de la qualité du code et de la sécurité à la documentation correcte du plugin, garantissant que nos produits répondent aux critères les plus élevés en matière de compatibilité, de performance et de sécurité. Le respect de ces directives nous aide à éviter les problèmes potentiels tels que les conflits avec d'autres plugins ou les mises à jour du noyau de WordPress.
Pour gérer le processus de développement et de déploiement, nous utilisons Actions GitHub pour automatiser l'intégration et le déploiement continus (CI/CD). Cette approche nous permet de rationaliser le cycle de publication des plugins. Avec CI/CD en place, chaque changement dans notre base de code est automatiquement testé, construit et préparé pour la sortie. Cette automatisation minimise les erreurs humaines et garantit que nos plugins restent à jour et fonctionnent de manière fiable pour les utilisateurs.
Ce flux de travail transparent signifie que les utilisateurs ont toujours accès aux dernières fonctionnalités, aux améliorations de performance et aux correctifs de sécurité sans délai. En tirant parti de ces systèmes et des meilleures pratiques, nous nous assurons que nos plugins offrent une excellente expérience utilisateur tout en restant sécurisés, compatibles et bien entretenus au fil du temps.
Notre engagement à fournir des produits de haute qualité et conviviaux se reflète dans les technologies que nous utilisons et les pratiques de développement que nous suivons. En nous appuyant sur des outils et des cadres modernes, nous créons des solutions robustes, performantes et faciles à maintenir qui répondent aux besoins évolutifs de nos utilisateurs. Bit Social est le premier produit que nous avons construit en utilisant notre boilerplate et nous sommes impatients de continuer à affiner et à étendre nos produits pour offrir encore plus de valeur à nos utilisateurs.
FR 
EN 
ES 
DE 
PT 
IT 
NL