Ir para o conteúdo

Prototype

Introdução

O padrão de projeto Prototype é um padrão criacional que permite criar novos objetos copiando uma instância existente (o protótipo). Ele é útil para situações em que a criação direta de objetos pode ser custosa ou complexa, oferecendo um meio eficiente de reutilizar estruturas e comportamentos com dados distintos.

No projeto, o componente ProfileHeader pode ser associado ao padrão Prototype, pois utiliza uma estrutura única para representar perfis com diferentes dados (como nome e avatar). Essa reutilização promove consistência e facilita a manutenção do código.

Metodologia

  • Processo de Trabalho: Foi utilizado um design modular, com foco na reutilização de componentes, especialmente para a interface do usuário.
  • Ferramentas Utilizadas: O projeto foi desenvolvido em React Native, utilizando conceitos de componentes funcionais e gerenciamento de estilo através de StyleSheet.
  • Justificativa: A reutilização da estrutura do ProfileHeader como um protótipo para exibir perfis diferentes promove modularidade, clareza e evita duplicação de código.

Implementações no Código Fonte

Componente ProfileHeader

Tecnologia: React Native

O ProfileHeader aceita informações como name e avatarUrl e renderiza diferentes comportamentos (mostrando uma imagem ou um ícone). O padrão Prototype pode ser associado, pois o componente funciona como um protótipo reutilizável para diferentes representações de perfil, alterando os dados passados como propriedades.

Implementação em Código **Imagem da Implementação:** ![Prototype - ProfileHeader](assets/Prototype%20-%20ProfileHeader.png)

Autores: Kauan Eiras

Justificativa Técnica

  • Prós:

    • O padrão Prototype apresenta eficiência na criação de novos perfis por clonagem, com estrutura similar mas dados diferentes.
    • Redução de código duplicado na estrutura do header.
    • Facilita manutenção centralizada da estrutura base.
    • Performance melhorada evitando recriação completa.
    • Consistência visual entre diferentes perfis.

  • Contras:

    • Pode adicionar complexidade para perfis simples.
    • Pode dificultar rastreamento de mudanças entre clones.

Referências

  1. HEWAWASAM, Lakindu. Using GoF design patterns with React. Blog Bits and Pieces, 4 maio 2023. Disponível em: https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147. Acesso em: 17 dez. 2024.
  2. Dev Junior Alves. Como aplicar Design Patterns no React com hooks?!. Youtube, 23 maio 2024. Disponível em: https://www.youtube.com/watch?v=kK-4Cpt5_o4. Acesso em: 17 dez. 2024.
  3. AWAN, Talha. GOF Design Patterns in React JS. TecHighness. 21 maio 2022. Disponível em: https://www.techighness.com/post/gof-design-patterns-react-js/. Acesso em: 02 jan. 2024.

Histórico de Versões

Versão Data da Alteração Comentário Autor(es) Revisor(es) Data de Revisão
1.0 06/01/2025 Criação do Documento Kauan Eiras Guilherme Westphall 06/01/2025