Ser um desenvolvedor Front End é empolgante, mas quais conceitos de internet são cruciais para você entender?

Neste artigo, você explorará conceitos importantes da internet, como como a internet funciona, os dispositivos utilizados e muito mais...

Para começar, vamos ilustrar esses conceitos por meio de uma história. Imagine dois indivíduos, Amy e Ben. Amy, uma desenvolvedora de software, projetou um site. Esse site precisa ser armazenado em um servidor de internet. Portanto, ela opta por hospedá-lo com a empresa Vercel.

Geralmente, para permitir o acesso por usuários, um site deve ser hospedado em um servidor.

Ben gostaria de acessar o site de Amy. Mas onde ele está localizado? Ben entra em contato com Amy, perguntando sobre a URL (Localizador de Recursos Uniforme) do site. Ela responde: amywebsite.com.br. Essa URL funciona como o nome do site. Por exemplo, meu nome é Arthur Assuncao. Com meu nome, você pode me localizar na Terra. No entanto, você pode se perguntar: "Claro, eu sei o seu nome, mas onde você mora?" Precisamente, como você determinaria meu endereço? Você precisaria de uma lista que correlacionasse nomes e endereços. Da mesma forma, a internet opera.

Para acessar o site de Amy, Ben usa um navegador de internet como o Google Chrome. Ele digita amywebsite.com.br e pressiona Enter. No entanto, amywebsite.com.br é apenas um nome. Como aprendemos, localizar alguém pelo nome é complexo. Então, como o navegador encontra o site de Amy?

O Sistema de Nomes de Domínio (DNS) é a chave.

Quando Ben procura pelo site de Amy, o navegador entra em contato com um Servidor DNS. Esse servidor, de maneira simples, mantém uma lista correspondente de nomes e IPs (endereços de Protocolo de Internet).

Um IP funciona como um endereço de dispositivo.

O navegador identifica o nome (amywebsite.com.br) e recupera o IP relacionado. Posteriormente, o navegador utiliza o IP para acessar o site de Amy. Esse processo é ilustrado na Figura 1.

Um Olhar Mais Detalhado

Agora que compreendemos os princípios básicos do funcionamento da internet, vamos nos aprofundar. Consulte a Figura 2, que ilustra um mapa conceitual mostrando o funcionamento da internet. Vamos aproveitar esse mapa para elucidar todos os conceitos.

Começaremos com o termo Web apresentado na Figura 2. A Web abrange toda a internet. Visualize-a como uma vasta teia de aranha, onde cada interseção representa um dispositivo. O mapa apresenta um mapa-múndi sobreposto com cabos de internet de SubmarineCableMap.com. Inúmeros cabos submarinos percorrem o globo, interconectando países. Você consegue compreender as repercussões de um rompimento de cabo?

O vídeo abaixo apresenta uma versão da explicação de um mapa conceitual parecido com a deste post, fique à vontade para assistí-lo.

Web 01 - Conhecimentos básicos para o desenvolvimento web.

Considere que a internet é composta por inúmeros dispositivos, incluindo computadores, telefones móveis, dispositivos inteligentes, etc., interconectados entre si.

Cada interseção no mapa é um Nó. Um nó de rede atua como um ponto de extremidade, recebendo, gerando, armazenando e transmitindo dados. Alguns nós funcionam como Roteadores, encaminhando dados de rede (pacotes) de um lado para o outro.

Fazendo uma analogia, pense na internet como a sua casa, com roteadores conectando dispositivos como computadores, smartphones (celulares) e dispositivos IoT (por exemplo, smartwatches, assistentes virtuais como o Alexa Echo Dot, lâmpadas LED inteligentes). No entanto, a internet conta com milhões de roteadores e dispositivos.

Os nós também podem atuar como Servidores e Clientes. Servidores disseminam dados para clientes, que recuperam dados dos servidores, formando a arquitetura Cliente-Servidor ilustrada na Figura 3. Aqui, vários clientes solicitam e recebem serviços dos servidores.

Compreendendo URLs e DNS na Arquitetura da Internet

Onde estão esses servidores na internet? Analogamente ao endereço da sua casa (por exemplo, Rua Técnico Panamá, Nº 45 ou código postal 36246-311), os servidores possuem Endereços de Protocolo de Internet (IP)—tipicamente, quatro números binários, cada um com oito dígitos. Em decimal, cada número varia de 0 a 255, ou em binário, de 00000000 a 11111111. Por exemplo, um dos IPs do Facebook é 31.13.74.35. Se a conversão de binário para decimal parecer confusa, consulte o ChatGPT ou pesquise online.

Para descobrir o IP de um site, execute este comando em um terminal Linux:

dig ositequevocequerdescobrir.com

Servidores hospedam serviços como Sites e Sistemas Web—YouTube, blogs, serviços em nuvem, bancos de dados e mais. Cada serviço utiliza um Protocolo que dita a transmissão de mensagens. Protocolos de internet proeminentes incluem o Protocolo de Transferência de Hipertexto (HTTP) e o Protocolo de Transferência de Hipertexto Seguro (HTTPS). Este último enfatiza a segurança de ponta a ponta por meio de criptografia SSL (Camada de Soquetes Segura) ou TLS (Camada de Segurança de Transporte).

Além disso, serviços e sites da web geralmente possuem uma URL (Localizador de Recursos Uniforme). Esse endereço legível por humanos (por exemplo, https://www.arthurassuncao.com/posts/aprenda-a-usar-o-github-para-aumentar-suas-oportunidades-profissionais-440j) opera de maneira similar ao seu endereço e número de identificação (CPF no Brasil). As pessoas usam principalmente nomes, assim como os sites usam URLs para simplicidade.

Compreendendo URLs e DNS na Arquitetura da Internet

Uma URL é composta por até seis componentes, conforme ilustrado na Figura 4:

• Protocolo / Esquema: Define como as mensagens são enviadas e recebidas.
• Subdomínio (opcional): Parte do domínio principal. Imagine um prédio com vários apartamentos, cada um atuando como um subdomínio. Da mesma forma, pode representar departamentos em uma empresa.
• Domínio de segundo nível: Parte principal do domínio, como arthurassuncao.
• Domínio de nível superior (TLD): Segmento final de um nome de domínio. Corresponde ao nível mais alto no Sistema de Nomes de Domínio (DNS) hierárquico, seguindo o domínio raiz. Exemplos incluem .com, .com.br, .dev, etc.
• Subdiretório (opcional): Subdiretório dentro do domínio.
• Slug ou Página (opcional): Nome da página ou ponto de extremidade.

O domínio de segundo nível e o domínio de nível superior formam em conjunto o domínio do site. Este domínio é mais amigável para o usuário do que um Endereço de IP. Converter um domínio em um Endereço de IP requer um servidor designado - o servidor DNS (Sistema de Nomes de Domínio).

Antes de mergulharmos no DNS, vamos revisitar os Clientes na Figura 2. Atualmente, os Clientes englobam computadores, smartphones, dispositivos IoT e outros dispositivos de usuário. Esses dispositivos acessam sites e serviços por meio de navegadores como o Google Chrome, Microsoft Edge e Mozilla Firefox. Mas como eles conseguem isso usando nomes de domínio em vez de endereços IP?

Imagine um mundo em que você precisa memorizar o Endereço de IP de cada site - impraticável, não é? Em vez disso, você memoriza domínios, como arthurassuncao.com. Dê crédito ao Servidor DNS por essa conveniência. Em essência, esse servidor armazena nomes de domínio (como arthurassuncao.com ou facebook.com) juntamente com seus respectivos Endereços de IP.

Quando um usuário acessa um site pelo seu domínio, o dispositivo do cliente precisa aprender o Endereço de IP do domínio. No dispositivo, uma tabela armazena os Domínios Acessados e seus Endereços de IP. Ao acessar um domínio, o dispositivo verifica essa tabela. Se o Endereço de IP não estiver presente, o dispositivo consulta o Servidor DNS para obter o Endereço de IP do domínio.

Posteriormente, o dispositivo do cliente utiliza o Endereço de IP para acessar o site. A Figura 5 ilustra esse cenário: o cliente consulta o Servidor DNS para obter o Endereço de IP do domínio arthurassuncao.com, e o Servidor DNS responde com o Endereço de IP 76.76.21.21. Com esse Endereço de IP, o cliente envia uma solicitação ao servidor, que responde.

Explorando o Funcionamento do DNS (Sistema de Nomes de Domínio)

Como mencionado, quando acessamos um site, por exemplo, via Google Chrome, o processo DNS se desenrola de forma imperceptível. Além disso, o seu dispositivo pode utiliar um DNS local e outros mecanismos, como o arquivo Hosts, que mantém uma espécie de cache de endereços já pesquisados, afinal não há necessidade de verificar o endereço de todo site a cada acesso.

Simultaneamente, frequentemente utilizamos a Busca do Google. Ao realizar uma busca, uma lista de sites aparece, ordenada pelas regras internas do mecanismo de busca. No entanto, os sites podem otimizar suas posições usando técnicas de SEO (Otimização para Mecanismos de Busca).

SEO engloba estratégias para aumentar a visibilidade de um site.

Quem elabora e aplica esses sites e técnicas de SEO? Acessamos sites e sistemas web desenvolvidos por desenvolvedores de software ou até mesmo engenheiros de software.

Esses desenvolvedores empregam tecnologias de backend e frontend. O backend engloba componentes do lado do servidor que utilizam bancos de dados, linguagens como Python ou Java e APIs (Interfaces de Programação de Aplicativos) que conectam o frontend e o backend. Enquanto isso, o Frontend é a parte visual e interativa dos sistemas, aproveitando pelo menos HTML (Linguagem de Marcação de Hipertexto), CSS (Folhas de Estilo em Cascata) e JS (JavaScript).

• HTML define a estrutura e o conteúdo da página.
• CSS aprimora aspectos visuais como posicionamento de elementos, cores, tamanhos, fontes, etc.
• JS introduz ações e animações. Enquanto o CSS possibilita animações e funções dinâmicas, o JS é mais poderoso, exercendo controle sobre todos os elementos.

No canto inferior direito da Figura 2, o JS gera um DOM (Modelo de Objeto de Documentos) - uma interface de programação em forma de árvore que representa documentos da web.

No cenário frontend contemporâneo, existem ferramentas como:

• ReactJS: Uma biblioteca JavaScript que utiliza JSX (HTML dentro do JS).
• SASS, Módulos de CSS, ou similares: Ferramentas para gerar código CSS.
• TypeScript: Um superset do JavaScript, um JavaScript aprimorado.

Para ter uma visão de um projeto frontend, visite https://github.com/ArthurAssuncao/pomoTraining.

Mais insights sobre backend e frontend estão disponíveis no artigo Por Que Você Deve Aprender Primeiro o Front End e Não o Back End.

Assim, o imenso mapa da Figura 2 foi devidamente explorado, aprofundando nossa compreensão da mecânica da internet.

Vamos Além

Nos próximos artigos, você mergulhará na Arquitetura Cliente-Servidor, no DOM (Modelo de Objeto de Documentos) e nas camadas da web (HTML, CSS e JS). Esta jornada ampliará seu conhecimento da linguagem de marcação HTML.