🛠 Comprender la arquitectura MVC con React

Model-View-Controller (MVC) es un patrón de diseño de software muy utilizado para implementar interfaces de usuario. Como traté de usar y comprender la estructura en mis últimos proyectos, decidí profundizar en ella. Este artículo proporciona una descripción general de MVC y su uso en el entorno React.

Tabla de contenido

  • ¿Qué es el MVC?
  • ¿Cuáles son sus ventajas y desventajas para la codificación?
  • ¿Qué es reaccionar?
  • ¿Aplicar MVC con React = Flux?
  • ¿Qué es Flux y qué es diferente en comparación con MVC?
  • ¿Qué es Redux y qué es diferente en comparación con Flux?
  • Conclusión
  • Sumérgete más profundo: algunos enlaces útiles
"Si no puedes entenderlo, no puedes cambiarlo"
- Eric Evans, tecnólogo

¿Qué es el MVC?

MVC es una forma de pensar para estructurar su aplicación web. Es popular porque es utilizado por muchos marcos que implementan esa estructura (rails, cakephp, django, etc.).
La arquitectura proviene del flujo tradicional de una aplicación web.

  1. Ver - Cliente

Muestra la visualización de los datos al usuario. Solo conectado al controlador.

  1. Controlador - Servidor

Procesa la lógica del lado del servidor y actúa como un middleware entre Ver y Modelo, es decir, controlar el flujo de datos.

  1. Modelo - Base de datos

Procesamiento de datos desde o hacia la base de datos. Solo conectado al controlador.

Vea un ejemplo práctico aquí

¿Cuáles son sus ventajas y desventajas para la codificación?

La estructura permite flexibilidad ya que las responsabilidades están claramente separadas. Esto lleva a

  • mejor y más fácil mantenimiento de código y reutilización
  • más fácil de coordinar en equipos debido a la separación
  • capacidad de proporcionar múltiples vistas
  • soporte para implementaciones asincrónicas

, pero también a

  • un proceso de configuración complejo aumentado
  • dependencias, es decir, los cambios en el modelo o controlador afectan a toda la entidad

¿Qué es reaccionar?

React es una biblioteca de JavaScript de Facebook, que está diseñada para crear interfaces de usuario interactivas. Las características principales son que es

  • declarativo: diseñe diferentes vistas para cada estado, que se actualizarán y volverán a representar de manera eficiente
  • basado en componentes: compile componentes, que administren su propio estado y los organicen en UI más complejas
  • mantiene una representación interna de la IU representada ("DOM virtual"), que representa solo los elementos modificados

¿Aplicar MVC con React = Flux?

Mientras que React a menudo se conoce como la Vista en una estructura MVC, Facebook presentó su propia arquitectura llamada Flux . El problema con una estructura MVC es la comunicación bidireccional, que resultó ser muy difícil de depurar y comprender cuando un cambio en una entidad causó un efecto en cascada en la base de código. Especialmente cuando la aplicación se está convirtiendo en una mucho más grande, como Facebook, por ejemplo. El flujo de datos no fue lo suficientemente bueno o fácil de definir para aplicaciones grandes.

¿Qué es Flux y qué es diferente en comparación con MVC?

Flux se compone de 4 elementos clave:

  1. Comportamiento

Objetos con propiedad y datos.

  1. Historias

Contiene el estado y la lógica de la aplicación.

  1. El despachador

Procesa acciones registradas y devoluciones de llamada.

  1. Puntos de vista

Escuche los cambios de las tiendas y vuelva a renderizarse.

Es importante notar y comprender el flujo unidireccional aquí.

Ahora las diferencias con un MVC son:

  • El flujo de procesamiento es unidireccional en lugar de bidireccional.
  • las tiendas pueden almacenar cualquier estado relacionado con la aplicación, mientras que el modelo en MVC fue diseñado para almacenar objetos individuales
  • el punto de inicio Dispatcher hace que la depuración sea mucho más fácil

A pesar del hecho de que algunos llaman a MVC "muerto", creo que Flux es más un MVC refinado y mejorado, y por lo tanto simpatiza con Paul Shan y su conclusión en su artículo.

¿Qué es Redux y qué es diferente en comparación con Flux?

Redux se basa en Flux y puede describirse en tres principios fundamentales:

  1. Solo una sola fuente de verdad

El estado de toda su aplicación se almacena en una sola tienda.

  1. El estado es de solo lectura

La única forma de cambiar el estado es emitir una acción (un objeto que describe lo que sucedió).

  1. Los cambios se realizan con funciones puras.

Especifique la transformación por acciones con reductores, que permiten navegar por los estados.

¿Diferencia al flujo?

  • Redux no tiene el concepto de despachador porque se basa en funciones puras en lugar de emisores de eventos.
  • Redux asume que nunca mutas tus datos. No los mutas en un reductor, sino que devuelves un nuevo objeto

Como la documentación ya sugiere, debe usar el concepto de redux después de comprender React primero. Y:

En general, use Redux cuando tenga una cantidad razonable de datos que cambien con el tiempo, necesite una única fuente de verdad y descubra que los enfoques como mantener todo en el estado del componente React de nivel superior ya no son suficientes.

Conclusión

Como pudimos ver, los patrones de diseño de software están evolucionando con el tiempo. El uso de cierta arquitectura depende en gran medida de los marcos y objetivos utilizados de cada proyecto. Dicho esto, al final, MVC, Flux o Redux son solo herramientas. Asegúrese de conocer sus compensaciones y utilizarlas en consecuencia.

Por favor, deje comentarios, comentarios y sugerencias, ya que siempre estoy tratando de mejorar.
Comparte tus pensamientos: nunca ha sido tan fácil 

Sumérgete más profundo: algunos enlaces útiles

  • MVC
  • "Modelo-Vista-Controlador" - Microsoft (¡contenido retirado!)
  • "Qué es la programación MVC" - DevMarketer (video)
  • Pattern "Patrón MVC" - Tutorialespoint (ejemplo práctico)
  • "Beneficios del uso del modelo MVC" - Soroosh Pardaz (artículo de LinkedIn)
  • "¿MVC está muerto en la parte delantera?" - Alex Moldovan (artículo de 5 minutos)
  • Flujo
  • "Conceptos de flujo" - Facebook (Github)
  • "Patrones de diseño Flux vs MVC" - Amir Salihefendic (artículo de 5 minutos)
  • "MVC no escala" - Abel Avram (artículo de 5 minutos)
  • Redux
  • "Flux vs MVC" - Paul Shan (artículo de 5 minutos)
  • "Redux Docs" - Redux (documentación completa)

Acerca de

Me considero un solucionador de problemas. Mis puntos fuertes son navegar en entornos complejos, proporcionar soluciones y desglosarlos. Mi conocimiento e intereses evolucionan en torno al derecho comercial y la programación de aplicaciones de aprendizaje automático. Presto servicios en la construcción de análisis de datos y evaluación de conceptos relacionados con el negocio.

Conectar en:

  • LinkedIn
  • Github
  • Medio
  • Gorjeo
  • Patreon

Soporte y correos