Cezar Luiz

Javascript e outras coisas

JavaScript to the rescue! #jQuery vs JS

E ai pessoal, tudo bem? Recentemente fiz um processo de entrevista na empresa onde eu trabalho e os requisitos da vaga era que precisávamos de pessoas que tivessem um nível mais avançado em JS. Para minha surpresa, tinha muita gente que sabia muito mais jQuery do que JavaScript e isso ao meu ver é preocupante para nossa área, principalmente nos dias de hoje.

Não estou julgando os candidatos, não sei como eles estudam, como e onde eles trabalham, então por isso quero fazer uma série de assuntos relacionados a JavaScript de verdade, quero tentar “profissionalizar” nossa área. Espero que eu consiga :)

Vou dividir esses artigos em partes, nas quais serão:

  • jQuery vs JS
  • Promises
  • Ajax
  • Escopo
  • Patterns
  • ES6

Se eu lembrar de algo que possa ajudar, vou inserindo aqui outros temas, mas se vocês quiserem, podem sugerir assuntos nos comentários e se eu puder ajudar tentarei da melhor forma ;)

Vamos lá!

jQuery vs JS

jQuery é uma biblioteca criado em meados de 2006 por John Resign, também autor do livro Segredos do Ninja JavaScript que recomendo muito a sua leitura. Acho que todas as pessoas que estão lendo isso já usaram essa brilhante lib, mas, tudo na vida tem começo, meio e fim.

Não quero dizer que ela é uma bosta, não serve pra mais nada, não é isso… Mas acho que ela já cumpriu seu papel e ajudou muito a comunidade, mas eu digo que seu fim está chegando pelos seguintes motivos: navegadores ficando mais modernos e dando cada vez mais suporte a novas funcionalidades, as pessoas estão abandonando navegadores antigos, o crescente uso de smartphones, novas metodologias surgindo e cada vez menos fazemos mineração de DOM, animações no CSS nativas e por aí vai. Mas uma coisa que jQuery faz muito bem é o suporte cross-browser e ajuda muito as pessoas que estão aprendendo.

Chega de lero lero, quero dar exemplos de coisas que podemos substituir no jQuery usando apenas JavaScript puro, pois vi muitos projetos pessoas utilizarem o jQuery apenas para utilizar o addClass ou $.ajax. Garanto pra vocês, vão se surpreender.

Classes CSS

1
2
3
4
5
// jquery
$('body').addClass('foo');

// js
document.body.classList.add('foo');

Ah, mas olha isso, tem que escrever tudo isso…

É jovem, mas jajá você pega o jeito e vai que vai :D

Vamos simplificar então…

1
2
3
4
5
6
7
8
9
// jquery
$('.element').addClass('foo');

// js
var $ = function(el) {
return document.querySelector(el);
}

$('.element').classList.add('foo');

Isso foi um exemplo bem simples, mas já entenderam a essência do negócio né?

“E pra remover, dar toogle, como que faz?” Mesma coisa:

1
2
3
4
5
6
7
8
9
10
11
12
// jquery
$('body').removeClass('foo');
$('body').toggleClass('foo');
$('body').hasClass('foo');

// js
var body = document.body;

body.classList.remove('foo');
body.classList.toggle('foo');

if (body.classList.contains('foo')) { ... }

“Caraca, que massa! Posso largar já tudo e ser feliz?”. Calma, depende do navegador que você quer dar suporte..

Só que assim, se você vai usar jQuery no seu projeto apenas para addClass ou qualquer outra coisa, procure por polyfills, são bibliotecas bem menores e que “ativam” o suporte nos broswers que não tem suporte..

Show e Hide

Outra coisa que o pessoal usa bastante no jQuery, e que até eu utilizava, era o .show() e .hide(). Métodos para mostrar e esconder um elemento. No fundo, o que isso faz é alterar a propriedade display do elemento.

1
2
3
4
5
6
7
// jquery
$('.btn').show();
$('.form').hide();

// js
document.querySelector('.btn').style.display = '';
document.querySelector('.form').style.display = 'none';

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// jquery
$('.btn').css({
display: 'block',
padding: '10px 20px',
color: 'white',
backgroundColor: 'red',
});

// js
document.querySelector('.btn').style = {
display: 'block',
padding: '10px 20px',
color: 'white',
backgroundColor: 'red',
};

Atributos

1
2
3
4
5
6
7
8
// jquery
$('button').attr('disabled', 'disabled');

// js
var btn = document.querySelector('button');
btn.setAttribute('disabled', 'disabled');
// ou...
btn.disabled = true;
1
2
3
4
5
6
7
8
// jquery
$('button').removeAttr('disabled', 'disabled');

// js
var btn = document.querySelector('button');
btn.removeAttribute('disabled', 'disabled');
// ou...
btn.disabled = false;

Text e HTML

1
2
3
4
5
// jquery
$('body').html('<h1>Hello, World!</h1>');

// js
document.body.innerHTML = '<h1>Hello, World!</h1>';
1
2
3
4
5
// jquery
var formHTML = $('.form').html();

// js
var formHTML = document.querySelector('.form').innerHTML;
1
2
3
4
5
// jquery
$('h1').text('Bye, World!');

// js
document.querySelector('h1').textContent = 'Bye, World!';
1
2
3
4
5
// jquery
var titleText = $('h1').text();

// js
var titleText = document.querySelector('h1').textContent;

Eventos

1
2
3
4
5
6
7
8
9
10
11
// jquery
$('button').on('click', function(e) {
alert('Hello, World!')
});

// js
var button = document.querySelector('button');

button.addEventListener('click', function(e) {
alert('Hello, World!');
});

Podemos criar um helper para não ter que toda vez digitar addEventListener.

1
2
3
4
5
6
7
8
9
10
11
var $ = function(el) {
return document.querySelector(el);
}

var on = function(el, event, callback) {
return el.addEventListener(event, callback);
}

on($('.button'), 'click', function(e) {
alert('Aqui é JS #$%#@!')
});

Óbvio que isso é um exemplo muito didático e que você não deveria utilizar isso, hehe. Podemos utilizar algumas patterns para nos auxiliar a criar um mini-jquery.

JSON

1
2
3
4
5
// jquery
var json = $.parseJSON('{foo: 'bar'}');

// js
var json = JSON.parse('{foo: 'bar'}'); // {object} {foo:bar}
1
2
3
4
// jquery?

// js
var json = JSON.stringify({id: 2}); // {string} '{id:2}'

Loops e Arrays

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = [1, 2, 3, 4, 5];
var obj = {a: 1, b: 2, c: 3};

// jquery
$.each(arr, function(item, index) { ... });

$.each(obj, function(key, value) { ... });

$('li').each(function(element, index) { ... });

// js
arr.forEach(function(item, index) { ... });

Object.keys(obj).forEach(function(key, index) { ... });

[].slice.call(document.querySelectorAll('li')).forEach(function(element, index) { ... });

Map e Filter

A ideia do map é criar um novo array com a mesma quantidade do nosso array original, porém somente com informações específicas.

O filter já diz tudo, filtra apenas o que você quer a partir de uma condição. Se a condição for true insere o objeto na array que será criada, se for false ignora e não insere na nova array.

Você pode combinar os dois e fazer coisas bem doidas.

Para esclarecer, exemplos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var arr = [
{name: 'John', age: 15, gender: 'Male'},
{name: 'Maria', age: 12, gender: 'Female'},
{name: 'José', age: 25, gender: 'Male'},
{name: 'Wando', age: 32, gender: 'Male'},
];

// jquery
var idades = $.map(arr, function(pessoa) {
return pessoa.age;
}); // [15, 12, 25, 32]

// javascript
// map
var idades = arr.map(function(pessoa) {
return pessoa.age;
}); // [15, 12, 25, 32]

var nomes = arr.map(function(pessoa) {
return pessoa.name;
}); // ['John', 'Maria', 'José', 'Wando']

// filter
var mulheres = arr.filter(function(pessoa) {
return pessoa.gender == 'Female';
}); // [{name: 'Maria', age: 12, gender: 'Female'}]

var menoresDeIdade = arr.filter(function(pessoa) {
return pessoa.age < 18;
}); // [{name: 'John', age: 15, gender: 'Male'}, {name: 'Maria', age: 12, gender: 'Female'}]

Eu não encontrei suporte nativo do filter e reduce no jQuery.

AJAX

O AJAX é uma das coisas mais importantes em JavaScript, por isso ele ganhou uma parte exclusiva, só pra esse danado.

Óbvio que o jQuery faz o uso do XMLHttpRequest muito bem e facilita muito o uso do AJAX. Mas imagine que você tem um site institucional, e o único lugar que você utiliza AJAX é no formulário de contato. Será que você precisa do jQuery pra isso? Vamos ver:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var url = 'http://ipinfo.io/json';

// jquery
$.ajax({
url: url,
method: 'GET',
dataType: 'json'
})
.done(function(res) { ... })
.fail(function(err) { ... });

// javascript
var xhr = new XMLHttpRequest;

// preparamos uma conexão
xhr.open('GET', url);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

xhr.addEventListener('load', function(evt) { ... });
xhr.addEventListener('error', function(evt) { ... });

xhr.send();

Caso isso ainda seja complicado pra você ou verboso demais e ainda quer usar uma biblioteca de Ajax (que não tem problema nenhum), veja outras libs conhecidas como micro-libs.

Mas o que eu quero é que você se questione e veja a real necessidade de adicionar uma lib pesada como jQuery para usar apenas uma funcionalidade uma única vez. Temos um trato? Você promete que vai avaliar isso?

Uma coisa rapidinho! Dê uma olhada na nova especificação sobre requisições assíncronas, se chama Fetch API. A ideia é substituir o XMLHttpRequest.


O que eu quero mostrar com esses exemplos é que você não precisa ter medo do JavaScript. O jQuery é uma grande biblioteca e uma das mais populares do mundo, traz muitas facilidades para nós desenvolvedores, mas a pergunta que fica, será que precisamos do jQuery? Será que precisamos inserir muitos kbytes para as vezes usar uma funcionalidade apenas?

Nos exemplos acima, tentei demonstrar como fazer com JavaScript puro o que eu acho que as pessoas mais utilizam no jQuery.

Nos vemos na próxima etapa: Promises.

Bons estudos folks ;)