Como estamos transformando uma linguagem visual em componentes

Matuzalém Teles
Liferay Engineering Brazil
5 min readApr 6, 2018

Talvez você esteja esperando ver códigos nesse artigo, mas pode tirando o cavalo da chuva. Vamos entender como foi e está sendo o processo de desenvolvimento do ecossistema do Clay na Liferay e como isso está nos ajudando a acelerar o desenvolvimento de produtos dentro do Liferay Portal.

Nesse artigo vou comentar algumas partes do desenvolvimento do Clay desde quando um componente é entregue pelo time do Lexicon (Time de design) para o time de Frontend Infrastructure para desenvolvimento até o estágio final.

Clay

Clay é a materialização dos guidelines definidos pelo Lexicon Experience Language da Liferay. Construído com o Bootstrap como base e é composto por HTML, CSS e JS.

Com uma padronização de componentes dentro do Liferay Portal, garantimos que os desenvolvedores de produtos se preocupem apenas em construir suas idéias em cima dos componentes e parem de se preocupar com markup, css e a lógica do comportamento interno do componente. Estamos caminhando para que tenham mais produtividade e que possam desfrutar no desenvolvimento de componentes modernos com Metaljs.

Lexicon

O Lexicon cuida de todo o planejamento e coleta dos casos de uso que um determinado componente irá cobrir em nível global, pensando como serão as interações, casos de acessibilidade e o fornecimento de documentações de boas práticas para o uso do componente e informações que são importantes para o desenvolvimento e implementação.

Com certeza há muito mais detalhes que eles cobrem, mas esse não é o intuito desse artigo. Fica para um outro 🙂.

Criação de markup e estrutura do css

Uma vez que a definição do componente é concluída pelo time do Lexicon, ela é passado para o time de Frontend Infrastructure para a criação do css e markup do componente em HTML.

Temos uma grande preocupação em como o css irá se comportar e como irá ser estruturado, cobrindo guias de práticas de acessibilidade, semântica e legibilidade do código.

Vale ressaltar que temos pessoas apenas cuidando do css e estudando novas possibilidades de melhorias e controle de versão para não ocorrer breaking changes indesejados. O nosso time também ajuda e colabora no desenvolvimento do Bootstrap v4.

Desenvolvimento

Trecho da API do ClayList

Quando começamos a desenhar API’s, é importante que estas façam sentido, deixando claro o que elas fazem e, ao mesmo tempo, garantindo a consistência com o restante dos componentes.

Dentro do Clay components nós começamos a construir toda a base com pequenos componentes como Button, Link, Badge, Checkbox… E indo com componentes mais complexos, seguindo os princípios do Atomic Design. Nossos componentes são formados por átomos, moléculas e organismos. Com essa metodologia conseguimos concentrar o markup em seus respectivos componentes e garantimos que quando mudamos em um átomo, as moléculas e organismos serão refletidos.

No processo do desenvolvimento seguimos toda a documentação que recebemos pelo time do Lexicon para cobrir os casos de uso e construir as API's voltadas para eles. Diferentemente de muitos componentes que dão muito poder para os desenvolvedores personalizarem, seguimos de um pressuposto de fornecer uma API para que faça apenas o que é necessário. Dessa forma, garantimos o que o Lexicon propõe e fazemos com que os nossos desenvolvedores sigam o design system.

É muito importante que se tenha uma comunicação fluida com o time de design para passarmos casos de uso que não fazem sentindo ou que não foram cobertos. Muitos dos componentes podem voltar para revisão nesse estágio.

Documentação

Começamos a trabalhar em documentações e exemplos com Demos, disponibilizamos pequenos snippets de código de como se usar um determinado componente sendo mostrado no site do clay, fornecemos os snippets em Soy, WebComponents e o markup do HTML. Há também Demos em cada pacote com formas mais interativas de uso utilizando o Metal.js.

O Clay está em constante desenvolvimento e é muito importante para que possamos deixar as coisas mais claras para os nossos desenvolvedores e que eles não percam tempo indo em Chats para tirar duvidas ou enviar emails. Ainda temos que trabalhar e melhorar em documentação no momento, mas pretendemos fornecer mais detalhes sobre os componentes e mostrar o poder do que é possível fazer com o Clay css. Estamos estudando em como vamos expor isso para os nossos desenvolvedores para que fique de forma clara. Talvez isto seja um dos maiores desafios nesse estágio.

Futuro

Ainda temos muito para caminhar e alguns componentes para serem trabalhados. No momento desse artigo são 23 componentes. A pretensão é que este número cresça o passar do tempo, cobrindo todos os casos de uso do Liferay Portal.

Em um futuro próximo estaremos disponibilizando o Claycss a partir de um CDN para que outras pessoas possam aproveitar o seu poder e estaremos dando passos mais largos na documentação dos componentes criados com Metaljs e o que você pode aproveitar do css do Clay.

Com certeza, teremos muitos ganhos padronizando os nossos componentes dentro do Liferay Portal, somos uma empresa multinacional e com isso nos ajudará a evoluir mais o Frontend dentro da Liferay e poderemos ter um controle maior da infraestrutura do Portal e mais flexibilidade para fazermos experimentos e avanços.

Open source ❤️ !!

E claro isso tudo está sendo desenvolvido e disponibilizado no Github seguindo a licença BSD. Deixe seus pensamentos e fique a vontade para contribuir. Ficaremos felizes em te ver por lá! 🙂 Abraço do Ray!

community.liferay.com

--

--

Matuzalém Teles
Liferay Engineering Brazil

Frontend infrastructure engineer at Liferay and passionate about photographs.