[GWT] Kenji - Highlights do Jquery Conference

JQUERY CONF 2011

Kenji YamamotoDesenvolvedor Web @ Esporte1

terça-feira, 20 de dezembro de 2011

Kenji Yamamoto | web developer @ Globo.com

Pontos a destacar



• Attributes e Properties no jQuery - Timmy Willison

Pontos a destacar




• Chrome Dev Tools: Tips and Tricks - Paul Irish

Pontos a destacar





• jQuery 1.7 - Events - Dave Methvin

Pontos a destacar






• Progressive Enhancement 2.0 - Nicholas C. Zakas

Pontos a destacar


Attributes and Properties in jQuerypor Timmy Willison



Attributes and Properties in jQuerypor Timmy Willison, membro do jQuery Core Team | @timmywil

Como era processado o método .attr()





• Atributos e Propriedades são processados da mesma forma;





• Atributos e Propriedades são processados da mesma forma;

• Muitos bugs, com isso a manutenção ficou difícil de ser mantida.





Então, qual a diferença?





<input class="foo"> // attribute$('input')[0].className // property

<input id="bar"> // attribute$('#bar')[0].id // property





<input class="foo"> // attribute$('input')[0].className // property

<input id="bar"> // attribute$('#bar')[0].id // property

Atributos estão no html, interpretados pelo browser para formar o DOM, e (geralmente) correspondem às propriedades.



O que mudou no jQuery 1.6?





• A propriedade .attr() foi reescrita






• Aumento significante na performance dos métodos .attr() e .val()







• Inclusão dos métodos .prop() e .removeProp()







• Inclusão dos métodos .prop() e .removeProp()


http://bit.ly/attr_prop


http://jsfiddle.net/kenjiyamamoto/fqEwq/

http://jsfiddle.net/kenjiyamamoto/fqEwq/


Pontos a destacar




Pontos a destacar



Chrome Dev Tools: Tips and Trickspor Paul Irish



Chrome Dev Tools: Tips and Trickspor Paul Irish, Chrome Developer at Google | @paul_irish

Controle sobre o StyleSheet





• Manipulação rápida de cor;






• Interpretação de CSS3 ;







• Intervenção fácil no seletores via psuedo-classes.







• Intervenção fácil no seletores via psuedo-classes.




Network




Network

• Timeline: Informações sobre tempo de renderização




Network

• Timeline: Informações sobre tempo de renderização

• Settings: Desabilitar Cache & outras configurações




Console API




Console API

• Existem mais coisas do que apenas o console.log !




Console API


• Command Line API Ex.: dir(), inspect(), $0, $1



http://getfirebug.com/wiki/index.php/Command_Line_API



Console API


• Command Line API Ex.: dir(), inspect(), $0, $1






Debugging




Debugging

• Script “Pretty-Printing” !




Debugging





Debugging





Debugging



• Breakpoints no DOM



Debugging




• Breakpoints nos Event Listeners



Debugging





• Edição live no JS



Debugging





• Edição live no JS

• “No-refresh development™!”



Task Manager




Javascript APIs para monitoração





• performance.timing






• performance.memory







• window.onerror







• window.onerror

• console.profile() / console.profiles[]







• window.onerror

• console.profile() / console.profiles[]

• console.timeStamp()




Extenções para o DevTools





• Painel customizado e Sidebars chrome.devtools.panels



http://code.google.com/chrome/extensions/trunk/experimental.devtools.panels.html









• Audits plugáveis chrome.devtools.audits






http://code.google.com/chrome/extensions/trunk/experimental.devtools.audits.html



















• Ferramenta de desenvolvimento experimental para o Chrome API chrome.devtools.network






http://code.google.com/chrome/extensions/trunk/experimental.devtools.network.html

http://code.google.com/chrome/extensions/trunk/experimental.devtools.network.html


Fica a dica !




Fica a dica !

• Documentação e alguns vídeos code.google.com/chrome/devtools



http://code.google.com/chrome/devtools/



Fica a dica !

• Documentação e alguns vídeos code.google.com/chrome/devtools

• Customização do DevTools smus.com/devtools-cheatsheet





http://smus.com/devtools-cheatsheet

http://smus.com/devtools-cheatsheet


Pontos a destacar





Pontos a destacar




jQuery 1.7 - Eventspor Dave Methvin



jQuery 1.7 - Eventspor Dave Methvin, membro do jQuery Core Team | @davemethvin

Quais são as metas ?





• Simplificar a API;






• Torná-la mais rápida;







• Reduzir o tamanho total;








• Solucionar bugs existentes;








• Solucionar bugs existentes;

• Não quebrar o que já está funcionando;




Novos métodos .on() e .off()





• Unificar eventos vinculados e delegados







$().on(events, “selector”, data, handler);$().off(events, “selector”, handler);







• Mapear eventos para retrocompatibilidade na API:







• Mapear eventos para retrocompatibilidade na API:

$(“a”).bind(“click change”, { mydata: 42 }, fn);$(“a”).on(“click change”, { mydata: 42 }, fn);

$(“.box”).delegate(“a”, “click.myplugin”, fn);$(“.box”).on(“click.myplugin”, “a”, fn);

$(“a”).live(“click”, fn);$(document).on(“click”, “a”, fn);



Benefícios




Benefícios

• Acaba com a confusão sobre a interação entre as APIs de evento


$(“a”).live(“click”, function(){ alert(“Hello”); });$(document).unbind(“click”); // ‘live is now dead!’



Benefícios




$(document).on(“click”, “a”, function(){ alert(“Hello”); });$(document).off(“click”);



Benefícios




• Pronúncia consistente (ao contrário de live/die )




Benefícios





• Métodos encadeados com traversal/filter (ao contrário do live )




Benefícios






• A ordem dos argumentos é consistente (ao contrário do delegate )




Benefícios







• Mais curto para digitar (off vs. undelegate )




Benefícios








• Nenhuma confusão com ECMAScript5 Function.bind



http://en.wikipedia.org/wiki/ECMAScript



Benefícios








• Nenhuma confusão com ECMAScript5 Function.bind

• Economia de 1,122 bytes removendo bind/live/delegate no jQuery 1.7






Event Delegation é legal, mas…






• Um event handler não pode ser mudado depois que um event handler subseqüente for chamado, isso é chamado de .stopPropagation() .stopImmediatePropagation();






• O jQuery deve igualar o seletor ao ponto de delegação;






• O jQuery deve igualar o seletor ao ponto de delegação;

• Deve ser delegado evento para o elemento mais próximo possível.



“Don’t Make Me Bubble” !




Perfil do caso de teste com jQuery 1.6.3: 15,1 segundos




Perfil do caso de teste com jQuery 1.7: 5.6 segundos




Pontos a destacar






Pontos a destacar





Progressive Enhancement 2.0Because the Web isn't Print


por Nicholas C. Zakas


Progressive Enhancement 2.0 - Because the Web isn't Printpor Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet

Graceful Degradation




Graceful Degradation


• Premissa: criar o melhor e mais completo produto possível, suportado pelos

browsers mais novos, e a partir daí, as funcionalidades que não são suportadas pelos browsers ou devices simplesmente não são visualizadas.



Progressive Enhancement 1.0






• Premissa: foco no conteúdo.



















Chrome





Firefox





Internet Explorer 9





Internet Explorer 6





Netscape 4



Compatibilidade dos navegadores mais novos






• Rounded Corners

• Drop Shadows

• Gradients

• Transitions

• Transforms

• Multiple Background Images

• Drag and Drop

• Geolocation

• Cross-Domain Ajax

• Cross-Domain Messaging

• Client-Side Data Storage

• Canvas/WebGL





• Rounded Corners

• Drop Shadows

• Gradients

• Transitions

• Transforms

• Multiple Background Images

• Drag and Drop

• Geolocation

• Cross-Domain Ajax

• Cross-Domain Messaging

• Client-Side Data Storage

• Canvas/WebGL

A melhor experiência possível, dada a capacidade do device.



Valores:




Valores:


OK

OK

Maravilha !

Aí não né...

valor

esforço








• Rounded Corners

• Drop Shadows

• Gradients





• Rounded Corners

• Drop Shadows

• Gradients

Apenas com CSS





• Rounded Corners

• Drop Shadows

• Gradients

Apenas com CSS

•Comportamentos escripts avançados





• Rounded Corners

• Drop Shadows

• Gradients

Apenas com CSS

•Comportamentos escripts avançados

Apenas comAPIs Nativas





Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer...





• Longo tempo de desenvolvimento











• Muitos bugs e uma manutenção cara






• Muitos bugs e uma manutenção cara

• Páginas lentas







“Navegadores antigos muitas vezes precisam de

muito mais código para fazer a mesma coisa.”




“Para prevenir que os browsers de ontem se tornem um fardo para os

desenvolvedores web e torná-lo menos feio para o público.”

Nicholas C. Zakas

“Navegadores antigos muitas vezes precisam de

muito mais código para fazer a mesma coisa.”



Pontos a destacar







Pontos a destacar






OBRIGADO



OBRIGADO


Slides:http://bit.ly/gwt-kenji

Links do evento:http://bit.ly/links-jqueryconf

contato:[email protected]

twitter:@kenjiyamamoto


http://kenjiyamamoto.com/globocom/jQueryConference11.html

http://kenjiyamamoto.com/globocom/jQueryConference11.html

http://bit.ly/links-jqueryconf




http://www.twitter.com/kenjiyamamoto

http://www.twitter.com/kenjiyamamoto

Technology

[GWT] Kenji - Highlights do Jquery Conference