Optimización y Formularios: React Scan y Formity
React Scan: Optimización visual de Renders
React Scan es una herramienta potente y gratuita que permite identificar problemas de rendimiento en proyectos de React al visualizar qué componentes se re-renderizan en tiempo real. A diferencia de las herramientas convencionales, ofrece una experiencia más intuitiva y directa.
Beneficios principales:
- Sin instalaciones forzosas: Puede integrarse fácilmente mediante un script en cualquier proyecto, incluso en aquellos donde no tenemos un control total del entorno, utilizando técnicas de Overwrites en el navegador.
- Visualización clara: Muestra qué partes de la interfaz se están actualizando, lo que permite detectar renderizados innecesarios que degradan el rendimiento.
- Flexibilidad: Es compatible tanto con componentes estándar como mediante la configuración personalizada de la biblioteca.
"Es muy interesante para ver qué es lo que se está renderizando en vuestros proyectos y funciona muy bien visualmente."
Formity: Formularios dinámicos basados en JSON
Programar formularios de múltiples pasos puede ser una tarea tediosa y propensa a errores. Formity soluciona esto permitiendo definir la lógica, los pasos y las condiciones enteramente mediante archivos JSON.
Características destacadas:
- Lógica condicional: Permite gestionar ramificaciones en el formulario (por ejemplo, preguntar datos diferentes según si el usuario está trabajando o no) de forma nativa.
- Independencia de Framework: Aunque ofrece plantillas optimizadas para React y Tailwind, su arquitectura basada en esquemas permite utilizarlo con flexibilidad técnica.
- Estructura dinámica: Es posible obtener los esquemas desde un backend y enviar los datos resultantes de nuevo al servidor de manera eficiente.
"Es genial porque, como podéis ver, está todo basado en JSON y permite crear flujos complejos sin tener que escribir mil millones de líneas de código".