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:
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:
- 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)
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:
- 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. =)
- Site Oficial: http://mimosa.io
- Repositório do código fonte: http://github.com/dbashford/mimosa
Deixe um comentário