Guia de Sobrevivência JS no mundo Open Source

1,115
-1

Published on

Apresentada no RioJS Conf 2013

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,115
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Guia de Sobrevivência JS no mundo Open Source

  1. 1. Guia de sobrevivência JSno mundo Open SourceRio.JS Conference 2013 - Leo Balter
  2. 2. JS no mundoOpen Source?
  3. 3. JS no mundoOpen Source?JS de terceiros! WAT?
  4. 4. Desafio Desenvolvedor• 1 ambiente• 1 versão da linguagem• sem script no nome
  5. 5. 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?
  6. 6. JS que funciona emqualquer site, inclusivenos que não são seus!
  7. 7. Primeiros perigos
  8. 8. Same Origin Policy HTTP HTTP HTTPS HTTPSwww.foo.com/bla www.foo.com/bos
  9. 9. Same Origin Policy HTTP HTTPS HTTPS HTTPbla.foo.com bos.foo.com
  10. 10. 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/
  11. 11. Como se não bastasse...
  12. 12. Peraí, um JS deterceiros estábloqueando a apresentação
  13. 13. Nunca bloquearpáginas alheias
  14. 14. <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>
  15. 15. <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>
  16. 16. <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>
  17. 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. 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. 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. 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. 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. 22. <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>
  23. 23. <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>
  24. 24. <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>
  25. 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. 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. 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. 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. 29. Você pode otimizar o seu Google Analyticshttp://mathiasbynens.be/notes/async-analytics-snippet
  30. 30. Antipatternshttp://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns
  31. 31. Antipatterns comuns• Muitas globais poluindo o contexto da página• Modificar os objetos nativos do JS• JavaScript inline• document.write()
  32. 32. Addy Osmani:“Knowledge of anti-patterns is critical for success. Once we are able to recognize such anti-patterns, were able to refactor our code to negatethem so that the overall quality of our solutions improves instantly.” http://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns
  33. 33. Addy Osmani (em pt-BR): “Conhecer os antipadrões é críticopara alcançar sucesso. Uma vez que conseguimos reconhecer os antipadrões, conseguimos refatorarnosso código para evitá-los de modo que a qualidade geral de nossassoluções melhore instantaneamente.” http://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns
  34. 34. Agora para tudo evamos falar de jQuery!
  35. 35. Repositório dePlugins jQuery Como faz?
  36. 36. Passo a passo • Após criar um repositório no GitHub, crie um webhook apontando para a URL:http://plugins.jquery.com/postreceive-hook
  37. 37. https://help.github.com/articles/post-receive-hooks
  38. 38. ???
  39. 39. Você ainda não tem conta no GitHub? É de graça!
  40. 40. Passo a passo• Repositório GitHub WebHook para http://plugins.jquery.com/postreceive-hook• Criar um arquivo de manifesto “seu-plugin.jquery.json”
  41. 41. Arquivo de Manifesto? http://plugins.jquery.com/docs/publish/
  42. 42. { "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" }}
  43. 43. { "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" }}
  44. 44. { "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" }}
  45. 45. { "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" }}
  46. 46. { "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" }}
  47. 47. { "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" }}
  48. 48. { "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" }}
  49. 49. { "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" }}
  50. 50. O que queremos automatizar?
  51. 51. Se você tem instalada aversão 0.3.x ou anterior do Grunt: npm uninstall -g grunt
  52. 52. ‣ npm install -g grunt-cli
  53. 53. ‣ npm install -g grunt-cli‣ npm install -g grunt-init
  54. 54. ‣ npm install -g grunt-cli‣ npm install -g grunt-init‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
  55. 55. ‣ 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
  56. 56. ‣ 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
  57. 57. ‣ 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
  58. 58. ‣ 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
  59. 59. ‣# brincou com o plugin?
  60. 60. ‣# brincou com o plugin?‣# fez commit?
  61. 61. ‣# brincou com o plugin?‣# fez commit?‣ git tag 0.1.0
  62. 62. ‣# brincou com o plugin?‣# fez commit?‣ git tag 0.1.0‣ git push origin --tags
  63. 63. Obrigado!@leobalter

×