Quando se fala de Front-End, existe uma assimilação direta com três disciplinas, por assim dizer: HTML, CSS e JavaScript. Em uma visão bem pessoal, acredito que Front-End diz respeito a tudo que venha para a camada de renderização e tudo que envolva o conteúdo a ser apresentado, que além dos itens citados também inclui arquitetura de informação e design da página ou web app.
Com o amadurecimento da área, é importante que cada vez mais o profissional da disciplina de Front-End tenha domínio de mais e mais técnicas e processos, para ter algum diferencial entre os concorrentes do mercado. Ei, você quer ser o melhor, certo? Então saia da zona de conforto!
A disseminação do JavaScript em outros meios além da linguagem de script que todos estão acostumados – como NodeJS para servidores, utilização de JavaScript na programação de hardware (Node Copter, Johnny-Five e outros) – vem aproximando cada vez mais os mundos que, antes, eram relativamente distantes. Como consequência, novas disciplinas ou ramificações acabam surgindo naturalmente.
Uma destas disciplinas que tenho dedicado algum tempo nos estudos é a chamada “*Front-End Ops*”, termo que vi pela primeira vez (mas já é praticada bem antes disso) em um artigo escrito por Alex Sexton para o site Smashing Magazine. Esse artigo tem o mesmo nome.
Ops
O termo Ops (no nosso caso) vem de Web Operations – em português, Operações Web. Segundo o verbete em inglês na Wikipedia,
é domínio de conhecimentos dentro da gestão de sistemas de Tecnologia da Informação, que envolve a implantação, operação, manutenção, ajustes e reparos de uma aplicação e/ou sistema baseado na web.
Colocando isso no nosso cotidiano, sempre que você precisa de um acesso especial a um servidor, ou que algum caminho seja mapeado, um servidor seja configurado, ou aquela frase famosa de “reinicializar a aplicação”, é um profissional de operações que executa.
Recentemente temos visto a ascenção do termo DevOps que, resumidamente, é o desenvolvedor que estreita o conhecimento de técnicas de operações, conhecendo além de linguagens de programação, também ambientes de operações.
Front-End Ops
Desenvolvedores Front-End também são desenvolvedores, mas existe uma distância natural – e não imposta – desse mundo de operações. E o nosso objetivo aqui é fazer uma série de artigos com a vontade de estreitar mais estes dois mundos.
Já existem ferramentas e processos que trazem o mundo de Operações Web pra perto do desenvolvedorFront-End. Dentre todas que existem, as que mais utilizo são Vagrant, GruntJS e Capistrano.
Vagrant
Imagine a seguinte situação: você trabalha com vários projetos, desenvolvidos em diversas tecnologias diferentes. Um em NodeJS, outro em Ruby e outro em Python.
Você tem duas opções para rodar seus projetos em ambiente de desenvolvimento (dev):
- Instalar e configurar em sua máquina todos os ambientes necessários para desenvolvimento.
- Instalar e configurar máquinas virtuais, com todos os ambientes necessários para o desenvolvimento.
O que o Vagrant faz é te ajudar na segunda opção. Configurar, distribuir e integrar máquinas virtuais em seu ambiente de desenvolvimento.
GruntJS
Agora, pense que você quer ter no ambiente de desenvolvimento, seus scripts concatenados, mas não minificados. E em produção, você quer que eles sejam concatenados e minificados. Além disso, você precisa compilar seu CSS, porque usou SASS, precisa organizar as pastas e arquivos de maneiras diferentes para cada ambiente e, sempre que salvar algum arquivo JavaScript ou CSS, precisa fazer todo esse processo novamente pra testar. Cansa só de pensar! Mas o GruntJS está aí pra facilitar (quanta rima!).
Fácil como listar os diretórios da sua máquina, basta rodar um comando para gerar a versão de desenvolvimento, outro para gerar uma versão pra produção, assim:
$ grunt dev
[/code]
Ou:
$ grunt prod
[/code]
Além disso, você também pode criar tarefas para ações específicas e únicas, como apenas rodar testes unitários utilizando sua ferramenta favorita, apagar pastas específicas e muito mais.
Mas e agora que os arquivos foram gerados, como entregar em ambiente de produção?
Capistrano
E depois que gerou sua versão para produção, você precisa fazer o deploy, certo? Certo. E como você faria isso? FTP? rsync? scp? WebDAV?
Com o Capistrano você pode, com apenas um comando, gerar sua versão de produção com o GruntJS e entregar todos os arquivos, com um sistema de versionamento em produção inteligente e, se por acaso subir algo errado no ar, pode fazer rollback do deploy em questão de segundos. Isso mesmo, SEGUNDOS.
Rollback, em tecnologia de informação, significa voltar para a última versão funcional do código ou sistema (ou, voltar para uma versão específica).
Você configura sistema de versionamento, branches, diretórios, opções de ssh, endereço dos servidores, tarefas que o Capistrano deve executar antes e/ou depois de enviar os arquivos e muitas outras opções, com um simples comando:
$ cap deploy
[/code]
E se algo der errado, voltar apenas com um:
[code]
<div>
$ cap deploy:rollback
[/code]
O processo de rollback não precisa ser tortuoso como costumávamos fazer: duplicar uma pasta ou arquivo, alterar seu nome com um timestamp ou “_” no início, copiar todos os arquivos novos e, caso algo saia errado, remover e renomear tudo de novo. O Capistrano faz este processo de maneira muito mais inteligente.
Agora que você já sabe do que se trata o termo OPS e, mais especificamente, Front-End Ops, você está preparado para seguir com esta série sobre o assunto.
Nas próximas edições da Revista iMasters, vamos nos aprofundar em cada uma das ferramentas que foram citadas, e você será capaz de servir, gerar e entregar sua aplicação web de maneira ágil e profissional.
Saiba mais:
De 0 a 10, o quanto você recomendaria este artigo para um amigo?