Bibliotecas, Frameworks, Plugins: Entenda quem é quem nessa bagunça gostosa do Javascript

Publicado originalmente em Codesigners.cc

Quando comecei a escrever código, a minha vontade era única e exclusiva de garantir alta fidelidade do design das páginas que eu criava. A gente fazia o projeto de design e muitas vezes o resultado final publicado na web ficava um tanto quanto diferente.

O negócio é que esse mundo de escrever código é como se fosse um buraco negro, quase que infinito. É desordenado, caótico, e se você não tiver uma linha guia, uma espécie de bússola que te guie, com certeza você se perderá. Assim aconteceu comigo!

Eu fui me interessando por código e em um primeiro momento fiquei muito perdido. Existem inúmeras linguagens de programação para web, e dentro de cada linguagem existem ferramentas auxiliares como bibliotecas, frameworks, plugins, packages, CLIs, boilerplates e por aí vai… são tantos termos e nomes, que prefiro chamar apenas de ‘auxiliares‘.

Em um dado momento, quando eu já estava relativamente confortável criando sites com WordPress, eu senti uma vontadinha de expandir e pensei:

‘O que tem mais a ver com design dentro deste universo de programação’

A resposta mais óbvia (e talvez a mais coerente) é Javascript!

E foi assim que eu caí no mundão do Javascript, e não demorou muito pra eu ficar lá, parado no bailão, completamente perdido.

Dessa forma, resolvi escrever este texto pra falar um pouco sobre coisas iniciais e importantes, que demoraram um pouco pra eu entender mas que podem te ajudar como um resumão caso você também esteja perdido como eu fiquei. Bora lá!

Javascript

Javascript é a linguagem de programação que que é interpretada nativamente em todos os navegadores (Chrome, Firefox, Safari, Internet Explorer, etc.).
Todos os navegadores possuem nativamente uma mecânica de interpretação de código Javascript, e todo código javascript que você escreve pode controlar alguma coisa na interface de uma página web.

Quando digo ‘controlar alguma coisa na interface’, isso significa que você pode reposicionar elementos, criar animações, mudar estilos de cores, tamanho e qualquer outra coisa que esteja na página.

O Javascript possui uma extensa documentação e também teve vários incrementos ao longo de sua história. Caso você deseje se aprofundar e entender de onde veio o Javascript, vale a pena dar uma olhada aqui.

Também vale a pena dar uma olhada no site da MDN que tem uma documentação do Javascript muito bem feita!

Bibliotecas Javascript

Uma Biblioteca Javascript pode ser vista como um auxiliar de escrita de código (pelo menos é assim que eu vejo).

Um dos principais motivos do surgimento das Bibliotecas Javascript, se não o principal, foi a incompatibilidade de Navegadores. Em um dado momento da história da internet, era comum ver um mesmo código javascript ter um resultado X no navegador Firefox, e um resultado Y (ou um erro) no Internet Explorer. Assim, começaram a surgir as primeiras bibliotecas javascript, cada uma com seu intuito, mas no geral e idéia era melhorar alguma coisa no processo de desenvolvimento (como por exemplo, economizar tempo) e corrigir problemas de incompatibilidade entre navegadores.

Uma das mais famosas bibliotecas de Javascript é o jQuery. O surgimento dessa biblioteca tornou a escrita de código Javascript mais simples e até mais intuitiva, permitindo escrever código Javascript em uma sintaxe mais enxuta. Veja um exemplo abaixo:

//Javascript Puro
var container = document.getElementById('container');
//jQuery
var container = $("#container");

No código acima é possível temos uma variável (var) que armazena um elemento com id ‘container’. É fácil perceber como a escrita fica mais simples e intuitiva com jQuery. Esse padrão se repete por toda a escrita de código com jQuery, deixando o código mais amigável.

Cada biblioteca tem sua documentação própria onde é possível aprender a utilizá-la. Esse é um dos pequenos problemas em se utilizar bibliotecas… você vai precisar aprender a utilizar uma nova ferramenta mesmo que você já saiba Javascript Puro. Isso inclui estudar muito a documentação para que você consiga dominar este novo ‘auxiliar’ no seu dia-a-dia de trabalho.

Ainda sobre o jQuery, vale ressaltar que no contexto atual de desenvolvimento de interfaces para web, existe muita crítica do seu uso. A maior crítica mora no fato de que as versões mais recentes dos navegadores de internet já oferecem alta compatibilidade com o código Javascript puro, o que evitaria a necessidade de carregar uma biblioteca externa como o jQuery.

Além do jQuery, existem inúmeras outras bibliotecas javascript que fazem coisas específicas, mas sempre com o intuito de auxiliar no desenvolvimento de projetos Javascript. Dentre as mais famosas e contemporâneas podemos incluir React e Vue.

Assim como no jQuery, tanto React quanto Vue e todas as outras bibliotecas javascript têm suas próprias regras, obrigando o desenvolvedor a estudar e aprender pelo menos o básico destas regras para poder utilizá-la.

Então, quando você ouvir o termo Biblioteca (ou Library) Javascript, basicamente é Javascript puro reescrito com alguma intenção de otimizar alguma coisa no desenvolvimento com Javascript.

Plugins, Packages e Extensions Javascript

Agrupei estes itens pois acredito que de alguma forma eles ocupam uma mesma categoria. Ao meu ver, são sub-auxiliares que geralmente (mas nem sempre) estão atrelados à uma Biblioteca.

Por exemplo, se eu estou usando jQuery, eu posso precisar fazer um campo ‘drag-and-drop’. Neste caso, posso procurar por um Plugin ‘jQuery drag-and-drop’, que seria um código/script específico para essa função e que possivelmente me daria algumas opções de customização e implementação, facilitando minha vida para que eu não precise escrever um código para um drag-and-drop do zero.

Este mesmo padrão se repete dentro de outras Bibliotecas, como por exemplo dentro do React. No React, podemos chamar estes sub-auxiliares de Package. Se dentro do meu projeto React eu precisar por exemplo de um carrossel de imagens, eu posso procurar por um Package que me forneça essa funcionalidade, e instalar este Package no meu projeto.

Sobre Extensions, é a mesma coisa que Plugin e Package, basicamente um nome diferente para a mesma funcionalidade.

Essa questão de nomenclatura pode variar muito de um Framework para outro, de uma biblioteca para outra… enfim. Pra mim o mais importante é saber o que este sub-auxiliar faz e como ele pode me ajudar.

Frameworks Javascript

Como o mundo do Javascript é muito vasto e você pode criar interfaces e interações de inúmeras maneiras diferentes, às vezes fica meio complicado estruturar o seu conjunto de ferramentas para um novo projeto.

Tentando metaforizar, pense que você vai construir uma casa. Você pode começar desenhando a planta da sua casa, mesmo não sendo arquiteto. Depois você pode ler alguns livros, aprender tudo sobre engenharia civil e desenhar sua planta hidráulica e elétrica…. ah!, você também vai precisar de tijolos, e tem a opção de produzir você mesmo cada tijolo. Depois você pode produzir também seu próprio cimento ou massa que vai dar liga e juntar os tijolos. Complicado né!

Pois é, para criar um projeto Javascript você também precisará de um monte de materiais e ferramenta; e mais do que isso, você precisará saber integrá-las, saber o quê funciona com o quê, como organizar isso numa hierarquia de arquivos, etc. A idéia de Framework surge para tornar esta montagem de projeto mais simples e intuitiva.

Um Framework pode ser um conjunto de ferramentas que pode incluir uma Biblioteca e Plugins/Packages/Extensions Javascript, organizados de uma maneira que tudo esteja integrado e compatível para uso. Essa organização gera uma estrutura de pastas e linka tudo bonitinho, economizando um trabalhão para o programador.

Feliz ou infelizmente, grandes poderes trazem grandes responsabilidades. Usar um Framework Javascript é maravilhoso e resolve um moooonte de problemas, mas também traz a obrigação de seguir uma estrutura pré-definida, regras de escrita de código pré-definidas… enfim, tudo pré-definido para que tudo dê certo. Mas se você quer minha opinião, use um Framework e seja feliz! Alguns projetos mais simples podem sim ser feitos sem um Framework, mas se você está pensando em desenvolver um SPA (Single Page Application), fazer isso sem um Framework só vai te frustrar e te fazer desistir em 5 minutos.