DEV Community

Cover image for O que é e o que faz um desenvolvedor Front-end?
Arthur Nascimento Assunção
Arthur Nascimento Assunção

Posted on • Edited on

O que é e o que faz um desenvolvedor Front-end?

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

  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:

<!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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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)