Você ainda não sabe escrever JavaScript para aplicações Rails

Uma palestra com as principais tecnologias e técnicas utilizadas para escrever código JavaScript sano para diferentes tipos de aplicações. Uma viagem às antigas soluções Rails até as atuais e nem sempre suficientes jQuery UJS e Turbolinks. Aprenda sobre componentes auto-discoverable, comunicação através de eventos, modularização e gerência de dependências. Tudo isto sem deixar de fora alguns dos conceitos por trás dos principais frameworks MV* do mercado.

Transcript

1. Você ainda não sabe escrever JavaScript para aplicações Rails! @jcemer
2. JavaScript para apps Rails @jcemer
3. http://jcemer.com
5. Código JavaScript melhora a usabilidade através da adição de interatividade (ao menos deveria)
6. 88% dos websites utilizam JavaScript http://w3techs.com
7. Túnel do 
 tempo
8. [...] é necessário ir ao passado para a compreensão de todos os questionamentos do tempo presente - Historiador Tiago Menta
9. Rails era muito opinativo em relação à escrita de JavaScript
10. O framework possuía uma série de helpers para gerar código para Prototype.js
11. Envio assíncrono de formulários
12. <%  form_remote_tag  :url  =>  '/'  do  -­‐%>          <div><%=  submit_tag  'Save'  %></div>   <%  end  -­‐%> index.erb
13. <form action="/" method="post" onsubmit="
 new Ajax.Request('/', {asynchronous:true, 
 evalScripts:true, parameters:
 Form.serialize(this)}); return false;"> <input name="commit" type="submit" /> </form> index.html
14. Rio Grande do Sul Porto Alegre
15. <%=  observe_field(:local_estado_id,            :update  =>  "local_cidade_id",            :url  =>  cidades_options_for_select_path,            :with  =>  "estado_id"  %> index.erb
16. <select  id="local_estado_id"                    name="local[estado_id]"><!-­‐-­‐  -­‐-­‐></select>   ! <script  type="text/javascript">   //<![CDATA[      new  Form.Element.EventObserver('local_estado_id',         ! ! ! //]]>   </script> !@#$%^@!% index.html
17. Alto acoplamento do HTML com Prototype.js Tags scripts espalhadas no markup
18. Existia também o RJS para escrever código Prototype.js 
 no back-end
19. Resposta para 
 chamadas Ajax
20. update_page  do  |page|      page.insert_html  :bottom,  'list',            "<li>#{@item.name}</li>"      page.visual_effect  :highlight,   'list'   end controller/action.rb
21. Resposta para 
 chamadas Ajax
22. new  Element.insert("list",            {  bottom:  "<li>Some  item</li>"  });   new  Effect.Highlight("list"); response.js
23. Alto acoplamento do código back-end com Prototype.js
24. JavaScript não deve estar no markup Código back-end não deve depender de biblioteca front-end. ♥ ♥
25. Evolução do Rails
26. Tudo aquilo que você está perdendo se a sua aplicação ainda não foi atualizada
27. Rails 3.0 Fim das chamadas Ajax através de JavaScript inline e dos observers https://github.com/rails/prototype_legacy_helper
28. Rails 3.0 Nascimento do projeto Unobtrusive JavaScript https://github.com/rails/prototype-ujs
29. Confirmar ação
30. <%=  link_to  "Other  Site",  "url",         data:  {  confirm:  "Are  you  sure?"  }  %> index.erb
31. <a  href="url"  data-­‐confirm="Are  you  sure?">     Other  Site</a> index.html Qualquer biblioteca pode endereçar a funcionalidade
32. Envio assíncrono de formulários
33. <%=  form_for  @post,  remote:  true  %> index.erb
34. <form  method="post"  data-­‐remote="true"> index.html Qualquer biblioteca pode endereçar a funcionalidade
35. Considere que o formulário também pode ser enviado sincronamente pelo usuário E se não executar o 
 JavaScript?
36. Configurar o método 
 de requisição
37. <%=  link_to  "Destroy",  "url",  
                          method:  :delete  %> index.erb
38. <a  href="url"  data-­‐method="delete">      Destroy</a> index.html
39. deletar notícia
40. O usuário irá apenas ler a notícia, considere sempre utilizar formulários para este tipo de ação E se não executar o 
 JavaScript?
41. Um pequeno parêntese sobre atributos data-* (
42. Data attributes são a melhor alternativa para armazenar informações adicionais de um elemento
43. $('.element').data('remote'); sample.js (jQuery)
44. $('[data-­‐element]').data('remote'); Recomendado, mesmo que afete na performance http://jsperf.com/class-vs-data-attribute
 -selector-performance sample.js (jQuery)
45. ) Classes do HTML são para semântica, o JavaScript não deve ser baseado nelas
46. Rails 3.1 Suporte a Prototype.js e RJS é removido dando espaço à jQuery
47. jQuery é a biblioteca front-end mais adequada da atualidade ♥ (valorize e aprenda de verdade)
48. As actions ainda podem entregar código JavaScript
49. Requisição Ajax
50. $('#photo_<%=  params[:id]  %>').remove(); destroy.js.erb photo.html <a  href="photo/2"          data-­‐method="delete"          data-­‐remote="true">Destroy</a>  
51. <%-­‐  if  @contact.errors.any?  %>      $('#contact-­‐modal').html('<%=   escape_javascript(render(partial:  'form'))     )  %>');   <%-­‐  else  %>      $('#contact-­‐modal').html('<%=   !       !   $('#contact-­‐modal').append('<p  class="alert  
 alert-­‐success">Your  message  was  successfully  
 sent  </p>');      setTimeout("$('.close').click();",  2000);   <%-­‐  end  %> !@#$%^@!% create.js.erb
52. Rails 3.1 Adoção da linguagem CoffeeScript que transpila para JavaScript
53. Não usamos CoffeeScript 
 por aqui! - muitos de vocês
54. class  Counter      constructor:  (@min  =  0,  @max  =  10e9)  -­‐>          @current  =  @min      next:  -­‐>          @current  =  Math.min(@max,  @current  +  1)      isFirst:  -­‐>          @current  <=  @min   ! class  CounterPlus  extends  Counter      goToLast:  -­‐>          @current  =  @max counter.coffee
55. function  Counter(min,  max)  {          this.min  =  min  !=  null  ?  min  :  0;          this.max  =  max  !=  null  ?  max  :  10e9;          this.current  =  this.min;   }   ! Counter.prototype.next  =  function()  {          return  this.current  =  
       Math.min(this.max,  this.current  +  1)   }   ! Counter.prototype.isFirst  =  function()  {          return  this.current  <=  this.min   }   ! function  CounterPlus()  {   counter.js
56. ! Counter.prototype.isFirst  =  function()  {          return  this.current  <=  this.min   }   ! function  CounterPlus()  {          Counter.apply(this,  arguments)   }   ! function  InheritCounter()  {}   InheritCounter.prototype  =  Counter.prototype   ! CounterPlus.prototype  =  new  InheritCounter()   CounterPlus.prototype.constructor  =  CounterPlus   ! CounterPlus.prototype.goToLast  =  function()  {          return  this.current  =  this.max   }
57. Syntax sugar para "classes" Arrow functions e fat arrow functions para binding com this ♥ ♥
58. Não é por nada que o EcmaScript 6 usa o CoffeeScript como referência
59. ♥CoffeeScript
60. Rails 4.0 Adoção da biblioteca JavaScript Turbolinks
61. O Turbolinks objetiva reduzir pela metade o tempo de carregamento de uma página
62. RUBYCONF
 
 CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA
63. RUBYCONF
 
 CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA Requisição Ajax pela página apontada no link
64. RUBYCONF
 
 CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA
65. RUBYCONF PALESTRANTES FÁBIO AKITA
 HANNELI TAVANTE
 JEAN CARLO EMER Substituição do conteúdo
 do <body> da página com a resposta
66. A barra de endereços é atualizada e as páginas visitadas são armazenadas (voltar à uma página é imediato)
67. Assets devem ficar no <head> e precisam ser marcados para que modificações sejam monitoradas (e recarregada caso preciso)
68. Código JavaScript não será executado na troca de páginas
69. Além de, 
 é preciso também esperar por $.ready(fn) $(document).on('page:load',  fn) $(document).on('page:restore',  fn)
70. Widgets e add-on podem não funcionar como esperado
71. Suporte para widgets do Facebook, Twitter, Google+, Google Analytics, AdSense e alguns mais http://reed.github.io/turbolinks-compatibility
72. É preciso cuidado dobrado para evitar memory leaks
73. A cada transição os events handlers e demais callbacks devem ser desativados para não interferir na performance
74. Código JavaScript pode ser executado na troca de páginas Widgets e add-ons funcionam de acordo depois de ajustados Memory leaks podem ser evitados ♥ ♥ ♥
75. O Turbolinks não permite que apenas porções da página sejam requisitadas (confira o jquery-pajax para isto)
76. Turbolinks funciona bem 
 em websites simples (como o 
 desta conferência) e forma uma 
 boa dupla com UJS
77. Evolua você também
78. Rails é framework full-stack para criar aplicações, mas você provavelmente irá precisar de mais
79. Organização de código JavaScript e modularização Componentes front-end Bibliotecas e frameworks 
 front-end ♥ ♥ ♥
80. Modularização de código 
 JavaScript
81. O JavaScript não possui sistema de módulos fazendo com que diferentes scripts compartilhem o mesmo escopo
82. file1.js file2.js Sem a criação de um escopo, as variáveis ficam expostas var  myVar  =  "bla"; alert(myVar);
83. (function  ()  {      var  data  =  {};      function  parser()  {            //  Code      }   })(); Immediately-Invoked Function Expression viabilizam a criação de escopos http://benalman.com/news/ 2010/11/immediately- invoked-function-expression
84. Não polua o escopo global, os demais desenvolvedores agradecem ♥
85. Com a criação de escopos com uma única responsabilidade, surge a necessidade de acessar dependências
86. App.modules.mediabox  =  (function  ()  {      var  data  =  {};   !    return  {            data:  data,            parser:  //  ...      }   })(); Namespaces mediabox.js (namespace)
87. Module('modules.mediabox',  
    function  (Mediabox)  {          Mediabox.data  =  {};        Mediabox.parser  =  //  ...      }   ); Biblioteca de módulos do Nando Vieira http://simplesideias.com.br/ escrevendo-javascript-modular mediabox.js (Module.js)
88. define(      [          'jquery',            'util/counter'      ],      function  ($,  Counter)  {          //  ...                  return  {              Mediabox:  Mediabox,              //  ...          };      }
 ); mediabox.js (AMD) Módulos AMD que permitem indicação de dependências https://github.com/ jwhitley/requirejs-rails
89. Declaração de dependências Path do arquivo como identificador do módulo Assíncrono por natureza e adotado
 por jQuery e outras bibliotecas ♥ ♥ ♥
90. [...] it makes code easier to understand for others and yourself re-visting your own code - Chris Coyier
91. ES6 Modules e CommonJS Modules não possuem suporte adequado 
 ao Asset Pipeline (alguém se habilita?)
92. Componentes front-end
93. Um componente encapsula elementos HTML, CSS e comportamento
94. Template, 
 CSS e JS Template, 
 CSS e JS
95. Web Components é a salvação do front-end, use agora!! - algum desavisado
96. Web Componentes com Polymer é ainda um experimento e não deve ser utilizado em produção
97. Mas temos muito o que aprender sobre JavaScript com os Web Components ♥
98. 1. Instanciação de 
 Componentes
99. main.js //  Setup  product  page   if  ($('body').is('.page-­‐product'))  {      $("[data-­‐draggable]").draggable()      $("[data-­‐comments]").comments()   }   ! //  Setup  checkout  page   if  ($('body').is('.page-­‐checkout'))  {      $("[data-­‐draggable]").draggable()      $("[data-­‐datepicker]").datepicker()   }
100. Componentes podem ser removidos ou adicionados necessitando manutenção no JavaScript
101. main.js //  Setup  product  page   if  ($('body').is('.page-­‐product'))  {      $("[data-­‐draggable]").draggable()      $("[data-­‐comments]").comments()   }   ! //  Setup  checkout  page   if  ($('body').is('.page-­‐checkout'))  {      $("[data-­‐draggable]").draggable()      $("[data-­‐datepicker]").datepicker()   }
102. Web Components, Angular.js e Dojo usam o HTML como referência para instanciar componentes
103. Definindo 
 componentes com Piecemaker https://github.com/jcemer/
 piecemaker
104. Definição de um componente <div  data-­‐component="mediabox">      Mediabox  content   </div> index.html
105. define(function  ()  {      function  Mediabox(container)  {          //  ...      }      return  Mediabox;   }); Chamada do construtor
 com o container mediabox.js
106. 2. Data-binding
107. Gerenciar dados no front-end não é tarefa simples
108. Trabalhar com models que emitem eventos é trabalhoso e passível a erros (não entenda mal, Backbone.js) ♥
109. Valor: R$50,00 Quantidade: 1 Model 
 quantidade: 1 script.js
110. Valor: R$50,00 Quantidade: 3 Model 
 quantidade: 1 script.js
111. Valor: R$150,00 Quantidade: 3 Model 
 quantidade: 3 script.js
112. Valor: R$500,00 Quantidade: 10 Model 
 quantidade: 10 script.js
113. Data-binding no
 Angular
114. <div  ng-­‐controller="Basket">      <select  ng-­‐model="quantity"  
                    ng-­‐init="quantity=1">          <option>1</option><option>10</option>      </select>      <div>Valor:  R$  {{price()}}</div>   </div> index.html function  Basket($scope)  {          $scope.price  =  function  ()  {                  return  $scope.quantity  *  50;                              };   } main.js
115. Frameworks como Angular.js, React, Ember e Knockout.js implementam data-binding
116. A EcmaScript e a especificação do HTML5 estão evoluindo para melhor endereçar data-binding
117. 3. Frameworks
118. Componentes no Angular http://jsfiddle.net/api/post/library/pure/
119. <div  ng-­‐app="component">      <tabs>          <pane  title="Date">              Date:  {{  '2012-­‐04-­‐01'  |  date:'fullDate'  }}          </pane>          <pane  title="Hello">              Hi!          </pane>      </tabs>   </div> Tags são mapeadas para templates e controllers
120. A partir daqui, o HTML não é válido e sem um pouco de cuidado...
122. What’s wrong with Angular.js https://medium.com/este-js-framework/whats- wrong-with-angular-js-97b0a787f903 What I would recommend instead of Angular.js? https://medium.com/este-js-framework/what-i- would-recommend-instead-of-angular- js-62b057d8a9e
123. Retornar do servidor uma página em branco ou inválida é um desperdício
124. Considere utilizar um framework JavaScript quando estiver escrevendo uma Rich Internet Application ♥
125. Sempre aprenda a fundo antes tudo o que for utilizar - bom senso
126. Dicas finais para você que quer fazer código ainda melhor (e está acordado) [
127. Estude sobre execução de código assíncrono com callbacks e promises https://speakerdeck.com/jcemer/controle-de- fluxo-com-execucao-assincrona 1.
128. Aceite que o JavaScript do front-end da sua aplicação pode dar tanto ou mais trabalho que o back-end 2.
129. ]Obrigado 
 a todos criem produtos incríveis @jcemer