O Front-end é sobre criar interfaces fáceis e interativas para sistemas web, websites, aplicações web e até mesmo aplicativos móveis.
Quando você começa no mundo da computação, pode não saber o que é programação, desenvolvimento, desenvolvedor web ou o termo em foco, desenvolvedor front-end. No entanto, aqui estou eu. Nesta série, vou te ensinar sobre cada um desses termos.
Tudo na Computação é Código
Primeiramente, você precisa saber que todos os sistemas de informação e dispositivos são criados com códigos, e esses códigos são criados pelos desenvolvedores. Quando se trata de um sistema web, como um website ou outro sistema na web, temos os desenvolvedores web.
Programação é a arte de codificar.
Desenvolvimento Web
Desenvolvimento web é a criação de sistemas para a web, para a internet, utilizando tecnologias web como HTML, CSS, JavaScript, PHP, Java, etc.
Imagine que você esteja em um restaurante. O cardápio apresenta opções de comida, e você interage com o restaurante através do cardápio. O pedido é enviado ao garçom, e a sua comida é preparada na cozinha. Nessa analogia, o cardápio é uma página web, o garçom é a API (Interface de Programação de Aplicação) e a cozinha é o servidor. Da mesma forma, o cardápio é o front-end, e a cozinha e o garçom são o back-end, lembrando que a API costuma estar no back-end.
Fonte: Imagem de pch.vector no Freepik
Em outras palavras, de forma mais técnica, um sistema web, como um website, é composto por duas partes principais:
- Visual e Interatividade: A interatividade diz respeito aos efeitos ao clicar em botões, fazer download de dados do servidor, etc. Isso é chamado de front-end.
- Lógica e Regras de Negócio: Há lógica no front-end, mas no back-end, a lógica está mais presente. Regras de negócio são regras para que algo funcione. Por exemplo, para fazer login, o nome de usuário e a senha devem ser iguais aos armazenados no banco de dados. Essa parte é chamada de back-end.
Front-end
Então, um desenvolvedor front-end faz parte do desenvolvimento web e cria códigos para a interface visual, criando interatividade entre o usuário e a interface gráfica, geralmente essas interfaces são visualizadas em um navegador, como o Google Chrome. Em outras palavras, o front-end cria e mantém a interface visual de websites e sistemas web.
Imagine que você recebeu uma foto de uma página web. Como desenvolvedor front-end, você escreverá códigos que geram esse site, com todos os botões e outros elementos funcionando. Cada um dos elementos deve estar em sua posição, exatamente como na foto recebida e deve funcionar adequadamente para a imagem ser recebida pelo cliente (navegador) e vá para o servidor.
Então, o que faz um desenvolvedor front-end?
- Desenvolve e melhora a experiência do usuário (UX);
- Programa interfaces web (UI - User Interface) onde os usuários interagem com as páginas web;
- Desenvolve a lógica do cliente, comumente em JavaScript;
- Desenvolve componentes web (pense que um componente pode ser um botão, um menu etc.) para montar a interface e interação do sistema;
- Cuida da navegação do website.
Tecnologias Mínimas de Front-end
Para trabalhar como desenvolvedor front-end, você precisa aprender, no mínimo:
HTML (HyperText Markup Language)
Essa linguagem define a estrutura de uma página web, seus elementos, dados e tags (marcação). Mas o que é a estrutura da página web? A estrutura da página web se refere aonde determinadas informações serão, como cabeçalho, menu, rodapé, formulários de contato, conteúdo principal, botões, textos e muito mais. E todas as informações são marcadas. É totalmente possível formatar texto com HTML, como texto em negrito ou itálico, mas essa não é a finalidade principal.
Aqui está um exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>título da página</title>
</head>
<body>
<!-- este é um comentário: aqui estará o conteúdo da página -->
</body>
</html>
CSS (Cascading Style Sheets)
Os estilos CSS são códigos que definem cor, cor de fundo, formatação de texto, opacidade e outras opções de estilo para elementos. Além disso, os códigos CSS organizam a posição dos elementos. Lembre-se, o HTML marca as informações e o CSS as organiza e estiliza.
Aqui está um exemplo:
body {
background-color: red;
font-size: 16px;
}
JavaScript
JavaScript é uma linguagem de programação que permite adicionar interatividade às páginas web, fazer download de dados e muitas outras coisas lógicas. Quando você clica no botão para atualizar algum elemento na página, geralmente, é o JavaScript agindo.
Aqui está um exemplo:
const url = 'https://randomuser.me/api';
const response = await fetch(url);
const responseInJson = await response.json();
console.log(result.results[0]);
Agora você sabe o que é desenvolvimento web, desenvolvimento front-end e o que um desenvolvedor front-end faz. Além disso, pelo menos você sabe o que é front-end e para que servem HTML, CSS e JavaScript.
Uma lista quase completa de tecnologias front-end
A título de conhecimento, Eu sou um desenvolvedor front-end e uso essas tecnologias:
- HTML5;
- CSS3;
- SASS (Eu gosto de usar CSS Modules com SASS);
- TypeScript (e então temos JavaScript na versão ECMAScript 6);
- ReactJS;
- Git para versionamento de códigos;
- TDD (Test-Driven Development, usando React Testing Library). Isso inclui testes unitários e funcionais;
- NextJS (quando eu preciso de renderização no servidor (SSR) ou geração de páginas estáticas (SSG) ou outra funcionalidade back-end que existe no Next.js);
- ESLint e Prettier para análise estática de código;
Indo Além
Nos próximos artigos, vou mostrar um pouco sobre a carreira, salário, vantagens e desvantagens de uma carreira em front-end.
Créditos
Vetor no canto superior direito da capa: por Freepik.
Top comments (0)