Guia de Sobrevivência JS no mundo Open Source
Upcoming SlideShare
Loading in...5
×
 

Guia de Sobrevivência JS no mundo Open Source

on

  • 1,126 views

Apresentada no RioJS Conf 2013

Apresentada no RioJS Conf 2013

Statistics

Views

Total Views
1,126
Views on SlideShare
1,110
Embed Views
16

Actions

Likes
3
Downloads
7
Comments
1

2 Embeds 16

http://eventifier.co 11
https://twitter.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Guia de Sobrevivência JS no mundo Open Source Guia de Sobrevivência JS no mundo Open Source Presentation Transcript

  • Guia de sobrevivência JSno mundo Open SourceRio.JS Conference 2013 - Leo Balter
  • JS no mundoOpen Source?
  • JS no mundoOpen Source?JS de terceiros! WAT?
  • Desafio Desenvolvedor• 1 ambiente• 1 versão da linguagem• sem script no nome
  • 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?
  • JS que funciona emqualquer site, inclusivenos que não são seus!
  • Primeiros perigos
  • Same Origin Policy HTTP HTTP HTTPS HTTPSwww.foo.com/bla www.foo.com/bos
  • Same Origin Policy HTTP HTTPS HTTPS HTTPbla.foo.com bos.foo.com
  • 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/
  • Como se não bastasse...
  • Peraí, um JS deterceiros estábloqueando a apresentação
  • Nunca bloquearpáginas alheias
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • <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>
  • Você pode otimizar o seu Google Analyticshttp://mathiasbynens.be/notes/async-analytics-snippet
  • Antipatternshttp://addyosmani.com/resources/essentialjsdesignpatterns/book/#antipatterns
  • Antipatterns comuns• Muitas globais poluindo o contexto da página• Modificar os objetos nativos do JS• JavaScript inline• document.write()
  • 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
  • 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
  • Agora para tudo evamos falar de jQuery!
  • Repositório dePlugins jQuery Como faz?
  • Passo a passo • Após criar um repositório no GitHub, crie um webhook apontando para a URL:http://plugins.jquery.com/postreceive-hook
  • https://help.github.com/articles/post-receive-hooks
  • ???
  • Você ainda não tem conta no GitHub? É de graça!
  • Passo a passo• Repositório GitHub WebHook para http://plugins.jquery.com/postreceive-hook• Criar um arquivo de manifesto “seu-plugin.jquery.json”
  • Arquivo de Manifesto? http://plugins.jquery.com/docs/publish/
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • { "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" }}
  • O que queremos automatizar?
  • Se você tem instalada aversão 0.3.x ou anterior do Grunt: npm uninstall -g grunt
  • ‣ npm install -g grunt-cli
  • ‣ npm install -g grunt-cli‣ npm install -g grunt-init
  • ‣ npm install -g grunt-cli‣ npm install -g grunt-init‣ gitclone git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
  • ‣ 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
  • ‣ 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 -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 -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
  • ‣# brincou com o plugin?
  • ‣# brincou com o plugin?‣# fez commit?
  • ‣# brincou com o plugin?‣# fez commit?‣ git tag 0.1.0
  • ‣# brincou com o plugin?‣# fez commit?‣ git tag 0.1.0‣ git push origin --tags
  • Obrigado!@leobalter