Raphael Moraes - Arquitetura de componentes

Large Scale Javascript
Arquitetura de Componentes
Raphael Moraes
DevCamp - Agosto

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?

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

Sobre o que é essa talk? FASES
Conceitos
Contextualizar e aprofundar
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

Sobre o que não é essa talk?
c

Sobre o que não é essa talk?
Frameworks
Back to basics

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

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

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

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

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

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

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.

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.

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”

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

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

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

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

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>

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

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

Raphael Moraes - Arquitetura de componentes

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Raphael Moraes - Arquitetura de componentes

Semelhante a Raphael Moraes - Arquitetura de componentes (20)

Raphael Moraes - Arquitetura de componentes