Apresentada no RioJS Conf 2013

1. Guia de sobrevivência JS
no mundo Open Source
Rio.JS Conference 2013 - Leo Balter

2. JS no mundo
Open Source?

3. JS no mundo
Open Source?
JS de terceiros!
WAT?

4. Desafio Desenvolvedor
• 1 ambiente
• 1 versão da linguagem
• sem script no nome

6. Desafio Desenvolvedor
JavaScript
• Vários ambientes (mobile, desktop,
geladeira)
• Chrome, Firefox, Opera
• IE 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17...
• Qual é mesmo a versão do JS?

8. JS que funciona em
qualquer site, inclusive
nos que não são seus!

9. Primeiros perigos

10. Same Origin Policy
HTTP HTTP
HTTPS HTTPS
www.foo.com/bla www.foo.com/bos

11. Same Origin Policy
HTTP HTTPS
HTTPS HTTP
bla.foo.com bos.foo.com

12. Como driblar o SOP?
• JSONP (Jaydson P)
• CORS (Cross Origin Resource Sharing)
• Post Message https://developer.mozilla.org/en-US/docs/DOM/window.postMessage
• easyXDM http://easyxdm.net/wp/

13. Como se não
bastasse...

14. Peraí, um JS de
terceiros está
bloqueando a
apresentação

16. Nunca bloquear
páginas alheias

17. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

18. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

19. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

20. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

21. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

22. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

23. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

24. <div id="fb-root"></div>
<script>
// Load the SDK Asynchronously
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-like"></div>

25. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

26. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

27. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

28. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

29. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

30. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

31. <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>

32. Você pode otimizar o
seu Google Analytics
http://mathiasbynens.be/notes/async-analytics-snippet

33. Antipatterns
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns

34. Antipatterns comuns
• Muitas globais poluindo o contexto da
página
• Modificar os objetos nativos do JS
• JavaScript inline
• document.write()

35. Addy Osmani:
“Knowledge of anti-patterns is critical
for success. Once we are able to
recognize such anti-patterns, we're
able to refactor our code to negate
them so that the overall quality of our
solutions improves instantly.”
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns

36. Addy Osmani (em pt-BR):
“Conhecer os antipadrões é crítico
para alcançar sucesso. Uma vez que
conseguimos reconhecer os
antipadrões, conseguimos refatorar
nosso código para evitá-los de modo
que a qualidade geral de nossas
soluções melhore instantaneamente.”
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns

37. Agora para tudo e
vamos falar de jQuery!

40. Repositório de
Plugins jQuery
Como faz?

41. Passo a passo
• Após criar um repositório no GitHub, crie
um webhook apontando para a URL:
http://plugins.jquery.com/postreceive-hook

42. https://help.github.com/articles/post-receive-hooks

46. ???

47. Você ainda não tem
conta no GitHub?
É de graça!

48. Passo a passo
• Repositório GitHub WebHook para
http://plugins.jquery.com/postreceive-hook
• Criar um arquivo de manifesto “seu-plugin.jquery.json”

49. Arquivo de Manifesto?
http://plugins.jquery.com/docs/publish/

50. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

51. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

52. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

53. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

54. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

55. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

56. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

57. {
"name": "color",
"title": "jQuery Color",
"description": "jQuery plugin for color manipulation and animation support.",
"keywords": [
"color",
"animation"
],
"version": "2.1.2",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/AUTHORS.txt"
},
"maintainers": [
{
"name": "Corey Frang",
"email": "gnarf37@gmail.com",
"url": "http://gnarf.net"
}
],
"licenses": [
{
"type": "MIT",
"url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/jquery/jquery-color/issues",
"homepage": "https://github.com/jquery/jquery-color",
"docs": "https://github.com/jquery/jquery-color",
"download": "http://code.jquery.com/#color",
"dependencies": {
"jquery": ">=1.5"
}
}

60. O que queremos
automatizar?

63. Se você tem instalada a
versão 0.3.x ou anterior
do Grunt:
npm uninstall -g grunt

65. ‣ npm install -g grunt-cli

66. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init

67. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git
~/.grunt-init/jquery

68. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git
~/.grunt-init/jquery
‣# entre na pasta que vai criar o seu projeto

69. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git
~/.grunt-init/jquery
‣# entre na pasta que vai criar o seu projeto
‣ grunt-init jquery

70. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git
~/.grunt-init/jquery
‣# entre na pasta que vai criar o seu projeto
‣ grunt-init jquery
‣ npm install grunt --save-dev

71. ‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git
~/.grunt-init/jquery
‣# entre na pasta que vai criar o seu projeto
‣ grunt-init jquery
‣ npm install grunt --save-dev
‣ npm install

73. ‣# brincou com o plugin?

74. ‣# brincou com o plugin?
‣# fez commit?

75. ‣# brincou com o plugin?
‣# fez commit?
‣ git tag 0.1.0

76. ‣# brincou com o plugin?
‣# fez commit?
‣ git tag 0.1.0
‣ git push origin --tags

79. Obrigado!
@leobalter