Slide 1
Slide 1 text
Repensando o uso do
Slide 2
Slide 2 text
Vinícius Almeida
@vimoding
Repensando o uso do
Slide 3
Slide 3 text
Programador na
@vimoding
Repensando o uso do
Slide 4
Slide 4 text
Repensando o uso do
Slide 5
Slide 5 text
@vimoding
De um tempo pra cá,
a utilização da jQuery
anda sendo bastante
contestada.
Repensando o uso do
Slide 6
Slide 6 text
@vimoding
Não há muita
argumentação falando
dos seus aspectos bons.
Repensando o uso do
Slide 7
Slide 7 text
@vimoding
Você já parou pra refletir
porque a utilizamos até
hoje?
Repensando o uso do
John Resig iniciou o projeto 8 anos atrás
Slide 8
Slide 8 text
“jQuery is the stdio.h of the web”
@vimoding
Repensando o uso do
Yehuda Katz
Slide 9
Slide 9 text
@vimoding
O fato principal aqui é
que a jQuery é a
biblioteca JavaScript mais
utilizada da internet…
Repensando o uso do
http://w3techs.com/
Slide 10
Slide 10 text
@vimoding
…e a mais
incompreendida também.
Repensando o uso do
Slide 11
Slide 11 text
@vimoding
Repensando o uso do
Uma grande injustiça do
destino: a má fama dos
plugins jQuery.
Slide 12
Slide 12 text
@vimoding
Ok, a culpa não é
necessariamente do
destino.
Repensando o uso do
Slide 13
Slide 13 text
@vimoding
E se nós desenvolvermos
os componentes do nosso
sistema na forma de
plugins?
Repensando o uso do
Slide 14
Slide 14 text
@vimoding
Então podemos utilizar a
jQuery como base para o
desenvolvimento.
Repensando o uso do
Slide 15
Slide 15 text
@vimoding
Repensando o uso do
Ao aplicar nossos
plugins/componentes
Slide 16
Slide 16 text
@vimoding
Repensando o uso do
$('#slider-container').myOwnSlider({
autoPlay : true,
time : 1500
});
Slide 17
Slide 17 text
@vimoding
Essa implementação
parece bem razoável.
Mas o uso do nosso
componente não para por
aí.
Repensando o uso do
Slide 18
Slide 18 text
Aplicar um certo
componente em dois
pontos da mesma página
precisa ser simples.
@vimoding
Repensando o uso do
Slide 19
Slide 19 text
@vimoding
Repensando o uso do
Aplicar um certo
componente em dois
pontos da mesma página
precisa ser simples.
Slide 20
Slide 20 text
@vimoding
Repensando o uso do
Aplicar um certo
componente em dois
pontos da mesma página
precisa ser simples.
$('#primary-slider-container').myOwnSlider({
autoPlay : true,
time : 1500
});
$('#secondary-slider-container').myOwnSlider({
autoPlay : false,
widthDots : true,
allowTouch : false
});
Slide 21
Slide 21 text
@vimoding
Não seria interessante
nos repetirmos menos?
A jQuery pode nos ajudar
com isso.
Repensando o uso do
Slide 22
Slide 22 text
@vimoding
Mas primeiro precisamos
falar um pouco sobre
data atributos.
Repensando o uso do
Slide 23
Slide 23 text
@vimoding
Mas primeiro precisamos
falar um pouco sobre
data atributos.
Repensando o uso do
Slide 24
Slide 24 text
@vimoding
Mas primeiro precisamos
falar um pouco sobre
data atributos.
Repensando o uso do
// Output de .data()
{
jqueryPlugin : 'myOwnSlider',
autoPlay : false,
withDots : true,
allowTouch : false
}
Slide 25
Slide 25 text
@vimoding
Então vamos usar isso a
nosso favor.
Repensando o uso do
Slide 26
Slide 26 text
@vimoding
Então vamos usar isso a
nosso favor.
Repensando o uso do
$(function() {
var elements = $('[data-jquery-plugin]');
$.each(elements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
currentElement[options.jqueryPlugin](options);
});
});
Slide 27
Slide 27 text
@vimoding
Então vamos usar isso a
nosso favor.
Repensando o uso do
$(function() {
var elements = $('[data-jquery-plugin]');
$.each(elements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
currentElement[options.jqueryPlugin](options);
});
});
Slide 28
Slide 28 text
@vimoding
Então vamos usar isso a
nosso favor.
Repensando o uso do
$(function() {
var elements = $('[data-jquery-plugin]');
$.each(elements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
currentElement[options.jqueryPlugin](options);
});
});
Slide 29
Slide 29 text
@vimoding
Então vamos usar isso a
nosso favor.
Repensando o uso do
$(function() {
var elements = $('[data-jquery-plugin]');
$.each(elements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
currentElement[options.jqueryPlugin](options);
});
});
Slide 30
Slide 30 text
@vimoding
E assim temos
componentes que se
inicializam
automaticamente.
Repensando o uso do
Slide 31
Slide 31 text
@vimoding
Ok, já elevamos o nível
do nosso código de uma
forma bem interessante.
Repensando o uso do
Slide 32
Slide 32 text
@vimoding
Mas devemos estar
preparados para
problemas um pouco
mais complexos do que
esse.
Repensando o uso do
Slide 33
Slide 33 text
@vimoding
Repensando o uso do
Slide 34
Slide 34 text
@vimoding
Repensando o uso do
Slide 35
Slide 35 text
@vimoding
E não é que nessa
situação a jQuery nos
ajuda também?
Repensando o uso do
Slide 36
Slide 36 text
@vimoding
O método .one()
Repensando o uso do
$("#seletor").one("click", function() {
console.log("Isto será executado apenas uma vez");
});
Slide 37
Slide 37 text
@vimoding
O método .one()
Repensando o uso do
Slide 38
Slide 38 text
O método .one()
@vimoding
Repensando o uso do
$(function() {
var elements = $('[data-jquery-plugin]');
$.each(elements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
currentElement[options.jqueryPlugin](options);
});
});
Slide 39
Slide 39 text
@vimoding
O método .one()
Repensando o uso do
$(function() {
var componentElements = $('[data-jquery-plugin]');
$.each(componentElements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
if (options.lazyInitOn) {
currentElement.one(options.lazyInitOn, function () {
currentElement[options.jqueryPlugin](options);
});
} else {
currentElement[options.jqueryPlugin](options);
}
});
});
Slide 40
Slide 40 text
@vimoding
O método .one()
Repensando o uso do
$(function() {
var componentElements = $('[data-jquery-plugin]');
$.each(componentElements, function(__index, element) {
var currentElement = $(element),
options = currentElement.data();
if (options.lazyInitOn) {
currentElement.one(options.lazyInitOn, function () {
currentElement[options.jqueryPlugin](options);
});
} else {
currentElement[options.jqueryPlugin](options);
}
});
});
Slide 41
Slide 41 text
@vimoding
Agora temos um código
escalável e com
inteligência para
entender a real
necessidade em algumas
situações.
Repensando o uso do
Slide 42
Slide 42 text
@vimoding
E algo que eu gosto de
resaltar: utilizando
apenas jQuery.
Repensando o uso do
Slide 43
Slide 43 text
@vimoding
Levando tudo isso em
consideração…
Repensando o uso do
Slide 44
Slide 44 text
@vimoding
jQuery é importante para
projetos web em
determinados contextos.
E também pode
representar um desafio
técnico interessante.
Repensando o uso do
Slide 45
Slide 45 text
@vimoding
Obrigado!
Repensando o uso do
twitter.com/vimoding
viniciusalmeida.github.io