LEANDRO ORIENTEDESENVOLVEDOR FRONT END

COMO ME
TORNAR UM
DESENVOLVED
OR 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 ouDribbble 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
headers 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,
otema 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 ecommerce, 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 PRCOMPILADORES
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 como Twitter 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.

ESPALHE A PALAVRA
NUNCA PERCA UM POST
assinar

LEANDRO ORIENTE
Desenvolvedor Front End e consultor da vida.
leandroriente@gmail.com

SOLTE O VERBO
PODE GOSTAR TAMBM

Como cobrar por um freelance

Ol. Meu nome Leandro e sou um ex-viciado
Como aprender ingls
No consigo clientes porque no tenho portflio
Meu cliente realmente precisa de um site?

LEANDRO ORIENTE,

DESENVOLVEDOR FRONT END

Atualmente trabalhando no VTEX Lab

leandroriente@gmail.com
"Os posts nesse site representam unicamente a minha opinio pessoal."