Asume el Estado

En realidad, React es un caso atípico con la gestión estatal. Si bien tiene herramientas de primera clase como ContextuseState , eres más dueño del estado global reactivo. Aquí está David Ceddia con “Bibliotecas de gestión estatal de React y cómo elegir”, que hace un buen trabajo al hablar sobre las opciones. Digo “valor atípico” porque todos los demás marcos importantes de JavaScript tienen sus propias implementaciones de estado global.

Para mí, el concepto de Estado es vital para el desarrollo inicial. Son como componentes en ese sentido. Es simplemente sorprendente que sea una forma inteligente de trabajar en productos digitales. El estado es nuestra propia abstracción de lo que sucede en un sitio. Puede ser si una barra lateral está abierta o cerrada, una lista de datos de comentarios, los detalles de los usuarios que iniciaron sesión o cualquier otra cosa que necesitemos para dibujar y hacer una interfaz de usuario funcional .

Es por eso que todavía me sorprende que los componentes web nativos no intentaran abordar la idea de estado en absoluto. No estoy lo suficientemente informado como para saber por qué es así, pero como observador, puedo ver que los desarrolladores están clamando por encontrar las mejores maneras de hacer que el estado funcione en y entre los componentes web. Más recientemente, me encontré con @vue/lit de Evan You. Se trata de un microframework para componentes web que resuelve la creación de plantillas y la renderización mediante el uso de lit-html y luego incorpora el estado reactivo con la reactividad de Vue . Se ve bastante bien para mí.

La idea de Evan lleva el peso combinado de las bibliotecas en uso a ~6kb. Entonces, ¿qué tan bajo podemos llegar aquí? Krasimir Tsonev escribió “Uso del sistema de módulos JavaScript para la gestión estatal” donde no utilizan ninguna biblioteca (posiblemente creando una pequeña propia en el camino). Un administrador de estado puede ser simplemente un módulo que importamos y usamos y que es esencialmente un objeto con valores, funciones de mutación y oyentes. Eso reduce los gastos generales de la administración del estado a casi nada, a costa de renunciar a la renderización eficiente, mejores plantillas y ciclo de vida que obtendría al usar bibliotecas más sólidas.

Hablando de no usar ninguna biblioteca, aquí está Leo Bauza con “¿Cómo funciona Viget JavaScript?” donde entran en el patrón básico que utilizan para agregar funcionalidad sobre una base HTML. Parece que toda la funcionalidad se aplica a través de data-*atributos y cada atributo de datos tiene su propio módulo JavaScript (Clase) que maneja esa parte específica de funcionalidad. Aquí no parece tratarse del estado global, pero manejan el estado de forma bastante manual dentro de los módulos.

Todo esto me parece fascinante. En mi propio trabajo, apuesto a que soy bastante típico. Si se trata de algo pequeño para un bebé, es posible que me decante por un patrón que pueda hacer yo mismo. Si es algo de tamaño mediano pero de bajo impacto, probablemente optaría por las versiones nuevas y elegantes, y tal vez incluso experimentales. Pero en el momento en que hago algo grande y de alto impacto, me resulta mucho más cómodo elegir entre los jugadores más importantes, incluso si eso a veces significa bibliotecas más pesadas.