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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

JavaScript para apps Rails @jcemer

Slide 3

Slide 3 text

http://jcemer.com

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Código JavaScript melhora a usabilidade através da adição de interatividade (ao menos deveria)

Slide 6

Slide 6 text

88% dos websites utilizam JavaScript http://w3techs.com

Slide 7

Slide 7 text

Túnel do   tempo

Slide 8

Slide 8 text

[...] é necessário ir ao passado para a compreensão de todos os questionamentos do tempo presente - Historiador Tiago Menta

Slide 9

Slide 9 text

Rails era muito opinativo em relação à escrita de JavaScript

Slide 10

Slide 10 text

O framework possuía uma série de helpers para gerar código para Prototype.js

Slide 11

Slide 11 text

Envio assíncrono de formulários

Slide 12

Slide 12 text

<% form_remote_tag :url => '/' do -‐%>

<%= submit_tag 'Save' %>

<% end -‐%> index.erb

Slide 13

Slide 13 text

index.html

Slide 14

Slide 14 text

Rio Grande do Sul Porto Alegre

Slide 15

Slide 15 text

<%= observe_field(:local_estado_id, :update => "local_cidade_id", :url => cidades_options_for_select_path, :with => "estado_id" %> index.erb

Slide 16

Slide 16 text

! //<![CDATA[ new Form.Element.EventObserver('local_estado_id', ! ! ! //]]> !@#$%^@!% index.html

Slide 17

Slide 17 text

Alto acoplamento do HTML com Prototype.js Tags scripts espalhadas no markup

Slide 18

Slide 18 text

Existia também o RJS para escrever código Prototype.js   no back-end

Slide 19

Slide 19 text

Resposta para   chamadas Ajax

Slide 20

Slide 20 text

update_page do |page| page.insert_html :bottom, 'list', "

#{@item.name}

" page.visual_effect :highlight, 'list' end controller/action.rb

Slide 21

Slide 21 text

Resposta para   chamadas Ajax

Slide 22

Slide 22 text

new Element.insert("list", { bottom: "

Some item

" }); new Effect.Highlight("list"); response.js

Slide 23

Slide 23 text

Alto acoplamento do código back-end com Prototype.js

Slide 24

Slide 24 text

JavaScript não deve estar no markup Código back-end não deve depender de biblioteca front-end. ♥ ♥

Slide 25

Slide 25 text

Evolução do Rails

Slide 26

Slide 26 text

Tudo aquilo que você está perdendo se a sua aplicação ainda não foi atualizada

Slide 27

Slide 27 text

Rails 3.0 Fim das chamadas Ajax através de JavaScript inline e dos observers https://github.com/rails/prototype_legacy_helper

Slide 28

Slide 28 text

Rails 3.0 Nascimento do projeto Unobtrusive JavaScript https://github.com/rails/prototype-ujs

Slide 29

Slide 29 text

Conﬁrmar ação

Slide 30

Slide 30 text

<%= link_to "Other Site", "url", data: { confirm: "Are you sure?" } %> index.erb

Slide 31

Slide 31 text

Other Site index.html Qualquer biblioteca pode endereçar a funcionalidade

Slide 32

Slide 32 text

Envio assíncrono de formulários

Slide 33

Slide 33 text

<%= form_for @post, remote: true %> index.erb

Slide 34

Slide 34 text

index.html Qualquer biblioteca pode endereçar a funcionalidade

Slide 35

Slide 35 text

Considere que o formulário também pode ser enviado sincronamente pelo usuário E se não executar o   JavaScript?

Slide 36

Slide 36 text

Conﬁgurar o método   de requisição

Slide 37

Slide 37 text

<%= link_to "Destroy", "url",   method: :delete %> index.erb

Slide 38

Slide 38 text

Destroy index.html

Slide 39

Slide 39 text

deletar notícia

Slide 40

Slide 40 text

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?

Slide 41

Slide 41 text

Um pequeno parêntese sobre atributos data-* (

Slide 42

Slide 42 text

Data attributes são a melhor alternativa para armazenar informações adicionais de um elemento

Slide 43

Slide 43 text

$('.element').data('remote'); sample.js (jQuery)

Slide 44

Slide 44 text

$('[data-‐element]').data('remote'); Recomendado, mesmo que afete na performance http://jsperf.com/class-vs-data-attribute  -selector-performance sample.js (jQuery)

Slide 45

Slide 45 text

) Classes do HTML são para semântica, o JavaScript não deve ser baseado nelas

Slide 46

Slide 46 text

Rails 3.1 Suporte a Prototype.js e RJS é removido dando espaço à jQuery

Slide 47

Slide 47 text

jQuery é a biblioteca front-end mais adequada da atualidade ♥ (valorize e aprenda de verdade)

Slide 48

Slide 48 text

As actions ainda podem entregar código JavaScript

Slide 49

Slide 49 text

Requisição Ajax

Slide 50

Slide 50 text

$('#photo_<%= params[:id] %>').remove(); destroy.js.erb photo.html Destroy

Slide 51

Slide 51 text

<%-‐ if @contact.errors.any? %> $('#contact-‐modal').html('<%= escape_javascript(render(partial: 'form')) ) %>'); <%-‐ else %> $('#contact-‐modal').html('<%= ! ! $('#contact-‐modal').append('

Your message was successfully   sent

'); setTimeout("$('.close').click();", 2000); <%-‐ end %> !@#$%^@!% create.js.erb

Slide 52

Slide 52 text

Rails 3.1 Adoção da linguagem CoﬀeeScript que transpila para JavaScript

Slide 53

Slide 53 text

Não usamos CoﬀeeScript   por aqui! - muitos de vocês

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

! 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 }

Slide 57

Slide 57 text

Syntax sugar para "classes" Arrow functions e fat arrow functions para binding com this ♥ ♥

Slide 58

Slide 58 text

Não é por nada que o EcmaScript 6 usa o CoﬀeeScript como referência

Slide 59

Slide 59 text

♥CoffeeScript

Slide 60

Slide 60 text

Rails 4.0 Adoção da biblioteca JavaScript Turbolinks

Slide 61

Slide 61 text

O Turbolinks objetiva reduzir pela metade o tempo de carregamento de uma página

Slide 62

Slide 62 text

RUBYCONF    CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA

Slide 63

Slide 63 text

RUBYCONF    CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA Requisição Ajax pela página apontada no link

Slide 64

Slide 64 text

RUBYCONF    CONHEÇA OS PALESTRANTES PROMETE TRAZER NOVIDADES E ASSUNTOS PERTINENTES DA ÁREA

Slide 65

Slide 65 text

RUBYCONF PALESTRANTES FÁBIO AKITA  HANNELI TAVANTE  JEAN CARLO EMER Substituição do conteúdo  do da página com a resposta

Slide 66

Slide 66 text

A barra de endereços é atualizada e as páginas visitadas são armazenadas (voltar à uma página é imediato)

Slide 67

Slide 67 text

Assets devem ficar no e precisam ser marcados para que modificações sejam monitoradas (e recarregada caso preciso)

Slide 68

Slide 68 text

Código JavaScript não será executado na troca de páginas

Slide 69

Slide 69 text

Além de,   é preciso também esperar por $.ready(fn) $(document).on('page:load', fn) $(document).on('page:restore', fn)

Slide 70

Slide 70 text

Widgets e add-on podem não funcionar como esperado

Slide 71

Slide 71 text

Suporte para widgets do Facebook, Twitter, Google+, Google Analytics, AdSense e alguns mais http://reed.github.io/turbolinks-compatibility

Slide 72

Slide 72 text

É preciso cuidado dobrado para evitar memory leaks

Slide 73

Slide 73 text

A cada transição os events handlers e demais callbacks devem ser desativados para não interferir na performance

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

O Turbolinks não permite que apenas porções da página sejam requisitadas (confira o jquery-pajax para isto)

Slide 76

Slide 76 text

Turbolinks funciona bem   em websites simples (como o   desta conferência) e forma uma   boa dupla com UJS

Slide 77

Slide 77 text

Evolua você também

Slide 78

Slide 78 text

Rails é framework full-stack para criar aplicações, mas você provavelmente irá precisar de mais

Slide 79

Slide 79 text

Organização de código JavaScript e modularização Componentes front-end Bibliotecas e frameworks   front-end ♥ ♥ ♥

Slide 80

Slide 80 text

Modularização de código   JavaScript

Slide 81

Slide 81 text

O JavaScript não possui sistema de módulos fazendo com que diferentes scripts compartilhem o mesmo escopo

Slide 82

Slide 82 text

ﬁle1.js ﬁle2.js Sem a criação de um escopo, as variáveis ficam expostas var myVar = "bla"; alert(myVar);

Slide 83

Slide 83 text

(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

Slide 84

Slide 84 text

Não polua o escopo global, os demais desenvolvedores agradecem ♥

Slide 85

Slide 85 text

Com a criação de escopos com uma única responsabilidade, surge a necessidade de acessar dependências

Slide 86

Slide 86 text

App.modules.mediabox = (function () { var data = {}; ! return { data: data, parser: // ... } })(); Namespaces mediabox.js (namespace)

Slide 87

Slide 87 text

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)

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Declaração de dependências Path do arquivo como identificador do módulo Assíncrono por natureza e adotado  por jQuery e outras bibliotecas ♥ ♥ ♥

Slide 90

Slide 90 text

[...] it makes code easier to understand for others and yourself re-visting your own code - Chris Coyier

Slide 91

Slide 91 text

ES6 Modules e CommonJS Modules não possuem suporte adequado   ao Asset Pipeline (alguém se habilita?)

Slide 92

Slide 92 text

Componentes front-end

Slide 93

Slide 93 text

Um componente encapsula elementos HTML, CSS e comportamento

Slide 94

Slide 94 text

Template,   CSS e JS Template,   CSS e JS

Slide 95

Slide 95 text

Web Components é a salvação do front-end, use agora!! - algum desavisado

Slide 96

Slide 96 text

Web Componentes com Polymer é ainda um experimento e não deve ser utilizado em produção

Slide 97

Slide 97 text

Mas temos muito o que aprender sobre JavaScript com os Web Components ♥

Slide 98

Slide 98 text

1. Instanciação de   Componentes

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

Componentes podem ser removidos ou adicionados necessitando manutenção no JavaScript

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Web Components, Angular.js e Dojo usam o HTML como referência para instanciar componentes

Slide 103

Slide 103 text

Deﬁnindo   componentes com Piecemaker https://github.com/jcemer/  piecemaker

Slide 104

Slide 104 text

Definição de um componente

Mediabox content

index.html

Slide 105

Slide 105 text

define(function () { function Mediabox(container) { // ... } return Mediabox; }); Chamada do construtor  com o container mediabox.js

Slide 106

Slide 106 text

2. Data-binding

Slide 107

Slide 107 text

Gerenciar dados no front-end não é tarefa simples

Slide 108

Slide 108 text

Trabalhar com models que emitem eventos é trabalhoso e passível a erros (não entenda mal, Backbone.js) ♥

Slide 109

Slide 109 text

Valor: R$50,00 Quantidade: 1 Model   quantidade: 1 script.js

Slide 110

Slide 110 text

Valor: R$50,00 Quantidade: 3 Model   quantidade: 1 script.js

Slide 111

Slide 111 text

Valor: R$150,00 Quantidade: 3 Model   quantidade: 3 script.js

Slide 112

Slide 112 text

Valor: R$500,00 Quantidade: 10 Model   quantidade: 10 script.js

Slide 113

Slide 113 text

Data-binding no  Angular

Slide 114

Slide 114 text

110

Valor: R$ {{price()}}

index.html function Basket($scope) { $scope.price = function () { return $scope.quantity * 50; }; } main.js

Slide 115

Slide 115 text

Frameworks como Angular.js, React, Ember e Knockout.js implementam data-binding

Slide 116

Slide 116 text

A EcmaScript e a especificação do HTML5 estão evoluindo para melhor endereçar data-binding

Slide 117

Slide 117 text

3. Frameworks

Slide 118

Slide 118 text

Componentes no Angular http://jsﬁddle.net/api/post/library/pure/

Slide 119

Slide 119 text

Date: {{ '2012-‐04-‐01' | date:'fullDate' }} Hi!

Tags são mapeadas para templates e controllers

Slide 120

Slide 120 text

A partir daqui, o HTML não é válido e sem um pouco de cuidado...

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

Retornar do servidor uma página em branco ou inválida é um desperdício

Slide 124

Slide 124 text

Considere utilizar um framework JavaScript quando estiver escrevendo uma Rich Internet Application ♥

Slide 125

Slide 125 text

Sempre aprenda a fundo antes tudo o que for utilizar - bom senso

Slide 126

Slide 126 text

Dicas finais para você que quer fazer código ainda melhor (e está acordado) [

Slide 127

Slide 127 text

Estude sobre execução de código assíncrono com callbacks e promises https://speakerdeck.com/jcemer/controle-de- fluxo-com-execucao-assincrona 1.

Slide 128

Slide 128 text

Aceite que o JavaScript do front-end da sua aplicação pode dar tanto ou mais trabalho que o back-end 2.

Slide 129

Slide 129 text

]Obrigado   a todos criem produtos incríveis @jcemer