Palestra apresentada durante a PHPConference 2010 sobre criação de plugins jQuery.

1. Apresentação
● Ricardo Coelho
● Graduado em Ciência da Computação;
● Fundador do grupo PHP-Maranhão;
● Representante do Maranhão em eventos nacionais;
● Representante do Maranhão no PHP Brasil
Comunidades;
● Professor de Programação Web (Faculdade
Pitágoras);
● Auditor certificado NBR ISO/IEC 27001:2006
● Perito forense digital
● CTO da Nexy, empresa de auditoria de segurança e
tecnologia financeira com soluções SaaS em PHP.

2. Criando Plugins jQuery
Ricardo Coelho
Nexy Informática

3. J o quê?

4. O que é o jQuery?

5. Código Javascript Convencional
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function replace() {
http.open("GET", "test.txt", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML =
http.responseText;
}
}
http.send(null);
}

6. Código jQuery
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function replace() {
http.open("GET", "test.txt", true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('foo').innerHTML =
http.responseText;
}
}
http.send(null);
}
$('#foo').load('test.txt');

7. Encadeamento
$('body')
.addClass('ninja')
.hide();

8. Porque criar um plugin?
Testes
SeletoresPacote
Reuso
GeneralizaçãoDevolver
à comunidade

9. Porque criar um plugin?
Testes
SeletoresPacote
Reuso
GeneralizaçãoDevolver
à comunidade
Fama e
Fortuna

10. Plugins existentes
4200+
jQuery UI, Forms, Masked Input,
JCarrousel, JCrop, JEditable, JsTree...
Em http://plugins.jquery.com você encontra
as seguintes categorias de plugins:
Ajax, Animation and Effects, Browser, Tweaks, Data, DOM, Drag-and-Drop,
Events, Forms, Integration, JavaScript, jQuery, Extensions, Layout, Media,
Menus, Metaplugin, Navigation, Tables, User, Interface, Utilities, Widgets,
Windows and Overlays

11. Criar plugins é tarefa para jedi?
NÃO.
Se você já usou jQuery,
já tem a metade de um plugin!

12. Qualquer um pode criar um plugin

13. Até esse cara!
/**
* Prugin do Abestado
*
* Ela me çeduis!
*/
$('#florentina')
.filter('.dejesus')
.addClass('çedutora');

14. Um plugin pode estender jQuery
● Ao definir uma nova função utilitária
● Ao definir um novo comando

15. Código básico
$(function () {
});

16. Código básico
function uma_funcao()
{
}
jQuery(uma_funcao);

17. Código básico
uma_funcao = function () {
}
jQuery(uma_funcao);

18. Código básico
jQuery(function () {
});

19. Código básico
$ é um apelido para jQuery.
$(function () {
});

20. Algumas regras básicas
jquery.meuplugin-1.0.js

21. Algumas regras básicas
Proteja o $

22. Algumas regras básicas
Preserve o encadeamento

23. Vamos ver um exemplo de efeito

24. Reuso da solução

25. Criando o plugin de fato

26. Preservando o encadeamento

27. Minificadores
● JSMin (Douglas Crockford)
● Shrink Safe (Dojo)
● Packer (Dean Edwards)
● Compressor Rater (Arthur Blake)
● YUICompressor (Yahoo)

28. Exemplo YUICompressor

29. Referências
● http://www.slideshare.net/1Marc/jquery-essentials
● http://developer.yahoo.com/yui/compressor/
● http://docs.jquery.com
● jQuery em ação

30. Obrigado!
Contatos
Ricardo Coelho
ricardo@nexy.com.br
http://www.nexy.com.br
@ramcoelho

31. Dúvidas?
Slides em:
http://www.slideshare.net/ram.coelho