Evento Front End SP - Organizando o Javascript

JavaScript
ORGANIZANDO O

Nando Vieira http://nandovieira.com.br

@fnando

fnando.vieira@gmail.com

nandovieira.com

http://hellobits.com

howto.
http://howtocode.com.br

http://codeplane.com.br

Evento Front End SP - Organizando o Javascript

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 proﬁssional que rockstar.

JavaScript
Uma linguagem extremamente poderosa e ﬂexível.

Conheça a linguagem
*Saiba closures, funções, escopo de variáveis, this e como
modiﬁcá-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

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

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

Module pattern
Permite injetar dependências.

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

;(function($){
$.fn.plugin = function() { Injetando o jQuery como
// do something dependência garantimos o
}; funcionamento do plugin.
})(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"});

exemplo utópico
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);
};

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

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

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

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) {

// 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) {
}

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);
};

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

$("#automatic")
.toggleClass("hidden");
$("#manual")
}
});

var suffixes = {
"gmail": "@gmail.com",
"yahoo": "",
"live": "@hotmail.com",
"other": ""

$("#automatic")
$("#manual")
}
});

if (location.hash == '#manual_invite') {
$(".tab_title:first")
$(".tab_title:last")
$("#automatic")
$("#manual")
}
//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");
}
}
}

354 linhas
Redimensionamento de janelas, gerenciamento de abas, AJAX,
validação, autenticação, criação de lista de contatos no DOM, ﬁltros
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");


Seleção do
elemento no DOM


Requisição AJAX


Manipulação do DOM

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
MVP Model View Presenter
MVA Model View Adapter
MV* Model View Variation

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.

models

usuário views (UI) controllers

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
inﬁnitamente 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).

Evento Front End SP - Organizando o Javascript

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Evento Front End SP - Organizando o Javascript (20)

Último (8)

Evento Front End SP - Organizando o Javascript