Como me tornar um Desenvolvedor

Front End
21 Aug 2013

Minha viso de obrigaes e diferenciais de desenvolvedores front
end e algumas pequenas dicas a respeito.
Esse post baseado nas experincias que j tive na rea. Confesso
que no so muitas, mas como estamos vivendo o
amadurecimento do profissional de Front End agora, acredito que
sejam vlidas.
Seria bacana ler esse post sobre faculdades e seus benefcios para
desenvolvedores front end como leitura complementar.
Primeiramente vamos falar sobre items claramente obrigatrios.
Depois partimos para os diferenciais de fato.
Must have
HTML e CSS
Essas linguagens so requisito bsico de qualquer vaga para
desenvolvimento Front End.
Por mais que voc v trabalhar focado em projetos em Javascript
essencial ter conhecimentos avanados em ambas as linguagens.
Saber usar bem a semntica do HTML 5 e utilizar CSS 3 para
evitar o uso de imagens em excesso tambm deve fazer parte do
seu cotidiano.
Quer saber se realmente est num nvel aceitvel de
conhecimento? Tente fazer um menu drop-down de 3 nveis, um
lightbox (sem o JS, s os estilos) ou pegue um case de sucesso
como o Behance ou Dribbble e tente reproduzir de maneira
semelhante.
Se tiver dificuldades nessas tarefas um sinal claro que voc est
atrasado.
Javascript
Ter uma base slida em Javascript outro requisito essencial de
um desenvolvedor.
Voc no precisa ser um Expert e saber todos os detalhes da
linguagem, mas de extrema importncia que saiba se virar bem
e que no corra de Javascript como o Diabo da cruz.
Quando digo base slida em Javascript no significa saber colocar
um Lightbox ou um Accordion em jQuery na pgina.
Vai chegar uma hora onde voc vai precisar de algo especfico
demais para resolver com um plugin pronto e vai ter que meter a
mo na massa.
Code school uma boa pedida. E o melhor, free.
Lgica de programao e algoritmos
Obviamente para meter a mo na massa no Javascript voc vai
precisar saber algoritmos e trabalhar um pouco sua lgica de
programao.
O seu dia a dia vai estar recheado de loops, condicionais e
variveis. No saber lidar com isso vai te engessar no nvel semi-
jnior.
"Mas eu odeio programao. Se quisesse programar virava Back
End"
Por favor, jovem. Ative o cdigo secreto do meu blog. "Ctrl + w"
(Cmd para os felizardos).
jQuery
Malhei o jQuery algumas linhas atrs mas agora venho me redimir.
A library fantstica. Conseguiu tornar coisas relativamentes
complexas em Javascript em cdigos fceis e intuitivos.
Como exemplo principal vou citar as requisies Ajax. Qualquer
iniciante em 15 minutos na documentao do jQuery consegue
entender como funciona e faz seus primeiros requests.
Agora se voc nunca fez, procure pela forma nativa de realizar
resquests Ajax.
algo completamente chato e confuso ao primeiro olhar e
somente chato ao segundo.
Porm fica o alerta que citei quando falei do Javascript. No se
prenda a plugins. Procure entender Javascript antes e enteder o
jQuery.
simples e vai te forar a sair da zona de conforto dos plugins
prontos.
Cedo ou tarde os plugins no vo te atender e voc vai precisar
aprender em meia hora s 4:15 da manh como fazer uma
integrao com o Facebook Connect porque a entrega do projeto
do cliente porre no dia seguinte.
J imaginou a reunio?
"Ento seu Jeremias, o login ficou sem integrao com Facebook
porque a comunidade web no fez um plugin pra isso".
Deprimente n?
Ferramentas de desenvolvedor do Chro... browser
Saiba usar o browser como ferramenta para debugar o seu cdigo.
Nele voc pode identificar e corrigir pequenos deslizes de CSS ou
at mesmo criar um componente novo, analisar header's de
resposta das suas requisies para identificar possveis erros e
debugar literalmente sua aplicao Javascript.
Alm disso voc pode analisar a perfomance do seu site e como o
browser est renderizando o aps as interaes com Javascript.
~~ mensagem subliminar ~~ Use o google chrome ~~ mensagem
subliminar ~~
Noes gerais das demais reas de TI
J trabalhou com um Designer que veio de mdia offline e nunca
trabalhou com desenvolvimento web?
No? Nem queira. um desastre total.
O mesmo vale para um front end que no tem a mnima idia de
como funciona uma aplicao web.
Enteder os processos que levam o "/api/user" a entregar as
informaes do usurio num JSON perfeito essencial para
evoluir na sua carreira.
Assim como entender como as informaes do site so
armazenadas, como o servidor gerencia o cache das pginas, como
o request do seu browser trs o seu site para o usurio ou como
o google ranqueia e indexa o seu site.
No digo para ser o sbio da colina em TI, mas pelo menos
entender o que se passa no resto da aplicao.
Sua vida vai ficar mais simples e a vida dos seus companheiros de
trabalho tambm.
Saiba manusear algum software de edio de imagem
O cliente vai olhar pro layout que o Designer mandou e vai
querer que aquele JPEG tome vida. Alis a empresa inteira vai
querer e cabe a voc fazer isso.
Novamente, voc no precisa ser o Fbio Sasso do Photoshop,
porm saiba o bsico dele e do Fireworks.
mais comum ver designers trabalhando com Photoshop, porm
alguns usam o Fireworks e para descobrir medidas, cores e pegar
algumas imagens no necessrio certificao Adobe.
Meia horinha no google mais que suficiente para aprender a
extrair informaes de qualquer layout.
Fireworks ou Photoshop? Quiabo.
Posso usar GIMP? Se o Designer no mandar um arquivo .psd,
porque no?
Versionamento
Se voc no sabe do que se trata. Pare, salve o post nos
favoritos, entre no google, comece a estudar loucamente, termine
de estudar loucamente, volte e prossiga com o post.
Versionar cdigo se tornou uma prtica essencial no processo da
grande maioria das empresas.
Voc consegue em poucos passos desfazer uma merda catastrfica
que tenha feito ou simplesmente retornar a uma verso estvel
ao ver que a sua idia brilhante no reluzia tanto assim.
Git o preferido em boa parte das empresas. Normalmente
usado em conjunto com Github.
Existem empresas que utilizam SVN e pouqussimas fogem desses
dois.
Se dominar bem o Git j est de bom tamanho.
Adendo. O Breno Calazans recomendou a leitura do Semantic
Versioning. Excelente leitura sobre como organizar as verses do
seu cdigo.
Dicas rpidas
Se tiver oportunidade, trabalhe com o Mac OS, se no for
possvel, tente utilizar o Linux durante um tempo. Mesmo
que por experincia como OS secundrio.
Tente no ficar 100% preso ao mundo Windows.
No tenha medo do Terminal. Para versionamento e algumas
excelentes ferramentas de automatizao, como o Grunt ou
o Bower por exemplo ele essencial.
Frequente eventos da rea. Costumam ser muito bons e
recheados de novidades.
Tenha um Linkedin atualizado.
Se for vivel, tenha um portflio e/ou conta no github.
Jamais mande seu currculo como .doc para nenhuma
empresa. Se for mandar um arquivo que seja um pdf.
No use o Dreamweaver.(ponto)
Fim da parte fcil
Com essas skills voc j consegue emprego em boa parte das
agncias ruins do pas e em algumas mdias.
Vai ganhar mal, se estressar, madrugar na agncia diariamente e
ser explorado mas veja pelo lado bom, voc no trabalha em Call
center.
Em um ou dois anos voc consegue um domnio razovel em todos
os pontos que citei aqui se mantiver um ritmo razovel.
Se for bem dedicado e autodidata, consegue em bem menos
tempo. Se tiver bagagem de outras reas de TI vai ter mais
facilidade ainda.
O importante nessa etapa no se acomodar. Dominar essas skills
te abre muitas portas mas no o suficiente para conseguir
empregos mais gratificantes.
Certa vez vi uma palestra do Zeno Rocha (no foi nesse post,
mas esse post muito bom tambm) onde ele frisou isso. Alis,
ele sempre frisa.
"Saia da zona de conforto."
Estar confortvel com sua bagagem de conhecimento atual um
pssimo sinal (caso voc no seja John Resig por exemplo).
Sempre procure sair em busca de algo novo.
O mercado de trabalho adora isso e voc vai ver que de passo em
passo vai atingir nveis que pareciam muito complexos no incio de
carreira.
Nice to have
Agora vamos falar de coisas que vo te destacar um pouco da
multido. No muito, mas j vai dar pra almejar posies bem
mais confortveis no mercado.
Perfomance
Perfomance foi segundo pesquisas recentes realizadas por mim,
o tema mais abordado em eventos Front End no ano de 2012.
Todo mundo deu pitacos, publicaram guidelines (alis, parabns
aos envolvidos), falaram, falaram e falaram muito.
Se voc deseja uma vaga numa empresa de ponta, tem que saber
de cor todas as regras de todos os guidelines de performance.
Hum segundo de carregamento a mais no seu blog pessoal no vai
te trazer muitos prejuzos. Meio segundo a mais num e-
commerce, pode valer mais que o seu salrio dependendo do porte
da empresa.
No vou entrar no mrito das medidas eficazes, j que muitos j
fizeram isso, mas recomendo que saiba todas.
SEO
Leia a MestreSEO (Agncia Mestre agora) mensalmente.
Do que adianta lanar um produto sensacional, um app
revolucionrio ou um portal de contedo se o seu site ranqueia
pior que um site da Wix?
Saiba o bsico, principalmente no que tange front end. Poucos
detalhes j do ganhos mensurveis quando se trata de SEO.
Alis, segundo o Google eu sou o Desenvolvedor Front End mais
relevante do Brasil. Na minha frente, por hora, s a Wikipedia.
S o google mesmo pra falar essas bobagens n?
OOCSS e pr-compiladores
Saiba trabalhar com CSS modular. No vou entrar no mrito das
definies tcnicas, mas saber OOCSS principalmente para
trabalhar com portais que possuem milhares (milhes em alguns
casos) de pginas um quesito vital pro negcio.
Imagine uma Globo.com com o volume de contedo que tem
usando CSS de forma amadora? Invivel n?
Empresas de grande porte precisam ter o CSS muito bem
modularizado para que a manuteno seja simples e que o
reaproveitamento seja feito tornando a aplicao mais leve e
consistente.
Um case interessante para entender o funcionamento so os
Frameworks comoTwitter Bootstrap e Foundation que tratam
muito bem disso.
Vale abrir o cdigo fonte e observar como as classes so muito
bem aproveitadas.
Uma ferramenta boa para ajudar nessa organizao do cdigo so
os pr-compiladores.
Eles abrem um leque de opes bem maior para o
desenvolvimento do seu CSS.
Os mais populares so LESS e SASS e ambos so nice to have.
Conhecimento regular em alguma(s) linguagem(ns)
Server Side.
Obviamente no um quesito obrigatrio para desenvolvedores
front end, porm boa parte das grandes empresas cobram.
O que eles precisam no de um programador que atenda a
ambos os lados (apesar de serem muito bem vindos quando
aparecem) e sim de um front end que saiba trabalhar bem em
paralelo com desenvolvedores Back End (chamarei apenas de back
end de agora em diante).
Se voc precisar interromper um back end para alterar um for ou
para mudar a formatao do HTML gerado pelo servidor de 5 em
5 minutos ningum anda.
O ideal que voc saiba se virar com tudo que esteja relacionado
ao client, seja isso um HTML esttico ou uma pgina compilada
no servidor.
Caimos aqui, novamente na Lgica de programao e algoritimos.
Esse um quesito essencial alm do conhecimento da linguagem
usada no projeto para no fazer cagada e gerar um problema
gigante ao invs de no atrapalhar o companheiro.
Se voc trabalha em agncia j deve ter passado por isso com
PHP e Wordpress. Que por sinal no mais do que sua obrigao
saber manusear, mesmo que de forma mais amadora e superficial.
Magias negras em Javascript
Para trabalhar em agncia (generalizando) basta ter uma base
razovel de Javascript e jQuery. Para trabalhar numa empresa de
maior porte com software prprio, voc vai precisar ir alm do
bsico.
Geralmente empresas assim possuem necessidades mais profundas
e precisam de profissionais capazes de desenvolver verdadeiras
aplicaes client side.
O exigido nesses caso total domnio de Javascript e
domnio/conhecimento em algum framework.
Os mais comuns so Angularjs (menino de ouro do google),
Backbone, PhoneGap (mobile), Knockout, Ember...
Obviamente o framework nesse caso somente um diferencial. O
importante mesmo ter domnio (quase) absoluto de javascript.
Concluindo
Obviamente existem dezenas de outros pontos que no abordei e
que so muito importantes.
Alguns ficaram omitidos em alguns tpicos, outros eu esqueci de
comentar mesmo.
Acredito que seja um post um pouco intil para os profissionais
que j esto slidos no mercado, mas que possa ser essencial para
quem est comeando e no sabe bem que rumo tomar.
Costumo esbarrar frequentemente nesse tipo de dvida em grupos
do Facebook e na minha caixa de entrada.
Caso tenha notado algum deslize, tenha alguma sugesto diferente
ou alguma dvida, no deixe de comentar.
Quanto mais enriquecedora a pgina, maiores as chances de
pintarem alguns bons novos profissionais em breve.