Neste artigo, vou te explicar tudo sobre o que significa front-end e back-end. Suas diferenças na programação e porque os desenvolvedores são colocados entre essas duas categorias.
Em geral o desenvolvimento de aplicativos e sites se dá em duas camadas: A parte que pode ser vista pelo usuário (Front-end). E a parte que não pode ser vista pelo usuário (Back-end). As linguagens de programação e os desenvolvedores também podem ser classificados conforme estas camadas.
Há ainda desenvolvedores que trabalham tanto no front-end quanto no back-end. Esses desenvolvedores são chamados de Full Stack.
Vamos ver em mais detalhes o que significa cada um desses termos.
Geralmente os desenvolvedores web tendem a se especializar ou no front-end ou no back-end. A diferença entre esses dois ramos está na tecnologia em que o profissional deve se aprofundar, pois apesar de as duas áreas fazerem parte do mesmo todo, elas utilizam ferramentas e tecnologias diferentes. Além de uma forma de pensar totalmente diferente.
Front-end
Tudo o que você está vendo na sua tela, neste site, é considerado front-end. Front-end significa o que está a frente, portanto é o que pode ser visualizado pelo usuário ao visitar um site ou abrir um aplicativo. Essa camada também pode ser chamada de "Client-side", ou seja, "parte do cliente".
Imagine um relógio de parede, onde você tem os ponteiros, os números das horas, a arte do fundo do relógio, a moldura, etc. Tudo isso representaria o front-end do relógio. Já as engrenagens, as molas, a pilha, e todo o mecanismo interno que não podemos ver seria o back-end.
Trazendo esse mesmo raciocínio para o desenvolvimento de sites e aplicativos, toda a parte visível, ou que afeta a parte visível de uma aplicação faz parte do front-end. Por exemplo: Menus, Botões, Imagens, Fontes e Formulários, tudo isso faz parte da camada que pode ser vista, portanto do front-end.
Um site pode ser construído utilizando somente front-end. Sites assim são também chamados de sites estáticos. Se você precisa só apresentar o conteúdo, sem nenhum tipo de interação dinâmica como consulta à um banco de dados, você pode ter esse resultado só com a camada front-end.
Desenvolvedores e Tecnologias Front-end
Aquele que trabalha com o desenvolvimento da parte front-end de um sistema pode ser chamado de desenvolvedor ou programador front-end.
Em geral, três linguagens fundamentais são utilizadas no desenvolvimento front-end na web:
- HTML;
- CSS;
- JavaScript.
Cada uma dessas linguagens tem as suas diferentes versões, mas todas elas são executadas no computador do próprio usuário do site, por isso são também chamadas de "client-side".
A linguagem HTML é a mais básica e fundamental de todas e serve para estruturar tudo o que você vê na tela. Serve para dizer o que é um menu, o que é um parágrafo, o que é um botão, etc. Todos os sites do mundo utilizam HTML.
O CSS complementa o HTML, e serve para estilizar tudo o que você vê, dar cores aos elementos, alterar os tamanhos, fontes, criar animações, etc. Quase todos os sites do mundo utilizam CSS, pois sem ele os sites ficariam com a aparência de um documento de texto.
E por fim, JavaScript serve para criar interações avançadas entre os componentes do site.
Nos últimos anos a área do profissional front-end se expandiu dramaticamente graças à uma demanda do mercado por sites cada vez mais interativos e inteligentes, integrando chats, feedback em tempo real, games, etc. E isso aumentou bastante a complexidade da área para além dessas 3 linguagens básicas.
Relação com design e experiência do usuário
A parte visual não se trata apenas de colocar as coisas de um modo que funcione, mas de um modo que funcione, seja útil e ainda seja visualmente agradável.
É fato que o design de um site pode causar atração ou repulsa em seus usuários, por isso, os desenvolvedores front-end também podem ter o papel de planejar visualmente cada elemento do site. Isso quando não existe um designer para definir o projeto de como a interface deve ficar.
A atuação nesta área de design para efeito visual é chamada de UI (User Interface). Já a atuação na parte de planejamento de como arranjar os elementos de uma forma útil e eficaz se chama UX (User Experience).
Back-end
Você talvez não se deu conta, mas para que essa página aparecesse da maneira como ela é apresentada, aconteceram algumas interações no back-end deste site para que a informação fosse consultada e depois entregue até você.
Alguns sites possuem painéis de controle para publicação de artigos, gerenciamento de usuários, etc. e frequentemente algumas pessoas chamam esse painel de controle de "back-end", porque não pode ser visto pelo usuário comum. Porém não é correto chamarmos assim, pois o painel ainda é algo que pode ser visto, e de fato, não é a camada back-end de um site.
O back-end é algo muito mais abstrato do que algumas pessoas imaginam. Ele é uma camada que não pode ser vista, mas pode interagir com o usuário apresentando algo que pode ser visto. É literalmente isso o que aconteceu neste site, ao abrir este artigo.
Imagine o sistema de um caixa eletrônico, você insere seu cartão e depois sua senha. A interface onde você digita sua senha é o front-end e está sendo servida pelo computador do caixa eletrônico (é a parte do cliente / client-side). Até aqui tudo bem. Mas depois que você pressiona confirmar, já imaginou como o caixa eletrônico confere se sua senha está correta?
Por razões de segurança, não seria nada inteligente armazenar todas as senhas no próprio caixa eletrônico. E imagine se alguém resolve mudar de senha, todos os caixas teriam que atualizar ao mesmo tempo. Por isso existe o que chamamos de servidor, que nada mais é que um computador, ou uma rede de computadores que "servem" uma determinada informação para um computador cliente. Daí vem o termo server-side, representando o lado do servidor.
É aí que entra a camada back-end, que não vemos. Uma vez que você entra com sua senha em um caixa eletrônico, o computador do caixa enviará sua senha para um servidor que vai processar seus dados, conferir se sua senha confere com seu cadastro no banco, e devolver uma mensagem de sucesso ou erro, permitindo ou não o acesso às funções da sua conta.
Desenvolvedores e Tecnologias Back-end
Todo esse mecanismo que acontece no back-end pode ser desenvolvido usando uma linguagem que também podemos chamar de linguagem back-end, as vezes em um sistema mais complexo pode ser necessário usar várias linguagens. Alguns exemplos são:
- PHP
- Ruby
- Node.js
- Python
- Java
Essas linguagens server-side essencialmente fazem a mesma coisa. Podem compor tecnologias diferentes, mas no final você pode substituir PHP por Ruby por exemplo, diferente de HTML e CSS que são duas linguagens diferentes e que não podem ser substituídas. Essas linguagens podem ser consideradas concorrentes e são usadas tanto por sites pequenos como sites gigantes como Facebook, Instagram, Youtube e Google.
Como no exemplo do caixa eletrônico, frequentemente o mecanismo back-end trabalha junto com uma base de dados para armazenar e consultar informações. Para trabalhar com essas bases de dados, utiliza-se uma linguagem de banco de dados, que também é uma linguagem back-end. A linguagem de banco de dados mais comum atualmente é a SQL.
Relação com infraestrutura e segurança
Sendo as linguagens de programação back-end executadas pelo servidor, elas precisam ser hospedadas neste servidor, para que se mantenham disponíveis para serem servidas.
Se você conseguiu acesso à este artigo, é porque existe um servidor em algum lugar do mundo hospedando este site, com seu banco de dados, sua linguagem back-end e todo o mecanismo pronto para ser entregue no formato que você está consumindo.
Essa dinâmica de configurar um computador para que hospede e sirva um sistema web pode fazer parte do cotidiano de um programador back-end, ou pelo menos o programador precisa estar familiarizado com esse assunto para desempenhar bem a sua função.
Outra questão que acaba fazendo parte da camada back-end, e por isso é de extrema responsabilidade do desenvolvedor back-end, é de garantir a segurança do sistema. Por exemplo: um usuário não pode ter acesso à informações restritas de outro usuário, nem ser capaz de alterar informações sem permissão. Tudo isso é definido conforme o sistema é programado e é de responsabilidade do desenvolvedor back-end.
Back-end ou Front-end? Como desenvolvedor, qual escolher?
Como você pôde perceber, apesar das duas áreas cooperarem entre si, uma é muito diferente da outra e cada uma tem um leque muito grande de opções em que você pode se especializar.
Não existe área mais difícil ou mais fácil. Antigamente os sitemas eram muito mais simples e você conseguia se virar bem como front-end apenas sabendo HTML, CSS e JavaScript. Mas de uns tempos pra cá muita coisa mudou, e pra ser considerado um desenvolvedor front-end, é necessário muito mais do que isso.
Na verdade, nos dois lados você precisa saber mais que o básico. No back-end você vai precisar ter uma boa noção de infraestrutura e entender de segurança para não ter o sistema facilmente hackeado ou liberar informações indesejadas. Já no front-end, você vai ser um profissional medíocre se não dominar algum framework e não tiver uma boa noção de UI e UX.
O ideal é que você seja Full Stack, saiba os dois, tendo pelo menos uma noção boa dos dois lados e se aprofundando no que gostar mais. Eu particularmente comecei assim e acabei me desenvolvendo mais na parte de front-end.
Se você está começando e quer saber os primeiros passos, eu diria para começar com pequenos projetos de front-end, pois assim você consegue fazer mais coisas sabendo menos.
Aprenda como fazer uma página simples em HTML e CSS, depois aprenda a fazer uma calculadora em JavaScript. Depois comece a trabalhar com formulários HTML e introduza alguma linguagem back-end como PHP ou Ruby. Tendo o básico dos dois lados você já consegue fazer MUITA coisa. Na verdade muita gente consegue ganhar dinheiro com projetos próprios sabendo pouca coisa dos dois lados.
Mas se você quer ter um currículo desejável para trabalhar com uma remuneração alta, quanto mais específico e mais longe em uma área você for, melhor.
