Fernando Jorge Mota

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 à:

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:

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:

Como você pode ver, o Mimosa criou uma série de arquivos e pastas, a saber:

Desses arquivos e pastas, temos que:

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)

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. =)

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

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á! 😀