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 http://youmightnotneedjquery.com

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

PARSE TIMEPARSE TIME

http://bit.ly/parsetimejquery

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