SlideShare uma empresa Scribd logo
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?
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
Sobre o que não é essa talk?
c
Arquitetura de Componentes
Sobre o que não é essa talk?
Frameworks
Back to basics
Como fazíamos páginas?
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)
Arquitetura de Componentes
Progressive Web Apps, Server
side rendering, etc...
O que é um componente?
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
Arquitetura de Componentes
O que é?
Arquitetura de Componentes
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.
Patterns
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
Boas Práticas
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>
Atomic Design
Boas Práticas
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

Mais conteúdo relacionado

Semelhante a Raphael Moraes - Large-Scale Javascript Arquitetura de componentes genéricos.pdf

Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
Herval Freire
 
Apresentação Introdução Design Patterns
Apresentação Introdução Design PatternsApresentação Introdução Design Patterns
Apresentação Introdução Design Patterns
Lucas Simões Maistro
 

Semelhante a Raphael Moraes - Large-Scale Javascript Arquitetura de componentes genéricos.pdf (20)

Habilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dadosHabilidades necessárias para integrar aplicativos e dados
Habilidades necessárias para integrar aplicativos e dados
 
Domain-Driven Design
Domain-Driven DesignDomain-Driven Design
Domain-Driven Design
 
Modelagem de dados
Modelagem de dadosModelagem de dados
Modelagem de dados
 
Componentes Transformers: Combinando o melhor de cada framework
Componentes Transformers: Combinando o melhor de cada frameworkComponentes Transformers: Combinando o melhor de cada framework
Componentes Transformers: Combinando o melhor de cada framework
 
3 oo-concepts
3 oo-concepts3 oo-concepts
3 oo-concepts
 
5507 os principais design patterns
5507   os principais design patterns5507   os principais design patterns
5507 os principais design patterns
 
Net uma revisão sobre a programação orientada a objetos
Net   uma revisão sobre a programação orientada a objetosNet   uma revisão sobre a programação orientada a objetos
Net uma revisão sobre a programação orientada a objetos
 
Banco de dados_orientado_a_objetos
Banco de dados_orientado_a_objetosBanco de dados_orientado_a_objetos
Banco de dados_orientado_a_objetos
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Arquitetura Evolutiva - A retomada do ágil 18 anos depois
Arquitetura Evolutiva - A retomada do ágil 18 anos depoisArquitetura Evolutiva - A retomada do ágil 18 anos depois
Arquitetura Evolutiva - A retomada do ágil 18 anos depois
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
ConnectionDay 2019 - Divinópolis - Transformação digital turbinada
ConnectionDay 2019 - Divinópolis - Transformação digital turbinadaConnectionDay 2019 - Divinópolis - Transformação digital turbinada
ConnectionDay 2019 - Divinópolis - Transformação digital turbinada
 
3 oo-concepts
3 oo-concepts3 oo-concepts
3 oo-concepts
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Arquitetura web para sistemas de negócio
Arquitetura web para sistemas de negócioArquitetura web para sistemas de negócio
Arquitetura web para sistemas de negócio
 
Padrões De Projeto e Anti Patterns
Padrões De Projeto e Anti PatternsPadrões De Projeto e Anti Patterns
Padrões De Projeto e Anti Patterns
 
Apresentação Introdução Design Patterns
Apresentação Introdução Design PatternsApresentação Introdução Design Patterns
Apresentação Introdução Design Patterns
 
Design System: Dominando o Design at Scale
Design System: Dominando o Design at ScaleDesign System: Dominando o Design at Scale
Design System: Dominando o Design at Scale
 
Modelagem de sistemas
Modelagem de sistemasModelagem de sistemas
Modelagem de sistemas
 

Mais de DevCamp Campinas

Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency appDylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
DevCamp Campinas
 
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
DevCamp Campinas
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
DevCamp Campinas
 
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
DevCamp Campinas
 
Eiti Kimura - Analisador de dados automatizado utilizando machine learning
Eiti Kimura - Analisador de dados automatizado utilizando machine learningEiti Kimura - Analisador de dados automatizado utilizando machine learning
Eiti Kimura - Analisador de dados automatizado utilizando machine learning
DevCamp Campinas
 
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
DevCamp Campinas
 
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
DevCamp Campinas
 

Mais de DevCamp Campinas (20)

Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency appDylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
Dylan Butler & Oliver Hager - Building a cross platform cryptocurrency app
 
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
Thaissa Bueno - Implantando modelos Deep Learning em cluster Kubernetes com G...
 
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
Gabriel Pacheco e Felipe Cardoso - Nextel + React Native: Lições aprendidas a...
 
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
Everton Gago - Ciência de Dados: O melhor caminho para alinhar o produto com ...
 
Eiti Kimura - Analisador de dados automatizado utilizando machine learning
Eiti Kimura - Analisador de dados automatizado utilizando machine learningEiti Kimura - Analisador de dados automatizado utilizando machine learning
Eiti Kimura - Analisador de dados automatizado utilizando machine learning
 
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
Bárbara Silveira e Giovanna Victorino - Desenvolva também para TVs (AppleTV e...
 
Leonardo Zamariola - High Order Functions e Functional Interfaces
Leonardo Zamariola - High Order Functions e Functional InterfacesLeonardo Zamariola - High Order Functions e Functional Interfaces
Leonardo Zamariola - High Order Functions e Functional Interfaces
 
Lara Rejane - Gestão ágil de pessoas
Lara Rejane - Gestão ágil de pessoasLara Rejane - Gestão ágil de pessoas
Lara Rejane - Gestão ágil de pessoas
 
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
Eduardo Merighi - Escalabilidade tecnológica de uma fintech: como a Neon faz?
 
Erick Zanardo - Desenvolvimento de Jogos em Flutter
Erick Zanardo - Desenvolvimento de Jogos em FlutterErick Zanardo - Desenvolvimento de Jogos em Flutter
Erick Zanardo - Desenvolvimento de Jogos em Flutter
 
Davi Silva e Izabela Amaral - Oferecendo soluções de negócio mais assertivas ...
Davi Silva e Izabela Amaral - Oferecendo soluções de negócio mais assertivas ...Davi Silva e Izabela Amaral - Oferecendo soluções de negócio mais assertivas ...
Davi Silva e Izabela Amaral - Oferecendo soluções de negócio mais assertivas ...
 
Andre Fossa - Reinventando a Nextel: como a transformação digital ajudou a qu...
Andre Fossa - Reinventando a Nextel: como a transformação digital ajudou a qu...Andre Fossa - Reinventando a Nextel: como a transformação digital ajudou a qu...
Andre Fossa - Reinventando a Nextel: como a transformação digital ajudou a qu...
 
Alceu Bravo - Intraempreendedorismo – desafios da inovação para quem tem base...
Alceu Bravo - Intraempreendedorismo – desafios da inovação para quem tem base...Alceu Bravo - Intraempreendedorismo – desafios da inovação para quem tem base...
Alceu Bravo - Intraempreendedorismo – desafios da inovação para quem tem base...
 
Fábio Lima Santos - Desenhando aplicações que evoluem
Fábio Lima Santos - Desenhando aplicações que evoluemFábio Lima Santos - Desenhando aplicações que evoluem
Fábio Lima Santos - Desenhando aplicações que evoluem
 
João Emilio Santos Bento da Silva - Estratégia de APIs
João Emilio Santos Bento da Silva - Estratégia de APIsJoão Emilio Santos Bento da Silva - Estratégia de APIs
João Emilio Santos Bento da Silva - Estratégia de APIs
 
José Guedes - Como encaramos quando as coisas dão errado
José Guedes - Como encaramos quando as coisas dão erradoJosé Guedes - Como encaramos quando as coisas dão errado
José Guedes - Como encaramos quando as coisas dão errado
 
Rafael Calsaverini - Inteligência Artificial para recrutar pessoas – Tecnolog...
Rafael Calsaverini - Inteligência Artificial para recrutar pessoas – Tecnolog...Rafael Calsaverini - Inteligência Artificial para recrutar pessoas – Tecnolog...
Rafael Calsaverini - Inteligência Artificial para recrutar pessoas – Tecnolog...
 
Isac Sacchi e Souza - Migrando uma infraestrutura mutável para imutável e Kub...
Isac Sacchi e Souza - Migrando uma infraestrutura mutável para imutável e Kub...Isac Sacchi e Souza - Migrando uma infraestrutura mutável para imutável e Kub...
Isac Sacchi e Souza - Migrando uma infraestrutura mutável para imutável e Kub...
 
Ingrid Barth - Blockchain, Criptomoedas e a nova maneira de entender o dinheiro
Ingrid Barth - Blockchain, Criptomoedas e a nova maneira de entender o dinheiroIngrid Barth - Blockchain, Criptomoedas e a nova maneira de entender o dinheiro
Ingrid Barth - Blockchain, Criptomoedas e a nova maneira de entender o dinheiro
 
Igor Hjelmstrom Ribeiro - Bitcoin: desafios de segurança frente à ataques de...
Igor Hjelmstrom Ribeiro -  Bitcoin: desafios de segurança frente à ataques de...Igor Hjelmstrom Ribeiro -  Bitcoin: desafios de segurança frente à ataques de...
Igor Hjelmstrom Ribeiro - Bitcoin: desafios de segurança frente à ataques de...
 

Raphael Moraes - Large-Scale Javascript Arquitetura de componentes genéricos.pdf

  • 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?
  • 3.
  • 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
  • 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
  • 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”
  • 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
  • 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