Por trás do Liferay Grow Together
Grow Together é um programa que cria um ambiente de compartilhamento de conhecimento na Liferay.
Você já imaginou, como os funcionários da Liferay tem uma diversidade de conhecimentos técnicos? E que pode estar sentado ao lado de alguém que tenha as habilidades que você gostaria de conhecer ?
Desta maneira, para criar um ambiente de compartilhamento de conhecimento, o time brasileiro de engenharia teve a ideia de criar uma plataforma, para centralizar possíveis mentores, aprendizes entre várias habilidades a serem escolhidas.
Sobre o time
Nesta iniciativa, temos um time pequeno porém com várias pessoas de peso que são Luciana Silva e Thiago Farias
Desenvolvedores: Adriano Interaminense, Keven Leone e Mateus Castro.
Designer: Victor Santos.
Todos fizeram um trabalho incrível. Também estamos disponíveis para aceitar solicitações de mudanças (PR) com correções de bugs e no desenvolvimento de novas estórias.
Desenvolvimento
Quando estávamos projetando o Liferay Grow Together, pudemos optar por tecnologias a serem escolhidas. E como somos uma empresa focada em aplicações de código aberto, este projeto não poderia ser diferente.
Hospedamos todo o código em nosso repositório liferay-labs-br no github, como um projeto público.
Você pode ver o código aqui: https://github.com/liferay-labs-br/liferay-grow
E buscamos utilizar as tecnologias mais recentes do mercado, algumas destas estão listadas abaixo.
Principais Bibliotecas
- Apollo React
- Apollo Server Express
- Express
- GraphQL
- Typescript
- ClayUI
Principais Módulos
Usamos algumas bibliotecas para lidar com a Qualidade de Código, elas são importantes para manter o código estável e garantir que as melhores práticas para um código limpo estão sendo seguidas.
- Eslint → Analisador de Código
- Prettier → Formatador de Código
- EditorConfig → Ajuda a manter a consistência de configurações e de estilo de código nas principais IDE como o (VScode), ex: configuração de espaçamento de tabs, quando usar aspas simples e duplas entre outros.
Estamos usando Yarn Workspace para dividir o código do projeto em responsabilidades, com 3 principais pacotes: eslint-config-node, backend, frontend. Você pode entender melhor o que cada um faz abaixo.
Pacotes
Backend
Inclui todo código em TypeScript , além do TypeORM, TypeGraphQL e Express para gerenciar os dados necessários para o Frontend.
O código em geral é simples de entender, temos o Express JS, que é o mais conhecido Framework Javascript para construção de Web Services. Express lida com todas as respostas e requisições e vindas do Frontend.
TypeORM: É um ORM (Mapeamento de Objeto Relacional) que roda no NodeJS, Browser, Mobile e outras plataformas e pode ser usado com TypeScript e JavaScript. É um ORM muito popular e completo. No Grow Together estamos usando o MySQL como banco de dados, mas que pode ser facilmente substituído por Postgres, Oracle, MSSQL e até mesmo MongoDB realizando pequenas modificações.
TypeGraphQL: É uma biblioteca que faz a ponte com as tipagens do GraphQL e que torna esse processo incrível, definindo um esquema (schema) utilizando decoradores de classes.
Frontend
Como os desenvolvedores desta iniciativa são Frontend, decidimos continuar com React como biblioteca de interface, a mesma que utilizamos no Liferay Portal. mas com uma grande diferença.
O Grow Together utiliza Next.JS, para quem nunca ouviu falar, aqui um breve resumo:
Next.js provê a melhor experiência para desenvolvedores com todas as necessidades que você utiliza em produção: "hybrid static and server rendering", suporte a TypeScript, build inteligente e pre-fetching, além de outros. Com nenhuma configuração necessária.
Mesmo não utilizando todas as funcionalidades do Next.JS, ainda sim é uma ótima opção para criação de aplicações em React nos dias de hoje.
Apollo GraphQL é uma biblioteca de gerenciamento de estado para JavaScript, que possibilita o gerenciamento de dados locais e remotos com GraphQL. Usado para requisições, cache e manipulação de dados. Tudo feito automaticamente enquanto você atualiza a Interface.
Neste projeto o Apollo é utilizado para requisitar os dados do Backend, mas sem a utilização do gerenciamento do estado, já que usamos a própria Context API do React.
Apollo é uma ótima escolha para fazer requisições a servidores com GraphQL e tem funcionalidades incríveis que muito ajudam no projeto.
ClayUI: ClayUI é uma biblioteca de interfaces criada pela Liferay implementando o Lexicon Experience Language. Construída no topo do Bootstrap e acessível por meio do HTML, CSS e JS.
Clay é bastante simples e possui uma interface agradável, é a mesma biblioteca utilizada no Liferay Portal, isso nos ajuda, já que utilizamos o diariamente e conhecemos bem sobre como e quando usar cada componente.
Revisão de Código
Temos todo o cuidado quando enviamos código para nosso repositório no Github, normalmente revisamos todo código enviado pelo time e dependendo da necessidade aceitamos diretamente via push.
Mas é muito importante que os códigos cheguem por meio de Pull Requests. Assim podemos manter o rastreamento do código juntamente de sua Issue, e também o Github Actions é acionado automaticamente, garantindo que códigos mal-formatados ou que prejudiquem o funcionamento da aplicação seja inserido no repositório.
Integração Contínua (CI)
Para lidar com CI, utilizamos Github Actions para aplicar algumas verificações no código.
Principalmente:
- Checagem de código com Eslint
- Teste unitário (Backend e Frontend)
- Build do código
Precisamos garantir que todas as validações estejam válidas, para aceitar solicitação de mudanças (PR), além dos cuidados relacionados à qualidade de código e integridade.
Estes passos nos ajudam para execução do código em servidores locais, evitando erros no processo de build.
Deployment
Atualmente a parte de deploy é feita manualmente, este é um grande ponto a ser melhorado e que será priorizado no futuro.
A aplicação utiliza docker-swarm para subir os containers com os módulos de: Frontend, Backend, Banco de Dados(MySQL) e NGINX que lida com o tráfego das aplicações internamente.
A experiência do time
A interação do time foi muito importante, todos tiveram um papel fundamental para a qualidade do projeto, em poucas palavras Adriano e Mateus compartilham como foi esta experiência de desenvolver este side project na Liferay.
Adriano Interaminense: Desenvolver o Liferay Grow foi uma experiência incrível, por conseguir utilizar diversas tecnologias atuais do mercado, e consequentemente isso nos ajudou muito a desenvolver um produto escalável em curto tempo. A dinâmica entre os desenvolvedores, designer e stakeholders foi tão fluida que tínhamos apenas uma reunião oficial por semana e o time conseguiu se comunicar bem.
Mateus Domingos: A ideia da ferramenta foi muito bem aceita pelas lideranças e colaboradores de diversos países, tornando-se uma ferramenta global.
Trabalhar com TypeScript de ponta a ponta foi incrível pra mim. Também estamos trabalhando com tecnologias atuais como NextJS e Express + GraphQL.
Próximos Passos
A plataforma está em fase de testes, feedbacks e Brainstorms estão sendo realizados visando a melhoria da ferramenta.
Nosso principal desafio a seguir é facilitar a comunicação entre os interessados em ensinar e participar destas oficinas. Além de outros feedbacks que estão sendo analisados que podem gerar possíveis features.
