Há alguns anos a ideia que se tinha de desenvolvedores front-end, era daqueles caras descolados que sabiam recortar um layout em alguma ferramenta de edição de imagens, aplicar em folhas de estilos utilizando tableless (não comentarei sobre a era das tables), construir formulários elegantes, arredondar bordas e algumas animações/transições em javascript. Além de tentar fazer tudo isso funcionar na maior quantidade de versões de navegadores e sistemas operacionais diferentes. Aliás, o próprio termo “desenvolvedor front-end” é recente, antes eram chamados bizarramente de “webdesigners”. O fato é: as skills desse cara aumentaram à medida que as tecnologias de front-end evoluíram.
É claro que ainda há diferentes competências quando se fala em desenvolvimento front-end, um lado mais voltado à arte, define cores, tipografia, fontes, imagens, espaçamento, etc. O outro, mais próximo de você – desenvolvedor back-end codeiro, mete a mão no código, geralmente javascript, para construir plug-ins, controllers, serviços, diretivas, testes e muitas outras coisas que todo desenvolvedor back-end faz no seu dia-a-dia. E é nesse ponto que eu queria chegar, nas tecnologias de front-end que desenvolvedores back-end deveriam, no mínimo, saber que existem. Note, não vou esmiuçar cada uma delas, apenas comentar sobre sua importância para o mundo. Vamos lá.
HTML 5 + CSS 3
Começando pelo óbvio: HTML 5. Sua utilização já é realidade na web, suportado por diferentes versões de navegadores, sua grande vantagem está na semântica atribuída às paginas, contribuindo para técnicas de SEO. Além de possuir uma série de recursos e propriedades novas, principalmente relacionadas aos formulários, melhorando a usabilidade. Ao lado do HTML 5, vem o CSS3, aprimorando sua versão anterior com melhorias na transição de efeitos, inclusão de novos seletores, bordas arredondadas e sombreamento, sem a necessidade de workarounds. Considere utilizar pré-processadores e frameworks de CSS, como SASS e LESS, para melhorar a produtividade e diminuir a replicação de código. Com eles você pode deixar a construção de folhas de estilo mais “programáticas”, definindo variáveis para reutilizá-las em diferentes seletores; aninhamento de seletores um dentro dos outros; mixins para agrupar várias propriedades e até mesmo operações matemáticas, a exemplo de tamanho de fontes.
JavaScript
JavaScript é o motor de tudo que roda no client-side, com ele podemos manipular o DOM de cada página, alterar o CSS e melhorar a experiência do usuário. Entretanto, mexer com javascript puro pode ser uma dor de cabeça e não é nada produtivo. Para contornar esse problema, surgiram bibliotecas que abstraem sua complexidade em funções mais simples de serem utilizadas, a mais famosa e quase onipresente é o jQuery. Entre suas vantagens estão: acesso facilitado a elementos do DOM, manipulação de conteúdo, suporte a diversos eventos, variedade de efeitos e transições, simplicidade para realizar requisições AJAX e cross-browser. Com uma comunidade bastante ativa, existem uma infinidade de plug-ins para fazer quase tudo que você precisar, com pouca ou nenhuma customização.
Manipular o DOM pode parecer bacana, mas em projetos com front-end mais complexo, a manutenção desse código fica complicada e difícil de testar. Aí que entra os frameworks MVC, ou MVW (Model View Whatever) cliente-side, como o AngularJS, criado pelo google, ele possuí um recurso chamado Two-way Data binding que vincula elementos da página ao seu escopo de controle, onde qualquer alteração no modelo reflete na view e vice-versa, sem necessidade de manipulação de DOM e facilmente testável. Em frameworks desse tipo, foram introduzidos recursos de injeção de dependências, diretivas, controllers, services e filters, além de favorecer o teste automatizado de suas funcionalidades. Com o mesmo propósito do AngularJS, temos o Backbone.js e Ember.js, com algumas diferenças entre eles, existem vários benchmarks comparando-os na web. Vale a pesquisa para identificar qual melhor se encaixa no seu projeto.
Gerenciar dependências
Gerenciar dependências é uma tarefa corriqueira para desenvolvedores back-end. Quando se falava em front-end, baixar as bibliotecas necessárias pro seu projeto sempre foi uma tarefa manual e suscetível a erros: entrar no site do projeto, baixar a versão desejada, salvar no diretório correto, atualizar versões antigas. O Bower é uma ferramenta que possibilita gerenciar pacotes front-end de maneira automatizada e configurável, criado pela equipe do twitter. Para instalar o Bower você precisa do node.js instalado em sua máquina, a partir daí, com poucas linhas de comando pode-se começar a baixar as dependências do seu projeto, inclusive com configurações de versões específicas ou mais recentes, busca de pacotes, informações dos repositórios e diversos outros recursos. Uma mão na roda.
Automatizar tarefas
Assim como gerenciar dependências, automatizar as tarefas de build são cotidianas no processo de desenvolvimento. Em front-end não há porque ser diferente, minificar e concatenar scripts, por exemplo, são tarefas importantes que devem ser feitas em seus projetos. Assim como o Ant ou Maven, o Grunt é uma ferramenta de automatização voltado para o front-end e também precisa do node.js para ser instalado, basta instalá-lo através do gerenciador de pacotes npm, juntamente com seu cliente de linha de comando (grunt-cli). No arquivo gruntfile.js é onde deverão estar o agendamento de tarefas a serem executadas pelo Grunt, a propósito o Grunt possuí milhares de plug-ins para suportar diversas funcionalidades, entre elas a minificação e concatenação de folhas de estilos e arquivos javascript de forma bem simples. Lembre-se, automatizar tarefas deixa seu processo mais seguro e produtivo, faça isso no front-end também.
Testar
Escrever testes automatizados é quesito obrigatório. No mundo javascript, uma das ferramentas mais populares é o Jasmine, um framework de BDD que permite a construção de testes de unidade, ele se baseia no conceito de specs, que nada mais é que um arquivo javascript onde estarão descritos os cenários de testes de cada unidade de código que deverá ser testada. Com uma série de recursos para simplificar a estrutura dos testes, o Jasmine possui também um módulo de integração com o AngularJS, para fazer injeção de dependências, mockar serviços de back-end, etc. Além de testes de unidade, os testes end-to-end também são importantes, pois testam a aplicação do ponto de vista do usuário, se todo o fluxo de tarefas está sendo executado do início ao fim. Para isso, a equipe do AngularJS desenvolveu o Protactor, uma ferramenta específica para testes end-to-end que facilita a utilização do Selenium, ferramenta de automatização de testes em navegadores.
Escrever testes garante que nossa aplicação esteja funcionando como planejado. Entretanto, quando a suíte de testes fica grande o bastante, rodar os testes passa a ser um processo custoso e demorado. Para contornar este cenário, foi desenvolvido o Karma, uma ferramenta para dar feedback constante a cada atualização de arquivos javascript do projeto. O Karma também roda sob o Node.js e pode ser instalado pelo npm. Seu principal arquivo de configuração é o karma.config.js, onde são informados os arquivos a seres monitorados, o framework de teste e o navegador para execução. Após a configuração é só dar um start no ambiente do karma e o navegador indicado será executado e exibirá o resultado dos testes, a partir disso, qualquer alteração nos arquivos javascript disparará novamente os testes. Parece mágica!
Bom, vou finalizar por aqui, mas ainda ficam de fora pontos importantes como mobile, acessibilidade e debug. Enfim, depois dessa avalanche de tecnologias e ferramentas deu pra perceber que o desenvolvimento front-end está tão divertido quanto planejar as várias camadas e padrões de uma super arquitetura enterprise, ou não…
Nota: Esta é só uma visão pessoal de um programador javeiro, entusiasta de javascript e algumas outras coisas mencionadas neste texto. Se você concorda, discorda ou acha que outras tecnologias deveriam ter sido citadas aqui, comente aí.
Deixe um comentário