[GWT] Kenji - Highlights do Jquery Conference

JQUERY CONF 2011
Kenji Yamamoto
Desenvolvedor Web @ Esporte1

terça-feira, 20 de dezembro de 2011

Pontos a destacar

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

• jQuery 1.7 - Events - Dave Methvin
• Progressive Enhancement 2.0 - Nicholas C. Zakas



Attributes and Properties in jQuery
por Timmy Willison



por 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 ﬁcou difícil de ser mantida.




Então, qual a diferença?





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





<input class="foo"> // attribute <input id="bar"> // attribute
$('input')[0].className // property $('#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 signiﬁcante 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



Chrome Dev Tools: Tips and Tricks
por Paul Irish



por Paul Irish, Chrome Developer at Google | @paul_irish

Controle sobre o StyleSheet




• Manipulação rápida de cor;




• Interpretação de CSS3 ;




• Interpretação de CSS3 ;
• 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 conﬁgurações




Console API




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




Console API
• Existem mais coisas do que apenas o console.log !
• Command Line API
Ex.: dir(), inspect(), $0, $1




Debugging




Debugging
• Script “Pretty-Printing” !




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.proﬁle() / console.proﬁles[]




• window.onerror
• console.proﬁle() / console.proﬁles[]
• console.timeStamp()




Extenções para o DevTools




• Painel customizado e Sidebars
chrome.devtools.panels




• Audits plugáveis
chrome.devtools.audits




• Audits plugáveis
chrome.devtools.audits
• Ferramenta de desenvolvimento experimental para o Chrome API
chrome.devtools.network




Fica a dica !




Fica a dica !
• Documentação e alguns vídeos
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



jQuery 1.7 - Events
por Dave Methvin



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

Quais são as metas ?



jQuery 1.7 - Events

• Simpliﬁcar a API;



jQuery 1.7 - Events

• Torná-la mais rápida;



jQuery 1.7 - Events

• Reduzir o tamanho total;



jQuery 1.7 - Events

• Solucionar bugs existentes;



jQuery 1.7 - Events

• Solucionar bugs existentes;
• Não quebrar o que já está funcionando;



jQuery 1.7 - Events

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



jQuery 1.7 - Events

• Uniﬁcar eventos vinculados e delegados



jQuery 1.7 - Events

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



jQuery 1.7 - Events


• Mapear eventos para retrocompatibilidade na API:



jQuery 1.7 - Events


• 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);



jQuery 1.7 - Events

Benefícios



jQuery 1.7 - Events

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!’



jQuery 1.7 - Events

Benefícios

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



jQuery 1.7 - Events

Benefícios


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



jQuery 1.7 - Events

Benefícios


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



jQuery 1.7 - Events

Benefícios


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



jQuery 1.7 - Events

Benefícios


• Mais curto para digitar (off vs. undelegate )



jQuery 1.7 - Events

Benefícios


• Nenhuma confusão com ECMAScript5 Function.bind



jQuery 1.7 - Events

Benefícios


• Nenhuma confusão com ECMAScript5 Function.bind
• Economia de 1,122 bytes removendo bind/live/delegate no jQuery 1.7


jQuery 1.7 - Events

Event Delegation é legal, mas…



jQuery 1.7 - Events

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



jQuery 1.7 - Events

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



jQuery 1.7 - Events

• O jQuery deve igualar o seletor ao ponto de delegação;
• Deve ser delegado evento para o elemento mais próximo possível.



jQuery 1.7 - Events

“Don’t Make Me Bubble” !



jQuery 1.7 - Events

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



jQuery 1.7 - Events

Perfil do caso de teste com jQuery 1.7: 5.6 segundos



Progressive Enhancement 2.0
Because the Web isn't Print
por Nicholas C. Zakas



Progressive Enhancement 2.0 - Because the Web isn't Print
por 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.




• Premissa: foco no conteúdo.




Chrome




Firefox




Internet Explorer 9




Internet Explorer 6




Netscape 4




Compatibilidade dos navegadores mais novos





• Rounded Corners • Drag and Drop
• Drop Shadows • Geolocation
• Gradients • Cross-Domain Ajax
• Transitions • Cross-Domain Messaging
• Transforms • Client-Side Data Storage
• Multiple Background Images • Canvas/WebGL





• Rounded Corners • Drag and Drop
• Drop Shadows • Geolocation
• Gradients • Cross-Domain Ajax
• Transitions • Cross-Domain Messaging
• Transforms • Client-Side Data Storage
• Multiple Background Images • Canvas/WebGL

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




Valores:




Valores:

Maravilha ! OK

OK Aí não né...

valor

esforço





• Rounded Corners
• Drop Shadows
• Gradients





• Rounded Corners
• Drop Shadows Apenas com CSS
• Gradients





• Rounded Corners
• Gradients

•Comportamentos e
scripts avançados





• Rounded Corners
• Gradients

•Comportamentos e Apenas com
scripts avançados APIs 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.”




“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



OBRIGADO



OBRIGADO

Slides: contato:
http://bit.ly/gwt-kenji contato@kenjiyamamoto.com
Links do evento: twitter:
http://bit.ly/links-jqueryconf @kenjiyamamoto



[GWT] Kenji - Highlights do Jquery Conference

Mais conteúdo relacionado

Semelhante a [GWT] Kenji - Highlights do Jquery Conference

[GWT] Kenji - Highlights do Jquery Conference