Hola React, querido Berlín, ¿cómo les va? Soy Sanket Sahu, y dirijo una empresa llamada GeekyAnds, y co-creé una biblioteca de componentes de interfaz de usuario para React Native y React llamada Nativebase. Estos días estoy trabajando en el ecosistema de Glue Stack ecosystem, que está en la línea de la versión 3 de Nativebase, biblioteca universal de componentes de interfaz de usuario component library, y herramientas alrededor del sistema de design.
Pero hoy voy a hablar de algo más. Se trata de cómo podemos construir un sistema de plugins tipo Wordpress, pero para Next.js. Pasamos muchas cosas de PHP a React, y ¿qué explica mejor que este meme? Entonces, ¿por qué no plugins? Si aún no lo sabes, los plugins de WordPress son como un montón de plugins que están segregados en carpetas, y tan pronto como los sueltas en tu proyecto, obtenemos cambios funcionales, cambios de funcionalidad, tan pronto como añadimos estos plugins. Algo así como una extensión de Chrome, pero un poco diferente cuando lo comparas con los paquetes de npm. En los paquetes tienes que instalar e integrar tú mismo, mientras que los plugins, añaden funcionalidad al usuario final.
Así es el panel de control de WordPress donde tenemos múltiples plugins. Y este es un ejemplo de los viejos tiempos de cómo puedes subir un plugin. Este es un ejemplo de formulario de contacto, y tan pronto como lo subes, tienes esa característica disponible en tu sitio web. Entonces, ¿por qué no para el siguiente? Así que utilizando este sistema de plugins, podemos pasar de esta estructura de carpetas donde tenemos, por ejemplo, el comportamiento de autenticación o authentication distribuido en toda tu aplicación, ¿verdad? Desde, digamos, páginas slash login.js componentes, formulario de inicio de sesión.js, y luego API para lo mismo, inicio de sesión y cierre de sesión. Luego el middleware, y la tienda, y un montón de cosas diferentes. Así que con el sistema de plugins, podemos co-ubicar todas estas cosas dentro de su propio sistema de módulos o espacio de nombres en el que tan pronto como añadas o quites este plugin, entonces ese comportamiento de autenticación se elimina de tu aplicación, ¿verdad? Así que en este experimento, he intentado hacer un sistema de plugins basado en archivos inspirado en WordPress, y estos plugins habilitan características visuales y no visuales por plugin. Tengo la lista de comprobación de WordPress, que es un sistema basado en archivos, tienda persistente por plugin, registro de componentes, rutas, funciones, sistema de eventos, y gestión de dependencias. Aunque esto es solo un experimento, he intentado imitar estos tres comportamientos, basado en sistema de archivos, registro de componentes, y registro de rutas. Y así es como se ve la architecture. Así que tenemos este sistema de plugins, y todos los plugins hablan con él. Este sistema de plugins actúa como un paso intermedio en diferentes lugares en Next.js. Tenemos un proveedor raíz para el sistema de plugins y tenemos alguna implementación en middleware.ts y en algún lugar en el archivo all.tsx. Mantiene su propia tienda para rutas y componentes. Así que, sí, así es como se ve la architecture. Sí, así que es hora de alguna demostración. Genial. Así que permíteme intentar esto. Bien, ¿cómo se ve el código? Así que tenemos una carpeta de plugins y tan pronto como instalamos o añadimos estas carpetas, obtenemos esas funcionalidades. Así que una rápida demostración sería esta. Así que esta es una aplicación Next.js, que tiene el sistema de plugins instalado. Así que lo que he hecho es vamos a eliminar todos estos plugins en la carpeta de descargas. Y si voy y refresco esto, así que este es ahora un sitio web que no tiene ningún plugin instalado. Digamos, si quiero hacer digamos, un plugin de Hola Mundo, que esencialmente añade un mensaje de alerta, tan pronto como lo suelto, vemos este Hola Mundo siendo activado.
Comments