Aprender patrones de diseño de JavaScript, 2ª edición

Capítulo 1. Introducción a los patrones de diseño

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

¡Un buen código es como una carta de amor al siguiente desarrollador que lo mantendrá!

Los patrones de diseño proporcionan un vocabulario común para estructurar el código, facilitando su comprensión. Ayudan a mejorar la calidad de esta conexión con otros desarrolladores. El conocimiento de los patrones de diseño nos ayuda a identificar temas recurrentes en los requisitos y a asignarlos a soluciones definitivas. Podemos confiar en la experiencia de otros que se han encontrado con un problema similar y han ideado un método optimizado para abordarlo. Este conocimiento tiene un valor incalculable, ya que allana el camino para escribir o refactorizar el código para hacerlo mantenible.

Ya sea en el servidor o en el cliente, JavaScript es una piedra angular del desarrollo moderno de aplicaciones web. La edición anterior de este libro se centraba en varios patrones de diseño populares en el contexto de JavaScript. A lo largo de los años, JavaScript ha evolucionado significativamente como lenguaje en cuanto a características y sintaxis. Ahora admite módulos, clases, funciones de flecha y literales de plantilla que antes no tenía. También disponemos de bibliotecas y marcos avanzados de JavaScript que han facilitado la vida a muchos desarrolladores web. ¿Qué relevancia tienen entonces los patrones de diseño en el contexto moderno de JavaScript?

Es importante señalar que, tradicionalmente, los patrones de diseño no son ni prescriptivos ni específicos de un lenguaje. Puedes aplicarlos cuando creas que encajan, pero no tienes por qué hacerlo. Al igual que las estructuras de datos o los algoritmos, puedes seguir aplicando patrones de diseño clásicos utilizando lenguajes de programación modernos, incluido JavaScript. Puede que no necesites algunos de estos patrones de diseño en marcos de trabajo o bibliotecas modernas, donde ya están abstraídos. Por el contrario, algunos marcos de trabajo pueden incluso fomentar el uso de patrones específicos.

En esta edición, adoptaremos un enfoque pragmático de los patrones. Exploraremos por qué determinados patrones pueden ser los más adecuados para implementar ciertas funciones y si un patrón sigue siendo recomendable en el contexto moderno de JavaScript.

A medida que las aplicaciones se volvían más interactivas y requerían una gran cantidad de JavaScript, el lenguaje era objeto de constantes críticas por su impacto negativo en el rendimiento. Los desarrolladores buscan continuamente nuevos patrones que puedan optimizar el rendimiento de JavaScript. Esta edición destaca dichas mejoras siempre que sean relevantes. También hablaremos de patrones específicos del marco de trabajo, como los Ganchos React y los Componentes de Orden Superior, que se han hecho cada vez más populares en la era de React.js.

Retrocediendo un paso, empecemos explorando la historia y la importancia de los patrones de diseño. Si ya estás familiarizado con esta historia, no dudes en saltar a "¿Qué es un patrón?" para seguir leyendo.

Historia de los patrones de diseño

Los patrones de diseño se remontan a , a los primeros trabajos de un arquitecto llamado Christopher Alexander. A menudo escribía sobre sus experiencias al resolver problemas de diseño y cómo se relacionaban con edificios y ciudades. Un día, a Alexander se le ocurrió que ciertas construcciones de diseño conducían a un efecto óptimo deseado cuando se utilizaban repetidamente.

Alexander elaboró un lenguaje de patrones en colaboración con otros dos arquitectos, Sara Ishikawa y Murray Silverstein. Este lenguaje ayudaría a capacitar a cualquiera que deseara diseñar y construir a cualquier escala. Lo publicaron en 1977 en un documento titulado "A Pattern Language" (Un lenguaje de patrones), que más tarde se editó como un libro completo de tapa dura.

Alrededor de 1990, los ingenieros de software empezaron a incorporar los principios sobre los que había escrito Alexander en la primera documentación sobre patrones de diseño para guiar a los desarrolladores noveles que querían mejorar sus habilidades de codificación. Es importante señalar que los conceptos que subyacen a los patrones de diseño han estado presentes en la industria de la programación desde sus inicios, aunque de forma menos formalizada.

Una de las primeras obras formales publicadas sobre patrones de diseño en ingeniería de software, y posiblemente la más emblemática , fue un libro de 1995 titulado Design Patterns: Elements of Reusable Object-Oriented Software, escritopor Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides. Hoy en día, la mayoría de los ingenieros reconocen a este grupo como la Banda de los Cuatro (Gang of Four, GoF).

La publicación GoF fue especialmente decisiva para impulsar el concepto de patrones de diseño en nuestro campo. En ella se describen varias técnicas y escollos de desarrollo y se proporcionan 23 patrones de diseño orientados a objetos básicos que se utilizan con frecuencia en todo el mundo en la actualidad. Trataremos estos patrones con más detalle en el Capítulo 6, y también constituyen la base de nuestro debate en el Capítulo 7.

¿Qué es un patrón?

Un patrón es una plantilla de solución reutilizable que puedes aplicar a problemas y temas recurrentes en el diseño de software. Al igual que ocurre con otros lenguajes de programación, cuando construyas una aplicación web JavaScript, puedes utilizar la plantilla para estructurar tu código JavaScript en diferentes situaciones en las que creas que te será útil.

Aprender y utilizar patrones de diseño es principalmente ventajoso para los desarrolladores por lo siguiente:

Los patrones son soluciones probadas.

Son el resultado de la experiencia y los conocimientos combinados de los desarrolladores que ayudaron a definirlos. Son enfoques probados por el tiempo y conocidos por su eficacia a la hora de resolver problemas concretos en el desarrollo de software.

Los patrones se pueden reutilizar fácilmente.

Un patrón suele ofrecer una solución lista para usar que puedes adoptar y adaptar a tus necesidades. Esta característica los hace bastante robustos.

Los patrones pueden ser expresivos.

Los patrones pueden ayudar a expresar soluciones elegantes a problemas extensos utilizando una estructura de conjuntos y un vocabulario compartido.

Otras ventajas que ofrecen los patrones son las siguientes

Los patrones ayudan a evitar problemas menores que pueden causar problemas importantes en el proceso de desarrollo de la aplicación.

Cuando utilizas patrones establecidos para construir código, puedes relajarte respecto a equivocarte en la estructura y centrarte en la calidad de la solución global. El patrón te anima a escribir código más estructurado y organizado de forma natural, evitando la necesidad de refactorizarlo para limpiarlo en el futuro.

Los patrones proporcionan soluciones generalizadas, documentadas de un modo que no requiere que estén vinculadas a un problema concreto.

Este enfoque generalizado significa que puedes aplicar patrones de diseño para mejorar la estructura del código independientemente de la aplicación (y, en muchos casos, del lenguaje de programación).

Algunos patrones pueden reducir el tamaño total del archivo de código evitando las repeticiones.

Los patrones de diseño animan a los desarrolladores a examinar más detenidamente sus soluciones en busca de áreas en las que puedan lograr reducciones instantáneas de la duplicación. Por ejemplo, puedes reducir el número de funciones que realizan procesos similares en favor de una única función generalizada para disminuir el tamaño de tu código base. Esto también se conoce como hacer el código más árido.

Los patrones amplían el vocabulario de un desarrollador, lo que agiliza la comunicación.

Los desarrolladores pueden hacer referencia al patrón cuando se comunican con su equipo, cuando lo discuten en la comunidad de patrones de diseño, o indirectamente cuando otro desarrollador mantiene posteriormente el código.

Los patrones de diseño populares pueden improvisarse aún más aprovechando las experiencias colectivas de los desarrolladores que utilizan esos patrones y contribuyendo a la comunidad.

En algunos casos, esto conduce a la creación de patrones de diseño totalmente nuevos, mientras que en otros, puede llevar a mejorar las directrices sobre el uso de patrones específicos. Esto puede garantizar que las soluciones basadas en patrones sigan siendo más sólidas que las ad hoc.

Nota

Los patrones no son soluciones exactas. La función de un patrón es simplemente proporcionarnos un esquema de solución. Los patrones no resuelven todos los problemas de diseño, ni sustituyen a los buenos diseñadores de software. Sigues necesitando buenos diseñadores para elegir los patrones correctos que puedan mejorar el diseño general.

Un caso de uso cotidiano de los patrones de diseño

Si has utilizado React.js, probablemente te habrás encontrado con el patrón Proveedor . Si no, puede que hayas experimentado la siguiente situación.

El árbol de componentes de las aplicaciones web a menudo necesita acceder a datos compartidos, como la información del usuario o sus permisos de acceso. La forma tradicional de hacerlo en JavaScript es establecer estas propiedades para el componente de nivel raíz y luego pasarlas de los componentes padre a los hijos. A medida que la jerarquía de componentes se hace más profunda y se anida más, se perfora hacia abajo con los datos, lo que da lugar a la práctica de la perforación de props. Esto conduce a un código imposible de mantener, en el que la configuración y el paso de propiedades se repetirán en cada componente hijo, que depende de esos datos.

React y algunos otros frameworks abordan este problema utilizando el patrón Proveedor. Con el patrón Proveedor, la API de contexto de React puede difundir el estado/datos a varios componentes mediante un proveedor de contexto. Los componentes hijos que necesiten los datos compartidos pueden acceder a este proveedor como consumidores de contexto o utilizar el Gancho useContext.

Éste es un excelente ejemplo de un patrón de diseño utilizado para optimizar la solución a un problema común. En este libro trataremos éste y otros muchos patrones de este tipo con mucho detalle.

Resumen

Con esa introducción a la importancia de los patrones de diseño y su relevancia para el JavaScript moderno, ahora podemos sumergirnos de lleno en el aprendizaje de los patrones de diseño de JavaScript. Los primeros capítulos de este libro tratan de la estructuración y clasificación de los patrones y de la identificación de los antipatrones, antes de adentrarnos en las particularidades de los patrones de diseño para JavaScript. Pero antes, veamos qué hace falta para que un "proto-patrón" propuesto sea reconocido como patrón en el capítulo siguiente.