03 Tooling

Node.js
O Node.js é uma biblioteca open-source, multiplataforma que executa
JavaScript fora do ambiente do browser, permitindo tanto escrever fer-
ramentas de linha de comando quanto códigos para o servidor. Como
desenvolvedor front-end, você deve conhecer essa biblioteca para po-
der utilizar e, principalmente, configurar a infinidade de ferramentas e
bibliotecas já prontas para auxiliar o seu processo de trabalho, as quais
oferecem, por exemplo, estilizações prontas, funções em JavaScript já
programadas, serviços de otimização, etc. Mas o primeiro passo para ter
acesso a essas ferramentas é entender o processo de como elas podem
ser instaladas, e para isso vamos utilizar o gerenciador de pacotes do
Node.js.

Node Package Manager (npm)

Antes de tudo, um gerenciador de pacotes é um conjunto de sistemas

que facilitam e automatizam o processo de instalar, atualizar, configurar
e remover programas de computador da sua máquina. Existem diversos
tipos de gerenciador de pacote para as mais diversas linguagens, e em
ambientes como Linux é comum utilizar esse tipo de ferramenta para
instalar programas, como editores de texto, navegadores, drivers, etc.
O Node Package Manager, também conhecido como npm, é a versão
desse tipo de sistema criada para a utilização juntamente como o Node.
js e o desenvolvimento em JavaScript. Com ele vamos poder instalar e
gerenciar pacotes de node que nos ajudarão durante o desenvolvimen-
to, e oferecer uma lista desses mesmos pacotes para outros desenvolve-
dores saberem exatamente o que precisam utilizar para continuar tra- 39
balhando no seu projeto.

Para começar a utilizar o seu gerenciador de pacotes, primeiramente

certifique-se de que você tem o Node.js e o npm instalados, e então
abra seu Terminal e navegue até a pasta do projeto. Dentro dela, você
deve iniciar o projeto com o seguinte código:
Mastertech | Imersivo Desenvolvimento Front-End

$ npm init

Ao executar esse código, o terminal começará a requisitar informações

do projeto como nome, descrição, autor, repositório de Git, etc. Você
pode:
. Responder elas de um a um;
. Apertar a tecla ‘enter’ sem digitar nada e deixá-las em branco;
. Alternativamente executar npm init -y para deixar todas as infor-
mações opcionais em branco automaticamente;
Você verá que, ao digitar esse comando, um arquivo de nome packa-
ge.json será criado automaticamente com as informações preenchidas.
Nesse arquivo você pode criar comandos de automatização no npm,
adicionar informações sobre o seu pacote e, principalmente, adicionar
todos os pacotes externos necessários para rodar o seu projeto. Para adi-
cionar um pacote, você deverá digitar no terminal:
 $ npm install <nome-do-pacote>

Esse comando adiciona automaticamente o pacote no seu ‘package.

json’ e o instala localmente em uma pasta chamada node_modules
(também criada automaticamente caso ela não exista), tornando pos-
sível a utilização dele sem ter que acessar sites de terceiros. No entanto,
como essa pasta criada costuma conter um volume muito grande de
arquivos que podem ser facilmente acessados na internet, é uma boa
prática enviar para o repositório somente o ‘package.json’, que contém
uma lista dos pacotes necessários para o projeto, mas não a pasta ‘node_
modules’. Mas e como podemos instalar esses módulos novamente em
uma pasta de um repositório recém-clonado, por exemplo? É necessário
instalar de um a um novamente?

O npm também ajuda nesse processo! Digitando somente npm install

no seu terminal, em uma pasta que contém um arquivo ‘package.json’,
todos os pacotes listados no arquivo são automaticamente baixados e
instalados, na mesma pasta que foram instalados originalmente (node_
modules) e na mesma versão que foram baixados na primeira instala-
ção, garantindo que você não tenha nenhum tipo de incompatibilidade
por baixar uma versão diferente de uma biblioteca inadvertidamente.

$ npm install

Com pacotes instalados, você pode trazê-los para dentro do código es-
crevendo require(<nome-do-pacote>). Para podermos utilizá-lo, entre-
tanto, precisamos salvar o retorno dessa função require em uma vari-
ável, e como não pretendemos atribuir outro script que não o retorno 40
desse ‘require’, podemos atribui-lo em uma constante. Com a variável
pronta, podemos acessar todas as funções exportadas do nosso pacote
normalmente a partir dela, como por exemplo:
Mastertech | Imersivo Desenvolvimento Front-End

No exemplo acima importamos o pacote de nome ‘fs’, que é a biblioteca

de nome File System que já vem inclusa no Node.js e permite a inte-
ração com arquivos do computador. Por ser uma biblioteca do próprio
node, não precisamos instalar o pacote, mas ainda assim precisamos
importá-lo em nosso código na linha 1. Uma vez importado, podemos
 acessar as funções de File System através da variável, como é o caso da
‘readdir’. Essa função lê todos os arquivos e pastas dentro de uma pasta
de nome determinado no primeiro parâmetro, e seu segundo parâme-
tro é a função de callback, que é uma função executada normalmente
ao fim do processo da função chamada. Nesse caso, o nosso callback irá
receber um erro (caso exista) e uma lista de valores do tipo ‘string’ indi-
cando quais pastas e arquivos dentro da pasta requisitada.

Se você se interessar em aprender mais sobre o File System, a documen-

tação dele pode ser encontrada nesse link:

https://nodejs.org/api/fs.html

Esse é um exemplo de script que utiliza um pacote de node para efetu-

ar uma tarefa. Em nossos processos de tooling, iremos reproduzir esse
tipo de exemplo extensivamente para configurar e executar os scripts e
ferramentas criados.

Tooling
Com o npm em mãos, podemos agora começar a preparar o grupo de
ferramentas que será utilizado para o desenvolvimento front-end. Há
todo tipo de ferramentas no npm com os mais diversos objetivos, como
por exemplo:
. Oferecer scripts que otimizem o processo de trabalho;
. Oferecer scripts que otimizem a organização do trabalho;
. Oferecer scripts que contenham soluções prontas para alguma ta- 41
refa em HTML, CSS ou JavaScript;
. Oferecer scripts que otimizem os arquivos finais do projeto para
melhorar o desempenho do produto em ambiente de produção;
Essas ferramentas podem ser usadas tanto de forma complementar
quanto substituindo uma à outra. O segredo para escolhê-las é enten-
der que processos irão precisar de ferramentas e quais tarefas você gos-
Mastertech | Imersivo Desenvolvimento Front-End

taria de otimizar, e normalmente uma vez que esse conjunto de ferra-

mentas e processos é estabelecido, você pode reutilizá-lo para todos os
seus projetos futuros.

Webpack

Webpack é uma biblioteca open-source em JavaScript que tem como

principal objetivo criar bundles de arquivos. Embora tenha sido desen-
volvido com o objetivo primário de criar bundles de JavaScript, você pode
baixar diversos plugins para webpack que permitem que se transforme
arquivos ou crie bundles de praticamente qualquer tipo. Uma das suas
grandes vantagens é que ele pega qualquer quantidade de arquivos e
transforma em alguns bundles, que podem ser fragmentados e carre-
gados assincronamente para otimizar o tempo inicial de carregamento.
Para iniciarmos nosso uso dessa ferramenta, é necessário primeiramen-
te instalá-la. Em seu terminal, já dentro de uma pasta que teve seu npm
inicializado, digite:

$ npm install webpack webpack-cli

 Com ele instalado, podemos executar cada um dos processos do web-
pack pelo terminal ou configurar um arquivo que faça esses processos
automaticamente, que é a solução que iremos utilizar. O arquivo precisa
ter um nome específico de webpack.config.js, e ele terá a seguinte es-
trutura:

No exemplo acima, importamos a biblioteca path em uma variável para

poder utilizá-la na configuração do nosso Webpack. O conjunto de con-
figurações que é passada para o pacote está contido no module.ex-
ports, onde definimos:
. O entry, que é nosso arquivo de entrada. Essa propriedade pode re-
ceber um ou mais arquivos e é o nosso arquivo “puro” na aplicação,
o que utilizamos para programar. No caso acima, o nosso ponto de
entrada corresponde à um único arquivo, de nome ‘index.js’ dentro
da pasta ‘src’;
. O output, que é nossa saída. Essa propriedade recebe um objeto
que indica qual será o nosso filename, ou seja, o nome do nosso
arquivo, e em que path (local) ele será salvo. A biblioteca path entra
nesse caso para invocar a função ‘resolve’, que recebe dois peda- 42
ços de um caminho e os une de acordo com o sistema. Isso acon-
tece porque as barras de um caminho de arquivo em um ambiente
como o Mac e como o Windows são diferentes, então essa bibliote-
ca retorna o nome correto em ambos os casos. No exemplo acima,
iremos salvar como saída um arquivo chamado ‘main.js’ que estará
dentro de uma pasta de nome ‘dist’;
Mastertech | Imersivo Desenvolvimento Front-End

Desenvolvimento vs Publicação

Em aplicações web muito simples, com um único ar-

quivo HTML, CSS e JavaScript, é comum que se envie
para o seu servidor ou serviço de hospedagem os ar-
quivos que você mesmo trabalha para colocar o site no
ar. Em ambientes mais complexos de desenvolvimen-
to, entretanto, é comum separar o seu ambiente de de-
senvolvimento e o de produção, que é a versão do site
que será publicada.

Para fazermos isso, colocamos todos os arquivos que

nós editamos em uma pasta src e todos os arquivos ge-
rados automaticamente para produção em uma pasta
de nome dist ou public. O recomendado nesses casos
é nunca trabalhar em ambiente de produção, editando
somente arquivos na ‘src’.
 Uma grande lista das capacidades desse pacote pode ser encontrada
no repositório de GitHub do próprio Webpack, em:

https://github.com/webpack/webpack

Babel

Essa ferramenta foi desenvolvida para permitir que o desenvolver utilize

todas as funcionalidades do ECMAscript 2015 em diante sem correr o
risco de ter problemas de compatibilidade ao executar seu site em nave-
gadores mais antigos ou incompatíveis com esse modelo da linguagem,
e ela é alcança esse objetivo através de um processo bem simples: pegar
todo o código que é feito em JavaScript atual e transformá-lo em código
das versões anteriores.

Instalação
Existem várias formas de criar essa estrutura, mas no nosso caso uti-
lizaremos o próprio Webpack para também tomar conta dessa tarefa.
Primeiramente, precisamos instalar alguns módulos:

$ npm install babel-loader @babel/core @babel/preset-env

E depois é necessário configurar o ‘webpack.config.js’ para que ele con-

siga ler e compilar o ECMAscript mais atual em sua versão antiga.

43
Mastertech | Imersivo Desenvolvimento Front-End

Todas essas configurações são necessárias para que essa biblioteca fun-
cione, sendo elas:
. O entry, que é nosso arquivo de entrada. No caso acima, o nosso
ponto de entrada corresponde à um único arquivo, de nome ‘main.
js’ dentro da pasta ‘src/js/’;
. O rules é uma chave que recebe uma lista de objetos que contém
as regras que serão aplicadas em determinados tipos de arquivos;
. O test serve para definir, utilizando expressões regulares,
em quais tipos de arquivo essa regra será aplicada. No nosso caso,
 estamos buscando arquivos que terminem com a extensão ‘.js’;
. A chave exclude define que qualquer arquivo que seja en-
contrado em pastas chamadas de ‘node_modules’ ou ‘bower_com-
ponents’ sejam ignorados;
. A chave use serve para definir o que será utilizado caso ar-
quivos sejam encontrados seguindo essas regras. O loader babel-
-loader serve para carregar os arquivos de JavaScript e efetuar o
processo de conversão para a versão antiga da linguagem;
Com essas regras definidas em nosso arquivo de configuração, agora
podemos passar a desenvolver o nosso código de JavaScript utilizando
todas as adições mais recentes da linguagem.

Importações e Exportações
Existem outras adições além da nova forma de declarar variáveis e as
arrow functions na versão mais atual do JavaScript, como por exemplo
a introdução de import e export. No JavaScript tradicional, se quisermos
utilizar funções de outro arquivo JavaScript, é necessário importar os ar-
quivos em uma ordem específica para que um código de um arquivo
anterior esteja disponível em um arquivo subsequente. Com o ECMAs-
cript 6, podemos utilizar uma lógica de exportação e importação para
permitir que os arquivos se comuniquem sem a necessidade de uma
ordem específica de tags no HTML.

Para exportarmos uma função, classe ou variável de um arquivo pode-

mos colocar antes do que será exportado a palavra-chave export.
44

No exemplo acima, tornamos disponível para acesso via outros arquivos

a função chamada ‘aleatorio’, que serve para gerar um número aleatório
entre os parâmentros ‘min’ e ‘max’. Esse tipo de exportação é conhecido
como exportação nomeada, que requer que você faça uma importação
Mastertech | Imersivo Desenvolvimento Front-End

utilizando o exato nome do item exportado no arquivo original, como no

exemplo abaixo:

Em um segundo arquivo, podemos importar a função do arquivo origi-

nal declarando um import, seguido do nome dos itens a serem impor-
tados, separados por vírgula e dentro de um par de chaves, e a indicação
de que arquivo ela está vindo. Após essa linha, podemos utilizar a fun-
ção, variável ou classe no novo script sem nenhum problema.

Há, entretanto, uma forma alternativa de exportar conteúdo de um ar-

quivo. Nessa forma, não precisamos utilizar os exatos nomes na hora de
efetuar uma importação, porque a exportação será definida como o va-
lor padrão do processo. Para efetuar essa alteração, no nosso código de
exportação, iremos substituir ‘export’ por export default.
 E na hora de importarmos o código pode-se definir qualquer nome
onde essa função será atribuída, sem a utilização de chaves.

No exemplo acima, o código da função ‘aleatorio’ ficará salvo no se-

gundo script dentro da palavra-chave ‘gerarNumero’. Isso acontece
porque, na ausência de chaves na declaração de um ‘import’, qual-
quer exportação que contenha a palavra ‘default’ será automatica-
mente atribuída. Vale ressaltar que cada arquivo em JavaScript pode
conter uma e somente uma exportação padrão, mas diversas expor-
tações nomeadas.

Para encontrar mais funções que o Babel converte, acesse:

https://babeljs.io/

SCSS

Essa é uma das ferramentas elaboradas para expandir e facilitar a cria-

ção de códigos CSS. A linguagem SCSS (Sassy Cascading Style Sheets)
é uma linguagem de pré-processamento, e é compilada para o CSS
tradicional para execução em navegador. Ao usar essa ferramenta, o
45
programador deixa de escrever estilos em CSS e passa a usar SCSS, e
precisa estabelecer a estrutura de compilação para que o navegador
leia esse código.

Instalação
Existem várias formas de criar essa estrutura, mas no nosso caso utili-
Mastertech | Imersivo Desenvolvimento Front-End

zaremos o próprio Webpack para também tomar conta dessa tarefa.

Primeiramente, precisamos instalar alguns módulos:

$ npm install sass-loader node-sass

E depois é necessário configurar o ‘webpack.config.js’ para que ele

consiga ler e compilar o SCSS. Como a partir de agora não iremos
mais utilizar CSS, a estrutura criada será exclusivamente focada na
linguagem nova.
 Todas essas configurações são necessárias para que essa biblioteca fun-
cione, sendo elas:
. O entry, que é nosso arquivo de entrada. No caso acima, o nosso
ponto de entrada corresponde à um único arquivo, de nome ‘main.
scss’ dentro da pasta ‘src/scss/’;
. O rules é uma chave que recebe uma lista de objetos que contém
as regras que serão aplicadas em determinados tipos de arquivos;
46
. O test serve para definir, utilizando expressões regulares,
em quais tipos de arquivo essa regra será aplicada. No nosso caso,
estamos buscando arquivos que terminem com a extensão ‘.scss’;
. A chave use serve para definir o que será utilizado caso ar-
quivos sejam encontrados seguindo essas regras. O loader file-loa-
der serve para carregar arquivos que estejam importados via JavaS-
Mastertech | Imersivo Desenvolvimento Front-End

cript e definir qual será o arquivo de saída para o resultado desses

processos, que no caso é um arquivo chamado ‘bundle.min.css’. O
loader sass-loader servirá para compilar o nosso SCSS em CSS utili-
zando o pacote node-sass como padrão;
Com essas regras definidas em nosso arquivo de configuração, agora
podemos passar a desenvolver o nosso código de estilo usando a nova
linguagem e seus padrões.

Escrevendo em SCSS
O SCSS traz algumas diferenças primordiais em relação ao CSS normal.
Seu principal objetivo é facilitar a forma como o estilo do seu site é escri-
to, adicionando uma lógica mais próxima de linguagens de programa-
ção, juntamente com a possibilidade de criações de variáveis, funções e
aninhamento de estilos. Veja abaixo como o aninhamento é feito para
indicar seletores dentro de outros seletores.
 Normalmente, indicaríamos que um seletor está dentro do outro sepa-
rando-os com um espaço, mas no caso do SCSS colocamos o seletor
filho dentro das chaves do seletor pai. Esse tipo de relação pode ser es-
tabelecida em qualquer nível de parentesco, colocando os filhos sempre
internos aos pais. Há entretanto uma situação onde os seletores internos
à outro seletor não necessariamente correspondem a relação de pais e
filhos, mas sim estendem o seletor externo.

47
Mastertech | Imersivo Desenvolvimento Front-End

No exemplo acima, os dois códigos alcançam o mesmo resultado. Den-

tro do SCSS, utilizar o ‘e comercial’ (&) dentro de um seletor corresponde
ao próprio seletor, e sendo assim, quando você coloca um código como
&.blue, está sendo especificado que aquele bloco de estilo será aplicado
em parágrafos que tenham a classe de nome ‘blue’ neles. No exemplo
 acima, então:
. Parágrafos sem a classe ‘blue’ terão a cor vermelha;
. Parágrafos com a classe ‘blue’ terão a cor azul;
. Ambos os tipos de parágrafo (com ou sem classe) ficarão amarelos
quando o mouse passar por cima;
Nele também podemos declarar variáveis com valores específicos. Para
criar uma variável, devemos primeiro escrever um ‘e comercial’ seguido
do nome da variável (e aqui ele pode conter hifens), com a atribuição in-
dicada por um símbolo de dois pontos e o valor na sequência. A criação
desse tipo de valor é importante no fluxo de trabalho pois permite uma
maior integração entre elementos diferentes da página e uma facilida-
de na refatoração do código. Veja o exemplo abaixo:

Nessa situação, especificamos que existe uma variável chamada $hea-
der-height que contém o valor de setenta e cinco pixels. Essa variável 48
será utilizada tanto para indicar qual a altura do header quanto a mar-
gem que o elemento main precisa ter do topo da página. Caso em al-
gum momento ao longo do desenvolvimento haja a decisão de alterar
essa altura de setenta e cinco para cento e vinte, por exemplo, podemos
alterar somente o valor da variável e as mudanças serão aplicadas auto-
maticamente em todos os locais em que ela é utilizada.
Mastertech | Imersivo Desenvolvimento Front-End

Funções e Mixins
Duas grandes facilidades do SCSS são as possibilidades de criar funções
e mixins, que são estruturas de código que podem ser reaproveitadas ao
longo do seu estilo e tentam evitar que pedaços específicos de código
se repitam com frequência.

Mixins são estruturas de código que servem para definir uma base co-
mum que pode ser utilizada em qualquer elemento e expandida con-
forme o necessário, Para criarmos mixins, é necessário utilizar a estrutu-
ra @mixin, como no exemplo:
 No caso acima, criamos um mixin de nome ‘translateX’ que recebe um
único valor como parâmetro e atribui esse valor para todas as variações
de compatibilidade da propriedade ‘transform’, garantindo que nossa
animação seja responsiva em qualquer navegador. Com esse mixin cria-
do, só precisamos incluí-lo utilizando o termo @include nos seletores
de nosso interesse. Já para criarmos uma função, precisamos definir um
nome, parâmetros e o retorno dela, como no exemplo:

Nesse exemplo, foi criada uma função que calcula automaticamente 49

qual a porcentagem de um valor em relação ao outro. Esse tipo de fun-
ção é extremamente útil porque podemos, com ela, calcular automati-
camente qual a porcentagem de largura de um elemento em relação ao
seu pai, indicando no parâmetro ‘target’ qual seria o tamanho do nosso
elemento em pixels, e em ‘container’ qual seria o tamanho do nosso pai
em pixels. Com essa funcionalidade, pode-se utilizar os tamanhos defi-
nidos no layout do site para calcular, sem a necessidade de um aplicati-
Mastertech | Imersivo Desenvolvimento Front-End

vo terceiro ou de um processo de tentativa e erro, qual a porcentagem

exata de largura do elemento da nossa página.

Importações
Quando criando estilos em SCSS, é comum utilizar suas ferramentas de
importação para melhorar a organização do código e diminuir a quanti-
dade de código por arquivo. Isso é utilizado pois, ao compartimentalizar
os estilos por sessões do site, é possível ser mas assertivo ao fazer manu-
tenção ou criação de conteúdo. Para importarmos outro arquivo SCSS
no nosso arquivo atual, devemos utilizar a estrutura @import.
 No exemplo acima, estamos importando os estilos do nosso elemento
‘header’ dentro do nosso SCSS principal. Desse exemplo, é importante
ressaltar alguns pontos:
. Sempre devemos ter um arquivo principal (normalmente chama-
do de ‘main’) que conterá todos os imports necessários para o nosso
site funcionar;
. Cada “pedaço” do site (header, footer, main, janelas flutuantes) nor-
malmente terá seu estilo definido em um arquivo próprio;
. Arquivos parciais (correspondentes a um pedaço do site específico)
normalmente tem seu nome começado com underline. Entretanto,
na hora da importação não é necessário adicionar esse símbolo ou
a extensão do arquivo;
. Você pode utilizar variáveis dos imports em um código subsequen-
te;
50
Devtool
Inspecionando nossos elementos através das Ferramentas de Desen-
volvedor podemos ver que agora não é mais possível ver com precisão
onde exatamente está localizado nosso código de estilo. Isso acontece
porque, embora estejamos programando em arquivos de SCSS, o nave-
gador só lê o pacote geral de CSS gerado, agrupando todo o conteúdo
escrito em um único arquivo e alterando completamente a formatação
Mastertech | Imersivo Desenvolvimento Front-End

dos textos para que todas as regras de CSS sejam cumpridas. Embora
esse seja exatamente o objetivo que desejamos alcançar, esse tipo de
resultado atrapalha o processo de correção e identificação de proble-
mas no nosso código. Sendo assim, o Webpack oferece uma configu-
ração chamada devtool que permite a adição de informações no seu
CSS que identifiquem qual a origem real de cada código, identificando
exatamente em quais arquivos de SCSS nosso código está localizado.
 A adição da linha do ‘devtool’ no nosso ‘export’ é suficiente é a única
que precisa ser feita para essa ferramenta funcionar. Vale relembrar que,
embora ela facilite a leitura do programador nas Ferramentas de De-
senvolvedor, sua adição aumenta um passo no processo de build dos
nossos pacotes, deixando-o mais lento.

51
Mastertech | Imersivo Desenvolvimento Front-End