ORGANIZANDO O Nando Vieira http://nandovieira.com.br JavaScript 

@fnando [email protected] nandovieira.com 

http://hellobits.com 

http://howtocode.com.br howto. 

http://codeplane.com.br 

No content

JavaScript É, atualmente, uma das linguagens de programação mais importantes do mundo. 

Dos 10 repositórios mais populares do Github, 7 repositórios* são relacionados a JavaScript. *twitter bootstrap, node.js, jquery, html5 boilerplate, impress.js, backbone.js, chosen. 

Fama Mas mesmo com essa explosão, ainda temos códigos muito ruins. 

Dicas Você verá algumas dicas que podem ajudar a escrever códigos melhores, e torná-lo um *rockstar. *Embora isso seja possível, não é uma garantia. Além disso, é melhor ser um profissional que rockstar. 

#1 Aprenda JavaScript 

JavaScript Uma linguagem extremamente poderosa e flexível. 

Conheça a linguagem *Saiba closures, funções, escopo de variáveis, this e como modificá-lo, pseudo-orientação a objetos, prototype e, provavelmente, muito mais coisas. *Ninguém disse que a vida seria fácil. Quando você decidiu se tornar um desenvolvedor web, assumiu o compromisso de não se tornar um dinossauro. 

*jQuery não é JavaScript É apenas um framework que abstrai e facilita a manipulação do Document Object Model. *Quero morrer quando pergunto para alguém se ele sabe JavaScript e a resposta é “Eu sei jQuery”. Pretty... jQuery não é JavaScript! 

Aprenda a linguagem Ela não é uma linguagem tão grande e difícil como você pensa. 

http://developer.mozilla.org 

http://howtocode.com.br 

http://w3scho... melhor não! 

http://w3fools.com 

#2 JavaScript Patterns 

Patterns vs Standards 

Patterns não são regras. São apenas repetições conhecidas que podem ser documentadas. 

No content

Module pattern Permite emular a visibilidade de métodos e atributos. 

var Counter = { count: 0 , increment: function() { this.count += 1; } , decrement: function() { this.count -= 1; } , reset: function() { this.count = 0; } }; O atributo Counter.count pode ser manipulado indiscriminadamente. 

A variável `count` só pode ser manipulada através de nossa API pública. var Counter = (function(){ var count = 0; return { increment: function() { count += 1; } , decrement: function() { count -= 1; } , reset: function() { count = 0; } , count: function() { return count; } }; })(); 

Module pattern Permite injetar dependências. 

jQuery.noConflict(); 

$.fn.plugin = function() { // do something }; jQuery.noConflict() restaura o valor anterior da variável global $. 

Injetando o jQuery como dependência garantimos o funcionamento do plugin. ;(function($){ $.fn.plugin = function() { // do something }; })(jQuery); 

Facade pattern Permite criar APIs mais simples e desacopladas, abstraindo a implementação original. 

// jquery $("p").css({color: "red"}); // mootools $$("p").setStyle("color", "red"); // prototype $$("p").invoke("setStyle", {color: "red"}); // dojotoolkit dojo.query("p").style({color: "red"}); 

function dom(selector) { this.selector = selector; }; dom.prototype.css = function(style) {}; dom.prototype.remove = function() {}; dom.prototype.addClass = function(className) {}; dom.prototype.removeClass = function(className) {}; dom.find = function(selector) { return new dom(selector); }; exemplo utópico 

Não importa qual framework você esteja usando, a API foi abstraída. dom.find("p").css({ color: "red" }); 

A abstração pode ser extremamente complexa e trabalhosa. dom.find("p").css({ color: "red" }); 

Mediator pattern Faz a intermediação entre diferentes componentes, de modo que eles possam interagir indiretamente. 

No content

var Chat = {}; Chat.channel = new Channel(); Chat.participants = new Participants(Chat.channel); Chat.messages = new Messages(Chat.channel); Chat.inputMessage = new InputMessage(Chat.channel); Chat.connection = new Connection(Chat.channel); 

function Participants(channel) { this.channel = channel; // Listen to the connected signal and add a new // user to the participants list. this.channel.on("connected", this.onConnected); // Listen to the disconnected signal and remove // user from the participants list. this.channel.on("disconnected", this.onDisconnected); } 

function Messages(channel) { this.channel = channel; // Listen to the new message signal and add message // to the list. this.channel.on("new message", this.onNewMessage); // Listen to the connected signal and tell everybody // that somebody has joined the room. this.channel.on("connected", this.onConnected); } 

function InputMessage(channel) { this.channel = channel; } InputMessage.prototype.send = function(message, user) { // Send message through WebSockets maybe // Then notify that a new message has been sent this.channel.publish("new message", message, user); }; 

function Channel() { this.events = {}; } Channel.prototype.on = function(event, callback) { this.events[event] || (this.events[event] = []); this.events[event].push(callback); }; Channel.prototype.publish = function(event) { var args = [].slice.call(arguments, 1); this.events[event] || (this.events[event] = []); this.events[event].forEach(function(callback){ callback.apply(null, args); }); }; 

Uma coisa de cada vez O seu código deve fazer uma coisa de cada vez e deve fazê-la bem! 

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

.toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } }); if (location.hash == '#manual_invite') { $(".tab_title:first") .toggleClass("active"); $(".tab_title:last") .toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } //mudando a aba do serviço automaticamente var service_mapping = {0: 'gmail', 1:'yahoo', 2:'live'}; var services_radio_button = ""; for (key in service_mapping) { if ($("#services")[0].places[key].checked) { services_radio_button = service_mapping[key]; } } $("#service-suffix").html(suffixes[services_radio_button]); $("#services fieldset").attr("class", services_radio_button); $("p#service_instructions").addClass("hidden"); $("#service-select").addClass("hidden"); if(services_radio_button == "yahoo") { $("p#service_instructions").removeClass("hidden"); } else if (services_radio_button == "other") { $("#service-select").removeClass("hidden"); } } } 

No content

354 linhas Redimensionamento de janelas, gerenciamento de abas, AJAX, validação, autenticação, criação de lista de contatos no DOM, filtros e, provavelmente, muito mais! 

Bad jQuery ou Bad developer? O jQuery é bom porque é simples de usar. Mas ele também é ruim porque é simples de usar. 

$("#page").load("/some/file.html"); 

$("#page").load("/some/file.html"); Seleção do elemento no DOM 

$("#page").load("/some/file.html"); Requisição AJAX 

$("#page").load("/some/file.html"); Manipulação do DOM 

Uma coisa de cada vez O seu código deve fazer uma coisa de cada vez e deve fazê-la bem! 

#3 MVC/MV* 

O pattern MVC separa as aplicações em três partes conhecidas como Model, Views e Controllers. 

Model Gerencia os dados, persistência e regras de negócio de sua aplicação. 

View Renderiza os modelos e permite a interação do usuário com a aplicação. 

Controller Faz a mediação das interações do usuário com as views e modelos. 

Existem poucas implementações que seguem o MVC proposto pela Xerox PARC à risca. 

A maioria dos frameworks implementa uma variação (ou nem implementam). 

MVVM Model View ViewModel Model View Presenter Model View Adapter Model View Variation MVP MVA MV* 

No JavaScript, tivemos uma explosão de frameworks nos últimos 2 anos. 

Existem mais de 50 frameworks que querem virar “o queridinho” dos desenvolvedores. 

http://addyosmani.github.com/todomvc/ 

Crie seu próprio framework Isso fará com que você entenda o problema a fundo e dará o conhecimento para resolver o problema. Depois jogue tudo fora. 

usuário views (UI) controllers models 

#4 DICAS GERAIS 

Crie arquivos separados Crie diversos arquivos, cada um com sua responsabilidade. Você sempre pode concatenar os arquivos com ferramentas como o Grunt. 

Documente o seu código Sempre que possível, documente o seu código. Você não vai lembrar porque fez isso na semana que vem. 

Injete os elementos em cada componente Em vez de assumir que o elemento está sempre na página, injete-o através do construtor. Isso permitirá escrever testes mais desacomplados. 

Testes Códigos mais simples e com menos responsabilidades são infinitamente mais simples de testar. 

Aprenda JavaScript Você só será um desenvolvedor melhor quando realmente souber o JavaScript. 

#4 *LIVE CODING *Não importa o quanto digam que fazer live coding sempre dá errado, eu não aprendo! 

#5 *OBRIGADO *Aqui é a parte que vocês batem palmas (ou vaiam) e fazem perguntas (ou vão embora).