guia de sobrevivência js no mundo open source

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": "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?

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 git@github.com:gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

‣ npm install -g grunt-cli

‣ npm install -g grunt-init

‣ git clone 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

‣ git clone 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

‣ git clone 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

‣ git clone 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