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

2.
@fnando
fnando.vieira@gmail.com
nandovieira.com

3.
http://hellobits.com

4.
howto.
http://howtocode.com.br

5.
http://codeplane.com.br

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

7.
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.

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

9.
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.

10.
#1 Aprenda JavaScript

11.
JavaScript
Uma linguagem extremamente poderosa e flexível.

12.
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.

13.
*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!

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

15.
http://developer.mozilla.org

16.
http://howtocode.com.br

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

18.
http://w3fools.com

19.
#2 JavaScript Patterns

20.
Patterns
vs
Standards

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

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

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

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

25.
Module pattern
Permite injetar dependências.

26.
<script type="text/javascript" src="jquery.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="jquery.plugin.js">
</script>

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

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

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

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

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

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

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

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

35.
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);

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

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

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

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

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

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

42.
.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");
}
}
}

43.
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!

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

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

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

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

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

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

50.
#3 MVC/MV*

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

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

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

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

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

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

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

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

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

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

61.
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.

62.
models
usuário views (UI) controllers

63.
#4 DICAS GERAIS

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

65.
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.

66.
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.

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

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

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

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