O que é Back-End e Front-End

Neste vídeo, mergulharemos nas duas facetas essenciais da construção de websites e aplicativos: o front-end e o back-end. Enquanto o front-end lida com tudo o que você vê e interage - como design, animações e interface do usuário - o back-end é o motor oculto por trás dessas funcionalidades, garantindo que tudo funcione corretamente. Junte-se a nós nesta jornada visual para entender melhor as engrenagens que movem o mundo digital ao nosso redor. Ideal para iniciantes e para aqueles que buscam esclarecer os conceitos básicos da programação web!

Qual a principal diferença entre front-end e back-end?

Guilherme: Meu nome é Guilherme Lima, sou instrutor e desenvolvedor de software na Alura. E tenho comigo o Vinny Neves.

Vinicios: Sou Vinnny Neves, o dev careca e barbudo mais querido da Alura.

Trabalho com front-end há bastante tempo, mas já passei pelo back-end também. Portanto, nós podemos ter uma conversa interessante sobre isso.

Guilherme: Muito bom ter você conosco. Mas, qual a principal diferença entre front-end e back-end?

O que o front-end faz?

Vinicios: A principal diferença é que o front-end está mais próximo da pessoa usuária.

Imagine que quem trabalha com front-end está desenvolvendo essa camada, essa interface. Por exemplo, temos uma aplicação que precisa agendar consultas. Vamos apresentar para as pessoas usuárias essas marcações, dialogar visualmente com elas, abrir uma agenda, mostrar quais são os dias disponíveis para marcar uma consulta.

Portanto, o front-end está mais próximo da pessoa usuária que interage com a aplicação. Também está mais perto do navegador e de tudo o mais.

Quem trabalha com front-end atualmente, vai trabalhar com posicionamento de elementos, decidir onde ficará o campo de texto para a pessoa digitar, se vamos usar um calendário ou apresentar uma lista de opções.

O front-end está muito relacionado com essa parte de interação com a pessoa usuária.

Guilherme: Podemos pensar que o front-end é responsável pelo desenvolvimento e criação de telas? Como telas dinâmicas e designs atraentes?

Vinicios: Exatamente isso. Embora não seja uma regra universal, é muito comum que existem outras pessoas profissionais que montam e desenham a tela como deveria ser idealmente.

Alguma pessoa especializada nessa experiência do usuário desenha a tela e entrega para nós do front-end. Dado este desenho, vamos transformar aquela imagem em uma aplicação que o navegador consiga entender.

Guilherme: Então, não necessariamente quem trabalha com front-end precisa ser um especialista em desenhos, cores, fontes, tipografia?

Vinicios: Exatamente. No cenário ideal, existem profissionais que estudam esses conceitos, como a paleta de cores, cores mais fortes ou mais fracas, qual é o melhor lugar para posicionar um botão, um campo de texto. Depois desse trabalho realizado, aí chega para o front-end.

Portanto, nós não temos esse trabalho "criativo". Vamos pegar uma tela e desenvolver seu código. Ou seja, é como se pegássemos uma foto e a transformássemos em uma aplicação onde a pessoa usuária pode interagir e realizar a operação que precisa.

Guilherme: Agora, faz mais de sentido o que é o front-end. Vamos conversar e entender melhor sobre a carreira de back-end.

O que o back-end faz?

Guilherme: A pessoa que desenvolve back-end não está necessariamente ligada a desenvolver telas. Não é seu principal desafio. Mas, então o que ela faz?

Vinicios: Falamos que o front-end está mais próximo da pessoa usuária. Já o back-end está mais perto das informações da aplicação. Quais são as regras de negócio, as validações?

Vamos voltar no exemplo da marcação de consulta. Aquele médico com o qual estamos marcando a consulta, está disponível ou está de férias? Quais horários podemos agendar uma consulta?

Por exemplo, nós temos a tela e permitimos que a pessoa usuária agende uma consulta para domingo de madrugada. No entanto, não há nenhum médico disponível para uma consulta domingo de madrugada. Logo, o back-end irá indicar que não é possível realizar a ação pretendida. Assim, definimos validações.

Mas, se a pessoa usuária quiser agendar uma consulta para segunda-feira às 9 horas da manhã e essa for uma opção viável, podemos fazer o agendamento. O back-end receberá os dados enviados e os armazenará em algum lugar para consulta futura, validação ou até mesmo alterações. Imagina que o médico não possa atender na data agendada, será necessário remarcar a consulta.

Desta forma, todas essas regras de validação - o que pode e o que não pode - estão mais perto do back-end. Ele também se encontra mais próximo dos dados e de onde esses dados serão armazenados.

Guilherme: O back-end também se encarrega de definir como os dados serão expostos para a equipe de front-end. Afinal, quando estamos atuando no mercado de trabalho, provavelmente estaremos colaborando com outras pessoas, times e equipes.

Portanto, quando o front-end necessitar de certas informações, o desafio do back-end será dispor dessas informações e conectar com o banco de dados, conversando e criando soluções para que o projeto seja entregue de maneira satisfatória.

Vinicios: Exatamente, o front-end irá requisitar: "nós precisamos de um back-end que permita a marcação de consulta e que permita a verificação dessas consultas posteriormente".

Definir como isso será feito é tarefa do back-end, que determina qual linguagem usar e onde armazenar os dados. Dessa forma, o back-end funciona de forma independente.

Enquanto o front-end indica quais e quando esses dados serão necessários, o back-end deve definir, de acordo com as regras de negócio, o formato dos dados para marcar uma consulta, por exemplo.

Guilherme: Um ponto importante sobre ferramentas e tecnologias:

Existem diversas linguagens que podem ser usadas para criar aplicações back-end, como Java, Python ou o próprio Javascript, que pode ser usado tanto no front quanto no back.

Contudo, no front-end existe uma "trindade mágica" que geralmente é recomendada: HTML, CSS e Javascript.

Vinicios: De forma resumida, o HTML é o dado que será exibido, já pronto e processado. O HTML cuidará da estrutura dos dados, definindo se será uma lista, um campo de texto ou uma caixa que aparece para a pessoa usuária interagir.

Já o CSS tratará dos estilos, como tamanho de fonte, cor da fonte, posicionamento das informações na tela, quebra de linha, layout para celular, tablet ou desktop (computador).

Por fim, o Javascript faz com que o HTML e o CSS sejam dinâmicos. Ao interagir com a aplicação, podemos fazer com que um campo mude de cor, que apareça algum alerta, mensagem de erro com fundo vermelho ou mensagem de sucesso com fundo verde, por exemplo.

Essa é a tríade essencial para qualquer caminho que se tome dentro do front-end.

Guilherme: No back-end, é importante lembrar que existem diversas linguagens, como Python, Javascript, Java, C#, Go, entre outras. A maioria dessas linguagens possui primeiros passos.

Na Alura, temos formações específicas relacionadas a JavaScript tanto no back-end quanto no front-end. Se você preferir direcionar seus estudos desde o começo para front-end, temos cursos relacionados também com HTML e CSS. Fica aí a dica!

Discutimos um pouco sobre as diferenças entre o desenvolvimento front-end e back-end. Agora, cabe a você decidir sobre a sua carreira! Você pode optar por seguir um lado mais próximo da pessoa usuária, design de interfaces ou validações e regras de negócio.

Eu gosto bastante de bancos de dados, SQL e de linguagem. Logo, estou mais próximo do back-end enquanto o Vinny se encontra mais próximo do front-end.

Vinicios: E pode ficar tranquilo(a), pois essa não é uma decisão definitiva. É comum às vezes transitarmos entre essas duas áreas. Portanto, você pode contar conosco da Alura para trilhar o seu caminho.