O que é front-end e back-end?

Provavelmente você já deve ter ouvido as palavras Front-end e Back-end em algum lugar. Seja em um artigo, alguma conversa entre programadores ou até mesmo em um meme na internet como o da Figura 1.

Entender o que é o Back-end e o Front-end é essencial para qualquer pessoa que pensa em ingressar na carreira de programador. Nesse artigo vamos esclarecer esses dois conceitos e deixar você mais preparado para iniciar seus estudos.

Veja abaixo os tópicos que serão abordados:

• O que é um software?
• O que é o Front-end e o Back-end?
• Front-end não é design
• Diferença entre Front-end Web e Front-end Mobile
• Back-end e a sua relação com o banco de dados
• Front-end, Back-end e banco de dados atuando juntos
• Carreiras da programação
• Por onde começar?

O que é um software?

Para entender os termos Front-end e Back-end primeiro é necessário entender o que é um software. Software é um conjunto de códigos escritos para executar uma determinada tarefa seja no computador, celular ou na internet.

Atualmente lidamos com vários tipos de software o dia inteiro. Por exemplo: todos os sites de compra que acessamos pela internet são softwares, as redes sociais são softwares. Todos os aplicativos que temos em nossos celulares também são softwares.

Front-end e o Back-end

O software é dividido, principalmente, em duas camadas: Front-end e Back-end.

O Front-end é a camada do software que aparece na tela do nosso computador ou do nosso celular. Tudo que a gente consegue ver e interagir em um software faz parte da camada Front-end.

O Front-end é a "capa" do software.

O Back-end a gente não consegue ver, mas ele é a camada principal do software. Ele é o responsável em processar os dados e executar as ações que o software se propõe a fazer.

Vamos exemplificar quem é o Front-end e o Back-end no aplicativo do Uber:

Na tela do aplicativo do uber, você informa o local de origem/destino e o tipo de carro - Essa tela que você está vendo e inserindo informações é o Front-end do aplicativo.

É no Back-end onde se encontra a "inteligência" do software.

Veja a Figura 2.

Outro exemplo é quando compramos um produto na página do MercadoLivre.

A página onde vemos, selecionamos o produto e escolhemos a forma de pagamento - é o Front-end. Mas é o Back-end que vai fazer toda a transação de pagamento.

Veja a Figura 3.

Veja a seguir mais detalhes sobre Front-end e Back-end.

Front end não é design

Como vimos, o Front-end é a parte visual e interativa de um software, seja ele um site ou um aplicativo. Tudo que vemos em um site, seja o menu, a caixa de busca, os botões, as imagens, tudo isso faz parte do Front-end do software.

Cuidado para não confundir o Front-end com o design. Muitas pessoas acham que para se tornar um programador Front-end é necessário ter boas noções de design. Isso não é verdadeiro.

O profissional que define as cores, as formas e o estilo de um site ou de um aplicativo é o designer. O programador Front-end será o responsável em codificar e dar vida a essa arte criada pelo designer.

Diferença entre Front-end Web e Front-end Mobile

O Front-end pode ser dividido em dois tipos dependendo de onde esse software vai executar.

Se o software se trata de um aplicativo para celular, chamamos a camada Front-end de Front-end Mobile ou apenas Mobile. Se o software se trata de um web site chamamos a camada Front-end de Front-end Web ou apenas Front-end.

Na Figura 4, a página do site G1 é um exemplo do Front-end Web.

Na Figura 5, o Aplicativo do Ifood é um exemplo de Front-End mobile.

Back-end e a sua relação com o Banco de dados

Como vimos o Back-end é a camada principal, é ele quem dá inteligência para o software, processando os dados e executando tarefas.

Mas o que seriam dados? Dados são informações. Por exemplo: quando fazemos uma compra no site ou no aplicativo do Mercado Livre damos a ele uma série de informações: nosso nome, e-mail, telefone, endereço, o produto que compramos, a cor, o tamanho, a forma de pagamento... Tudo isso são dados e todos esses dados serão guardados no banco de dados.

O banco de dados é como se fosse um grande armário. Ele guarda todas as informações. Mas ele apenas guarda, ele não faz nenhum processamento dessas informações.

Quem manipula as informações que estão no banco de dados é o Back-end. É o Back-end que adiciona, busca, edita ou apaga as informações do banco de dados.

Front-end, Back-end e banco de dados trabalhando juntos

Agora que já sabemos quem é o Front-end, o Back-end e o Banco de dados. Vamos ver um exemplo de como seria eles trabalhando em conjunto em uma operação.

Vamos dizer que você esteja voltando no site do Mercado Livre para fazer uma segunda compra. Na parte superior da tela já está aparecendo o seu nome e o seu endereço. Essas duas informações estavam armazenadas no banco de dados. Para aparecerem na tela significa que o Back-end foi até o banco de dados, buscou essa informação, entregou para o Front-end e o Front-end exibiu pra você.

Carreiras da programação

A programação possui basicamente três carreiras: Front-end web, Front-end mobile e Back-end.

Em resumo, você pode se tornar um programador Front-end web e criar páginas web ou se tornar um programador Front-end mobile e criar aplicativos mobile - aplicativos para celulares ou tablets.

Você pode também se tornar um programador Back-end. Nesse caso, você vai criar códigos para manipular o banco de dados onde os dados do software ficam salvos.

Existe ainda uma outra carreira na programação chamada de full stack. Nessa carreira o programador domina tanto a carreira Front-end (web ou mobile) quanto a carreira Back-end.

Esse programador é capaz de criar um software de ponta a ponta, ou seja, criar toda parte visual e também os códigos que manipulam o banco de dados.

Veja na Figura 6 um exemplo de programador full stack.

Por onde começar?

Escolher por onde começar pode ser muito difícil para quem está começando na carreira de programador e uma escolha errada pode causar frustração e desistência.

A plataforma DevMedia está no mercado de ensino de programação há 20 anos e com isso conhece o melhor caminho para você se tornar um programador e conseguir entrar para o mercado de trabalho.

Baseado na experiência da plataforma DevMedia, a carreira mais fácil para se iniciar é a Front-end web. Isso porque no início da carreira de programador Front-end web você não vai lidar com códigos mas com marcações de textos e com a aparência visual da página web.

Veja na Figura 7 um exemplo de página web criada apenas com marcação de texto e estilização.

Na plataforma DevMedia você encontra um guia com todo o conteúdo necessário para iniciar seus estudos e se tornar um programador Front-end web. Você terá uma equipe especializada para tirar todas as dúvidas que quiser e será estimulado a seguir com os estudos através de uma plataforma gamificada, onde seus estudos valem pontos e certificados.

Além do guia de carreira programador Front-end web, você também vai encontrar na DevMedia os guias de Front-end mobile e Back-end e dessa forma se tornar um programador full stack.

Conclusão

Os termos Front-end e Back-end são usados com frequência no mercado de programação. Agora que você já conhece o significado desses termos já é capaz de iniciar os estudos e se tornar um programador.