TDC 2015 - Rails & Javascript: faça isso direito

Rails & Javascript
Faça isso direito!
Dicas de como organizar o
javascript em apps Rails não SPA

$ whoami
• Cezinha Anjos.
• Comecei programando num
Apple II e gravando
programas em ﬁtas cassetes
há 26 anos atrás.
• Atualmente focado em Ruby
on Rails e Javascript.
• Gosto de OO, Clean Code,
Design Patterns, BDD e Lean.
• Diretor da ASSEINFO.

• Estamos localizados em Tijucas - SC
- 40 km de Florianópolis.
• Somos em torno de 20 pessoas.
• Quase nenhuma verticalização
hierárquica. Quem tem chefe é índio!
• Desde 2001 no mercado de
automação comercial.
• Trabalhamos com ERP.
• Foco em qualidade.
• Já nascemos agile, mesmo antes de
conhecer o manifesto ágil.
3

História desta palestra
Hands on de 9 horas

História desta palestra
Hands on de 9 horas
Talk de 50 minutos

Partiremos de um app
tradicional Rails

Evoluindo o código
usando cada dica

Use o Gemﬁle somente
para dependências do
backend
01
(sempre que possível)

# Arquivo: Gemfile
source 'https://rubygems.org'

gem 'rails', '4.2.0'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
Remover gems do front-end

Use o Bower para as
dependências do
front-end
02

$ npm install -g bower
Instalação

Conﬁguração
$ bower init
# enter, enter, enter, enter…
# até que o arquivo bower.json
# seja gerado

Conﬁguração
// Arquivo: bower.json
{
name: ‘rails-and-js’,
version: '0.0.0',
authors: [
'Cezinha <cesar@asseinfo.com.br>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}

Conﬁguração
$ vim .bowerrc
{
"directory": "vendor/assets/bower"
}
Caminho onde os
pacotes serão baixados
e a asset pipeline
poderá utilizar.

Instalando dependências
$ bower install jquery#2.0.3 —-save
$ bower install jquery-ujs#1.0.3 --save
# Arquivo: Gemfile
...
gem 'jquery-rails'

Instalando dependências
// arquivo: bower.json

{
"name": "rails-and-js",
"version": "0.0.0",
"authors": [
"Cezinha <cesar@asseinfo.com.br>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "2.0.3",
"jquery-ujs": "1.0.3"
}
}

Ajustando o manifesto
// arquivo: application.js

//= require jquery
//= require_tree .
//= require jquery_ujs//= require jquery-ujs

Você pode instalar
coisas como:
• JQuery;
• JQuery UI;
• Twitter Bootstrap;
• Font Awesome;
• Angular JS;
• Backbone;
• React JS;
Qualquer projeto
que
esteja
no
github
(ou
sim
ilar)

Crie uma pasta para cada
view e pelo menos um
arquivo para cada action
03

$ mkdir app/assets/javascripts/views
$ mkdir app/assets/javascripts/views/people
Uma pasta por view
Pelo menos um
arquivo por action

A separação dos scripts
ajudará nas futuras
manutenções

Aceite que todos os seus
javascripts acabarão em
um único arquivo
04
(nem sempre isso é verdade ;-)

Visão do programador
4 arquivos separados

// arquivo: app/assets/javascripts/views/people/index.js

alert("Running index.js");
// arquivo: app/assets/javascripts/views/people/edit.js

alert("Running edit.js");
// arquivo: app/assets/javascripts/views/people/show.js

alert("Running show.js");
// arquivo: app/assets/javascripts/views/people/new.js

alert("Running new.js");

http://localhost:3000/
people/new

people/new
1
2
3
4

people/new
1
2
3
4
W
TF?!

// na visão do sprockets
// sem "uglificação"

alert("Running edit.js");
alert("Running new.js");
alert("Running show.js");
Visão do sprockets

Você não tem como separar ﬁsicamente
os scripts sem aumentar o número de
requisições.
Minha opinião: não separe!

Instalação
$ bower install modulejs#1.5.0 --save


//= require jquery
//= require jquery-ujs
//= require_tree .//= require modulejs
//= require_tree .

modulejs.define("people.index", function() {
return function() { alert("Running index.js”); };
});
// Resultado do console:
function () { alert("Running index.js"); }
1
2 3
4
var mymodule = modulejs.require("people.index");
console.log(mymodule);
mymodule();

Estabeleça um Single
Entry Point
06

Deﬁna um único ponto
para início de
execução de todo o
seu javascript.

O ﬂuxo de execução
tende a ﬁcar mais
claro.

Carregamento
da página
Executa JS de
terceiros
Dispatcher
(boot.js)
people/index.js
foo.js
people/new.js people/edit.js people/show.js
bar.js
x.js y.js
Fluxo de
execução

// arquivo app/assets/javascripts/boot.js

(function() {
"use strict";

$(document).ready(function() {
// Aqui deve ser o seu primeiro
// ponto de execução de javascript
});
})()


//= require jquery
//= require modulejs
//= require_tree .
//= require boot
//= require_tree ./views


(function() {
"use strict";

});
})()
//
return function() { alert("Running index.js") };
});
mymodule();


(function() {
"use strict";

});
})()
//
return function() { alert("Running index.js") };
});
mymodule();
mymodule();

Use o Dispatcher para
executar o JS de cada
view
07


(function() {
"use strict";

mymodule();
});
})()


(function() {
"use strict";

mymodule();
});
})()
A action está hard coded neste ponto!

Desaﬁo: como sinalizar
para o JS qual a action
que estamos executando?

Através do HTML gerado
pelo servidor.

<body <%= dispatcher_tag %>>

<body <%= dispatcher_tag %>>
Criaremos um helper para “batizar" a tag body

# arquivo: app/helpers/application_helper.rb

module ApplicationHelper
def dispatcher_tag
controller_name = controller.class.name.underscore
controller_name.gsub!(///, "_")
controller_name.gsub!(/_controller$/, "")

div_tag = %(dispatcher="#{controller_name}.#{controller.action_name}")

div_tag.html_safe
end
end


(function() {
"use strict";

mymodule();
});
})()
A action está hard coded neste ponto!


(function() {
"use strict";

mymodule();
});
})()
var dispatch_to = $("body").attr("dispatcher");


(function() {
"use strict";

var mymodule = modulejs.require(dispatch_to);
mymodule();
});
})()
var dispatch_to = $("body").attr("dispatcher");

Faça seus controllers
responderem JSON
08

# arquivo: app/controllers/people_controller.rb

...
def index
@people = Person.all

respond_to do |format|
format.html
format.json { render json: @people.to_json }
end
end
...

respond_with foi removido
do Rails na versão 4.2.

IMHO respond_to deixa
mais claro a intenção do
programador.

ActiveModel::Serializers
Existe coisa melhor do
que to_json
09

class PostSerializer < ActiveModel::Serializer
attributes :title, :body
has_many :comments
end
class CommentSerializer < ActiveModel::Serializer
attributes :name, :body
belongs_to :post
end

[
{
"title":"Obama mentiu sobre operação que matou Bin Laden",
"body":"O jornalista Seymour Hersh, que recebeu o Prêmio Pulitzer…”,
"comments":
[
{
"name":"Fulano",
"body":"Eu não acredito!"
}
]
}
]

js-routes: Named
Routes do Rails no JS
10

Rails.application.routes.draw do
resources :people
end
people GET /people(.:format) people#index
new_person GET /people/new(.:format) people#new
edit_person GET /people/:id/edit(.:format) people#edit
person GET /people/:id(.:format) people#show
$ bin/rake routes
✔
✘

# Arquivo: Gemfile

gem 'sqlite3'
gem 'coffee-rails', '~> 4.1.0’
gem 'jquery-rails'
gem 'js-routes'

//= require boot
//= require js-routes
//= require boot

//= require jquery

Routes.people_path()
"/people.json"

Routes.new_person_path()
"/people/new.json"

Routes.edit_person_path(1)
"/people/1/edit.json"

Routes.person_path(1)
"/people/1.json"

var promise;

promise = $.get("/people.json");
✘
promise = $.get(Routes.people_path());
✔

ejs: fazendo o sprockets
servir templates
11

# Arquivo: Gemfile

gem 'sqlite3'
gem 'coffee-rails', '~> 4.1.0’
gem 'jquery-rails'
gem 'js-routes'
gem 'ejs'

//= require boot
//= require_tree ./templates
//= require boot

//= require jquery
//= require js-routes

Name:
<%= name %>

Phone:
<%= phone %>
Criando um template

(function() {
"use strict"
var html = JST["templates/people/example"]({
name: "The name",
phone: "(48) 1234-5678"
});
$("div#person").html(html);
}())
Consumindo um template
Name:
<%= name %>

Phone:
<%= phone %>

(function() {
"use strict"
name: "The name",
phone: "(48) 1234-5678"
});
}())
Name:
<%= name %>

Phone:
<%= phone %>
Array de
templates
compilados

(function() {
"use strict"
name: "The name",
phone: "(48) 1234-5678"
});
}())
Name:
<%= name %>

Phone:
<%= phone %>
A chave do array
é o path do
template

(function() {
"use strict"
name: "The name",
phone: "(48) 1234-5678"
});
}())
Name:
<%= name %>

Phone:
<%= phone %>
O conteúdo do
array é uma função

(function() {
"use strict"
name: "The name",
phone: "(48) 1234-5678"
});
}())
Name:
<%= name %>

Phone:
<%= phone %>
Objeto literal com
parâmetros do
template

(function() {
"use strict"
name: "The name",
phone: "(48) 1234-5678"
});
}())
Name:
<%= name %>

Phone:
<%= phone %>
Use o html resul-
tante como quiser

IIFE
Immediately-invoked
function expression
(expressão de função invocada
imediatamente)

IIFE pode ser usada para
isolar escopos

(function() {
}())
Immediately-invoked function expression

(function() {
}())
Expressão

(function() {
}())
Função

(function() {
}())
Execução imediata

var foo = "value outside IIFE";

(function() {
var foo = "value inside IIFE";
console.log(foo);
}())

console.log(foo);
// Resultado:
// value inside IIFE
// value outside IIFE

Lembre-se que todos os
seus javascripts acabarão
em um único arquivo.

Sem escopos os
resultados da "ugliﬁcação"
são imprevisíveis.

(function () {
"use strict";
// Introduzido no ECMA 5.
// Converte enganos em erros.
// Simplifica o uso de variáveis.
// Simplifica "eval" e argumentos.
// Ajuda a escrever JS mais seguro.
//
// Referência: Mozilla Developer Network
}())

(function () {
foo = "this should be a private content";
}())
Falta do "var" fará de "foo" global
Falta do “use strict" fará não gerar erro

(function () {
}())
"use strict";
ReferenceError: Can’t find variable foo

(function () {
}())
"use strict";
var foo = "this should be a private content";

Fuja do callback hell
use promises
14

var promise;

promise = $.get("/people.json");

promise.done(function(data) {
alert("done");
alert(JSON.stringify(data));
});

promise.fail(function(error) {
alert("fail");
alert("status text:" + error.statusText);
});

promise.always(function() {
alert("always");
});

So long, and thanks for all
the ﬁsh!
@cezinha_anjos
cezinha.info
asseinfo.com.br
111

TDC 2015 - Rails & Javascript: faça isso direito

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a TDC 2015 - Rails & Javascript: faça isso direito

Semelhante a TDC 2015 - Rails & Javascript: faça isso direito (20)

TDC 2015 - Rails & Javascript: faça isso direito