Repensando o uso do jQuery

Palestra apresentada em http://frontinpoa.com.br/2014/ em novembro de 2014.

Transcript

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