home \portfolio

Masterrow

O que é?

Masterrow é um framework para criação de tabelas dinâmicas, feito em puro JavaScript. Não só automatiza a criação de tabelas, como já possui embutido várias funções comuns a relatórios, como filtros, paginação e exportação.

A Necessidade

O desenvolvimento da ferramenta começou em Setembro de 2016; a E-HTL Hotelaria estava criando uma nova Intranet. O time de desenvolvimento precisava de uma ferramenta que permitisse agilizar a criação de tabelas e suas operações mais básicas (ordenação, filtagem, etc.), para a extração de relatórios e geração de listas.

Concorrentes

Existem outras ferramentas de tabelas dinâmicas mais conhecidas, sendo a mais famosa delas, DataTables. Só que, mesmo já consagradas, elas têm algumas limitações. Tomando DataTables como exemplo, ela não permite o controle total do funcionamento da tabela. Em operações assíncronas (REST), ela obriga a usar o seu "cliente" para fazer as requisições.

Na Paginação, há um problema parecido: não é possível paginar a tabela sem que TODOS os dados já estejam carregados.

Por causa destes problemas, teríamos que fazer grandes adaptações ao nosso projeto, mas, incentivado pela própria E-HTL em buscar uma solução melhor, comecei a criar o MasterRow.

O conceito

Ao invés de trabalhar diretamente com um vetor de dados, MasterRow trabalha em cima de uma função criada pelo desenvolvedor. Não importa onde, como e quando os dados virão, se por requisição de API, Socket, ou se serão apenas dados fixos. Tudo que o servidor precisa fazer é fazer com que a sua função retorne os dados necessário para o MasterRow funcionar.

Seguindo as tendências dos frameworks concorrentes, MasteRow também oferece recursos de filtros, paginação, ordenação, customização de célula de acordo com o seu valor, expansão para detalhes e exportação de dados. Todas estas funções sempre devem convergir para esta função principal.

O desenvolvimento

Masterrow foi construída em paralelo com o desenvolvimento da Intranet na E-HTL. A parte mais complicada foi o começo do processo, pois nunca tinha trabalhado num sistema completo, desde o seu conceito. Na época, também estava aprendendo a codificar em JavaScript, e fui aprendendo os conceitos da linguagem.

O desafio foi descobrir o processo de funcionamento básico do sistema. Após vários desenhos, cheguei no processo de funcionamento básico: Masterrow gera uma instância de tabela, recebendo as configurações da tabela num objeto, e fornecendo uma função que receberia uma outra função, criada pelo usuário, que retornaria os dados que preencheriam as tabelas.

Com o funcionamento em mente, tudo que precisava ser feito era montando as funcionalidades aos poucos. Para acompanhar o funcionamento, e para demonstrar a criação da ferramenta para meus chefes, quebrei cada etapa do desenvolvimento pelas funcionalidades (filtros e paginação, em primeiro lugar, depois exportação, detalhe, ação de linha e o resto).

Além da dificuldade de descobrir o conceito do sistema, uma outra grande dificuldade foi tornar o sistema resiliente ao desenvolvimento do restante da página. Masterrow precisava funcionar com o código escrito em qualquer parte do sistema, os dados preenchidos em qualquer momento da visualização, e precisava funcionar com quaisquer outros elementos, frameworks que estivem na tela. São detalhes que muitas vezes não eram ensinados nos cursos; para buscar uma solução, tive que levar um bom tempo para resolvê-las.

Um facilitador deste projeto foi a própria E-HTL, que me deu os recursos e tempo para terminar o projeto. Masterrow já tinha começado com um cliente.

Masterrow foi desenvolvido em JavaScript, sem a necessidade de outro framework, como o jQuery. O estilo da tabela foi feito em LESS, e todo o processo de compactação foi feito com automatizador GULP.

Retrô

Masterrow é um dos que tenho mais orgulho de ter desenvolvido. Aprendi a programar em JavaScript por causa dele. Foi ambicioso e difícil, se não tivesse contado com a ajuda da E-HTL, não teria conseguido terminar.

Há coisas que faltaram ser feitas no projeto, como criar um teste unitário (o que facilitaria muito), quebrar o código-fonte em módulos e usar recursos como Promise. Como o projeto já foi desenvolvido, eu pretendo esperar um momento mais apropriado para continuar o seu desenvolvimento.