primeiros passos para estruturar uma equipe front-end
DESCRIPTION
Dicas e primeiros passos sobre como estruturar uma equipe front-end.TRANSCRIPT
![Page 1: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/1.jpg)
ESTRUTURANDO UMAEQUIPE FRONT-END
![Page 3: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/3.jpg)
![Page 4: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/4.jpg)
ALGUMAS OBRIGAÇÕES DE UM
DEV FRONT-END
![Page 5: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/5.jpg)
ACESSIBILIDADEMantém o sistema/site acessível. Isso quer dizer que qualquer coisa na
web precisa ser acessível de qualquer lugar e a partir de qualquer coisa.
![Page 6: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/6.jpg)
SEOTem que fazer com que os sistemas de busca encontrem o que precisam
da maneira mais rápida e fácil possível.
![Page 7: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/7.jpg)
COMPORTAMENTO E INTERAÇÃOEle precisa entender, criticar e ajudar na criação de comportamentos e
interações visuais ou de fluxo.
![Page 8: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/8.jpg)
PSD 2 HTMLO front-end nasceu inicialmente para passar o PSD para HTML. O
problema é que todo mundo caiu na real e entendeu que o HTML ( que
é quem carrega a informação) é o cara mais importante de tudo.
![Page 9: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/9.jpg)
PERFORMANCEO front-end é responsável por 80% ou mais da performance.
Um estudo diz que 94% da performance de websites mobiles está sob
responsabilidade do código front-end.
![Page 10: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/10.jpg)
RESPONSIVE E GRIDSFormatar sistemas para diversas telas.
Manter um sistema de grid, iniciando um padrão no design e passando
este padrão para o código CSS.
![Page 11: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/11.jpg)
TRABALHAR NO LIMITE DO BACK-ENDConsumir APIs parseando dados em diversos formatos para inserir as
informações no layout são requisitos que podem ser requiridos em
algumas equipes.
![Page 12: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/12.jpg)
O FLUXO
![Page 13: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/13.jpg)
FLUXO LINEAR E PARALELOGeralmente os fluxos são lineares. Principalmente quando se trata de
websites ou projetos pequenos.
Com a adoção dos padrões web, esse fluxo ficou paralelo.
![Page 14: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/14.jpg)
wireframeprotótipo
design
front-end
back-end
![Page 15: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/15.jpg)
wireframeprotótipo
design front-end back-end
![Page 16: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/16.jpg)
UX PSD back-end
![Page 17: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/17.jpg)
UX back-endPSD
![Page 18: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/18.jpg)
HTML & CSS
![Page 19: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/19.jpg)
UX back-endfront-end
![Page 20: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/20.jpg)
UX back-endfront-end
![Page 21: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/21.jpg)
ENSINE AS EQUIPES A TRABALHAREM COM O
TIME DE FRONT
![Page 22: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/22.jpg)
CUIDADO COM OS DEVS BACK-ENDEles vão meter a mão no seu código, eles não vão entregar o json da
maneira correta, eles vão querer escrever seu HTML em HAML.
![Page 23: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/23.jpg)
“IN FACT, HAVING ONLY ONE FRONT-END DEVELOPER IN
A TEAM WITH OTHER DEVELOPERS DOING ONLY
SERVER-SIDE WORK IS A RECIPE FOR DISASTER.”
bit.ly/18MX8cg
Don Roby no StackOverflow
![Page 24: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/24.jpg)
CUIDADO COM OS DESIGNERSEles vão mudar de ideia o tempo inteiro. Eles vão trocar de cor. Eles vão
trocar a maldita sombrinha do lugar... Eles vão.
Ensine-os sobre performance, sobre compatibilidade de browsers e
mostre a quantidade de código que se usa para fazer aquela firula besta.
![Page 25: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/25.jpg)
INCLUA SUAS DATAS NAS ESTIMATIVAS DE ENTREGAAs equipes podem não estar acostumadas com a equipe de front-end,
por isso é importante estar presente nas estimativas de planejamentos
de sprints.
![Page 26: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/26.jpg)
O QUE VOCÊ RECEBE?Como UX vai entregar os layouts e especificações é muito importante.
Já vi projetos atrasarem por que o front-end começou a codificar antes
do layout ficar pronto. Não é errado, mas precisa ter cuidado.
![Page 27: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/27.jpg)
O QUE VOCÊ ENTREGA?Até onde a equipe de front-end pode ir? Nós entregamos apenas
layouts estáticos ou vamos consultar as APIs dos projetos?
![Page 28: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/28.jpg)
CONTROLANDO
![Page 29: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/29.jpg)
TENTE NÃO FAZER MICRO GERENCIAMENTONão dá para fazer um controle interno decente, você tem que jogar com
os controles existentes em cada projeto. Use os softwares que eles
usam.
![Page 30: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/30.jpg)
QUAL MODELO AGILE PODEMOS USAR?Para a equipe de front? Depende do escopo da equipe de front-end. Se
ela está sendo representada por um integrante em cada projeto, esse
integrante deve seguir as regras do projeto.
![Page 31: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/31.jpg)
![Page 32: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/32.jpg)
O PERFIL DA EQUIPEComo sua equipe será? Você vai precisar de pessoas especialistas em
determinada área? Será que todos devem ter os mesmos
conhecimentos?
![Page 33: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/33.jpg)
ux / ai back-endfront-end
É aquele cara que vai prezar pela
fidelidade do layout e vai pensar
junto com o UX quais
experiências, transições e etc o
usuário vai ver.
FRONT-END PROGRAMADOR
É aquele front-end que manja muito de
programação, mas não é programador.
Ele conhece pelo menos uma
linguagem de programação e manja dos
truques da área de back-end.
FRONT-END DESIGNER
![Page 34: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/34.jpg)
FRONT-END OPSFront-end Ops é aquele cara que vai aprender a falar de igual para igual
com os SysAdmins e outros responsáveis pela infra.
![Page 35: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/35.jpg)
AGILIDADE TÉCNICANão adianta, uma equipe pequena não é páreo para atender diversas
equipes ao mesmo tempo com prioridades diferentes. Você precisa
agilizar a entrega. Na Locaweb fizemos um framework. Isso nos deu boa
parte da agilidade de entrega que temos hoje.
![Page 36: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/36.jpg)
VANTAGENS DE TER UM FRAMEWORK• Controle
• Prototipação
• Produtividade
• Manutenção
• Padronização
![Page 37: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/37.jpg)
PROBLEMAS
![Page 38: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/38.jpg)
NA HORA DE ESTIMAR, NÃO TENTE AGRADAR NINGUÉMEstimar prazos não quer dizer que você tem que acertar a data de
entrega.
![Page 39: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/39.jpg)
PADRÃO DE CÓDIGOMesmo tendo um framework, pode ser que alguns projetos precisem de
código específico. É necessário ter um padrão para códigos como esse,
de preferência o mesmo padrão usado no Framework.
![Page 40: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/40.jpg)
MUITA DEMANDAUma equipe pequena ágil é sempre uma equipe pequena. Cuidado com
o crescimento da demanda de outras equipes. Se eles aumentam a
equipe deles, pode ser que você precise aumentar a sua depois de um
tempo.
![Page 41: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/41.jpg)
SE CRIAR UM FRAMEWORK, CUIDE DELEA velocidade da sua equipe só é possível se seu framework funcionar
perfeitamente. Não se perca totalmente nas demandas dos projetos,
separe algum tempo para cuidar do seu framework.
![Page 42: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/42.jpg)
ENSINE E APRENDANão importa o que aconteça, sempre tem algo novo para aprender.
Cursos ou palestras rápidas (rápidas mesmo) frequentes.
![Page 43: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/43.jpg)
TENHA SEMPRE UM DEV FRONT-END POR PERTO
![Page 44: Primeiros passos para estruturar uma equipe front-end](https://reader035.vdocuments.pub/reader035/viewer/2022062404/553943114a79591c7b8b4941/html5/thumbnails/44.jpg)
ENTÃO, FECHOU!
A palestra vai ficar aqui:slideshare.net/diegoeis
bit.ly/locawebstyle