8. Todo mundo construía seus layout com
tabelas.
Camadas de conteúdo e apresentação juntas.
Pouca flexibilidade, baixa performance e
desorganização.
Mas, era bonito e produtivo
9. Separando a apresentação do conteúdo.
Menor footprint
Maior rapidez e clareza
Maior organização leva à produtividade
Acessibilidade (universalidade)
Um passo inicial para Web Standards e
Marcação Semântica.
Mas nem tudo foi perfeito...
10. Programação Client-Side, controle dos
diferentes navegadores/SO’s e do fluxo de
navegação.
Camadas de comportamento e conteúdo
juntas.
Imaturidade, baixa confiabilidade, falta de
profissionais e ferramentas, diferentes
implementações (proprietárias).
11.
12. Anatomia de um Ogro
(ou JS Obtrusivo)
•Não acessível
•Destrutivo
•Irritante
•Assustador
•Obtrusivo
13. Obtrusive Obtrusivo
“1. Sticking out; protruding. 2. Noticeable; “Um ogro deitado no meio do caminho,
prominent, especially in a displeasing pronto pra criar confusão”
way. 3. Pushy. ”
<a href=quot;javascript:abreNoticia(123);quot;>Ler notícia</a>
<a href=“#“ onclick=“abreNoticia(123);”>Ler notícia</a>
<a href=“noticia.php?id=123“
onclick=“abreLink(this.href);”>Ler notícia</a>
14.
15. “Na história Japonesa, um ninja (忍者, ninja) é um
guerreiro, treinado em artes marciais, especializado
em uma varidade de artes de guerra não-ortodoxas.
Os métodos utilizados pelos ninjas incluem
assassinato, espionagem, furtividade, camuflagem,
armas especializadas e um vasta coleção de artes
marciais.”
Wikipédia (http://en.wikipedia.org/wiki/Ninja)
“Os Japoneses desenvolveram as artes Ninja ao
extremo, criando assassinos mortais, que podem
entrar em qualquer lugar sem serem notados e agir
quando menos esperado.”
The Illuminated Lantern (http://www.illuminatedlantern.com/cinema/archives/ninja.php)
16. Anatomia de um Ninja
(ou JS Não-obtrusivo)
•Acessível
•Degradativo
•Funcional
•Belo
Não-Obtrusivo
“1. Not noticeable or
blatant; inconspicuous”
“Um ninja que chega
sorrateiramente, quase
imperceptível e faz seu
trabalho”
17. Boas práticas e padrões
Separar o comportamento do conteúdo
Melhorar funcionalidade, não impor
Degradação Graciosa
AJAX
DOM Scripting
Cross-Browser Scripting
Delegação (e não Manipulação) de Eventos
20. Fornecem facilidades para JS Não-Obtrusivo
Possuem geralmente as mesmas
funcionalidades.
Abordagens/filosofias/focos diferentes
Exemplos: Prototype, MooTools, extjs, YUI,
GWT, Dojo, jQuery, Rico, Spry
21.
22. Filosofia: “write less, do more”
Intuitividade
Praticidade
Acorrentamento
Licensa MIT e GPL
Se Microsoft e Nokia podem, porque eu não?
Google, Mozilla, IBM, Dell, BBC, Digg,
Amazon, Sourceforge, Wordpress, Drupal...
50. Maneira simplificada de se criar plugins
Abordagens
Estender a classe jQuery (métdos ou seletores)
Estender um objeto jQuery
Permite integrar funcionalidades à filosofia
jQuery
51. Métodos
Funções utilitárias
Independentes do Documento (DOM)
jQuery.extend({
min: function(a, b){
return a < b ? a : b;
}
})
54. Proteja seu código
Proteja o ambiente
Mantenha acorrentável
Mantenha intuitivo
55. O que é isso?
(function() {
//Seu código
})();
56. Que tal?
function teste() {
//Seu código
};
teste();
57. Qual o problema?
var externa = 0;
(function(){
externa += 10;
})();
58. E agora?
var externa = 0;
(function(){
externa += 10;
(function(){
externa += 10;
})();
})();
59. http://pt.wikipedia.org/wiki/Closure
Pode causar erros
Pode ser útil (macros, por exemplo)
var eventos = [‘click’, ‘focus’, ‘blur’, ...];
jQuery.each(eventos, function(i, nome){
jQuery.protype[nome] = function(fn){
return this.bind(nome, fn);
};
});
60. Qual o problema?
var externa = 0;
(function(){
var externa;
externa += 10;
})();
61. E agora?
var externa = 0;
(function(){
var externa;
externa += 10;
(function(){
externa += 10;
})();
})();
62. Seu código e o ambiente ficam protegidos
Seu código pode coexistir com outros códigos
aleatórios do site
Seu código pode coexistir com outras cópias da
sua biblioteca
Seu código pode ser utilizado em outra biblioteca