0
JavaScript  ORGANIZANDO ONando Vieira   http://nandovieira.com.br
@fnandofnando.vieira@gmail.comnandovieira.com
http://hellobits.com
howto.http://howtocode.com.br
http://codeplane.com.br
JavaScriptÉ, atualmente, uma das linguagens de programação maisimportantes do mundo.
Dos 10 repositórios mais populares doGithub, 7 repositórios* são relacionados aJavaScript.*twitter bootstrap, node.js, jqu...
FamaMas mesmo com essa explosão, ainda temos códigos muito ruins.
DicasVocê verá algumas dicas que podem ajudar a escrever códigosmelhores, e torná-lo um *rockstar.*Embora isso seja possív...
#1 Aprenda JavaScript
JavaScriptUma linguagem extremamente poderosa e flexível.
Conheça a linguagem*Saiba closures, funções, escopo de variáveis, this e comomodificá-lo, pseudo-orientação a objetos, prot...
*jQuery não é JavaScriptÉ apenas um framework que abstrai e facilita a manipulação doDocument Object Model.*Quero morrer q...
Aprenda a linguagemEla 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   vsStandards
Patterns não são regras.São apenas repetições conhecidas que podem ser documentadas.
Module patternPermite emular a visibilidade de métodos e atributos.
var Counter = {     count: 0   , increment: function() {       this.count += 1;     }                               O atri...
var Counter = (function(){  var count = 0;  return {       increment: function() {         count += 1;       }     , decre...
Module patternPermite injetar dependências.
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">  jQuery.noConflict();</script><scr...
$.fn.plugin = function() {   jQuery.noConflict()   // do something           restaura o valor anterior da};                ...
;(function($){  $.fn.plugin = function() {   Injetando o jQuery como     // do something           dependência garantimos ...
Facade patternPermite criar APIs mais simples e desacopladas, abstraindo aimplementação original.
// jquery$("p").css({color: "red"});// mootools$$("p").setStyle("color", "red");// prototype$$("p").invoke("setStyle", {co...
exemplo utópicofunction dom(selector) {   this.selector = selector;};dom.prototype.css = function(style) {};dom.prototype....
dom.find("p").css({   Não importa qual framework    color: "red"      você esteja usando, a API});                   foi a...
dom.find("p").css({   A abstração pode ser    color: "red"      extremamente complexa e});                   trabalhosa.
Mediator patternFaz a intermediação entre diferentes componentes, de modo queeles possam interagir indiretamente.
var Chat = {};Chat.channel = new Channel();Chat.participants = new Participants(Chat.channel);Chat.messages = new Messages...
function Participants(channel) {  this.channel = channel;    // Listen to the connected signal and add a new    // user to...
function Messages(channel) {  this.channel = channel;    // Listen to the new message signal and add message    // to the ...
function InputMessage(channel) {  this.channel = channel;}InputMessage.prototype.send = function(message, user) {  // Send...
function Channel() {  this.events = {};}Channel.prototype.on = function(event, callback) {   this.events[event] || (this.e...
Uma coisa de cada vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
"invite_friends" : function() {  var resizeLoader = function() {      $("#loader").css("width", $(".places").width());    ...
.toggleClass("active");                $("#automatic")                  .toggleClass("hidden");                $("#manual"...
354 linhasRedimensionamento de janelas, gerenciamento de abas, AJAX,validação, autenticação, criação de lista de contatos ...
Bad jQuery ou Bad developer?O jQuery é bom porque é simples de usar. Mas ele também é ruimporque é 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 vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
#3 MVC/MV*
O pattern MVC separa as aplicações emtrês partes conhecidas como Model,Views e Controllers.
Model Gerencia os dados, persistência eregras de negócio de sua aplicação.
View  Renderiza os modelos e permite ainteração do usuário com a aplicação.
ControllerFaz a mediação das interações dousuário com as views e modelos.
Existem poucas implementações queseguem o MVC proposto pela Xerox PARCà risca.
A maioria dos frameworks implementauma variação (ou nem implementam).
MVVM Model View ViewModelMVP   Model View PresenterMVA   Model View AdapterMV*   Model View Variation
No JavaScript, tivemos uma explosão deframeworks nos últimos 2 anos.
Existem mais de 50 frameworks quequerem virar “o queridinho” dosdesenvolvedores.
http://addyosmani.github.com/todomvc/
Crie seu próprio frameworkIsso fará com que você entenda o problema a fundo e dará oconhecimento para resolver o problema....
modelsusuário   views (UI)   controllers
#4 DICAS GERAIS
Crie arquivos separadosCrie diversos arquivos, cada um com sua responsabilidade. Vocêsempre pode concatenar os arquivos co...
Documente o seu códigoSempre que possível, documente o seu código. Você não vailembrar porque fez isso na semana que vem.
Injete os elementos em cada componenteEm vez de assumir que o elemento está sempre na página, injete-oatravés do construto...
TestesCódigos mais simples e com menos responsabilidades sãoinfinitamente mais simples de testar.
Aprenda JavaScriptVocê só será um desenvolvedor melhor quando realmente souber oJavaScript.
#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
 Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript
Upcoming SlideShare
Loading in...5
×

Evento Front End SP - Organizando o Javascript

972

Published on

PDF do evento de Front-end São Paulo. Disponibilizado pelo site http://tableless.com.br. Palestra do Nando Vieira @fnando

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
972
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of " Evento Front End SP - Organizando o Javascript"

  1. 1. JavaScript ORGANIZANDO ONando Vieira http://nandovieira.com.br
  2. 2. @fnandofnando.vieira@gmail.comnandovieira.com
  3. 3. http://hellobits.com
  4. 4. howto.http://howtocode.com.br
  5. 5. http://codeplane.com.br
  6. 6. JavaScriptÉ, atualmente, uma das linguagens de programação maisimportantes do mundo.
  7. 7. Dos 10 repositórios mais populares doGithub, 7 repositórios* são relacionados aJavaScript.*twitter bootstrap, node.js, jquery, html5 boilerplate, impress.js, backbone.js, chosen.
  8. 8. FamaMas mesmo com essa explosão, ainda temos códigos muito ruins.
  9. 9. DicasVocê verá algumas dicas que podem ajudar a escrever códigosmelhores, e torná-lo um *rockstar.*Embora isso seja possível, não é uma garantia. Além disso, é melhor ser um profissional que rockstar.
  10. 10. #1 Aprenda JavaScript
  11. 11. JavaScriptUma linguagem extremamente poderosa e flexível.
  12. 12. Conheça a linguagem*Saiba closures, funções, escopo de variáveis, this e comomodificá-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 ocompromisso de não se tornar um dinossauro.
  13. 13. *jQuery não é JavaScriptÉ apenas um framework que abstrai e facilita a manipulação doDocument Object Model.*Quero morrer quando pergunto para alguém se ele sabe JavaScript e a resposta é “Eu sei jQuery”. Pretty... jQuerynão é JavaScript!
  14. 14. Aprenda a linguagemEla não é uma linguagem tão grande e difícil como você pensa.
  15. 15. http://developer.mozilla.org
  16. 16. http://howtocode.com.br
  17. 17. http://w3scho... melhor não!
  18. 18. http://w3fools.com
  19. 19. #2 JavaScript Patterns
  20. 20. Patterns vsStandards
  21. 21. Patterns não são regras.São apenas repetições conhecidas que podem ser documentadas.
  22. 22. Module patternPermite emular a visibilidade de métodos e atributos.
  23. 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. 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. 25. Module patternPermite injetar dependências.
  26. 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. 27. $.fn.plugin = function() { jQuery.noConflict() // do something restaura o valor anterior da}; variável global $.
  28. 28. ;(function($){ $.fn.plugin = function() { Injetando o jQuery como // do something dependência garantimos o }; funcionamento do plugin.})(jQuery);
  29. 29. Facade patternPermite criar APIs mais simples e desacopladas, abstraindo aimplementação original.
  30. 30. // jquery$("p").css({color: "red"});// mootools$$("p").setStyle("color", "red");// prototype$$("p").invoke("setStyle", {color: "red"});// dojotoolkitdojo.query("p").style({color: "red"});
  31. 31. exemplo utópicofunction 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. 32. dom.find("p").css({ Não importa qual framework color: "red" você esteja usando, a API}); foi abstraída.
  33. 33. dom.find("p").css({ A abstração pode ser color: "red" extremamente complexa e}); trabalhosa.
  34. 34. Mediator patternFaz a intermediação entre diferentes componentes, de modo queeles possam interagir indiretamente.
  35. 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. 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. 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. 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. 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. 40. Uma coisa de cada vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
  41. 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. 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. 43. 354 linhasRedimensionamento de janelas, gerenciamento de abas, AJAX,validação, autenticação, criação de lista de contatos no DOM, filtrose, provavelmente, muito mais!
  44. 44. Bad jQuery ou Bad developer?O jQuery é bom porque é simples de usar. Mas ele também é ruimporque é simples de usar.
  45. 45. $("#page").load("/some/file.html");
  46. 46. $("#page").load("/some/file.html"); Seleção do elemento no DOM
  47. 47. $("#page").load("/some/file.html"); Requisição AJAX
  48. 48. $("#page").load("/some/file.html"); Manipulação do DOM
  49. 49. Uma coisa de cada vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
  50. 50. #3 MVC/MV*
  51. 51. O pattern MVC separa as aplicações emtrês partes conhecidas como Model,Views e Controllers.
  52. 52. Model Gerencia os dados, persistência eregras de negócio de sua aplicação.
  53. 53. View Renderiza os modelos e permite ainteração do usuário com a aplicação.
  54. 54. ControllerFaz a mediação das interações dousuário com as views e modelos.
  55. 55. Existem poucas implementações queseguem o MVC proposto pela Xerox PARCà risca.
  56. 56. A maioria dos frameworks implementauma variação (ou nem implementam).
  57. 57. MVVM Model View ViewModelMVP Model View PresenterMVA Model View AdapterMV* Model View Variation
  58. 58. No JavaScript, tivemos uma explosão deframeworks nos últimos 2 anos.
  59. 59. Existem mais de 50 frameworks quequerem virar “o queridinho” dosdesenvolvedores.
  60. 60. http://addyosmani.github.com/todomvc/
  61. 61. Crie seu próprio frameworkIsso fará com que você entenda o problema a fundo e dará oconhecimento para resolver o problema. Depois jogue tudo fora.
  62. 62. modelsusuário views (UI) controllers
  63. 63. #4 DICAS GERAIS
  64. 64. Crie arquivos separadosCrie diversos arquivos, cada um com sua responsabilidade. Vocêsempre pode concatenar os arquivos com ferramentas como oGrunt.
  65. 65. Documente o seu códigoSempre que possível, documente o seu código. Você não vailembrar porque fez isso na semana que vem.
  66. 66. Injete os elementos em cada componenteEm vez de assumir que o elemento está sempre na página, injete-oatravés do construtor. Isso permitirá escrever testes maisdesacomplados.
  67. 67. TestesCódigos mais simples e com menos responsabilidades sãoinfinitamente mais simples de testar.
  68. 68. Aprenda JavaScriptVocê só será um desenvolvedor melhor quando realmente souber oJavaScript.
  69. 69. #4 *LIVE CODING*Não importa o quanto digam que fazer live coding sempre dá errado, eu não aprendo!
  70. 70. #5 *OBRIGADO*Aqui é a parte que vocês batem palmas (ou vaiam) e fazem perguntas (ou vão embora).
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×