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

Se você é novo no mundo do desenvolvimento e na engenharia de software, você provavelmente se confunda com termos como front-end, back-end e full-stack.

E caso você tenha apenas uma noção superficial desses conceitos, certamente você teria dificuldade de classificar tecnologias como NodeJs ou Ruby on Rails, que aparentemente não se encaixam em uma única dessas caixinhas.

TLDR:

Em suma: front-end é responsável pelo que o usuário ver, enquanto o back-end representa a infraestrutura que suporta isto.

Na internet moderna, ambos são importantes para manter as aplicações e sites no ar, principalmente em casos de SaaS (software as a service), onde todas as funcionalidades do produto estão na WEB.

Sempre que se inicia um novo projeto ou uma nova funcionalidade é comum surgir a discussão do que é uma tarefa para os desenvolvedores front-end e oque é para os back-end.

Geralmente é comum em projetos menores(ou até maiores dependendo da empresa) existirem desenvolvedores full stack, ou seja, capazes de cobrirem ambos os lados do desenvolvimento, isso está sendo facilitado atualmente por ferramentes, tecnologias e linguagens capazes de serem utilizadas para os dois propósitos.

O que diferencia front-end e back-end?

Por mais que ambos os tipos de desenvolvedores sejam importantes para manter um sistema web no ar, podemos dizer serem conceitos opostos, onde um é a antítese do outro.

O front-end se refere a interface do usuário e sua experiência com ela, chamado client side, ou seja, o lado do usuário.

Back-end é justamente o oposto, se refere ao server side, o lado do servidor, e o trabalho do
desenvolvedor back-end é manter API's e bancos de dados no ar para serem consumidos pelo front-end.

No fluxo padrão de uma aplicação WEB, o usuário faz uma requisição pelo client-side, esta requisição é então verificada pelo servidor(server side) que busca, processa e retorna os dados requisitados para o usuário.

É trabalho do back-end fazer todos os registros que forem necessários na aplicação, como salvar ou atualizar novos dados que o usuário forneceu no client-side.

O que faz um desenvolvedor front-end?

O programador front-end é aquele que utiliza uma série de tecnologias para desenvolver a interface do usuário, composta por botões, menus, links, páginas, imagens, gráficos, etc.

As tecnologias utilizadas para a WEB por eles costumam ser HTML, JavaScript e CSS.

HTML

“Hypertext Markup Language” ou simplesmente HTML é normalmente a espinha dorsal de qualquer site da internet, grande parte dos elementos e funcionalidades que o usuário ver são responsabilidades do HTML.

A versão atual é a HTML 5.2 lançada em 2017.

A atualização não foi uma mudança radical, apenas incluiu algumas novas ferramentas e melhorou a disponibilidade de alguns recursos entre navegadores e sistema diferentes.

A primeira versão do HTML foi escrita em 1993 por Tim Berners-Lee, porém só foi lançado oficialmente em 1995, batizado de HTML 2.0. A intenção da linguagem é fornecer uma sintaxe simples que possa ser facilmente interpretada pelo navegador.

CSS

“Cascading style sheets” ou folhas de estilos em português, ou ainda CSS para os mais íntimos é a linguagem utilizada para tornar a internet mais flexível, bonita, atrativa e interativa.

Se o HTML coloca um botão na tela, é função do CSS adicionar cor, borda, sombra e outras funcionalidades de estilo para esse elemento.

JavaScript

JavaScript (JS) é a linguagem de script da WEB, basicamente é a única forma de interagir com a internet, todos os framework modernos que funcionam no lado cliente obrigatoriamente terão um código JavaScript rodando por trás dos panos.

Se o HTML cria o botão e o CSS o estiliza, é trabalho do JavaScript adicionar funcionalidade a ele, fazendo uma chamada ao back-end ou interagindo com outros elementos da página.

O que faz um desenvolvedor back-end?

O programador back-end é responsável por fornecer os dados para o front-end utilizar na interface do usuário.

Quando você acessa um site de notícias, as últimas notícias serão baixadas do back-end e exibidas na tela pelo front-end.

Digamos que você se cadastre na newsletter desse site, uma requisição será feita ao servidor, que irá salvar seu e-mail em uma lista(ou fornecer isso a uma api de terceiros) e retornar um status dizendo se a operação foi bem sucedida ou não.

Com essa resposta cabe ao front-end decidir oque fazer, por exemplo, exibir uma mensagem, redirecionar para outra tela ou qualquer coisa do gênero.

Ferramentas utilizadas

Back-end é um conceito amplo, diferentemente do front-end, onde, em geral, são os mesmos conjuntos de ferramentas utilizadas, no lado do servidor existem muitas opções que podem ser combinadas em uma solução, em geral, todo site ou empresa terá suas próprias coleções de ferramentas utilizadas.

Normalmente uma estrutura de back-end que funcione em formato de API terá pelo menos um Banco de Dados e uma linguagem e framework utilizada para fornecer esses dados.

Soluções de Banco de Dados empresariais comuns são: Oracle, Microsoft SQL Server, IBM, Google Cloud SQL, entre outras gigantes. Além desses temos outras soluções não empresariais, mas também muito utilizada para tal, como MySQL , MariaDB e PostgreSQL.

Como linguagem e framework também existem várias opções, como: PHP, C/C++/C#, Ruby, Java e Python.

Também existem soluções chamadas BaaS (Backend as a Service), que fornecem tanto o Banco de Dados quanto a interface de acesso encapsulada em uma única ferramente.

A ferramente que domina esta área é o Firebase, que está muito presente principalmente em aplicações mobile.

O que faz um desenvolvedor full-stack?

O desenvolvedor que conhece ambos os lados do desenvolvimento foram batizados pelo mercado como full-stack.

Isto é muito comum em empresas e projetos pequenos, mas também é uma prática que alguns grandes times começaram a adotar.

É especialmente útil ter alguns desses em uma equipe, pois por conhecer ambos os lados agilizam a identificar bugs e corrigi-los. Enquanto ao desenvolver uma nova funcionalidade já fará isso consciente de como está poderá ser implementada também do outro lado.