Para quem está chegando no mundo do desenvolvimento os conceitos de Front-end e Back-end são os primeiros que aparecem. Mas afinal, isto é de comer ou passar no cabelo ?
Front-end
Vamos imaginar um site que contenha um formulário como na imagem abaixo.
Neste contexto o front-end irá definir os parâmetros visuais do site, como tamanho do botão, cor de fundo, alinhamento do formulário na tela, tipo da fonte utilizada, ou seja, tudo que conseguimos identificar ao olhar para o site.
Portanto, podemos dizer que o front-end é o desenvolvimento visual do site, este desenvolvimento é realizado utilizando obrigatoriamente dois códigos, HTML e CSS. E, não obrigatoriamente, podemos usar o Javascript.
O HTML
HTML é a sigla para HiperText Markup Language (Linguagem de marcação de texto, em tradução livre). Essa é a linguagem textual que utilizamos para estruturar um site. Ela é composta por tags, que servem pra formatar o conteúdo. Uma tag é formada por atributos e valores, que podem ser texto ou outros elementos.
<html>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>No exemplo acima a tag <html> é a principal e dentro dela há outras tags, <body>, <h1> e <p> e dentro das tags <h1> e <p> temos um texto. Cada uma destas tag possuem uma função dentro do documento HTML, mas veremos isto em um próximo artigo.
O CSS
CSS é a linguagem utilizada para adicionarmos estilo ao nosso código, a sigla significa Cascading Style Sheets (Folha de Estilo em Cascata – tradução livre). No caso do nosso formulário o CSS irá determinar a cor da fonte, o tipo da fonte, espaçamento entre os campos do formulário e etc.
body {
background-color: #777777;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}O código CSS acima está colocando estilo em três tags, cor de fundo no body ( em CSS as cores são definidas através de código hexadecimal ou RGB); também está sendo determinada a cor e o alinhamento do texto na tag h1 e o tipo e tamanho da fonte da tag p. Inserir estilo em um site é de suma importancia, sem o CSS o site seria apenas um documento de texto com alguns botoes.
JAVASCRIPT
O javascript é conhecido como a linguagem de programação da web no front end ela pode ser usada para manipular o DOM.
Não, este é o Don, eu estava falando de DOM ( Document Object Model), que é a representação dos dados que compõe a estrutura e o conteúdo de um documento web. O DOM permite que estas estruturas sejam manipuladas pelas linguagens de programação, neste caso, o Javascript. Voltando para o nosso formulário, podemos usar javascript para inserir um campo UF caso o campo “Country” seja preenchido com “Brasil”, se for outro país nada aparecerá. Note que neste exemplo eu estaria manipulando as informações do HTML e CSS com base nos dados inseridos no formulário, não há aqui nenhum servidor envolvido, tudo está sendo feito em client-side (lado do cliente), ou seja, no front-end.
Back-end
Ainda no contexto do nosso fomulário, o backend faria o papel de tudo que acontece ao lado do servidor (server-side). Estas seriam ações como, salvar as informações do formulário em um banco de dados, verificar se os dados preenchidos já estão presentes no banco de dados. Notem que aqui nada do que foi descrito será visto pelo usuário não é visivel a verificação das informações no banco de dados. Portanto o back-end será responsável por toda a estrutura e funções relacionadas ao banco de dados, segurança, gerenciamento de conteúdo e APIs (Application Programming Interface – serve para comunicar diferentes sistemas entre si).
Para fazer tudo isso utilizamos linguagens de programação. Existem diversas linguagens de programação, algumas linguagens são: Java, C, Python, Javascript, PHP, C# Ruby e existem muita outras. A escolha da linguagens depende do projeto, do conhecimento do programador, da plataforma que irá hospedar o sistema, entre outros fatores. É possivel fazer um sistema utilizando a plataforma WordPress, esta plataforma é construida em PHP, portanto os templates disponíveis para ela usam a mesma linguagem, se um desenvolvedor quiser fazer templates de sistemas para WordPress ele precisará dominar o PHP.
Conclusão
Os conceitos de front-end e back-end são muito comuns no dia-a-dia do desenvolvedor. O front-end é responsável pela parte visual e design já o back-end é responsável pela operação do sistema, envolvendo banco de dados, segurança, gerenciamento de conteúdo e atualizações.
