Têm dúvidas em relação à atuação de pessoas de desenvolvimento Front-end e Back-end? Bom, essa é uma discussão constante no mercado atual, uma vez que essa é uma área em crescimento exponencial.

Olá, Devs! Têm dúvidas em relação à atuação de pessoas de desenvolvimento Front-end e Back-end? Bom, essa é uma discussão constante no mercado atual, uma vez que<a style="color: #ff004c;" href="https://www.alura.com.br/cursos-online-front-end"> essa é uma área em crescimento exponencial</a>. Por meio deste artigo, eu vou explicar um pouco sobre o que é front-end, como ser um desenvolvedor front end, o que deve se aprender, qual é a sua trajetória e como é ser um desenvolvedor front-end na dti, organização que leva o agilismo como filosofia de cultura.
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#O-que-e-Front-end-e-Back-end">1 O que é Front end e Back end?</a></li><li><a href="#Como-ser-um-desenvolvedor-front-end">2 Como ser um desenvolvedor front end?</a><ul><li><a href="#Tecnologias-de-front-end">2.1 Tecnologias de front-end</a></li><li><a href="#A-importancia-do-design-para-o-front-end">2.2 A importância do design para o front-end</a></li></ul></li><li><a href="#O-que-e-Vue-JS">3 O que é Vue JS</a></li><li><a href="#Como-e-a-trajetoria-de-um-desenvolvedor-front-end">4 Como é a trajetória de um desenvolvedor front end?</a></li><li><a href="#Como-e-trabalhar-com-front-end">5 Como é trabalhar com front end?</a></li></ul></div>
<h2>O que é Front end e Back end?</h2>
Para entender melhor os termos citados, precisamos primeiro compreender o conceito de arquitetura cliente-servidor.
A arquitetura cliente-servidor consiste em um sistema distribuído, no qual as tarefas e cargas de trabalho são distribuídas entre os provedores dos recursos ou serviços, designados como servidores, e os consumidores desses recursos ou serviços, designados como clientes.
Para um cliente solicitar um recurso ou serviço, ele deve enviar uma requisição ao servidor. Em seguida, o servidor processa a requisição e envia uma resposta ao cliente. Por exemplo: ao acessar essa página, o seu navegador solicita o recurso para o servidor, como resultado, o navegador renderiza a resposta e você consegue ler este artigo.
<img fetchpriority="high" decoding="async" class="alignnone wp-image-17644 size-full" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/Front-end.png" alt="Front-end " width="801" height="223" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/Front-end.png 801w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/Front-end-300x84.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/Front-end-768x214.png 768w" sizes="(max-width: 801px) 100vw, 801px" />
Dado o conceito de arquitetura cliente-servidor, agora podemos definir com maior clareza o que é front-end, back-end e full stack.
Front-end é a parte do sistema na qual os usuários interagem, ou seja, todo código que é executado no lado do cliente (client-side). Essa parte do sistema é responsável por conter todas as regras de apresentação das informações. Tudo relacionado a interfaces tem a ver com front-end, como páginas web, aplicativos mobile ou até os comandos de voz de uma assistente virtual.
Back-end é parte do sistema que processa e provê informações, ou seja, todo código que é executado no lado do servidor (server-side). Essa parte do sistema fornece e garante todas as regras de negócio, acesso a banco de dados, segurança e escalabilidade.
Full Stack é apenas a denominação dos desenvolvedores que possuem amplo domínio tanto em front-end quanto em back-end.
<iframe title="O QUE É FRONT-END E BACK-END???" width="1200" height="675" src="https://www.youtube.com/embed/Em0R3csNMVE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h2>Como ser um desenvolvedor front end?</h2>
O desenvolvimento front-end compreende diversas tecnologias e plataformas, como web e mobile. A seguir, iremos abordar somente o contexto da web.
Para ser um bom desenvolvedor front-end web, primeiro é necessário que o desenvolvedor domine a tríade da web: HTML, CSS e JavaScript.
<h3>Tecnologias de front-end</h3>
Essas três tecnologias são a base do desenvolvimento front-end, dominando elas você será capaz de desenvolver tranquilamente qualquer aplicação web.
HTML (HyperText Markup Language, ou Linguagem de Marcação de Hipertexto) é a linguagem utilizada para renderização das informações nos navegadores. Ela descreve semanticamente a estrutura de uma página web.
CSS (Cascading Style Sheets, ou Folhas de Estilo em Cascata) é a linguagem utilizada para estilizar as informações apresentadas nos navegadores. Ele descreve a aparência dos elementos de uma página web.
JavaScript é a linguagem de programação utilizada para manipular as informações apresentadas nos navegadores.
<h3>A importância do design para o front-end</h3>
Além dessas tecnologias, é desejável que as pessoas de front-end conheçam, mesmo que básico, conceitos de design. Tais conceitos envolvem escolhas de cores, tipografia, iconografia, espaçamentos, alinhamentos, disposição dos elementos na tela, entre outros.
Uma vez que desenvolvedores tenham um conhecimento básico desses assuntos,  eles conseguem dialogar com mais clareza com pessoas de design do time (caso tenha) para construir em conjunto aplicações que propiciam excelentes experiências para os usuários. Como também, pode propor mudanças e ajustes nos protótipos, e discutir a complexidade de construção de certas funcionalidades.
Conforme for dominando os assuntos anteriores, desenvolvedores front-end podem se especializar em algum framework ou biblioteca. As principais tecnologias usadas no mercado são: React, Angular e Vue.
O gráfico a seguir apresenta a percentagem de questões relacionadas às tecnologias citadas no Stack Overflow. A quantidade de questões relacionadas é diretamente proporcional à popularidade dessa tecnologia.
<img decoding="async" class="aligncenter wp-image-17759 size-full" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/MicrosoftTeams-image-24.png" alt="Gráfico Stackoveflow" width="869" height="583" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/MicrosoftTeams-image-24.png 869w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/MicrosoftTeams-image-24-300x201.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/08/MicrosoftTeams-image-24-768x515.png 768w" sizes="(max-width: 869px) 100vw, 869px" />
Conforme visto acima, apesar de que React seja o mais popular dentre os outros, nada impede que você se <a style="color: #ff004c;" href="https://www.cms.dtidigital.com.br/blog/vue-js/">especialize em outras tecnologias, como Vue</a>. O importante é escolher a que mais você se adapta melhor, pois cada um propõe diferentes formas de construção de websites. Porém, caso você já esteja atuando em alguma equipe ou algum projeto, é necessário compreender as tecnologias já utilizadas e se adequar ao contexto.
Dentre as quatro apresentadas, somente é contra indicado aprender AngularJS, que é a versão inicial do Angular. Essa tecnologia é atualmente obsoleta e não é mais continuada pela Google (<a href="https://killedbygoogle.com/">Killed By Google</a>).
<h2>O que é Vue JS</h2>
Citamos acima o conceito de Vue como outra alternativa de conhecimento em relação ao front-end. Em resumo, Vue JS é um framework de modelo JavaScript open source. Ele foi criado para aplicações web e inicialmente desenvolvido por Evan You em 2014. O Vue.js torna possível a criação de aplicações de maneira reativa, utilizando um DOM virtual, o que resulta em boas performances na maioria das situações. Além disso, ele integra uma arquitetura estruturada com componentes que podem ser reutilizados várias vezes.
O Vue.JS é comumente usado para a criação de aplicações SPA (Single Page Applications) e desenvolvimento de outras interfaces.
<h2>Como é a trajetória de um desenvolvedor front end?</h2>
Existe um universo de conteúdos sobre front end para aprender, desde o básico até o mais avançado. Por meio do <a style="color: #ff004c;" href="https://roadmap.sh/frontend">Front-end Developer Roadmap</a>, é possível visualizar todos os temas que os desenvolvedores podem se aprofundar para incrementar seus conhecimentos em front-end. A seguir, iremos citar as principais posições que os desenvolvedores podem assumir.
Desenvolvedor: o desenvolvedor pode transitar por todos os níveis de senioridade (júnior, pleno e sênior). Características como tempo de experiência, conhecimento amplo sobre diversas tecnologias e capacidade de resolução de problemas complexos determinam o nível do profissional.
Desenvolvedor líder: o desenvolvedor será responsável e deve liderar outros desenvolvedores em um ou mais projetos. Além de ter um bom domínio sobre as tecnologias, ele deverá principalmente desenvolver habilidades de liderança. Tais habilidades envolvem boa comunicação, resolução de conflitos, capacidade de negociar e motivar o time.
Arquiteto: o arquiteto é responsável por ajudar a planejar como os sistemas devem ser construídos. Ele deve ter conhecimento técnico e experiência sobre as diversas tecnologias dispostas no mercado. Além disso, é necessário constantes estudos e construção de provas de conceito sobre o que há de novo. Como também, automatizar fluxos como criação de projetos e monitoramento de soluções.
<a href="https://open.spotify.com/episode/2t39noqHGf58ew1lf6C3ut"><img decoding="async" class="size-medium wp-image-16982 aligncenter" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/5af348eda50e6f7120a03c5054d78ffb-300x300.jpg" alt="" width="300" height="300" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/5af348eda50e6f7120a03c5054d78ffb-300x300.jpg 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/5af348eda50e6f7120a03c5054d78ffb-1024x1024.jpg 1024w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/5af348eda50e6f7120a03c5054d78ffb-768x768.jpg 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/5af348eda50e6f7120a03c5054d78ffb.jpg 1400w" sizes="(max-width: 300px) 100vw, 300px" /></a>
<h2>Como é trabalhar com front end?</h2>
Entendemos que é necessário que todos os integrantes do time tenham conhecimento sobre todas as tecnologias trabalhadas no contexto. Dessa forma, conseguimos reduzir a dependência de especialistas e minimizamos a fragilidade da equipe.
Na dti, em geral, não é comum desenvolvedores trabalharem somente com front-end ou back-end, a maioria dos desenvolvedores são full stack. Contudo, naturalmente cada desenvolvedor tem mais afinidade com um dos dois.
Existem estruturas horizontais divididas por temas conhecidas como Guildas. Na Guilda Front-end, por exemplo, vários profissionais apresentam conteúdos e projetos, rodas de conversa e desafios relacionados ao mundo do front end. 
Gostou do conteúdo? Você confere mais informações legais, não apenas sobre front e back-end, mas sobre outras formas de programação em nossos podcasts, o Os Agilistas: que aborda os impactos e causas da transformação digital, e o Entre Chaves: Podcast voltado para pessoas que se interessam por desenvolvimento em geral. Esperamos sua audiência lá!
Além do podcast, você pode atuar como desenvolvedor front end (ou front end developer) na prática! <a style="color: #ff004c;" href="https://www.cms.dtidigital.com.br/venha-ser-dti/">Basta se inscrever em nossa página de carreiras</a> e cadastrar a vaga que mais tem a ver com o seu perfil. Venha ser dti!
<a href="https://www.instagram.com/entre.chaves/"><img loading="lazy" decoding="async" class="wp-image-15530 size-full" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/05/Entre-chaves-banner2-1.png" alt="Front-end e o Entre chaves " width="960" height="150" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/05/Entre-chaves-banner2-1.png 960w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/05/Entre-chaves-banner2-1-300x47.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/05/Entre-chaves-banner2-1-768x120.png 768w" sizes="(max-width: 960px) 100vw, 960px" /></a>

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

Front end: Desenvolvedor no contexto ágil

One-stop shop em tecnologia

Confira outros artigos