Mimosa – Evite tarefas repetitivas no desenvolvimento de código frontend

Quando você vai desenvolver o frontend de um site, é rotineiro você se deparar com tarefas um tanto quanto repetitivas: compilação do código, minimização, otimização e lint (verificação contra erros de estilo e/ou bugs). Algumas dessas tarefas até foram implementadas por algumas IDEs, e soluções automatizadas também surgiram. Hoje, vou falar um pouco sobre uma dessas soluções automatizadas: a Mimosa, que chamou a minha atenção pela facilidade extrema de uso, e também ensinar como começar a criar .

A Mimosa é uma ferramenta desenvolvida em NodeJS, criada com o foco de otimizar o desenvolvimento de aplicações web. Com ela, você tem acesso à:

  • Servidor com auto-reload;
  • Um sistema capaz de detectar erros de estilo e de uso de módulos Javascript desenvolvidos usando RequireJS;
  • Um sistema de minimização e otimização (inclusive preparada para uso com o R.js);
  • Compilação e concatenação automática de templates;

Tudo isso de forma pré configurada, e com grande facilidade para expansão com uso de plugins! É uma ferramenta super indicada para quem trabalha muito com desenvolvimento de aplicativos web e gostaria de evitar essas tarefas repetitivas no dia a dia sem gastar muito tempo com configuração.

Tutorial básico de uso

1) Para usar o Mimosa, precisamos ter o NodeJS e o git instalado, pois o Mimosa é feito em Javascript e o Bower faz o download de algumas das dependências usando git. Para instalar o NodeJS, há duas opções:

1.1) Caso você queira instalar o NodeJS no seu computador, baixe e instale diretamente a partir do site oficial. O mesmo vale para o git.

1.2) Caso você não queira instalar o NodeJS no seu computador, pode utilizar o Vagrant em conjunto com o Vagrantfile que eu criei para criar uma máquina virtual já com o NodeJS e o git instalados. Para prosseguir com o tutorial, nesse caso, é necessário entrar na máquina virtual utilizando o comando “vagrant ssh“, como descrito no tutorial sobre o Vagrant.

2) Depois, instale o mimosa usando o npm, que é o gerenciador de pacotes padrão do NodeJS e já vem com a distribuição oficial. O comando a ser executado é esse “npm install -g mimosa” (o -g faz a instalação ser global, logo o mimosa estará disponível a qualquer momento em seu terminal), como mostrado abaixo:

Instalação do Mimosa

3) Agora, com o mimosa instalado, crie uma pasta chamada “projetos” (se ainda não tiver sido criada) e entre nela.

4) Dentro desta pasta, execute “mimosa new tutorial-mimosa“. O mimosa imediatamente vai te fazer inúmeras perguntas, como que linguagens você pretende usar, se pretende usar algum framework, sistema de template, servidor que pretende usar e várias outras perguntas importantes para o desenvolvimento do seu projeto frontend. Faça as mesmas escolhas que eu fiz abaixo, para que o tutorial possa continuar livremente:
Perguntas feitas pelo Mimosa para criação do projeto
Como você pode ver, o Mimosa criou uma série de arquivos e pastas, a saber:

Lista de arquivos criados pelo Mimosa

Desses arquivos e pastas, temos que:

  • assets é a pasta que contem seus arquivos de estilo e de Javascript (ou outra linguagem que você tenha escolhido). No meu caso, eu escolhi usar CSS e Javascript puro e templates utilizando Underscore. Portanto, o Mimosa assim o fez. É nessa pasta que vamos mexer;
  • node_modules é a pasta de dependências do NodeJS, e portanto podemos ignorá-la. O Mimosa normalmente vai administrar essa parte para nós no nosso projeto;
  • .gitignore é a lista de arquivos que serão ignorados pelo Git;
  • views é a pasta com os arquivos HTML que serão servidos inicialmente pelo usuário. É eles que deverão carregar o Javascript e o CSS quando estes forem compilados pelo Mimosa;
  • bower.json é o arquivo listando as dependências que serão instaladas pelo Bower;
  • makefile é um arquivo auxiliar para quem prefere usar make para criar os projetos (não é efetivamente necessário)
  • mimosa-config.js contem toda a configuração usada pelo Mimosa, e mimosa-config-documented.coffee ccontem todas as opções que podem ser usadas para configurar o Mimosa;
  • package.json contem todas as depedências administradas pelo npm e colocadas na pasta node_modules do projeto;

5) Agora, entre na pasta tutorial-mimosa criada pelo Mimosa e execute o comando “mimosa watch -s”. Esse comando fará o Mimosa acompanhar as alterações que são feitas na pasta assets e criará um servidor na porta 3000 para servir os arquivos compilados. Quando algum arquivo na pasta assets for modificado, o Mimosa vai recompilar o projeto, colocando tudo numa nova pasta public (que ele cria automagicamente logo no inicio da execução do comando)  e recarregando o navegador caso você esteja com a navegador aberto no endereço que vamos acessar logo abaixo. Importante deixar esse comando rodando.

6) Experimente, agora, acessar o endereço http://192.168.33.10:3000/ (ou o endereço http://127.0.0.1:3000, se estiver fazendo o tutorial sem o uso da máquina virtual) no navegador. Será exibido a seguinte página: (caso você tenha escolhido as mesmas configurações que eu escolhi)

Página exibida pelo Mimosa

Deixe essa página aberta.

7) Agora, em um editor de textos (na sua máquina, mesmo), o arquivo “projetos/tutorial-mimosa/assets/stylesheets/style.css“. Experimente substituir o conteúdo desse arquivo pelo do arquivo abaixo:

E salve o arquivo.

Note que a diferença entre os dois arquivos é basicamente a adição da propriedade “background: green;” na linha 4, para tornar a cor de fundo da tela verde, e a modificação do valor da propriedade na linha 8 (ou 7, se considerar o arquivo original) de “yellow” para “red“.

8) Agora, vá para aba do navegador que você deixou aberto com a configuração e veja que a página já foi atualizada com o novo CSS. O Mimosa cuidou sozinho do auto-reload. =)

Nova tela do Mimosa, já com o CSS alterado

Pronto!Com isso, você já pode ter um preview do que o Mimosa fez por nós. Com o uso dele nesse tutorial, tivemos:

  • Criação automática da estrutura do projeto conforme as melhores práticas de frontend;
  • Instalação automática de dependências;
  • Auto-reload;
  • Servidor de testes;
  • Pré-compilação dos templates;
  • Junção dos arquivos JS em um único arquivo;

Se você explorar um bocado mais, consegue fazer o Mimosa fazer também tarefas como compilação de linguagens para CSS e Javascript (só não o fiz nesse tutorial pois precisaríamos instalar manualmente os compiladores para essas outras linguagens) e build com tudo já compactado e certinho para ser colocado em produção.

Se quiser um exemplo de aplicação que usa o Mimosa em funcionamento, dê uma olhada no MatrUFSC2. O repositório com o código do frontend do MatrUFSC2 está neste repositório.

Espero que tenham gostado do tutorial e da ferramenta. Qualquer dúvida, comentário ou sugestão, usem a área de comentários a vontade. =)

Gostou do conteúdo desse post? Apoie o blog contribuindo a partir de R$1/mês através da nossa página no Apoia.se! Isso me ajudará a manter o blog no ar, além de trazer mais coisas legais para vocês! Obrigado desde já! 😀