Hace poco lanzamos nuestro nuevo producto Bit Social, un plugin que sirve para compartir el contenido de WordPress en las redes sociales. Aunque muchos plugins ofrecen funciones similares, queríamos crear algo que destacara por su diseño fácil de usar y su sólido conjunto de funciones. Bit Social está en continua evolución, con nuevas funciones que se añaden regularmente en función de los comentarios de la comunidad, que han sido abrumadoramente positivos. Bit Social y otros productos populares como Forma de bits y Integraciones de bitsTambién han ganado adeptos por su rapidez y sus interfaces intuitivas. Teniendo esto en cuenta, queríamos compartir la pila tecnológica que hay detrás de nuestros productos y las razones por las que elegimos estas tecnologías.
En este artículo hablaremos de las tecnologías que hemos utilizado para crear Bit Social y de por qué las hemos elegido. También daremos algunas pinceladas sobre cómo utilizamos estas tecnologías para crear una experiencia de usuario fluida.
En WordPress, no existe un marco específico o un estándar de facto para la estructura de los plugins. Aunque esta flexibilidad es uno de los puntos fuertes de WordPress, también puede resultar desalentadora para los desarrolladores que se inician en la creación de plugins. A pesar de la falta de una arquitectura establecida, existen principios fundamentales, buenas prácticas y medidas de seguridad esenciales que los desarrolladores deben seguir.
Desde nuestra experiencia con Bit Form, creemos que es importante mantener una base de código reutilizable y mantenible. Para agilizar el desarrollo futuro, hemos decidido crear una plataforma/marco que incluya componentes reutilizables y siga las mejores prácticas, garantizando la coherencia y la eficiencia de nuestros próximos productos.
El objetivo principal de un boilerplate o framework es ofrecer una base sólida para el desarrollo de plugins de WordPress. Acelera el desarrollo, mejora la estructura del código y simplifica el mantenimiento y las pruebas a largo plazo. Además, el uso de un framework garantiza la coherencia entre diferentes plugins, lo que supone una ventaja significativa.
Nuestra arquitectura frontend se basa en ReaccioneReact es una biblioteca JavaScript muy utilizada para desarrollar interfaces de usuario. La velocidad, simplicidad y flexibilidad de React la hacen ideal para crear aplicaciones web dinámicas e interactivas. Con TypeScript integrado en nuestra base de código React, nos beneficiamos de una comprobación de tipos robusta, que ayuda a detectar posibles errores durante el desarrollo, garantizando un código más limpio y fácil de mantener antes de la implementación.
Para nuestro sistema de diseño, aprovechamos Diseño de hormigasAnt Design, una popular biblioteca de interfaz de usuario de React que ofrece un amplio conjunto de componentes y estilos predefinidos. Combinado con nuestras directrices de diseño personalizadas, Ant Design nos ayuda a ofrecer una interfaz de usuario coherente y visualmente atractiva, garantizando una experiencia fluida en todos nuestros productos.
La gestión de estados desempeña un papel fundamental en el desarrollo front-end moderno. Mientras que Redux ha sido una opción de larga data para muchos, hemos optado por Recoil.js y Jotai para gestionar el estado de la aplicación. Estas librerías introducen el concepto de almacenes atómicos, haciendo que la gestión del estado sea más modular e intuitiva. Su naturaleza ligera y sintaxis similar a React proporcionan una solución más legible, flexible y eficiente en comparación con Redux, por lo que son ideales para la arquitectura de nuestra aplicación.
Para proporcionar una experiencia de usuario fluida, nos centramos en gran medida en la obtención de datos y el almacenamiento en caché. A diferencia de los plugins tradicionales de WordPress, que recargan páginas enteras y vuelven a obtener datos con cada navegación, nuestro diseño de aplicación de una sola página (SPA) mejora la experiencia del usuario al evitar la recarga de páginas completas. Utilizamos React-Query (de Tanstack), una potente herramienta para gestionar la obtención y el almacenamiento en caché de datos, que nos permite optimizar el rendimiento obteniendo sólo los datos necesarios, almacenándolos en caché para su uso futuro y gestionando eficazmente los estados de paginación y error. Esto garantiza que los usuarios no experimenten retrasos innecesarios al navegar por nuestros productos.
Para mantener un código de alta calidad y aplicar las mejores prácticas, integramos ESLint y Más bonito en nuestro flujo de trabajo. ESLint nos ayuda a detectar posibles problemas y a aplicar normas de codificación, mientras que Prettier garantiza un formato de código coherente en toda la base de código. Además, empleamos ganchos de Git como Lefthook y Commitlint para realizar comprobaciones de calidad antes de cada confirmación, lo que garantiza que se envíe a producción un código limpio y fiable.
Para la agrupación y la optimización de la compilación, nos basamos en ViteVite, una herramienta front-end de última generación que ofrece compilaciones rápidas, sustitución de módulos en caliente y paquetes de producción optimizados. El moderno enfoque de Vite acelera significativamente el desarrollo y agiliza nuestro proceso de creación, lo que facilita el despliegue y el mantenimiento eficiente de nuestros productos.
Esta arquitectura no sólo garantiza una experiencia de desarrollo fluida, sino que también nos permite ofrecer a nuestros usuarios productos de alta calidad, eficaces y fáciles de mantener.
En el núcleo de nuestro desarrollo del backend de WordPress, nos adherimos a las Directrices para plugins de WordPress y seguimos las mejores prácticas del sector para garantizar la máxima compatibilidad, seguridad y rendimiento. Para mejorar la legibilidad y la calidad del código, hemos adoptado una arquitectura modular inspirada en el popular framework PHP Laravel. Este enfoque nos permite aislar los componentes clave en paquetes reutilizables, lo que nos permite mantener la coherencia, reducir la duplicación y agilizar el desarrollo de plugins. Algunos de estos paquetes son de código abierto y están disponibles en nuestro repositorio de GitHub.
Algunos componentes de nuestra arquitectura:
Hemos desarrollado un conjunto de componentes básicos para gestionar tareas esenciales como la recuperación de datos, el almacenamiento en caché y las solicitudes de API. Para ello es fundamental nuestro wp-kit una colección de componentes reutilizables y flexibles que simplifican el desarrollo de plugins. Al utilizar wp-kit, garantizamos un código coherente y de alta calidad en varios plugins, lo que acelera el desarrollo y permite crear soluciones sólidas y repletas de funciones.
La integridad y la seguridad de los datos son fundamentales en el desarrollo de plugins. Para gestionar las peticiones, utilizamos la API REST de WordPress y wp_ajax. Para mejorar aún más la seguridad de los datos, utilizamos wp-validatorwp-validator es un paquete de validación de código abierto inspirado en el elegante sistema de validación de Laravel. Con una sintaxis limpia y expresiva, el wp-validator permite a los desarrolladores definir reglas y mensajes de validación reutilizables, simplificando el proceso de mantenimiento de la validación de datos a través de diferentes puntos finales.
Para las interacciones con la base de datos, hemos creado el módulo wp-base de datos diseñado para simplificar las operaciones CRUD y agilizar la gestión de bases de datos. Abstrae tareas comunes de bases de datos como consultar, insertar, actualizar y eliminar registros, facilitando el trabajo con tablas de WordPress y tipos de entrada personalizados. Además, ofrece comandos CLI para la migración de bases de datos y la siembra, aportando un enfoque moderno a la gestión de bases de datos de WordPress.
Para garantizar una base de código limpia y fácil de mantener, integramos herramientas como PHP-CS-Fixer y PHPStan. Estas herramientas aplican estándares de codificación y realizan análisis estáticos, detectando posibles problemas en una fase temprana. Al automatizar estos procesos, nos aseguramos de que todos los plugins que entregamos sean fiables, seguros y se ajusten a los estándares de desarrollo modernos.
Nuestro enfoque de backend modular nos permite crear rápidamente plugins escalables, seguros y de alta calidad. Estamos comprometidos a compartir más de nuestro trabajo de código abierto, proporcionando a la comunidad herramientas que simplifican el desarrollo de plugins de WordPress.
Las pruebas desempeñan un papel fundamental en nuestro proceso de desarrollo, ya que garantizan los más altos niveles de calidad y fiabilidad en todos nuestros productos. En el backend, utilizamos PHPUnit para las pruebas unitarias, pero estamos en proceso de migrar a Plagasun marco más moderno y fácil de usar que mejora tanto la eficacia como la experiencia del desarrollador.
Para el front-end, Vitest es nuestra herramienta de referencia para las pruebas unitarias y de integración, ya que garantiza que todos los componentes de React se comprueban a fondo y están libres de errores. Estas pruebas rigurosas nos ayudan a detectar los problemas a tiempo, lo que contribuye a la estabilidad general de nuestras aplicaciones.
Además de las pruebas unitarias y de integración, nos basamos en Ciprés para pruebas de extremo a extremo. Con Cypress, podemos simular interacciones reales de los usuarios y probar nuestras aplicaciones en distintos navegadores y dispositivos, lo que nos da la seguridad de que la experiencia del usuario sigue siendo coherente y fiable en diferentes condiciones".
Para complementar nuestro enfoque de las pruebas, también utilizamos Libro de cuentos para pruebas de componentes y regresión visual. Storybook nos permite aislar y probar componentes individuales de la interfaz de usuario, lo que facilita la detección de incoherencias de diseño y problemas potenciales antes de que afecten a la interfaz de usuario general.
Gracias a la combinación de estas potentes herramientas, mantenemos un fuerte enfoque en la calidad del código y la solidez del producto, garantizando que nuestras aplicaciones estén bien probadas, sean visualmente coherentes y fiables para nuestros usuarios.
Al desplegar plugins, utilizamos el repositorio de plugins de WordPress.org como plataforma principal para garantizar una amplia accesibilidad a los usuarios de WordPress de todo el mundo. Este repositorio es el eje central de la distribución de plugins de WordPress y permite a millones de usuarios descubrir, descargar e instalar plugins directamente en sus instalaciones de WordPress.
Para mantener unos estándares de alta calidad, seguimos estrictamente las Directrices para plugins de WordPress. Estas directrices cubren todos los aspectos, desde la calidad del código y la seguridad hasta la documentación adecuada de los plugins, y garantizan que nuestros productos cumplan los más altos estándares de compatibilidad, rendimiento y seguridad. El cumplimiento de estas directrices nos ayuda a evitar posibles problemas, como conflictos con otros plugins o actualizaciones del núcleo de WordPress.
Para gestionar el proceso de desarrollo y despliegue, utilizamos Acciones de GitHub para automatizar la integración continua y el despliegue continuo (CI/CD). Este enfoque nos permite agilizar el ciclo de publicación de plugins. Con CI/CD, cada cambio en nuestro código base se prueba automáticamente, se crea y se prepara para su publicación. Esta automatización minimiza los errores humanos y garantiza que nuestros plugins se mantengan actualizados y funcionen de forma fiable para los usuarios.
Este flujo de trabajo sin fisuras significa que los usuarios siempre tienen acceso a las últimas funciones, mejoras de rendimiento y parches de seguridad sin demora. Aprovechando estos sistemas y las mejores prácticas, nos aseguramos de que nuestros plugins ofrezcan una experiencia de usuario excelente y, al mismo tiempo, sigan siendo seguros, compatibles y estén bien mantenidos a lo largo del tiempo.
Nuestro compromiso de ofrecer productos de alta calidad y fáciles de usar se refleja en las tecnologías que utilizamos y en las prácticas de desarrollo que seguimos. Al utilizar herramientas y marcos de trabajo modernos, creamos soluciones sólidas, eficaces y fáciles de mantener que satisfacen las necesidades cambiantes de nuestros usuarios. Bit Social es el primer producto que hemos creado utilizando nuestro boilerplate y nos entusiasma seguir perfeccionando y ampliando nuestros productos para ofrecer aún más valor a nuestros usuarios.
ES 
EN 
FR 
DE 
PT 
IT 
NL