Guia de sobrevivência JS no mundo Open Source Rio.JS Conference 2013 - Leo Balter
Guia de Sobrevivência JS no mundo Open Source
Dec 17, 2014
Apresentada no RioJS Conf 2013
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Guia de sobrevivência JS no mundo Open SourceRio.JS Conference 2013 - Leo Balter
JS no mundo Open Source?
JS no mundo Open Source?
JS de terceiros!
WAT?
Desafio Desenvolvedor
• 1 ambiente
• 1 versão da linguagem
• sem script no nome
Desafio DesenvolvedorJavaScript
• 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 em qualquer site, inclusive nos que não são seus!
Primeiros perigos
Same Origin Policy
HTTP HTTP
HTTPS HTTPS
www.foo.com/bla www.foo.com/bos
Same Origin PolicyHTTP HTTPS
HTTPS HTTP
bla.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 de terceiros está bloqueando a apresentação
Nunca bloquear pá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 Analytics
http://mathiasbynens.be/notes/async-analytics-snippet
Antipatterns
http://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()
“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
Addy Osmani:
“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
Addy Osmani (em pt-BR):
Agora para tudo e vamos falar de jQuery!
Repositório de Plugins 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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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": "[email protected]", "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?
npm uninstall -g grunt
Se você tem instalada a versão 0.3.x ou anterior
do 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
‣ git clone [email protected]:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
‣ npm install -g grunt-cli
‣ npm install -g grunt-init
‣ git clone [email protected]: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
‣ git clone [email protected]: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
‣ git clone [email protected]: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
‣ git clone [email protected]: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
Related Documents
