Post on 12-Aug-2015
E SE VOCÊ NÃO USASSE JQUERY?E SE VOCÊ NÃO USASSE JQUERY?
http://bit.ly/esevcnaousasseojquery
VICTOR CAVALCANTEVICTOR CAVALCANTEDesenvolvedor Web Full StackPalestranteMembro do conselho Jedi da Lambda3Microsoft MVP de ASP.NET
vcavalcante@lambda3.com.br@vcavalcante
POR QUE USAR?POR QUE USAR?
Victor Cavalcante @vcavalcante
VAMOS VOLTAR NO TEMPOVAMOS VOLTAR NO TEMPO
AGOSTO 2006 - 1.0 - 3.5KBAGOSTO 2006 - 1.0 - 3.5KBInternet Explorer 6 (desde 2001)Opera 9Netscape 8.1Firefox 1Safari 2
Victor Cavalcante @vcavalcante
Victor Cavalcante @vcavalcante http://bit.ly/trendsjquery
JULHO 2009 - 1.3 - 21KBJULHO 2009 - 1.3 - 21KBInternet Explorer 8Opera 10Netscape 9Firefox 3.5Safari 4Chrome 3
Victor Cavalcante @vcavalcante
DIVERSOS PROBLEMASDIVERSOS PROBLEMAS
Victor Cavalcante @vcavalcante
QUER PEGAR UM ITEM PELA CLASSE?QUER PEGAR UM ITEM PELA CLASSE?
function getElementsByClass(searchClass,node) { if ( node == null ) node = document; var classElements = [], els = node.getElementsByTagName("*"), elsLen = els.length, pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }
Victor Cavalcante @vcavalcante
CLASSE COM JQUERYCLASSE COM JQUERY
$(".muitoSimples")
Victor Cavalcante @vcavalcante
ADICIONANDO UM EVENTOADICIONANDO UM EVENTO
if (redButton.addEventListener) { // all browsers and IE>=9 redButton.addEventListener ("click", OnRedClick, false); } else { if (redButton.attachEvent) { // IE before version 9 redButton.attachEvent ('onclick', OnRedClick); } }
Victor Cavalcante @vcavalcante
EVENTO COM JQUERYEVENTO COM JQUERY
$("#redButton").click(onRedClick)
Victor Cavalcante @vcavalcante
AJAXAJAX
FORMULÁRIOSFORMULÁRIOS
MANIPULAÇÃO DO DOMMANIPULAÇÃO DO DOM
ANIMAÇÕESANIMAÇÕES
PLUGINSPLUGINS
Victor Cavalcante @vcavalcante
E HOJE?E HOJE?
Victor Cavalcante @vcavalcante
OUTUBRO 2014 - 2.1 - 83KBOUTUBRO 2014 - 2.1 - 83KBInternet Explorer 11Opera 25Firefox 31Safari 7Chrome 37
Victor Cavalcante @vcavalcante
EU REALMENTE PRECISO DO JQUERY?EU REALMENTE PRECISO DO JQUERY?
Victor Cavalcante @vcavalcante
Victor Cavalcante @vcavalcante
TITLE TEXTTITLE TEXT
Victor Cavalcante @vcavalcante http://bit.ly/jquerybrowserbugs
TITLE TEXTTITLE TEXTSUBTITLESUBTITLE
Victor Cavalcante @vcavalcante
by @ElijahManor
Victor Cavalcante @vcavalcante
by @ElijahManor
O QUE VOCÊ TERIA QUE FAZER SE VOCÊO QUE VOCÊ TERIA QUE FAZER SE VOCÊNÃO USASSE O JQUERY???NÃO USASSE O JQUERY???
Victor Cavalcante @vcavalcante
SELECIONANDO ELEMENTOSSELECIONANDO ELEMENTOS$("#datepicker");
$("input");
$(".date");
$("input.date");
Victor Cavalcante @vcavalcante
PARA SELECIONAR ELEMENTOSPARA SELECIONAR ELEMENTOS$("#eventos");document.getElementById("eventos");
$("form");document.getElementsByTagName("form")
$(".data");document.getElementsByClassName("data");
$("input.cpf");document.querySelectorAll("input.cpf"); //Nodelistdocument.querySelector("div.cpf"); //FirstElement
Victor Cavalcante @vcavalcante
VAMOS ANALISAR A PERFORMANCEVAMOS ANALISAR A PERFORMANCE
Victor Cavalcante @vcavalcante http://bit.ly/jqueryperf
VAMOS ANALISAR A PERFORMANCEVAMOS ANALISAR A PERFORMANCE
Victor Cavalcante @vcavalcante http://bit.ly/jqueryperf
EACHEACH$("span.nome").each(function(index, element) { $(element).text("Olá: "+ index);});
Victor Cavalcante @vcavalcante
EACH - OPÇÃO 1EACH - OPÇÃO 1
//jquery$("span.nome").each(function(index, element) { $(element).text("Olá: "+ index);});
//nativovar nodeList = document.querySelectorAll("span.nome");var i;for(i= 0, len= nodeList.length; i< len; ++i) { nodeList[i].innerText= "Hello: "+ i;};
Victor Cavalcante @vcavalcante
EACH OPÇÃO 2EACH OPÇÃO 2//jquery$("span.nome").each(function(index, element) { $(element).text("Olá: "+ index);});
//nativovar nodeList = document.querySelectorAll("span.nome"),elems= Array.prototype.slice.call(nodeList);elems.forEach(function(element, index) { element.innerText= "Olá: "+ index;});
Victor Cavalcante @vcavalcante
EACH OPÇÃO 3EACH OPÇÃO 3//jquery$("span.nome").each(function(index, element) { $(element).text("Olá: "+ index);});
//nativofunction $t(selector) { return [].slice.call(document.querySelectorAll(selector));}$t("span.nome").forEach(function(element, index) { element.innerText= "Olá: "+ index;});
Victor Cavalcante @vcavalcante
AJAX OPÇÃO 1AJAX OPÇÃO 1
var xhr= new XMLHttpRequest();xhr.open("POST", "/caminho/json/", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.onload= function() { if(this.status=== 200) { alert(this.responseText); }};xhr.send("category=books&sort=asc");
Victor Cavalcante @vcavalcante
AJAX OPÇÃO 2AJAX OPÇÃO 2
var formData= new FormData(), xhr= new XMLHttpRequest();formData.append("category", "books");formData.append("sort", "asc");
xhr.open("POST", "/caminho/json/", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.onload= function() { if(this.status=== 200) { alert(this.responseText); }};
xhr.send(formData);
Victor Cavalcante @vcavalcante
AJAX OPÇÃO 3AJAX OPÇÃO 3
var form = document.getElementById("myForm");var formData= newFormData(form);var xhr= newXMLHttpRequest();
xhr.open("POST", "/caminho/json/", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.onload= function() { if(this.status=== 200) { alert(this.responseText); }};
xhr.send(formData);
Victor Cavalcante @vcavalcante
AJAXAJAX
E NO MOBILE? VALE A PENA?E NO MOBILE? VALE A PENA?
TEMOS QUE CONSIDERARTEMOS QUE CONSIDERAREstamos na rede 3G/4G (será?)Temos bateria muito ruim
Cada parse de jQuery gasta 4 joules (0,02%)5000 parses de jQuery gasta 1 cargaWho Killed My Battery
ALTERNATIVASALTERNATIVASZepto
9.1k gzippedIf you use jQuery, you already know how to use Zepto.IE10+ support
Victor Cavalcante @vcavalcante http://zeptojs.com
ALTERNATIVASALTERNATIVASAjax
Animação
Extenção
ajax
request
reqwest
animate.css
move.js
lo-dash
underscore
ECMA6
Elementos
$
Encontre Elementos
Eventos
bonzo
dom
qwery
sizzle
EventEmitter
Vine
microevent
Victor Cavalcante @vcavalcante
O PROBLEMA É SÓ O TAMANHO?O PROBLEMA É SÓ O TAMANHO?Dá para ser menor!
Victor Cavalcante @vcavalcante
CUSTOM BUILDCUSTOM BUILD> git clone git://github.com/jquery/jquery.git> > npm install -g grunt-cli bower> > grunt -version && bower -version> > cd jquery&& npm install> > grunt>> grunt custom:-sizzle,-ajax,-css,-deprecated
https://github.com/jquery/jqueryVictor Cavalcante @vcavalcante
CUSTOM BUILD FACILITADOCUSTOM BUILD FACILITADO
MÓDULOSMÓDULOSevent event/aliasoffsetwrapexports/amdcore/readydeferredsupportsizzle
ajax
ajax/xhrajax/scriptajax/jsonp
cssdeprecateddimensionseffects
Victor Cavalcante @vcavalcante
E AÍ? EU PRECISO OU NÃO DO JQUERY?E AÍ? EU PRECISO OU NÃO DO JQUERY?
Victor Cavalcante @vcavalcante
DEPENDE DO SEU CENÁRIO!DEPENDE DO SEU CENÁRIO!
Victor Cavalcante @vcavalcante
DÚVIDAS, CRÍTICAS OU SUGESTÕES?DÚVIDAS, CRÍTICAS OU SUGESTÕES?
@VCAVALCANTE@VCAVALCANTEvictor@cavalcante.net