Evento Front End SP - Organizando o Javascript

  • 909 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
909
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript ORGANIZANDO ONando Vieira http://nandovieira.com.br
  • 2. @fnandofnando.vieira@gmail.comnandovieira.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 maisimportantes do mundo.
  • 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. FamaMas mesmo com essa explosão, ainda temos códigos muito ruins.
  • 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. #1 Aprenda JavaScript
  • 11. JavaScriptUma linguagem extremamente poderosa e flexível.
  • 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. *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. Aprenda a linguagemEla 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 vsStandards
  • 21. Patterns não são regras.São apenas repetições conhecidas que podem ser documentadas.
  • 22. Module patternPermite 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 patternPermite 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 patternPermite criar APIs mais simples e desacopladas, abstraindo aimplementação original.
  • 30. // jquery$("p").css({color: "red"});// mootools$$("p").setStyle("color", "red");// prototype$$("p").invoke("setStyle", {color: "red"});// dojotoolkitdojo.query("p").style({color: "red"});
  • 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. 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 patternFaz a intermediação entre diferentes componentes, de modo queeles 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 vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
  • 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 linhasRedimensionamento de janelas, gerenciamento de abas, AJAX,validação, autenticação, criação de lista de contatos no DOM, filtrose, provavelmente, muito mais!
  • 44. Bad jQuery ou Bad developer?O jQuery é bom porque é simples de usar. Mas ele também é ruimporque é 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 vezO seu código deve fazer uma coisa de cada vez e deve fazê-labem!
  • 50. #3 MVC/MV*
  • 51. O pattern MVC separa as aplicações emtrês partes conhecidas como Model,Views e Controllers.
  • 52. Model Gerencia os dados, persistência eregras de negócio de sua aplicação.
  • 53. View Renderiza os modelos e permite ainteração do usuário com a aplicação.
  • 54. ControllerFaz a mediação das interações dousuário com as views e modelos.
  • 55. Existem poucas implementações queseguem o MVC proposto pela Xerox PARCà risca.
  • 56. A maioria dos frameworks implementauma variação (ou nem implementam).
  • 57. MVVM Model View ViewModelMVP Model View PresenterMVA Model View AdapterMV* Model View Variation
  • 58. No JavaScript, tivemos uma explosão deframeworks nos últimos 2 anos.
  • 59. Existem mais de 50 frameworks quequerem virar “o queridinho” dosdesenvolvedores.
  • 60. http://addyosmani.github.com/todomvc/
  • 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. modelsusuário views (UI) controllers
  • 63. #4 DICAS GERAIS
  • 64. Crie arquivos separadosCrie diversos arquivos, cada um com sua responsabilidade. Vocêsempre pode concatenar os arquivos com ferramentas como oGrunt.
  • 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. 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. TestesCódigos mais simples e com menos responsabilidades sãoinfinitamente mais simples de testar.
  • 68. Aprenda JavaScriptVocê só será um desenvolvedor melhor quando realmente souber oJavaScript.
  • 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).