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.
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?
3.
4. Engenheiro de Frontend @ Wavy Global
Palmeirense
Javascriptero
Sofredor de CSS
Tattoos nerds só para ser front
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
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
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.
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”
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
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>
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