O que é e o que faz um desenvolvedor Front-end?
Tags: webdev, beginners, career
Published: 2023-08-04 14:34:03

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.

![Analogia do restaurante](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/130xa0galyssgn3r0y4p.jpg)
Fonte: [Imagem de pch.vector](https://br.freepik.com/vetores-gratis/duas-mulheres-sentadas-no-cafe_11235990.htm#query=restaurant&position=6&from_view=search) no Freepik

Em outras palavras, de forma mais técnica, um sistema web, como um website, é composto por duas partes principais:

1. 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.
2. 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:

```html
<!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:

```CSS
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:

```js
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.