Patterns.dev

 (patterns.dev)
2 pontos por GN⁺ 2025-12-12 | 1 comentários | Compartilhar no WhatsApp
  • Recurso online gratuito sobre padrões de arquitetura de aplicações web e otimização de desempenho, com conteúdo de aprendizado focado em JavaScript e frameworks modernos
  • Vanilla JavaScript, React e Vue com organização sistemática de padrões de design, renderização, carregamento e técnicas de melhoria de performance específicas para cada um
  • Reutilização de código, gerenciamento de estado, estratégias de renderização e otimização de bundles, com exemplos práticos e suporte a ambiente de exercícios no CodeSandbox
  • Os padrões de design são apresentados como ferramentas de referência, não como regras, ajudando a resolver problemas recorrentes e a entender semelhanças no código
  • Material focado em escalabilidade estrutural e melhoria de desempenho para grandes aplicações web, incluindo sintaxe moderna ES2017+ e implementações baseadas em React Hooks

Visão geral

  • Patterns.dev é um recurso online gratuito para melhorar a arquitetura de aplicações web, estruturado em torno de padrões de design, renderização e desempenho
  • Explica o objetivo e a forma de uso de cada padrão, com exemplos de implementação em ambientes Vanilla JavaScript, React e Vue.js
  • Oferece download em eBook ou PDF e leitura online

Padrões de JavaScript

  • Disponibiliza uma coleção de padrões focados em JavaScript básico e Node.js
    • Inclui padrões clássicos de design como Singleton, Proxy, Prototype, Observer, Module, Mixin, Mediator, Flyweight e Factory
  • Reúne diversos padrões de otimização de desempenho e carregamento
    • Dynamic Import, Route-based Splitting, Tree Shaking, Prefetch, Preload, PRPL, otimização de terceiros e mais
  • Usa recursos modernos do navegador, como animações de transição de página com a View Transitions API, virtualização de listas e compactação de código

Padrões de React

  • Oferece padrões estruturais e estratégias de renderização com base em React e Next.js
    • Inclui padrões de composição como Container/Presentational, HOC, Render Props, Hooks e Compound
  • Comparação entre formas de renderização
    • Client-side, Server-side, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR e mais
  • Fornece guias sobre React Server Components e otimização de Core Web Vitals no Next.js
  • O documento React Stack Patterns (2025/2026) aborda as stacks mais recentes, incluindo framework, ferramentas de build, roteamento, gerenciamento de estado e integração com IA

Padrões de Vue

  • Padrões dedicados ao Vue.js com foco na estrutura de componentes e gerenciamento de estado
    • Components, Async Components, Composables, Container/Presentational, Data Provider, Dynamic Components e mais
  • Apresenta uma estrutura de código moderna usando a Composition API e a sintaxe <script setup>
  • Inclui padrões avançados como Provide/Inject, Renderless Components e Render Functions

Filosofia de aplicação dos padrões

  • O Patterns.dev apresenta os padrões como ferramentas de referência, não como normas
    • Fornece soluções comuns para problemas recorrentes, mas sem impor sua aplicação em todas as situações
  • O objetivo dos padrões de design é comunicar de forma compreensível as semelhanças entre problemas de código
  • Destaca a importância de padrões específicos de linguagem ou framework, propondo uma abordagem moderna que vai além dos padrões GoF tradicionais

Suporte para estudo e prática

  • Permite verificar a implementação real de cada padrão por meio de exemplos práticos no CodeSandbox
  • Oferece materiais visuais com animações para facilitar a compreensão dos conceitos
  • Apresenta formas de melhorar a eficiência do carregamento de código e a experiência do usuário por meio de padrões de performance web

Resumo das principais características

  • Implementações baseadas em sintaxe ES2017+ otimizadas para ambientes JavaScript modernos
  • Ênfase em otimização para desenvolvedores React e melhoria de performance web
  • Destaca a interpretação moderna dos padrões de design, priorizando a praticidade em vez da complexidade
  • Fornece um guia prático para escalabilidade e melhoria de desempenho em grandes aplicações web

Leituras relacionadas

1 comentários

 
GN⁺ 2025-12-12
Comentários do Hacker News

  • Quando eu desenvolvia apps corporativos em .NET em um emprego antigo, os design patterns eram realmente úteis
    Como várias equipes usavam os mesmos padrões, o código era familiar e os novos projetos também tinham uma estrutura consistente
    Mas agora estou lidando com um app JS com mais de 10 anos, e o abuso de getters/setters no estilo Java EE e uma estrutura complexa de factories acabam sendo mais prejudiciais
    Quando se abusa de padrões sem entender por que eles são usados, o resultado pode ser muito pior do que simplesmente escrever um código fácil de ler (lembra o princípio YAGNI)

    • Acho que padrões não são algo que se “cria”, mas algo que se “descobre”
      Como desenvolvedor, em algum momento você acaba chegando naturalmente a estruturas como Adapter, Builder, Iterator
      O verdadeiro valor dos design patterns está em dar uma linguagem comum a esses padrões descobertos, permitindo uma comunicação mais fácil entre as pessoas
    • Muitos padrões só fazem sentido em linguagens com muitas restrições, como C# ou Java
      Em linguagens simples como C, Go e JavaScript, dá para resolver de forma muito mais simples
    • Vejo com frequência desenvolvedores vindos de ambientes corporativos tentando forçar os mesmos padrões OOP em JS
      Isso não combina com a filosofia da linguagem
    • Eu também já apliquei padrões com boas intenções e acabei criando um pesadelo de manutenção
      No começo parece limpo, mas com o tempo a lógica fica espalhada e, quando surgem novos requisitos, o padrão quebra com facilidade
      No fim, você sente falta de um simples switch
    • Entre as pessoas que dizem que padrões não servem para nada, muitas vezes há quem não tenha experiência com sistemas grandes
      É como a diferença de perspectiva entre quem só constrói apps pequenos e quem ergue arranha-céus

  • Antigamente existia a Yahoo Design Pattern Library
    Era focada em padrões de UX e organizava bem vários casos de como induzir comportamentos do usuário (por exemplo, dar notas)
    Link original / arquivo na web

    • Um projeto open source parecido é o The Component Gallery
      É um repositório que reúne componentes de UI de mais de 90 design systems, e também é ótimo para estudar diretrizes de a11y/ARIA
      component.gallery
    • Termos como “accordion” e “carousel” foram padronizados graças a essa biblioteca
      Uma linguagem comum aumentou a produtividade
    • Dá para sentir o clima da web antiga, e isso traz uma nostalgia forte
    • O YUI também estava à frente do seu tempo naquela época
    • A engenharia do Yahoo era realmente excelente, então é uma pena que tudo tenha desmoronado por falhas de gestão

  • É uma boa coletânea de material, então adicionei aos favoritos
    Compartilho alguns sites parecidos

  • Quanto mais experiência você ganha, menos depende de design patterns
    Juniores costumam achar que aprender padrões é um atalho para acelerar a carreira, mas muitas vezes isso só aumenta a complexidade
    O que realmente importa é entender a essência do problema e a estrutura dos dados
    Por exemplo, ao encontrar itens em comum entre dois arrays, um padrão simples de usar HashMap para reduzir para O(n) é muito mais útil
    Isso nem tem nome, mas na prática é um padrão essencial usado todos os dias
    No fim, o que importa são os princípios e o contexto, não a forma de livro-texto

    • Padrões têm valor como linguagem comum
      Se alguém diz “fiz um singleton”, você entende na hora
      Mas confiar cegamente na ferramenta é um problema
    • O uso de HashMap mencionado acima é chamado de hash join no mundo dos bancos de dados
      Também dá para ver isso no planner de consultas do Postgres
    • Não há motivo para ter vergonha de usar termos como “factory”
      Só é melhor dar nomes descritivos ao código
    • A otimização com HashMap também pode ser vista como uma forma de programação dinâmica
      Vale a pena aprender isso ao praticar Leetcode
    • Mais importante do que os próprios design patterns é o padrão de como aplicar padrões
      Como livro que trata não só de padrões técnicos, mas também organizacionais,
      recomendam Organisational Patterns (James Coplien, Neil Harrison)
      link com resumo

  • Na faculdade, por acaso assisti a uma disciplina de padrões dada pelo próprio Ralph Johnson,
    e foi uma das aulas mais úteis da minha vida
    Wiki de Ralph Johnson

  • Existe a frase: “Design Patterns are a sign of missing language features”
    Ou seja, se a linguagem fosse expressiva o bastante, talvez os padrões nem fossem necessários
    Material relacionado: C2 Wiki, artigo de Norvig, post no Medium

  • Este site é uma coletânea bem organizada de tutoriais, mas deixa a desejar por não mostrar a estrutura hierárquica de conexões entre padrões, como em 『A Pattern Language』 de Christopher Alexander
    Originalmente, padrões ganham significado dentro de relações de nível superior e inferior, mas esse contexto costuma faltar em livros técnicos
    Também seria bom se ficasse mais claro qual problema cada padrão resolve

    • Nos exemplos de 『A Pattern Language』, cada padrão está organicamente conectado a outros padrões
      Por exemplo, “Short Passages” se conecta a “Flow Through Rooms”, “Building Thoroughfare” e outros
      Essa estrutura é a verdadeira força de uma pattern language

  • Quando se abusa de padrões, o resultado é um código lento e difícil de manter

    • Os padrões são mais eficazes quando são descobertos naturalmente no processo de resolver um problema
      Tentar resolver antecipadamente um problema que nem existe só traz complexidade
    • No fim, eles só brilham quando usados no contexto certo

  • Do ponto de vista de POSD (Principles of Software Design), os padrões úteis são os seguintes

    • Module Pattern
    • Factory Pattern (factory functions)
    • Mediator/Middleware Pattern (na forma de pipeline de funções)
    • Hooks Pattern
    • Container/Presentational Pattern
      Já Singleton, Mixin, Observer etc. exigem cuidado, pois podem causar aumento de complexidade ou dependência de estado global
    • Houve um comentário perguntando o que é POSD

  • Este site prioriza mais amplitude do que profundidade, então ainda passa uma sensação de 2017
    O realmente importante é dominar o básico de trabalhar com immutable data
    Praticar escrever código só com métodos de array, sem for, ajuda bastante

    • Já usei ClojureScript antes, e era ótimo para lidar com dados imutáveis
      Em JS, Object.freeze tem limitações, e uma abordagem como a do ramdajs, que retorna novos objetos, é mais realista
      Graças à sintaxe moderna do JS, hoje só algumas funções do ramdajs ainda continuam realmente úteis
    • Este texto me deu vontade de documentar meus próprios padrões