Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Guia de Sobrevivência JS no mundo Open Source

1,377 views

Published on

Apresentada no RioJS Conf 2013

Published in: Technology

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

×