# Diagnóstico do Ecossistema Agrotis Frontend
>[color=#00796b]Este foi um trabalho de pesquisa e diagnóstico realizado com as equipes da [Agrotis - Sistemas para o Agronegócio](https://www.agrotis.com/) buscando entender o **ecossistema frontend** atual nos munindo de informações para arquitetar uma estrutura definitiva o mais unificada possível, motivando os desenvolvedores a manterem sempre boas práticas que facilitam na manutenção de nossos produtos tornando este um ativo para a empresa de desenvolvimento de software e trazendo um dia a dia mais estável, seguro e motivador para se trabalhar, além de uma identidade e experiência que agreguem valor ao produto;

Nosso objetivo aqui é trabalhar de maneira integrada com as necessidades de nossos desenvolvedores e clientes, representadas pelas demandas apresentadas pelos POs aproximando isto das melhores práticas de usabilidade e desenvolvimento de software;

Queremos tornar nosso código enxuto e organizado a ponto de jamais termos que repetir uma linha de código ou vir a precisar refatorar coisas e possamos focar em testes e evoluções na experiência do usuário final que são as principais iniciativas a se adotar para se ter um produto consistente e competitivo no mercado de tecnologia;

Também queremos adotar as melhores tecnologias disponíveis no mercado e ter um ambiente atualizado e motivador para se trabalhar, onde o código desenvolvido se torne um ativo valioso para a empresa, além de trazer melhores práticas e performace do produto.

A construção deste cenário é importante para que possamos evoluir nossas interfaces, melhorando a usabilidade e enriquecendo a experiência do usuário da Agrotis Plataforma.

<br>

## E vamos a pesquisa...

>[color=#00796b] O objetivo é realizar uma pesquisa sobre a saúde do nosso front-end. É preciso compreender como cada time trabalha, quais tecnologias, dependências, como e se são realizados testes, se existe uma biblioteca, etc.
>
>[color=#00796b]É importante tratar cada time como uma persona e, sempre apontar os problemas, os riscos a longo prazo e as possíveis soluções. Ao final precisamos entender esta estrutura para delimitar a abrangência do Design System e orientar a empresa sobre cenários futuros.
>
>[color=#00796b]O objetivo é realizar o diagnóstico para propor algo sustentável a longo prazo, sempre visando mudanças e atualizações de tecnologia.
>

<br>

## Quais foram as etapas do Plano de Imersão?
* Clonar e estudar cada repositório;
* Mapear framework, libs e dependências;
* Entender e mapear ''reaplicabilidade";
* Entender e mapear testes implementados;
* Conversa com desenvolvedores para entender principais desafios;
* Pensar e conversar sobre como os devs se comportam, como eles pensam, o que desejam realizar, e por quê;
* Análise de problemas, riscos a longo prazo e as possíveis soluções;

<br>

## Principais reuniões realizadas:
>[color=#00796b] **Time 3s (Sementes)**
Gabriel e Nicolas;
>
>[color=#00796b]**Time 4 (Receituário)**
Maja e Bruno;
>
>[color=#00796b]**Time 6 (Armazenagem)**
Renato e Renhan;
>
>[color=#00796b]**Arquitetura**
Cristiano, Lauro, João;

<br>

## Repositórios e Dependências mapeados:

### Repositórios Globais (Times + Arquitetura&UX)
* StorybookComponents: `componentes-frontend-react` (React)
* Editor:`editor-frontend-react` (React)
* CoreReact: `core-frontend-react` (React)
* Autenticação: `auth-web` (React)
* Templates: `agrotis-templates-io` (React)
* Utils: `agr-misc` (React)
* StateMenu: `state-menu` (React)
* Boilerplate: `architype-react` (React)
* CoreAngular: `core-frontend-web` (Angular)
* AccAngular: `acc-frontend-web` (Angular)

### Repositórios de Produtos
#### Time 3S (Sementes)
* Produtor Rural: `inserir-repositorio-aqui` (React)
* BeneficiamentoMCBP: `mcbp-frontend-web` (React)
* Produtos: `prod-frontend-web` (React)
* Sementes: `sementes-frontend-web` (Angular)
* Sementes FPS(cliente exclusivo): `sem-fps-frontend-web` (Angular)

#### Time 4 (Receituário)
* Receituário: `rec-front-web` (React)

#### Time 6 (Armazenagem)
* ARM Front-end Web: `arm-frontend-web` (React)
* Pátio Front-end Web: `patio-frontend-web` (React)
* DVH Front-end Web: `dvh-frontend-web` (React)
* Ticket Front-end Web `ticket-frontend-web` (Angular)

#### Mobile Apps
* Receituário
* Laboratório de Sementes
* Vistorias de Campo
* AgroDBO

### Principais dependências dos projetos React:
`create-react-app`
`react 15`
`react-dom`
`prop-types`
`redux`
`redux-thunk`
`styled-components`
`material-ui`
`flexboxgrid`
`redux-form` (6 e 3S) / `formsy` (4)
`redux-form-material-ui` (6 e 3S) / `formsy-material-ui` (4)
`axios`
`lodash`
`moment`
`history`
`global`
`numeral`
`is-base64`
`intl`
`qs`
`uuid` (RFC4122)
`mqtt`
`remove-accents`
`aphrodite`
`json-server`
`invariant`
`fuse.js`
`cpf_cnpj`
`reselect`
`babel-polyfill`
`classnames`
`fixed-data-table`
`immutable`
`keycode`
`rxjs`
`draft-js`
`dayjs`
`jwt-decode`
`@rmwc/ripple`
`connected-react-router`
`ramda`
`whatwg-fetch`
`pdfmake`

*É possível que existam mais plugins novos ou pertencentes ao funcionamento de algum dos implementados, como, por exemplo: `draft-js` e `draft-js-utils`;*

### Dependências de desenvolvimento:

`enzyme`
`comitizen`
`cross-env`
`cz-conventional-changelog`
`eslint`
`lint-staged`
`stylelint`
`husky`
`prettier`
`standard-version`
`babel`
`@storybook/react`
`react-scripts`
`storybook-addon-material-ui`

<br>

*Sentiu falta de algum repositório ou dependência? Sugestões? [e-mail]*

<br>

## Diagnóstico do cenário atual e orientações para o futuro:

Sobre o ambiente estabelecido, podemos constatar a necessidade de realizarmos movimentos com relação a alguns temas como frameworks e dependências para se trazer maior agilidade ao desenvolvimento frontend dos produtos da Agrotis Plataforma. Seguem algumas sugestões para a sequência, além de sugestões para criar um ambiente mais dinâmico, produtivo e inovador.

* **Rotina de manutenção de versões e foco na próxima versão do React** com objetivo de evitar novas limitações por parte da falta de acompanhamento das tecnologias em utilização dentro de nossos produtos, precisamos garantir uma arquitetura que ande junto com a tecnologia;

* **Fluxo para desenvolvimento de novos componentes**. Desenvolvidos pelo time de UX podem ser muito úteis para os desenvolvedores, trazendo maior alinhamento, praticidade e qualidade, além de foco na regra de negócio para o dev, agregando assim valor aos produtos, em design e funcionalidade. Template de estórias;

* **Criar fluxo de aprovação de dependências simples e democrático** evitando utilização de frameworks e dependências em desarmonia com nosso ecosistema. Medida adotada para manutenção da saúde de nosso rico ecosistema frontend;

* **Criar sessão de ícones na biblioteca** que poderiam nortear o design e trazer maior facilidade aos devs além de unidade a identidade da empresa;

* **Criação de testes na parte de front end**. Testes podem ser aliados na prevenção de bugs e na qualidade do código, fazendo com que se apliquem automaticamente processos de teste nos produtos da empresa e patterns de programação que facilitam numa futura manutenção ou evolução com a natural chegada de novas features aos produtos;

* **Criar cultura da documentação** e documentar padrões de programação adotados, além de somar a já existentes como de commits e branches;

* **Criar rotina de recebimento de novos desenvolvedores frontend** na empresa junto ao Time de UX como um treinamento sobre a plataforma e nossos recursos e processos;

* **Investir em cultura**. Chapters, eventos, workshops e artigos. Algumas atividades de exemplo que fogem da rotina padrão do desenvolvedor, Mas não são menos importantes. Pelo contrário, estamos aqui tratando de atividades que trazem dinamicidade e integração, trabalhando soft skills e hard skills, além do compartilhamento da informação dentro da empresa. Tempo ganho no trabalho, qualidade para o produto e um dia a dia mais saudável para os programadores;


## React Update e cultura de manutenção constante de versões
Conseguimos identificar no momento atual alguns exemplos de benefícios que colheríamos ao manter um ciclo de atualização de dependências dos projetos:

* Maior facilidade em manter a tecnologia sempre atualizada
* Prevenção de bugs e problemas inesperados
* Comunidade lado a lado
* Recursos mais modernos
* Uso de melhores práticas de desenvolvimento
* Adicionados novos tipos de renderização: fragments e strings
* Nova funcionalidade React Hooks
* Melhor tratamento de erros
* First-class way para renderização dos childrens no DOM
* Melhor renderização no lado do servidor
* Atributos HTML desconhecidos permanecem ao invés de sumir
* Tamanho do arquivo do React reduzido (32%)

<br>

> **"*Podemos escolher o que plantar, mas somos obrigados a colher o que semeamos."** - Provérbio Chinês*
>
> 

<br>

## As principais demandas de arquitetura e UX que envolvem o frontend sugeridas para a continuidade são...
* Agrotis Templates;
* Configurações Gerais;
* Melhorias no Auth;
* Continuidade dos Relatórios;
* React Update;
* Agrotis Storybook V2;
* Cultura e Processos;
* Novas features em produtos e core;
* Análise da possibilidade de realizar migrações de Angular para React, com intuito de usufruir de todos recursos do ecosistema que utilizam React e trazer maior concistencia para o frontend;

<br>

## Tecnologias e abordagens para ficar de olho
* GraphQL (Apollo, Relay)
* React 17
* React Hooks
* React Native
* Flutter

---

Obrigado a demais pessoas que contribuíram com esse relatório, que até então não foram citadas: Rodrigo Diego, Tiago Oliveira, Evando Bejes e a você pelo seu tempo! Dúvidas, sugestões e outros, você pode **[me enviar um e-mail clicando aqui]([e-mail])**.