Patterns.dev

 (patterns.dev)
2 puntos por GN⁺ 2025-12-12 | 1 comentarios | Compartir por WhatsApp
  • Recurso online gratuito sobre patrones de diseño de aplicaciones web y optimización de rendimiento, con contenido de aprendizaje centrado en JavaScript y frameworks modernos
  • Organiza de forma sistemática patrones de diseño, renderizado, carga y técnicas de mejora de rendimiento especializadas para Vanilla JavaScript, React y Vue
  • Ofrece ejemplos prácticos orientados al trabajo real sobre reutilización de código, gestión de estado, estrategias de renderizado y optimización de bundles, junto con un entorno de práctica en CodeSandbox
  • Presenta los patrones de diseño como herramientas de referencia, no como reglas, para ayudar a resolver problemas recurrentes y comprender similitudes en el código
  • Material enfocado en la escalabilidad estructural y la mejora del rendimiento de grandes aplicaciones web, incluyendo sintaxis moderna ES2017+ e implementaciones basadas en React Hooks

Descripción general

  • Patterns.dev es un recurso online gratuito para mejorar la arquitectura de aplicaciones web, estructurado en torno a patrones de diseño, renderizado y rendimiento
  • Explica el propósito y la forma de uso de cada patrón, junto con ejemplos de implementación en entornos de Vanilla JavaScript, React y Vue.js
  • Ofrece descarga en formato eBook o PDF, además de lectura online

Patrones de JavaScript

  • Incluye una colección de patrones centrados en JavaScript básico y Node.js
    • Incluye patrones de diseño tradicionales como Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight y Factory
  • Reúne múltiples patrones de optimización de rendimiento y carga
    • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, optimización de terceros y más
  • Aprovecha funciones modernas del navegador como animaciones de transición de página con View Transitions API, virtualización de listas y compresión de código

Patrones de React

  • Ofrece patrones estructurales y estrategias de renderizado basados en React y Next.js
    • Incluye patrones de composición como Container/Presentational, HOC, Render Props, Hooks y Compound
  • Comparación de métodos de renderizado
    • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR y más
  • Incluye guías sobre React Server Components y optimización de Core Web Vitals en Next.js
  • El documento React Stack Patterns (2025/2026) aborda stacks tecnológicos recientes, incluyendo frameworks, herramientas de build, routing, gestión de estado e integración de IA

Patrones de Vue

  • Patrones exclusivos de Vue.js centrados en la estructura de componentes y la gestión de estado
    • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components y más
  • Presenta una estructura de código moderna usando la Composition API y la sintaxis <script setup>
  • Incluye patrones avanzados como Provide/Inject, Renderless Components y Render Functions

Filosofía de aplicación de patrones

  • Patterns.dev presenta los patrones como herramientas de referencia, no como normas
    • Ofrece soluciones comunes para problemas recurrentes, pero no las impone en todas las situaciones
  • El objetivo de los patrones de diseño es transmitir de forma comprensible para las personas los puntos en común de los problemas en el código
  • Destaca la importancia de los patrones especializados por lenguaje o framework, proponiendo un enfoque moderno que va más allá de los patrones GoF tradicionales

Apoyo para aprendizaje y práctica

  • Permite verificar la implementación real de cada patrón mediante ejemplos prácticos en CodeSandbox
  • Ofrece una forma de aprendizaje apoyada en materiales visuales animados para facilitar la comprensión de los conceptos
  • Presenta métodos para mejorar la eficiencia de carga del código y la experiencia de usuario mediante patrones de rendimiento web

Resumen de características clave

  • Implementaciones basadas en sintaxis ES2017+, optimizadas para entornos modernos de JavaScript
  • Enfoque en la optimización para desarrolladores de React y la mejora del rendimiento web
  • Enfatiza la practicidad por encima de la complejidad mediante una interpretación moderna de los patrones de diseño
  • Proporciona una guía práctica para la escalabilidad y mejora del rendimiento de grandes aplicaciones web

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-12-12
Opiniones en Hacker News

  • Cuando desarrollaba apps empresariales en .NET en un trabajo anterior, los patrones de diseño sí eran realmente útiles
    Como varios equipos usaban los mismos patrones, el código resultaba familiar y los nuevos proyectos también tenían una estructura consistente
    Pero ahora trabajo con una app de JS de más de 10 años, y el abuso de getters/setters al estilo Java EE y las estructuras de factory complejas terminan siendo más dañinos que útiles
    Si se abusa de los patrones sin entender por qué se usan, el resultado puede ser mucho peor que simplemente escribir código fácil de leer (me hace pensar en el principio YAGNI)

    • Creo que los patrones no se “crean”, sino que se “descubren”
      Como desarrollador, tarde o temprano terminas imaginando de forma natural estructuras como Adapter, Builder, Iterator
      El verdadero valor de los patrones de diseño está en darles un lenguaje común a esos patrones descubiertos para poder comunicarnos con facilidad
    • Muchos patrones solo tienen sentido en lenguajes con muchas restricciones como C# o Java
      En lenguajes más simples como C, Go o JavaScript, se pueden resolver de forma mucho más sencilla
    • A menudo veo desarrolladores que vienen de entornos empresariales intentando forzar los mismos patrones OOP en JS
      No encaja con la filosofía del lenguaje
    • Yo también, en el pasado, apliqué patrones con buena intención y terminé creando una pesadilla de mantenimiento
      Al principio se ve limpio, pero con el tiempo la lógica se dispersa y cuando entran nuevos requisitos el patrón se rompe con facilidad
      Al final uno termina extrañando un simple switch
    • Entre quienes dicen que los patrones no sirven, muchas veces hay personas sin experiencia en sistemas a gran escala
      Es como la diferencia de perspectiva entre alguien que solo construye apps pequeñas y alguien que levanta rascacielos

  • Antes existía la Yahoo Design Pattern Library
    Estaba más enfocada en patrones de UX y organizaba muy bien distintos casos para inducir comportamientos del usuario (por ejemplo, poner calificaciones)
    Enlace original / archivo web

    • Hay un proyecto open source parecido llamado The Component Gallery
      Es un repositorio que reúne componentes de UI de más de 90 design systems, y también sirve para aprender sobre lineamientos de a11y/ARIA
      component.gallery
    • Términos como “accordion” o “carousel” se estandarizaron gracias a esta biblioteca
      Tener un lenguaje común mejoró la productividad
    • Me da una sensación de la web de antes y me llena de nostalgia
    • YUI también estaba adelantado a su época
    • La ingeniería de Yahoo era realmente excelente, y da pena que se haya venido abajo por fracasos de gestión

  • Es una buena recopilación de recursos, así que la agregué a marcadores
    Comparto algunos sitios parecidos

  • Cuanta más experiencia acumulas, menos dependes de los patrones de diseño
    Los juniors suelen pensar que aprender patrones es un atajo para crecer profesionalmente, pero muchas veces lo que hacen es aumentar la complejidad
    Lo que de verdad importa es entender la esencia del problema y las estructuras de datos
    Por ejemplo, al buscar elementos en común entre dos arreglos, un patrón simple como usar un HashMap para reducirlo a O(n) resulta mucho más útil
    Esto ni siquiera tiene nombre, pero en la práctica es un patrón clave que se usa todos los días
    Al final, lo importante son los principios y el contexto, no la forma de manual

    • Los patrones sí tienen valor como lenguaje común
      Si dices “hice un singleton”, se entiende de inmediato
      Pero confiar ciegamente en la herramienta es un problema
    • Lo de usar un HashMap que se mencionó arriba, en el mundo de bases de datos se llama hash join
      También se puede ver en el planner de consultas de Postgres
    • No tiene nada de vergonzoso usar términos como “factory”
      Solo que al nombrar el código conviene hacerlo de forma descriptiva
    • La optimización usando HashMap también puede verse como una forma de programación dinámica
      Conviene aprenderla practicando Leetcode
    • Más importante que los patrones de diseño en sí es el patrón de cómo aplicar patrones
      Recomiendan Organisational Patterns (James Coplien, Neil Harrison), un libro que trata no solo patrones técnicos sino también organizacionales
      Enlace al resumen

  • En la universidad, por casualidad tomé una clase de patrones impartida directamente por Ralph Johnson,
    y fue una de las clases más útiles de mi vida
    Wiki de Ralph Johnson

  • Existe una frase: “Design Patterns are a sign of missing language features”
    Es decir, si el lenguaje tuviera suficiente capacidad expresiva, quizá no harían falta esos patrones
    Material relacionado: C2 Wiki, artículo de Norvig, post de Medium

  • Este sitio es una recopilación de tutoriales bien organizada, pero se extraña que no muestre la estructura jerárquica de conexiones entre patrones, como en 『A Pattern Language』 de Christopher Alexander
    Originalmente, los patrones adquieren significado dentro de relaciones entre niveles superior e inferior, pero en los libros técnicos ese contexto suele perderse
    También estaría bien que se explicara con más claridad qué problema resuelve cada patrón

    • Si miras los ejemplos de 『A Pattern Language』, cada patrón está conectado orgánicamente con otros patrones
      Por ejemplo, “Short Passages” se conecta con “Flow Through Rooms”, “Building Thoroughfare” y otros
      Esa estructura es la verdadera fuerza de un lenguaje de patrones

  • Si se abusa de los patrones, el resultado es un código lento y difícil de mantener

    • Los patrones son más efectivos cuando se descubren de forma natural en el proceso de resolver un problema
      Intentar resolver por adelantado problemas que no existen solo agrega complejidad
    • Al final, brillan solo cuando se usan bien

  • Desde la perspectiva de POSD (Principles of Software Design), los patrones útiles serían los siguientes

    • Module Pattern
    • Factory Pattern (factory functions)
    • Mediator/Middleware Pattern (en forma de pipeline de funciones)
    • Hooks Pattern
    • Container/Presentational Pattern
      En cambio, Singleton, Mixin, Observer y otros requieren cuidado porque pueden provocar más complejidad o dependencia de estado global
    • Hubo un comentario preguntando qué era POSD

  • Este sitio se siente más enfocado en la amplitud que en la profundidad, así que conserva un aire de 2017
    Lo realmente importante es dominar las bases para trabajar con immutable data
    Practicar escribir código usando solo métodos de array, sin for, ayuda bastante

    • Antes usé ClojureScript, y era muy bueno para trabajar con datos inmutables
      En JS, Object.freeze tiene limitaciones, y un enfoque como el de ramdajs, que devuelve objetos nuevos, resulta más realista
      Gracias a la sintaxis moderna de JS, hoy solo algunas funciones de ramdajs siguen siendo especialmente útiles
    • Este post me dan ganas de documentar mis propios patrones