Slide 1
Slide 1 text
Or anizando o
JavaScript
Nando Vieira
Slide 2
Slide 2 text
Nando Vieira
http://simplesideias.com.br
@fnando
Slide 3
Slide 3 text
hellobits.com
empresa
Slide 4
Slide 4 text
howtocode.com.br
cursos
Slide 5
Slide 5 text
codeplane.com.br
it hostin
Slide 6
Slide 6 text
* * *
Slide 7
Slide 7 text
O JavaScript passou por al umas
revoluções durante o seu tempo de vida.
Slide 8
Slide 8 text
2004 Primeira revolução
Goo le lançou o Gmail com uso de AJAX
Slide 9
Slide 9 text
2006 Se unda revolução
John Resi lançou o jQuery em um meetup em NY.
Slide 10
Slide 10 text
2009 Terceira revolução
Ryan Dahl lançou o Node.js
Slide 11
Slide 11 text
O JavaScript é a lin ua em mais
importante da atualidade.
Slide 12
Slide 12 text
Dos 50 repositórios mais populares
do Github, 29 repositórios são
relacionados a JavaScript.
Slide 13
Slide 13 text
O JavaScript já tem quase 20 anos de idade.
Slide 14
Slide 14 text
Por que a ente ainda escreve códi os ruins?
Slide 15
Slide 15 text
"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": ""
Slide 16
Slide 16 text
A solução é modularidade.
Slide 17
Slide 17 text
Só a modularidade permitirá separar
as responsabilidades do seu códi o.
Slide 18
Slide 18 text
Só a modularidade tornará possível
expandir o seu códi o com facilidade.
Slide 19
Slide 19 text
Só a modularidade tornará possível
a manutenção do seu codebase.
Slide 20
Slide 20 text
De quebra você ainda anha
reusabilidade de componentes.
Slide 21
Slide 21 text
E é somente assim que o seu códi o
poderá ser testado sem dificuldades.
Slide 22
Slide 22 text
Se temos todos esses benefícios, porque ainda
não escrevemos códi os dessa maneira?
Slide 23
Slide 23 text
A verdade é que a maioria dos
desenvolvedores não sabe como fazer isso.
Slide 24
Slide 24 text
E porque escrever códi os
modulares pode ser difícil.
Slide 25
Slide 25 text
Então, como fazer?
Slide 26
Slide 26 text
Conhecimento
Slide 27
Slide 27 text
Conheça a lin ua em.
Slide 28
Slide 28 text
http://developer.mozilla.or
Slide 29
Slide 29 text
http://howtocode.com.br
Slide 30
Slide 30 text
http://w3scho… melhor não!
Slide 31
Slide 31 text
http://w3fools.com
Slide 32
Slide 32 text
Or anização
Slide 33
Slide 33 text
Pense no seu códi o como uma série de blocos
que precisam encaixar uns nos outros.
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Muitos outros componentes serão criados
à partir dessa estrutura.
Slide 41
Slide 41 text
Pense em como esses blocos irão se
comunicar através de uma API pública.
Slide 42
Slide 42 text
Não referencie objetos diretamente do
DOM, nem acesse outros objetos lobais.
Slide 43
Slide 43 text
Passe todas as dependências como
ar umentos da função construtora.
Slide 44
Slide 44 text
Cada um desses blocos pode
ter o seu próprio arquivo.
Slide 45
Slide 45 text
É melhor ter muitos arquivos pequenos
do que poucos arquivos randes.
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
Lembre-se que você sempre pode
concatenar e minificar o seu códi o
antes de colocar em produção.
Slide 48
Slide 48 text
Modularização
Slide 49
Slide 49 text
O JavaScript possui al umas alternativas
diferentes para a criação de módulos.
Slide 50
Slide 50 text
Você pode utilizar a ideia de namespaces
com object literals.
Slide 51
Slide 51 text
var Todo = {
tasks: []
, addTask: function(task) {}
, removeTask : function() {}
, count : function() {}
};
Slide 52
Slide 52 text
Object literals são muitos simples de utilizar,
mas se comportam mais como sin letons.
Slide 53
Slide 53 text
O Module pattern permite simular a
escopo e visibilidade de atributos.
Slide 54
Slide 54 text
var Todo = (function(){
var tasks = []; // private variable
// expose the public API
return {
addTask: function(task) {}
, removeTask: function(task) {}
, count: function() {}
};
})();
Slide 55
Slide 55 text
O Module pattern também permite fazer
a injeção de dependências.
Slide 56
Slide 56 text
var Todo = (function($, hb){
// all your code here
})(jQuery, Handlebars);
Slide 57
Slide 57 text
Eu costumo usar uma variação de
Module pattern com namespace.
Slide 58
Slide 58 text
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
};
});
Slide 59
Slide 59 text
http:// ithub.com/fnando/module.js
Slide 60
Slide 60 text
Dependência entre os módulos não é um problema.
Slide 61
Slide 61 text
Utilize a aborda em sin le entry point.
Slide 62
Slide 62 text
// boot.js
$(function(){
var html = $("html")
, controller = html.data("controller")
, action = html.data("action")
;
MyApp.Application(controller, action);
});
Slide 63
Slide 63 text
Existem outras alternativas de
módulos como AMD e CommonJS.
Slide 64
Slide 64 text
Já existe um draft de módulos nativos
no JavaScript no ES6 Harmony.
Slide 65
Slide 65 text
module Todo {
var tasks = []; // private variable
// expose the public API
export default {
addTask: function(task) {}
, removeTask: function(task) {}
, count: function() {}
};
}
Slide 66
Slide 66 text
module Todo {
var tasks = []; // private variable
// expose the public API
export default {
addTask: function(task) {}
, removeTask: function(task) {}
, count: function() {}
};
}
Slide 67
Slide 67 text
import Todo from Todo;
Todo.addTask(task);
Slide 68
Slide 68 text
Os módulos podem ser
importados através de URLs.
Slide 69
Slide 69 text
// 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
});
Slide 70
Slide 70 text
Você pode ser específico sobre o
que quer importar.
Slide 71
Slide 71 text
import { a, b, c } from "some/file";
Slide 72
Slide 72 text
Ainda está em discussão.
http://fnando.me/jp
Slide 73
Slide 73 text
Exemplo
Slide 74
Slide 74 text
Vamos implementar um postbox.
http://fnando.me/jq
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Primeiro implemente a funcionalidade do
jeito mais rápido, para entender o problema.
Slide 77
Slide 77 text
$(".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");
}
})
;
Slide 78
Slide 78 text
$(".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");
}
})
;
Slide 79
Slide 79 text
$(".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");
}
})
;
Slide 80
Slide 80 text
$(".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");
}
})
;
Slide 81
Slide 81 text
Depois que você conse uiu entender o
problema, escreva uma solução mais modular.
Slide 82
Slide 82 text
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");
};
});
Slide 83
Slide 83 text
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))
;
};
});
Slide 84
Slide 84 text
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")
;
};
});
Slide 85
Slide 85 text
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");
}
};
});
Slide 86
Slide 86 text
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");
}
};
});
Slide 87
Slide 87 text
Sempre que você escreve códi os mais
modulares, é muito mais simples escrever testes.
Slide 88
Slide 88 text
describe("HOWTO.Postbox", function() {
var container, postbox, textarea;
beforeEach(function() {
container = $("
")
.append("")
.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
});
Slide 89
Slide 89 text
Finalizando
Slide 90
Slide 90 text
Todo aplicativo complexo deve ser
quebrado em pedaços menores.
Slide 91
Slide 91 text
Você nunca sabe qual vai ser
o tamanho do seu projeto.
Slide 92
Slide 92 text
Códi os modulares podem ser
escritos sem o uso de bibliotecas.
Slide 93
Slide 93 text
Mas use o que for melhor para o seu workflow.
Slide 94
Slide 94 text
Obri ado!
Slide 95
Slide 95 text
* * *
Slide 96
Slide 96 text
http://howtocode.com.br