Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Organizando o JavaScript (WebDay 2013)
Search
Nando Vieira
July 20, 2013
Programming
20
1.1k
Organizando o JavaScript (WebDay 2013)
Palestra apresentada no WebDay 2013
Nando Vieira
July 20, 2013
Tweet
Share
More Decks by Nando Vieira
See All by Nando Vieira
Permanecendo Relevante
fnando
9
1.4k
O que mudou no Rails 5
fnando
3
530
Porque usar PostgreSQL (Se você ainda não o faz)
fnando
25
2.8k
Criando aplicações web mais seguras
fnando
4
600
Criando aplicações mais fáceis de manter com Ruby on Rails
fnando
35
2k
Conhecendo Variants do Rails 4.1
fnando
11
540
JavaScript Funcional
fnando
36
1.7k
Segurança em Aplicações Web
fnando
31
3k
Segurança no Rails
fnando
20
900
Other Decks in Programming
See All in Programming
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.3k
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
460
XStateでReactに秩序を与えたい
gizm000
0
480
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
4
2.5k
Swift Concurrencyとレースコンディション
objectiveaudio
1
390
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
630
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
150
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
120
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
310
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
180
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
310
Regular Expressions, REXML, Automata Learning
makenowjust
0
190
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Visualization
eitanlees
142
15k
Web development in the modern age
philhawksworth
204
10k
Building an army of robots
kneath
302
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Design by the Numbers
sachag
277
19k
Transcript
Or anizando o JavaScript Nando Vieira
Nando Vieira http://simplesideias.com.br @fnando
hellobits.com empresa
howtocode.com.br cursos
codeplane.com.br it hostin
* * *
O JavaScript passou por al umas revoluções durante o seu
tempo de vida.
2004 Primeira revolução Goo le lançou o Gmail com uso
de AJAX
2006 Se unda revolução John Resi lançou o jQuery em
um meetup em NY.
2009 Terceira revolução Ryan Dahl lançou o Node.js
O JavaScript é a lin ua em mais importante da
atualidade.
Dos 50 repositórios mais populares do Github, 29 repositórios são
relacionados a JavaScript.
O JavaScript já tem quase 20 anos de idade.
Por que a ente ainda escreve códi os ruins?
"invite_friends" : function() { var resizeLoader = function() { $("#loader").css("width",
$(".places").width()); $("#loader").css("height", $(".places").height()-18); } resizeLoader(); var resizeTimer; $(window).bind('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeLoader, 50); }); $("a[href=#automatic_invite]").click(function(e){ SomeApp.utils.stopPropagation(e); if(!$(this).parents(".tab_title:first").is(".active")) { $(".tab_title:first") .toggleClass("active"); $(".tab_title:last") .toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } }); var suffixes = { "gmail": "@gmail.com", "yahoo": "", "live": "@hotmail.com", "other": ""
A solução é modularidade.
Só a modularidade permitirá separar as responsabilidades do seu códi
o.
Só a modularidade tornará possível expandir o seu códi o
com facilidade.
Só a modularidade tornará possível a manutenção do seu codebase.
De quebra você ainda anha reusabilidade de componentes.
E é somente assim que o seu códi o poderá
ser testado sem dificuldades.
Se temos todos esses benefícios, porque ainda não escrevemos códi
os dessa maneira?
A verdade é que a maioria dos desenvolvedores não sabe
como fazer isso.
E porque escrever códi os modulares pode ser difícil.
Então, como fazer?
Conhecimento
Conheça a lin ua em.
http://developer.mozilla.or
http://howtocode.com.br
http://w3scho… melhor não!
http://w3fools.com
Or anização
Pense no seu códi o como uma série de blocos
que precisam encaixar uns nos outros.
None
None
None
None
None
None
Muitos outros componentes serão criados à partir dessa estrutura.
Pense em como esses blocos irão se comunicar através de
uma API pública.
Não referencie objetos diretamente do DOM, nem acesse outros objetos
lobais.
Passe todas as dependências como ar umentos da função construtora.
Cada um desses blocos pode ter o seu próprio arquivo.
É melhor ter muitos arquivos pequenos do que poucos arquivos
randes.
javascripts application.js eden AddToRe istry.js ProductInfo.js modules UserRe istries.js addToCartModule.js
addressListModule.js boletoModule.js cartReviewModule.js cate oryInterests.js cate oryModule.js checkoutModule.js
Lembre-se que você sempre pode concatenar e minificar o seu
códi o antes de colocar em produção.
Modularização
O JavaScript possui al umas alternativas diferentes para a criação
de módulos.
Você pode utilizar a ideia de namespaces com object literals.
var Todo = { tasks: [] , addTask: function(task) {}
, removeTask : function() {} , count : function() {} };
Object literals são muitos simples de utilizar, mas se comportam
mais como sin letons.
O Module pattern permite simular a escopo e visibilidade de
atributos.
var Todo = (function(){ var tasks = []; // private
variable // expose the public API return { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; })();
O Module pattern também permite fazer a injeção de dependências.
var Todo = (function($, hb){ // all your code here
})(jQuery, Handlebars);
Eu costumo usar uma variação de Module pattern com namespace.
Module("MyApp.MyModule", function(MyModule){ MyModule.fn.initialize = function() { // this is the
initializer }; MyModule.fn.someFunction = function() { // fn is just shortcut for // prototype alas jQuery }; });
http:// ithub.com/fnando/module.js
Dependência entre os módulos não é um problema.
Utilize a aborda em sin le entry point.
// boot.js $(function(){ var html = $("html") , controller =
html.data("controller") , action = html.data("action") ; MyApp.Application(controller, action); });
Existem outras alternativas de módulos como AMD e CommonJS.
Já existe um draft de módulos nativos no JavaScript no
ES6 Harmony.
module Todo { var tasks = []; // private variable
// expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
module Todo { var tasks = []; // private variable
// expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
import Todo from Todo; Todo.addTask(task);
Os módulos podem ser importados através de URLs.
// load from remote sources module $ from "http://example.org/jquery.js"; //
Module loader API Loader.load("http://example.org/jquery.js", function($){ // do what you need });
Você pode ser específico sobre o que quer importar.
import { a, b, c } from "some/file";
Ainda está em discussão. http://fnando.me/jp
Exemplo
Vamos implementar um postbox. http://fnando.me/jq
None
Primeiro implemente a funcionalidade do jeito mais rápido, para entender
o problema.
$(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",
function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
$(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",
function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
$(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",
function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
$(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",
function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
Depois que você conse uiu entender o problema, escreva uma
solução mais modular.
Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) { this.container = container; this.textarea
= container.find(".pb-input"); this.button = container.find(".pb-button"); }; });
Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) { // the initialization code
this.addEventListeners(); }; Postbox.fn.addEventListeners = function() { this.textarea .on("focus", this.onTextareaFocus.bind(this)) .on("keyup", this.onTextareaKeyUp.bind(this)) .on("blur", this.onTextareaBlur.bind(this)) ; }; });
Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};
Postbox.fn.onTextareaFocus = function(event) { this.container .addClass("did-focus") .removeClass("is-contracted") ; }; });
Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};
Postbox.fn.onTextareaFocus = function(event) {}; var LINES = 5; Postbox.fn.onTextareaKeyUp = function(event) { var lines = event.target.value.split(/\r?\n/); if (lines.length >= LINES) { this.textarea.addClass("is-taller"); } else { this.textarea.removeClass("is-taller"); } }; });
Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};
Postbox.fn.onTextareaFocus = function(event) {}; Postbox.fn.onTextareaKeyUp = function(event) {}; Postbox.fn.onTextareaBlur = function(event) { if (!event.target.value) { this.container.addClass("is-contract"); } }; });
Sempre que você escreve códi os mais modulares, é muito
mais simples escrever testes.
describe("HOWTO.Postbox", function() { var container, postbox, textarea; beforeEach(function() { container
= $("<div/>") .append("<textarea class='pb-input'/>") .append("<button class='pb-button' value='Reply'/>") .appendTo("#sample") ; textarea = container.find("textarea"); postbox = HOWTO.Postbox(container); }); it("sets class when focusing box", function() { textarea.trigger("focus"); expect(container.is(".did-focus")).toBeTruthy(); }); // other specs });
Finalizando
Todo aplicativo complexo deve ser quebrado em pedaços menores.
Você nunca sabe qual vai ser o tamanho do seu
projeto.
Códi os modulares podem ser escritos sem o uso de
bibliotecas.
Mas use o que for melhor para o seu workflow.
Obri ado!
* * *
http://howtocode.com.br