jQuery e Chrome Dev Tools na JQUERY CONF 2011

JQUERY CONF 2011
Kenji Yamamoto
Desenvolvedor Web @ Esporte1
terça-feira, 20 de dezembro de 2011

Kenji Yamamoto | web developer @ Globo.com
Pontos a destacar

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

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 configuraçõ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.profile() / console.profiles[]

• window.onerror
• console.profile() / console.profiles[]
• 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
• Simplificar 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
• Unificar 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/filter (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
• 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
Maravilha !
OK
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 e
scripts avançados

• Rounded Corners
• Drop Shadows
• Gradients
Apenas com CSS
•Comportamentos e
scripts avançados
Apenas com
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:
http://bit.ly/gwt-kenji
Links do evento:
http://bit.ly/links-jqueryconf
contato:
contato@kenjiyamamoto.com
twitter:
@kenjiyamamoto

jQuery e Chrome Dev Tools na JQUERY CONF 2011

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a jQuery e Chrome Dev Tools na JQUERY CONF 2011

Semelhante a jQuery e Chrome Dev Tools na JQUERY CONF 2011 (20)

Mais de Danilo Sousa

Mais de Danilo Sousa (8)

jQuery e Chrome Dev Tools na JQUERY CONF 2011