A palestra discute arquitetura de componentes em JavaScript, apresentando conceitos, padrões e boas práticas para desenvolvimento modular e independente de componentes. O palestrante explica como componentes autônomos e fracamente acoplados permitem deploy e manutenção mais fáceis e desenvolvimento distribuído, e discute padrões como Composite, Observer, Mediator e outros.

1. Large Scale Javascript
Arquitetura de Componentes
Raphael Moraes
DevCamp - Agosto

2. Líder global em
marketplaces móveis
A Movile é líder em marketplaces
móveis e nosso sonho é fazer a vida de 1
bilhão de pessoas melhor por meio dos
nossos apps.
+150MM de pessoas mensalmente
+1.600 pessoas em 15 escritórios
#1 plataforma de delivery de comida na América Latina
#1 plataforma de venda de ingressos na América Latina
#2 aplicativo rentável globalmente para crianças
#1 plataforma de mensageria do Brasil (1Bi por mês!!!)
Quem é Movile?

4. Engenheiro de Frontend @ Wavy Global
Palmeirense
Javascriptero
Sofredor de CSS
Tattoos nerds só para ser front

5. Sobre o que é essa talk?

6. Arquitetura de Componentes
Sobre o que é essa talk? FASES
Conceitos
Contextualizar e aprofundar
Arquitetura de Componentes
Que diabos é esse negócio?
Patterns
Padrões que posso utilizar para melhorar o molde
do meu componente
Boas Práticas
Como fazer bonito e receber um aumento do meu
chefe
PALESTRA

7. Sobre o que não é essa talk?
c

8. Arquitetura de Componentes
Sobre o que não é essa talk?
Frameworks
Back to basics

9. Como fazíamos páginas?

10. Como fazíamos páginas?
Conceitos
Biblioteca
Wrapper de acesso a DOM
Compatível com a maioria dos
browsers

11. Como fazíamos páginas?
Conceitos
Frameworks completas
Acesso a API’s do Browser
Estado ativo e não mais passivo

12. Como fazemos páginas?
Conceitos
Frameworks completas (- React)
Arquitetura de Componentes
Progressive Web Apps, Server
side rendering, etc...

13. O que é um componente?

14. O que é um componente?
Conceitos
Que faz parte de alguma coisa; que pode ser utilizado na
composição de; que é uma parcela da constituição de um
sistema
Grande Aurélio, Dicionário

15. Arquitetura de Componentes

16. O que é?
Arquitetura de Componentes
Uma arquitetura , Capitão Óbvio
Autonomo
Fracamente
Acoplado
Perfomático
Arquitetura

17. Quais as vantagens?
The good part
Deployment e Release
Ciclos independentes de deploy e release
Fácil deploy
Querendo ou não um componente é genérico
Manutenibilidade
São aplicações fáceis de dar manutenção por estar
modularizadas
Desenvolvimento Distribuído
Divide and Conquer, favorec times
multidisciplinares

18. Quais as desvantagens?
The bad part
Over-engineering
Usar uma bazuca para matar uma barata.
Missing out
Passar despercebido ao estimar, desenvolver e
testar
Time to Market
CBD geralmente tem um tempo inicial lento, porém
é compensado no futuro por uma manutenibilidade
pouco custosa no futuro
Custo Inicial
Design, Arquitetura e desenvolvimento devem
trabalhar juntos para a construção inicial.

19. Patterns

20. Composite
Patterns
O padrão Composite possibilita a composição de objetos em uma
árvore de estrutura para representar partes da sua hierarquia.
Permitindo tratar objetos e composições de objetos
uniformemente.

21. Observer
Patterns
View
Não bloquear a famosa “thread de UI”
Dependencias
one-to-many dependency entre objetos
Encapsulamento
Hierarquia de Observer com o “core” ou “common”

22. Mediator
Patterns
Many-to-Many
Interações Many-to-Many entre objetos
Independencia
Orquestra como objetos interagem entre si
Desacoplamento
Intermediario para desacoplamento

23. Facade
Patterns
Interface
Provê uma interface unificada para um subsistema
(Uma interface de alto nível)
Desmistificar
Soluções mais simples para sistemas complexos

24. State
Patterns
Single source of truth
Provê um estado imutável para fornecer
informações
Orientado a objeto
Uma máquina de estados baseados em objetos

25. Boas Práticas

26. Atomic Design
Boas Práticas
Atomic Design é um guia de como desconstruir e construir
componentes baseados em um modelo de 5 passos, sendo eles:
● Átomos
● Moléculas
● Organismos
● Templates
● Páginas

27. Atomic Design
Boas Práticas
<div class=”notification”>
Olá, {{user}}
</div>
Átomos
São os nossos Building
Blocks, basicamente são
as nossas tags HTML ou
mesmo fontes, paleta de
cores ou referências de
animação;
Moléculas
Combinações de átomos
com a mentalidade de
fazer uma única função e
fazê-la bem, tem o
propósito de ser
reutilizada;
Organismos
São agrupamento de
moléculas para criar
seções mais complexas de
uma interface, por
exemplo, um header com
inúmeras funções;
Templates
É aqui que vemos o nosso
layout aparecer,
inicialmente usamos um
wireframe e com o passar
das etapas anteriores eles
ganham vida;
Páginas
É a página real baseada
em um template,
substituindo por
conteúdo de verdade, ou
seja,como o usuário irá
vê-la;
<div
class=”notification”>
Olá, {{user}}
</div>

28. Atomic Design
Boas Práticas

29. Block Element Modifier - BEM
Boas Práticas
A sigla BEM significa block, element, modifier e segue
essas propriedades para definir uma nova metodologia
de criação de nomes para classes de folhas de estilo.
A estrutura é simples:
.elementopai,
.elementopai__filho,
.elementopai__filho- -primeiro

30. Perguntas?
Muito Obrigado!
Raphael Moraes
raphael.moraes@movile.com
DevCamp - Agosto