Se você programa em Javascript, você precisa aprender essas coisas!
Você também programa em Javascript? Que bom! Vamos conversar sobre nossa querida linguagem de programação, a linguagem da web! A ideia aqui é você aprender ou revisar algumas dicas importantes.
Lembre-se que acima de qualquer framework, é muito mais pertinente você conhecer a linguagem, afinal os frameworks podem simplesmente não existir em pouco tempo ou não estar mais na moda, mas a linguagem na qual os frameworks se baseiam, raramente vai simplesmente “morrer”.
Vamos para o que interessa? Algumas coisas serão práticas e outras serão teóricas. É importante você aplicar essas coisas no seu dia a dia. Isso vai te ajudar a memorizar e fazer valer a pena o artigo.
1 — O Javascript não é seu inimigo
Toda linguagem tem seus defeitos e com Javascript não é diferente. Mas muitas vezes as pessoas põem a culpa na linguagem de algo que não é necessariamente um problema dela.
Se você está aprendendo agora, talvez você simplesmente saia codando sem entender algumas coisas antes e sua aplicação não seja tão eficiente falando em desempenho.
Toda vez que um usuário entra na sua aplicação web, é feito o download dos arquivos js, css e imagens necessários para compor a página. E você sabe que transferência HTTP em excesso é ruim para desempenho, certo?
— Então qual a solução?
Uma das principais coisas é enxugar ao máximo a sua aplicação, trazendo somente o que o usuário precisa. Carregue as coisas aos poucos, cada página com o que é essencial. Um exemplo prático?
Digamos que você precise trazer uma tabela com uma lista de usuários e existe uma opção de expandir, onde você traz todos os detalhes deste usuário. Nessa tabela principal você só tem a thumbnail e o nome do usuário. Mais ou menos como essa imagem abaixo:
Qual o ideal nesse cenário? Trazer a thumbnail já otimizada no tamanho necessário e somente ao clicar no “botão ver detalhes” e carregar todas as informações deste usuário.
Uma segunda melhoria de desempenho que você poderia aplicar, seria trazer os seus códigos fonte minificados. Existem vários pacotes que podem fazer isso para você, reduzindo assim o tamanho dos arquivos que serão baixados pelo navegador do usuário. Isso alinhado a uma boa prática de escrever um código limpo, pode ajudar em muito o desempenho do seu projeto!
Os frameworks naturalmente trazem seus meios de minificar o código fonte, assim você não precisa se preocupar com essa parte. Mas em códigos de puro Javascript, lembre-se dessa dica com carinho (:
2 — A API do DOM é naturalmente LENTA!
Uma das coisas mais prejudiciais ao desempenho de suas aplicações web, certamente serão as manipulações da API do DOM. Essa API é providenciada pelo Navegador.
Sim, é isso que você leu. O DOM não é Javascript, embora na maioria das vezes você vá manipulá-lo via Javascript. Inclusive, se você for manipular o DOM por outro meio, deve tomar cuidado da mesma forma.
— Qual a solução? =O
Manter o mínimo possível de interação com o DOM! Não fique o tempo todo buscando um elemento do DOM, principalmente aqueles que podem ser qualquer coisa. Estou falando do document.querySelector.
Uma boa prática é buscar por algo bem específico. Coloque, se possível, um ID no que você deseja buscar do DOM, utilizando o document.getElementById. Assim, você vai direto ao ponto.
Além disso, armazene a referência numa variável, assim você não precisará buscá-lo toda vez que houver uma alteração. Isso acontece porque você estará armazenando o ponteiro desse objeto, que você vai ver na próxima dica com detalhes o que significa.
O importante é você saber que, dessa forma, você terá chamado apenas uma vez e poderá editá-lo diretamente.
Pesquise mais a respeito do DOM, ele pode render um artigo só para falar de técnicas para reduzir sua perda de desempenho. Entendê-lo é essencial, mas essas dicas já vão ajudar muito.
3 — Existem ponteiros em Javascript.
Existem variáveis em que você armazena o conteúdo real, mas também há aquelas em que você apenas guarda o Endereço na memória de onde verdadeiramente aquilo que você mandou guardar na variável está. Ficou confuso? Olhe aqui:
const umaString = 'Uma string real';console.log(umaString);
/* Retorno: Uma string real */let umaNovaString = umaString;umaNovaString = `${umaNovaString} modificada (=`console.log(umaString);
/* Retorno: Uma string real */console.log(umaNovaString);
/* Retorno: Uma string real modificada */
Isso que você viu no trecho de código acima é como as coisas funcionam num fluxo de variável comum. Elas guardam o valor e você pode operar nelas. Quando uma nova variável recebe essa informação, ela é um conteúdo separado e único. Agora veja o que acontece se você fizer isso com um Array.
const meuArrayPrincipal = [1, 2, 3];console.log(meuArrayPrincipal);
/* Retorno: [1, 2, 3] */const meuNovoArray = meuArrayPrincipal;meuNovoArray.push(4);console.log(meuNovoArray);
/* Retorno: [1, 2, 3, 4] */console.log(meuArrayPrincipal);
/* Retorno: [1, 2, 3, 4] *//* Whaaat? Oo */
Exatamente, você modifica o novo array e afeta o array principal. Sabe por que? Porque o que você pegou em “meuNovoArray = meuArrayPrincipal” foi o endereço na memória onde aquele array se encontrava. Se você quisesse trabalhar de maneira separada sem afetar o principal, você precisaria clonar esse array.
const meuArrayPrincipal = [1, 2, 3];
const meuNovoArray = [...meuArrayPrincipal];meuNovoArray.push(4);console.log(meuArrayPrincipal, meuNovoArray);
/* Retorno: [1, 2, 3], [1, 2, 3, 4] */
Agora sim, não é? Agora você já sabe dessa importante coisa.
— E quem é quem, João?
Os tipos number, string, undefined, null, boolean são Tipos Primitivos. Não são passados por referência.
Já os tipos object, function, array, regex e companhia, são Objetos. Esses são por referência, ou ponteiro se preferir.
4 — Tudo na verdade é um Objeto, ou quase
Praticamente tudo é um objeto em Javascript, até a string.
— Ué! Mas você não falou que objetos são passados por referência, e string não?
Sim, falei. E é verdade, continue com essa informação. Você trabalha com esses tipos daquela forma, mas saiba que por baixo dos panos, ele é tratado como Objeto. Não é atoa que você acessa propriedades o tempo todo numa string, não é? Por exemplo: minhaString.toUpperCase();
Não é assim que se acessa propriedades de Objetos? Certo! Inclusive você pode até adicionar as suas próprias funções aí…
String.prototype.meuNome = () => 'João';const minhaString = 'Alguma coisa';console.log(minhaString.meuNome());
/* Retorno: João */
Uow *-*, nem sabia que isso era possível né? Na real, você pode até substituir coisas nativas.
/* Ainda no exemplo do código acima */
String.prototype.toUpperCase = () => 'João';console.log(minhaString.toUpperCase());
/* Retorno: João */
Legal né? Você pode armazenar funções em variáveis também.
const $ = document.querySelector;console.log($('#minhaDiv'));
/* Retornará sua DIV, como se tivesse buscado por Jquery. */
Isso ajuda a dividir o nosso código adequadamente, como no exemplo abaixo:
const apenasNumerosAbaixoDe5 = (numero) => numero < 5;[1, 2, 3, 4, 5, 6, 7, 8, 9].filter(apenasNumerosAbaixoDe5);
Guarde essa dica no coração (:
5 — Javascript tem o costume de evoluir
A cada ano que passa essa linguagem se torna mais forte e está em mais lugares. Hoje você programa aplicativos, PWAs, sites comuns, sistemas nativos e tudo o que você possa imaginar em Javascript. Sempre fique de olho nas documentações oficiais da nossa amada linguagem. E cuidado com posts que podem ser muito antigos e antiquados para a realidade atual. Que podem até mesmo ter sido excelentes quando lançados, mas não se aplicam mais.
Concluindo
Javascript pode render ainda muitas postagens como essa, com detalhes importantes a se aprender. Esteja sempre atualizado e conheça bem essa ferramenta que tantos frameworks usam como base. Isso fará com que você consiga extrair os melhores recursos possíveis entregando satisfação a seu cliente.
Nos vemos por aí! (:
