O que Front-end Developers precisam saber

Resposta simples: HTML, CSS e JavaScript. Mas simples √© uma coisa que o Desenvolvimento Front-end deixou de ser faz muito tempo ūüėĄ

Primeiro, alguns dados

Pesquisei no Google Trends, o interesse pelo termos Front-end Developer (Mundo) e Desenvolvedor Front-end (Brasil), nos √ļltimos 10 anos.

Os n√ļmeros representam o interesse de pesquisa, relativo ao ponto mais alto no gr√°fico de uma determinada regi√£o em um dado per√≠odo. Um valor de 100 representa o pico de popularidade de um termo. Um valor de 50 significa que o termo teve metade da popularidade. Uma pontua√ß√£o de 0 significa que n√£o havia dados suficientes sobre o termo.

Esse foi o resultado no mundo:

Google Trends: Front-end Developer

No Brasil, apesar de altos e baixos, o cenário não é muito diferente:

Google Trends: Desenvolvedor Front-end

Ou seja, Desenvolvimento Front-end segue em alta e deve se manter assim nos pr√≥ximos anos. Empresas cada vez mais est√£o buscando esse perfil profissional e cada vez mais pessoas se interessam e buscam informa√ß√Ķes para entrar nessa profiss√£o.

Algumas coisas que podem fazer sentido nesse momento, podem n√£o fazer sentido no futuro. O mundo de desenvolvimento se move com extrema velocidade, assim como minhas opini√Ķes ūüėā

Dito isso, vou listar algumas habilidades que considero importantes para trabalhar nessa área. Não trago a verdade absoluta e estou longe de ter conhecimento para tal, mas trago a visão pessoal de alguém que trabalha com isso faz 10 anos, no caso eu.

Bora l√°! ūüėú

O b√°sico de Desenvolvimento Web

Essas s√£o algumas coisas que endere√ßam desenvolvimento web em geral e s√£o de extrema import√Ęncia para uma carreira s√≥lida.

Configuração de domínio e hospedagem

Não importa o projeto que você faça ou esteja, ele estará hospedado em algum lugar e precisa ter um domínio configurado.

Cada vez mais temos solu√ß√Ķes que automatizam essas etapas, como por exemplo o Netlify, Heroku e produtos da AWS. Mas nem sempre essas possibilidades estar√£o dispon√≠veis, por isso √© interessante entender como esse processo funciona e saber configurar manualmente.

Terminal

Terminal

O terminal segue sendo uma das ferramentas mais usadas no nosso dia a dia. Boa parte das tecnologias usadas no Desenvolvimento Front-end moderno, precisam ser utilizadas a partir de um terminal.

A boa notícia, é que atualmente temos várias libs com alguns atalhos que facilitam o uso desse, muitas vezes assustador, recurso. Além disso, alguns editores de códigos como o VSCode já possuem terminal integrado, ajudando demais no dia a dia.

Como client-side e server-side se comunicam

Também é muito importante entender como é feita a comunicação entre client-side e server-side. Boa parte do trabalho no desenvolvimento Front-end é integrar e interagir com APIs.

Alguns tópicos legais para estudo:

  • Web Services, REST e GraphQL
  • Opera√ß√Ķes: POST, GET, PUT, PATCH, and DELETE
  • Protocolo HTTP

O canal do Akita no Youtube tem um monte de vídeos explicando muito bem alguns desses tópicos, sugiro assistir alguns deles.

Git e Versionamento

√Č quase imposs√≠vel imaginar desenvolvimento de software sem um sistema de controle de vers√Ķes. E j√° faz anos que o Git se tornou o maior expoente dessa categoria.

Git

Passar algum tempo estudando Git e seus comandos é muito importante. Todos os projetos e produtos que você trabalhar devem utilizar essa tecnologia para fazer versionamento de código e ela é extremamente poderosa.

Importante também dizer que Git e Github são coisas diferentes, assim como Java e JavaScript.

Muitas pessoas ainda fazem essa confus√£o, mas Git √© a tecnologia para controle de vers√Ķes. Github, Bitbucket, Gitlab e etc, s√£o sites com interfaces visuais para navegar e visualizar o resultado desse versionamento. Sendo que o Github por exemplo, tamb√©m funciona como uma rede social de desenvolvimento.

HTML, CSS e JavaScript

Virou clichê, muitas pessoas falam para estudar a base (eu falo o tempo todo). E como estamos falando de desenvolvimento Web, por de trás do fantástico mundo dos frameworks, no fim tudo vai gerar HTML, CSS e JavaScript, e exatamente por isso é tão importante saber bem essas coisas.

Posso dar um exemplo

Nos √ļltimos anos tenho trabalhado muito com Angular que √© um framework JavaScript. Angular usa TypeScript, um superset de JavaScript. Nos estilos tenho usado Sass e PostCSS, o primeiro √© um pr√©-processador de CSS e o segundo um p√≥s-processador de CSS.

Em alguns projetos também uso o Kratos como boilerplate, entre as tecnologias estão Webpack que é um bundler de módulo JavaScript, CSS Modules que é um modularizador CSS e Pug, que é um template engine de HTML.

No decorrer da minha (j√° longa, 10 anos mano ūüėĪūüėĪ) carreira, usei tecnologias como jQuery (JavaScript), Jade (HTML), LESS (CSS), Stylus (CSS), Grunt (JavaScript), Gulp (JavaScript), Bootstrap (HTML, CSS e JavaScript) e tantas outras que faziam sentido naquele momento.

Essa sopa de letrinhas tem uma coisa em comum:

No fim das contas todas elas usam HTML, CSS e JavaScript

E tem a curva de aprendizado

Não importa a nova lib que bombou no mercado, ou quão complexa parece ser aquela nova tecnologia que está todo mundo comentando… quanto mais você souber da santíssima trindade do front-end, mais tranquilo vai ser seu aprendizado em tudo que derive delas.

Gosto de criar projetos pessoais para aprender coisas novas, ent√£o no desenvolvimento da nova vers√£o desse site, usei uma stack com tecnologias que nunca tinha trabalhado antes. Citando algumas:

  • JavaScript (Gatsby / React)
  • CSS (Styled Components)

Mesmo trabalhando numa stack completamente nova, com tecnologias que nunca usei antes, em poucos dias consegui aprender esses novos conceitos e ganhar fluidez no desenvolvimento.

Isso seria impossível se eu não tivesse um bom conhecimento da base.

Perfeito! Ent√£o s√≥ saber essa base basta? ūüėĀ

Existem outras coisas essenciais, e vou falar sobre algumas delas agora.

Conceitos e Metodologias

Não adianta muito você dominar qualquer tecnologia se não souber o que fazer com elas, ou melhor, não souber para que servem elas.

Toda nova lib ou tecnologia de desenvolvimento criada, tem como objetivo resolver algum problema conceitual, automatizar coisas complicadas que enfrentamos no dia-a-dia, para melhorar processos e assim gerar mais valor para o produto final.

Parte dos frameworks JavaScript atuais, por exemplo, servem para resolver problemas de componentiza√ß√£o e alguns s√£o baseados no conceito de programa√ß√£o reativa. S√£o coisas que n√≥s j√° tent√°vamos resolver de outras formas no passado. Essas tecnologias s√£o as (re)evolu√ß√Ķes de v√°rias t√©cnicas que j√° us√°vamos antes.

O mundo do desenvolvimento é cíclico.

Outro bom exemplo, as libs de CSS-in-JS

De cara muitas pessoas torceram o nariz (fui uma delas), mas s√£o maravilhosas no cen√°rio de desenvolvimento atual, j√° que resolvem com JavaScript, problemas que o CSS infelizmente n√£o resolve sozinho.

Sempre tivemos problemas de colis√£o de classes, ent√£o criamos metodologias como BEM para ajudar nisso, libs CSS-in-JS fazem isso de forma autom√°tica.

No passado era comum o uso de CSS inline, mas acabou se tornando m√° pratica porque apesar de evitar colis√Ķes e ser perform√°tico, a escalabilidade era p√©ssima. O que o CSS-in-JS tamb√©m faz? Quando necess√°rio injeta alguns estilos inline, mas tudo de forma autom√°tica, com c√≥digo reutiliz√°vel e escal√°vel.

Como disse: Cíclico.

UX e UI

Voc√™ n√£o precisa ser designer, mas √© ideal ter √≥timas no√ß√Ķes de diagrama√ß√£o, ser detalhista-perfeccionista e principalmente que saiba trabalhar muito pr√≥ximo das pessoas que cuidam do design e experi√™ncia do usu√°rio, explicando poss√≠veis limita√ß√Ķes t√©cnicas e propondo melhorias durante o desenvolvimento.

A non-designer’s guide to UX design Crédito: uxdesign.cc

Durante o boom do desenvolvimento Front-end alguns anos atrás, era comum dizer que a área se dividiria entre dois tipos de profissionais: Com foco em Engenharia (JavaScript) e com foco em Design (CSS). Eu também pensava assim, mas não acho que a profissão caminhou dessa forma e nem que faça sentido atualmente.

Entendo que existam diferentes perfis, e que naturalmente algumas pessoas v√£o se sentir mais a vontade criando algoritmos, enquanto outras v√£o gostar mais de criar interfaces. Mas elas caminham juntas, cada vez mais juntas.

Experiência de usuário é o que separa produtos incríveis, que você ama usar todos os dias, de produtos nem tão legais assim. UX também envolve acessibilidade e usabilidade, pontos imprescindíveis.

No fim, Desenvolvimento Front-end traduz em código toda experiência pensada pelo time de UX/UI. E experiência vai desde uma interface bonita, acessível e agradável de navegar, até um projeto performático, rápido no carregamento e que não acabe com a bateria ou rede de dados da pessoa que está acessando.

Pouco importa o quão maravilhoso seja um código se ele não entregar uma experiência foda para o usuário final. Código incrível gerando um produto com UI/UX ruim, vai servir apenas para afagar o ego de quem desenvolveu.

Back-end e DevOps

Fullstack Developer Crédito: @sepandassadi

Antes preciso dizer que acredito sim no mito do Fullstack Developer. Essas pessoas existem, estão por aí e são mais comuns do que se imagina. E ao contrário do que dizem, também não acho elas tenham deficits técnicos por não serem especializadas. Pode ser que sim, mas nem sempre.

Parte dessas pessoas extravasaram ter apenas uma especialização para possuir várias. Totalmente possível, ao longo de muitos anos de carreira.

Além disso, uma pessoa Fullstack numa stack, não necessariamente será Fullstack em outra stack, e nem vai dominar completamente todas as áreas do desenvolvimento de um produto. Penso que esse termo diz que a pessoa seria capaz de participar ativamente de todas as etapas, ou seja:

  • Front-end
  • Back-end
  • DevOps

No mundo Front-end, a possibilidade de ser Fullstack dentro de alguns projetos aumentou muito com o advento de tecnologias como Node.js anos atr√°s e o Serverless atualmente.

Mas ent√£o preciso ser Fullstack? ūüėĪ

Como sempre, depende.

Depende muito da empresa que você trabalha, das empresas que você quer trabalhar e do plano de carreira que você quer seguir.

Tamb√©m n√£o me preocuparia muito com isso no inicio de carreira, Front-end j√° tem conte√ļdo suficiente pra te deixar ocupado ou ocupada por alguns anos. De repente, no inicio vale conhecer de superficialmente como outras etapas do desenvolvimento funcionam, mas n√£o precisa se aprofundar tanto.

Porém, com o tempo acho importante adquirir mais conhecimento, mesmo que não se especialize tanto nessas áreas irmãs, penso ser cada vez mais importante aprender sobre elas. A tendência é que esse conhecimento melhore inclusive, suas qualidades como Front-end Developer.

Algumas das maiores e melhores empresas do mundo, como Google, AWS e várias outras, buscam profissionais com esse perfil de Software Engineer. Além disso, a própria transição para cargos de liderança também fica facilitada por conta da visão mais ampla de todas as etapas de desenvolvimento.

As soft skills

Voc√™ j√° deve ter escutado muitas vezes da import√Ęncia de desenvolver suas soft skills. Mas deveria escutar ainda mais. S√©rio, elas s√£o essenciais, precisamos melhorar como pessoas para lidar com outras pessoas.

Soft skills Crédito: ied.eu

Entenda como soft skills todas suas habilidades comportamentais, emocionais e sociais. Ou seja, ao passo que hard skills são habilidades técnicas e fáceis de avaliar, as soft skills são extremamente subjetivas e de difícil avaliação.

Aquela figura caricata de pessoas da programação com pouca habilidade social faz cada vez menos sentido no mercado de trabalho. Por mais tímido ou tímida que você seja, é cada vez mais importante melhorar sua comunicação e desenvolver suas habilidades interpessoais.

Além disso, você precisa entender o produto na qual está trabalhando.

E faz muito sentido!

Primeiro porque a visão técnica e raciocínio lógico de desenvolvedoras e desenvolvedores, podem ajudar demais na concepção de ideias, sua contribuição é extremamente valiosa.

Segundo porque como disse acima, nós não desenvolvemos código pelo código, nós desenvolvemos coisas para pessoas usarem. Melhorar sua capacidade de entender as necessidades do usuário final impacta diretamente a qualidade do desenvolvimento.

A questão emocional também é muito importante, saber lidar com pressão, priorizar suas atividades e receber (e também dar) feedbacks são fatores que precisamos trabalhar dia após dia.

Tamb√©m precisamos buscar uma vida equilibrada, pela natureza dessa profiss√£o √© muito f√°cil sermos engolidos pelo c√≥digo, negligenciando nossa sa√ļde (f√≠sica e mental) e tamb√©m nossa vida pessoal. Saber equilibrar tudo isso tamb√©m √© uma soft skill, e das mais importantes, se voc√™ n√£o estiver bem consigo mesmo, n√£o vai conseguir dar o seu melhor.

Roadmap de Desenvolvimento Front-end

Caso queira se aprofundar mais em tópicos do Desenvolvimento Front-end moderno, uma boa dica é consultar roadmaps e diagramas.

Eles mostram o ‚Äúcaminho das pedras‚ÄĚ sobre algumas tecnologias e conceitos que voc√™ fatalmente viu ou vai ver durante a carreira. E mais, eles s√£o frequentemente atualizados, conforme v√£o surgindo novas tecnologias ou conceitos relevantes.

Vou deixar dois deles aqui, ambos em inglês:

Conclus√£o

A gente passa 8 horas por dia trabalhando e muitas outras indo até a empresa ou estudando.

Cada aplica√ß√£o que constru√≠mos pode impactar positivamente no dia a dia de v√°rias pessoas no mundo todo: automatizando as tarefas delas, facilitando e democratizando acesso a conte√ļdos ou mesmo levando mobilidade e trazendo mais qualidade de vida para elas. Tudo isso torna-se poss√≠vel atrav√©s da tecnologia.

Nosso trabalho é desafiador e empolgante. Dia após dia somos desafiados com novas tecnologias e novos paradigmas.

De tempos em tempos precisamos desapegar de ideias e conceitos antigos para poder construir uma versão profissional (e pessoal), melhor de nós mesmos.

Isso √© foda demais! ‚̧ԳŹ