React Recife #1 | Componentes Multi Camadas

Transcript

1. Diego Nascimento Infraestrutura de Frontend @ Liferay Inc. Componentes multi camadas
2. 2 Sumário: ❏ Componentes? ❏ Histórias da vida real ❏ Problemas que você pode se meter durante a criação de um design system e uma biblioteca de componentes ❏ Tamanho dos produtos ❏ Para resolver esse problema, pensamos em componentes de baixo e alto nível ❏ Exemplos ❏ Benefícios ❏ Desvantagens +
3. L I F E R A Y “Com o design baseado em componentes, o desenvolvimento se torna uma tarefa de composição, ao invés de estar reinventando a roda várias vezes e ter não somente inconsistências no código, mas nas interações.” Componentes?
4. L I F E R A Y Histórias da vida real
5. L I F E R A Y liferay.design/lexicon/
6. L I F E R A Y next.clayui.com
7. Problemas que você pode se meter durante a criação de uma biblioteca de componentes:
8. L I F E R A Y Algumas vezes, faz sentido expandir a API de um componente ou a lógica da interface do usuário especial exclusiva para uma área específica do código. O problema é quando esses campos extras e componentes bifurcados/únicos se acumulam ao longo do tempo com o custo de consistência e manutenção.
9. L I F E R A Y Nós nos esforçamos para manter um alto padrão de qualidade para o código de nossa biblioteca de componentes. Os componentes devem suportar a internacionalização, parecer corretos nos idiomas RTL e estar acessíveis aos leitores de tela como Chromevox. Eles também devem ter documentação e testes detalhados. Já pensasse na complexidade disso?
10. L I F E R A Y Tamanho dos Produtos e Escalabilidade
11. L I F E R A Y L I F E R A Y P R O D U C T S
12. L I F E R A Y São quase 10000 módulos de Javascript de browser em um único produto!
13. Vamos repensar isso aí! 13 Em 2019, repensamos na estratégia dos nossos processos de Design e Front-end e conseguimos chegar num modelo em que ambas as partes(pessoa desenvolvedora e designer) conseguissem trabalhar de forma mais flexível, sem comprometer a linguagem visual que é descrita pela empresa.
14. L I F E R A Y Para resolver esse problema, pensamos em componentes de baixo e alto nível
15. L I F E R A Y O que seria um componente de alto e baixo nível?
16. L I F E R A Y Um componente de baixo nível seria um componente que o propósito dele é servir como um bloco de construção para um componente maior(que ele pode fazer parte). Isso faz com que o desenvolvedor tenha mais flexibilidade no desenvolvimento e consiga formar mais variações do mesmo. Baixo Nível
17. L I F E R A Y Alto Nível Um componente de alto nível funciona de maneira inversa, você passa dados para uma API(que muitas vezes é bastante extensa) para ele se moldar ao que foi definido previamente, entretanto essa estratégia não é muito recomendada se você estiver num projeto em que estão sendo criadas várias proposições para o Design System.
18. L I F E R A Y Exemplos
21. L I F E R A Y - Oferece aos usuários componentes de alto nível para importar e usar imediatamente. - Oferece aos usuários componentes de baixo nível para criar interações mais complexas. Benefícios
22. L I F E R A Y - Mais linhas de código para manter. - Área de superfície API aumentada, com o requisito correspondente de manter a compatibilidade com versões anteriores. - Risco de expor detalhes da implementação como API de baixo nível. Desvantagens
23. L I F E R A Y - Possíveis cenários de bloqueio ao usar componentes de alto nível. As equipes podem precisar mudar de um componente de alto nível para um cenário de composição, caso precisem adicionar algo que ainda não foi coberto. Desvantagens
24. L I F E R A Y Exemplos: MUI, Ant Design. Facebook e Twitter com seus building blocks. Outros lugares onde esse conceito também é aplicado:
25. Obrigado! #LiferayMeetup #ReactRecife liferay.design twitter.com/liferayeng twitter.com/liferay_br