Eu sou Desenvolvedor Front-End

Quem mexe com código sabe programar? Bom, não é bem assim. O trabalho de um Desenvolvedor Front-End não é nada parecido com a “programação” que muitos têm em mente.

Hoje temos centenas de termos técnicos para quem trabalha com internet. Não sinta-se mal por não conhecer algum ou se confundir com outro. Às vezes até eu me enrolo com os nomes.

Sou auto-didata com desenvolvimento front-end, comecei na área há cerca de quinze anos. Muita coisa mudou de lá pra cá – na verdade, muda quase todo mês. Vou falar mais sobre essa área por aqui, e esse post vai ser sempre atualizado quando alguma coisa nova surgir!

O que faz um Desenvolvedor Front-End?

Explicar o que um desenvolvedor Front-end faz é fácil. O complicado é explicar que isso não é “programação”.

Em uma explicação básica, um desenvolvedor Front-end pega o layout do site que o Web Designer criou, fatia as imagens e escreve códigos o suficiente para que aquele layout possa ser visualizado em um navegador.

Em mais detalhes, o trabalho de criação de sites envolve três etapas: web design, front-end e back-end.

1. Web Design: o layout é uma imagem que representa como o site aparecerá em navegadores;
2. Desenvolvimento Front-end: trabalha a parte que o visitante do site vai ver, que é basicamente o layout;
3. Programação Back-end: trabalha as ferramentas (como validação e envio de um formulário de contato) e painel de controle do site, que são as partes que o visitante não vê no site.

Um exemplo que costumo dar é o corpo humano. O Web Design é a pele, os pelos, a roupa e tudo mais que é visual. O Front-End são os ossos, a carne e os músculos, o que dá estrutura à parte visual. Já o Back-End seriam os órgãos, como o cérebro e o coração, o que faz tudo funcionar.

5 diferenças entre front-end e back-end

Em resumo:

1. Linguagem de marcação / programação: o front-ender trabalha com HTML, CSS e JavaScript (client-side); o back-ender normalmente trabalha com apenas uma linguagem como PHP, Python, e até JavaScript (server-side);
2. Frameworks: enquanto o foco dos frameworks de front-end é visual, como jQuery e Bootstrap (o qual eu chamo carinhosamente de butt’s crap, mas fica pra outro post), os frameworks de back-end têm foco nas funcionalidades, como Laravel, ou CMSs como WordPress;
3. Otimização: a grosso modo, o dev front-end otimiza o site para o navegador; o dev back-end otimiza para o servidor;
4. Boas práticas: o desenvolvedor front-end tem um contato maior com SEO técnico (parte do SEO Onpage), acessibilidade e UX (experiência do usuário); já o desenvolvedor back-end se concentra mais com segurança, validação e sanitização de dados;
5. Armazenamento de dados: para salvar dados de usuários o responsável pelo front-end utiliza o próprio navegador, como local storage, session storage e cookies; já o encarregado pelo back-end utiliza banco de dados como SQL.

Como você pode ver, são duas áreas bem distintas. E não dá pra dizer exatamente que uma é mais fácil que a outra, porque ambas têm suas complexidades.

Mas também há o profissional responsável tanto por front-end quanto por back-end: o Desenvolvedor full stack.

E antigamente dava-se o nome de Webmaster para o profissional que trabalhava tanto com Web Design quanto com Desenvolvimento Web.

Exemplos de trabalhos de Front-end

Trabalho com desenvolvimento front-end de sites, blogs, lojas virtuais… o que houver de demanda! Abaixo, seguem 5 trabalhos que usarei como exemplo.

Melhorias de velocidade e desempenho em site

Um de meus trabalhos mais recentes foi pra um antigo cliente. Sua nota no relatório Google Lighthouse havia caído bastante, então era preciso modernizar parte do código e otimizar tudo de acordo com as novas recomendações do Google.

O site posta muitas imagens e também utiliza sistemas de anúncios, que como eu já disse aqui, são os principais vilões em relação à lentidão de um site.

Ou seja, era praticamente uma missão impossível. Mas no final deu tudo certo.

Resumo sobre o projeto:

• Melhorias no front-end: implementei melhorias como lazy-loading, removi o uso de jQuery por parte do tema WordPress e também reduzi scripts;
• Otimizações em geral: além de uma limpa em plugins e scripts desnecessários, também foi preciso trabalhar algumas minificações e retardamento de scripts;
• Trabalho completo: fora as otimizações, a criação de logo, identidade visual e tema WordPress também fizeram parte do meu trabalho nesse projeto.

Gerador de senhas

O K_Gasp4m (“K – Generate a strong password for me”) foi um trabalho open source que fiz pra “brincar” com JavaScript.

Isso porque na época eu não tinha muitas demandas com essa linguagem, então comecei a pensar em algumas ferramentas básicas para praticar. Essa foi a primeira: um gerador de senhas.

Resumo sobre o projeto:

• Desenvolvimento: ferramenta simples criada com JavaScript puro que gera senhas fortes a partir de algumas opções que o usuário selecionar;
• Criação: também fiz o design da ferramenta, que tem visual tão simples quanto o gerador em si.

Desenvolvimento de site

Em mais uma oportunidade de trabalhar para o Dinheirama, dessa vez a missão era fazer o desenvolvimento front-end e para WordPress do novo layout do site.

O layout em si foi criado pela equipe da Grão, e foi uma evolução do design anterior.

Um dos objetivos do trabalho também foi deixar o site mais leve, até porque o tema anterior (que fora desenvolvido por uma agência terceira) era extremamente lento e pesado.

Resumo sobre o projeto:

• Desenvolvimento de layout: fiz o tema para WordPress a partir do layout criado por eles;
• Consultoria: participei do processo de criação de layout orientando a equipe com boas práticas de usabilidade e otimização.

Calculadora com simulação de gastos

Criei e desenvolvi a Cãoculadora pensando em ajudar com o planejamento financeiro de quem tem animais de estimação (principalmente cães, que são minha praia).

Nesse caso, além da ferramenta em si, fiz uma pesquisa extensa sobre o mercado pra reunir o máximo de informações da melhor maneira possível.

Resumo sobre o projeto:

• Criação: segui a identidade visual do blog, que também é de minha autoria;
• Desenvolvimento: a calculadora funciona com JavaScript puro e uma API de gráficos do Google.

Gerador de nomes para cachorros

Em mais um projeto para meu blog, o Amo Vira Lata, criei um gerador de nomes – o KchorrIN.

A ferramenta é bem simples: o usuário seleciona um gênero e um tipo de nome, e aí é só clicar no botão que o nome gerado aparecerá na coleira.

Resumo sobre o projeto:

• Criação: segui a identidade visual do blog e adaptei uma ilustração de coleira para ter um aspecto visual mais divertido;
• Desenvolvimento: também criada com JavaScript puro, a ferramenta ainda tem uma animação de zoom na hora em que o nome é gerado.

Otimizações para Google PageSpeed Insights

Por fim, meu próprio site não poderia deixar de ser um case. Afinal, eu tenho que dar o exemplo, certo?

Como o Google passou a realizar diversas mudanças em suas recomendações a respeito de velocidade e desempenho dos sites, passei a fazer alguns testes pra deixar meu site o mais próximo possível do que o buscador vê como “ideal”.

Isso porque é praticamente impossível seguir alguns requisitos que o Google recomenda. Nem os próprios sites do Google têm pontuação 100 no PageSpeed, por exemplo.

Para a avaliação, utilizei também o Google Lighthouse, que é mais completo que o PageSpeed Insights, e o Think With Google, que avalia o site inteiro em dispositivos móveis.

O trabalho envolveu algumas alterações na própria estrutura do site. No final das contas, o site em si ficou bem melhor.

Resumo sobre o projeto:

• Análise de desempenho: através das plataformas de teste de velocidade do Google (PageSpeed Insights, Lighthouse e Think With Google), fiz a análise de o que deveria ser melhorado;
• Otimização: o trabalho envolveu diversas mudanças no site, como tipografia, scripts, minificação, lazy loading e retardamento de scripts, alteração da estrutura de algumas páginas e modernizações.

Saiba mais sobre Front-End

Entendeu o que faz um desenvolvedor front-end? Aproveite para tirar mais algumas dúvidas comuns:

HTML é linguagem de programação?

Não. HTML é uma linguagem de marcação, puramente estrutural.

Uma linguagem de programação como PHP trabalha com funções, lógica de programação, declarações condicionais, manipulação de dados e por aí vai.

O HTML é uma linguagem lida pelo navegador, que interpreta o código como uma página web (ou seja, um site). Uma linguagem de programação é lida e interpretada pelo servidor.

Os termos “programador HTML”, “programação HTML”, além de “programador front-end” e “programação front-end”, portanto, são incorretos!

Front-ender faz SEO?

Não necessariamente. SEO não é bem um foco no desenvolvimento front-end, até porque a otimização para buscadores é muito abrangente e envolve mais de uma área de conhecimento.

Porém, conhecer técnicas de SEO onpage é o mínimo para um desenvolvedor da área que queira ser reconhecido como profissional.

Isso porque boa parte do SEO onpage, que é o SEO técnico, é feito no front-end de um site. Exemplos diretos e indiretos:

• Título e cabeçalhos (headings);
• Tags meta (description e open graph);
• Imagens (tag alt e compressão);
• Atributos de links (rel);
• Minificação do código;
• Etc.

Desenvolvedor front-end trabalha com WordPress?

Depende do profissional: questão de preferência ou foco. Isso porque nem todo profissional front-end trabalha com as mesmas ferramentas e plataformas.

Mas o front-ender que usa WordPress pode trabalhar com a customização de temas prontos ou criar e desenvolver temas personalizados. Ou os dois, como é meu caso.

Como o WordPress é uma plataforma completa, ela acaba dispensando o conhecimento back-end, de certa forma. Assim, mesmo que o foco do profissional seja com front-end, ele pode trabalhar com WordPress (de maneira profissional) sem muita dificuldade.

Quando e como contratar um desenvolvedor front-end?

Você vai precisar de um desenvolvedor front-end em casos assim:

• Para desenvolver um site a partir de um layout (em PSD, XD ou AI, por exemplo);
• Para consultoria, melhorias e ajustes de SEO técnico;
• Se seu site está muito lento e com pontuação baixa no Google;
• Para criar alguns tipos de ferramentas interativas;
• Para instalar, configurar e personalizar um tema WordPress.

Como você pode perceber, eu trabalho na área. Precisando, é só chamar!

A cópia dos conteúdos e trabalhos deste site não é permitida. Saiba mais clicando aqui!