SlideShare uma empresa Scribd logo
Globalcode	
  – Open4education
Interfaces  ricas  com  Rails  e  React.JS
Rodrigo  Urubatan
@urubatan
Globalcode	
  – Open4education
Quem?
Programador  desde  1997
Trabalha  com  Ruby  na  Brightwire
Escreveu  "Ruby  On  Rails:  Desenvolvimento  fácil  e  Rápido  de  
aplicações  web”
Já  trabalhou  com  diversas  linguagens  (C,  C++,  Delphi,  PHP,  
ASP,  ColdFusion,  VisualBasic,  C#,  Python,  Ruby,  Assembly,  
…)
Apaixonado  por  Agile  e  atualmente  por  trabalho  remoto
Patinador,  Corredor,  Ciclista  e  agora  resolveu  aprender  Karate  
:D
Pai  de  um  Guri  de  6  anos
http://urubatan.com.br -­ Anda  meio  abandonado  mas  vai  voltar
http://sobrecodigo.com -­ idem
Globalcode	
  – Open4education
Objetivo
Usar  o  Rails  como  backend  da  aplicação
Toda  a  interação  com  o  usuário  será  implementada  
no  cliente
Validações  e  regras  de  negócio  serão  
implementadas  no  servidor
(sim,  eu  poderia  usar  Sinatra  mas  sou  preguiçoso)
Globalcode	
  – Open4education
Cuidado!
Nesta  palestra  vamos  falar  de  uma  SPA  (Single  
Page  Application)
Isto  tem  vantagens  e  desvantagens
Melhora  muito  a  interação  com  o  usuário  sem  
duplicação  de  código,  já  que  o  código  de  
renderização  fica  todo  no  JS
Piora  muito  a  indexação  da  sua  aplicação  por  
buscadores  (adeus  SEO  -­ ou  não…)
Globalcode	
  – Open4education
O  que,  quando,  onde  e  por  
que?
Muitas  aplicações  hoje  em  dia  exigem  um  nível  alto  
de  interação  com  o  usuário
Implementar  isto  usando  bibliotecas  mais  baixo  
nível  é  muito  fácil  de  causar  uma  grande  
confusão  do  código  (PHP  alguem?)
Componentização  evita  duplicação  de  código  e  
facilita  a  organização
Globalcode	
  – Open4education
Por que rails?
Eu gosto :P
Globalcode	
  – Open4education
Por que React.js?
JSX!!!!!!
Unir o  código  Javascript  e  o  Código  HTML  de  
cada  componente  
Facilidade  de  manutenção  
Facilidade  de  organização  
Mantem  o  CSS  separado  de  propósito,  CSS  é  
mais  especifico  de  aplicação  do  que  
componente  (pode  se  usar  imports  SASS  se  
necessário)  
Globalcode	
  – Open4education
Por que React.js?
Virtual  DOM
Fácil  de  testar  em  uma  pequena  parte  de  uma  tela  
Renderização  reativa  
Componentes  stateful  
Comunicação  entre  componentes  via  propriedades  
Globalcode	
  – Open4education
Mãos  a  obra!  (O  blog  mais
feio do  mundo!)
Globalcode	
  – Open4education
Criando  a  aplicação
Uma  aplicação  padrão  Rails  (rails  new  …)
Gemfile  updates
gem 'backbone-on-rails'
gem 'react-rails', github: 'reactjs/react-rails', ref:
'master'
Environment  update  (development.rb  para  
começar)
config.react.variant = :development
config.react.addons = true # defaults to false
config.react.server_renderer =
React::ServerRendering::SprocketsRenderer
bundle  install
rails  g  react:install
Globalcode	
  – Open4education
Componentes
Componentes  javascript  vão  ficar  em  
app/assets/javascript/components
Backbone.js  vai  facilitar  a  comunicação  
cliente/servidor
arquivos  .js.jsx  tem  uma  facilidade  extra,  são  
compilados  pelo  react-­rails  via  asset  pipeline  e  
permitem  adicionar  HTML  inline  
Globalcode	
  – Open4education
Cadastrando  um  Post
rails  g  scaffold  post  title:string slug:text content:text
Apagar todas as  views  do  post  exceto index.html.erb
Globalcode	
  – Open4education
Alterações  no  controller
Fazer  todos  os  métodos  retornarem  json
Remover  edit,  new  e  show
Apagar  todo  o  código  de  index.html.erb  e  
mudar  para:
<%=  react_component('Blog',  {collection:  
@posts,  item:  @post})  %>
Globalcode	
  – Open4education
Agora  mãos  a  obra
já  temos  uma  “API"  em  Rails,  poderíamos  ter  o  
código  em  Sinatra  que  seria  mais  leve,  mas  eu  
gosto  do  asset  pipeline  e  assim  fica  mais  fácil  para  
um  iniciante
Falta  criar  os  componentes  backbone  para  acessar  
o  backend
Criar  os  componentes  react  para  a  UI
Globalcode	
  – Open4education
backbone.js
app/assets/javascripts/collections/posts.js
var Posts  =  Backbone.Collection.extend({
model:  Post,
url:  '/posts'
});;
app/assets/jaascripts/models/post.js
var Post  =  Backbone.Model.extend({
});;
Globalcode	
  – Open4education
blog.js.jsx
var Blog  =  React.createClass({
…..
render:  function  ()  {
if(this.state.editing)   {
return  (<div>
<div  id="blogList">
<PostList collection={this.state.collection}   viewModel={this.viewModel}  
newModel={this.newModel}/>
</div>
<div  id="blogPost">
<PostForm collection={this.state.collection}   model={this.state.model}  
viewModel={this.viewModel}/>
</div>
</div>);;
}else{
return  (<div>
<div  id="blogList">
<PostList collection={this.state.collection}   viewModel={this.viewModel}  
newModel={this.newModel}/>
</div>
<div  id="blogPost">
<PostView model={this.state.model}   editModel={this.editModel}/>
</div>
</div>);;
}
}
});;
Globalcode	
  – Open4education
post_list.js.jsx
var PostList =  React.createClass({
….
render:  function  ()  {
var users  =  this.props.collection.map(function  (model)  {
var viewModel =  function  ()  {
this.props.viewModel(model);;
};;
return  (
<tr key={model.get("id")}>
<td><a  href="#"  onClick={viewModel.bind(this)}>{model.get("title")}</a></td>
<td>{new  Date(model.get("created_at")).toDateString()}</td>
</tr>
);;
}.bind(this));;
return  (
<div>
<table  className="post-­list">
<thead>
<tr>
<th>Post</th>
<th>Published</th>
</tr>
</thead>
<tbody>
{users}
</tbody>
</table>
<hr/>
<a  href="#"  onClick={this.props.newModel}>Create  post</a>
</div>
);;
}
});;
Globalcode	
  – Open4education
post_view.js.jsx
var PostView =  React.createClass({
editModel:  function  ()  {
this.props.editModel(this.props.model);;
},
render:  function  ()  {
var innerLines =  null;;
if(this.props.model.get("content"))   {
innerLines=_.map(this.props.model.get("content").split("n"),   function  (txt,  idx)  {
return  <p  key={idx}>{txt}</p>
});;
}
return  (
<div  className="blog-­post">
<h1><a  
href={this.props.model.get("slug")}>{this.props.model.get("title")}</a></h1>
<div  className="post-­body">
{innerLines}
</div>
<hr/>
<a  href="#"  onClick={this.editModel}>Edit  post</a>
</div>
);;
}
});;
Globalcode	
  – Open4education
post_form.js.jsx
var PostForm =  React.createClass({
saveModel:  function  ()  {
if  (this.props.model.get("id"))  {
this.props.model.save();;
}  else  {
this.props.collection.create(this.props.model);;
}
this.props.viewModel(this.props.model)
},
render:  function  ()  {
return  (
<div  className="blog-­post">
<InputWithLabel model={this.props.model}  label="Title"  name="title"  type="text"/>
<InputWithLabel model={this.props.model}  label="Body"  name="content"  type="textarea"/>
<div  className="form-­field">
<button  onClick={this.saveModel}>Save</button>
</div>
</div>
);;
}
});;
Globalcode	
  – Open4education
input_with_label.js.jsx
var InputWithLabel = React.createClass({
handleChange: function(event) {
this.props.model.set(this.props.name,event.target.value)
},
render: function() {
return <div className="form-field">
<label htmlFor={this.props.name}>{this.props.label}</label>
<div>
<input id={this.props.name} type={this.props.type} name={this.props.name} ref="input"
onChange={this.handleChange} value={this.props.model.get(this.props.name)}/>
</div>
</div>;
}
});
Globalcode	
  – Open4education
Globalcode	
  – Open4education
indexação?  performance?
renderização  no  servidor:
<%=  react_component('Layout',  {collection:  
@users},  {prerender:  true})  %>
components.js
//=  require  underscore
//=  require  backbone
//=  require_tree  ./models
//=  require_tree  ./collections
//=  require_tree  ./components
Globalcode	
  – Open4education
Mas  é  só  isto?
React-­router
Backbone.Router
Flux  -­ arquitetura  JS  usada  pelo  Facebook
Globalcode	
  – Open4education

Mais conteúdo relacionado

Mais procurados

Oficina groovy grails - infoway
Oficina  groovy grails - infowayOficina  groovy grails - infoway
Oficina groovy grails - infoway
Lucas Aquiles
 
Grails: O Java em Alta Produtividade
Grails: O Java em Alta ProdutividadeGrails: O Java em Alta Produtividade
Grails: O Java em Alta Produtividade
Cleórbete Santos
 
Groovy grails
Groovy grailsGroovy grails
Groovy grails
Lucas Aquiles
 
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
Cezar Souza
 
Começando com Zend Framework 2
Começando com Zend Framework 2Começando com Zend Framework 2
Começando com Zend Framework 2
Cezar Souza
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
Eduardo Mendes
 
Angular js
Angular jsAngular js
Angular js
Bruno Catão
 
Servlets e jsp
Servlets e jspServlets e jsp
Servlets e jsp
Alan Oliveira
 
Zend Framework 1.11
Zend Framework 1.11Zend Framework 1.11
Zend Framework 1.11
Cezar Souza
 
Desenvolvimento para a Web com CakePHP
Desenvolvimento para a Web com CakePHPDesenvolvimento para a Web com CakePHP
Desenvolvimento para a Web com CakePHP
Marcelo Andrade
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Emerson Macedo
 
Java Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuraçãoJava Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuração
Eduardo Mendes
 
Introdução ao vraptor
Introdução ao vraptorIntrodução ao vraptor
Introdução ao vraptor
Vitor Zachi Junior
 
Aula Ruby
Aula RubyAula Ruby
Mini curso: Ionic Framework
Mini curso: Ionic FrameworkMini curso: Ionic Framework
Mini curso: Ionic Framework
Loiane Groner
 
Desenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e ServletsDesenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e Servlets
Igo Coelho
 
Grails
GrailsGrails
Grails
Alex Guido
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
Jefferson Mariano de Souza
 
Rapida apresentacao sobre o Grails
Rapida apresentacao sobre o GrailsRapida apresentacao sobre o Grails
Rapida apresentacao sobre o Grails
Diego Cavalcanti
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
Julian Cesar
 

Mais procurados (20)

Oficina groovy grails - infoway
Oficina  groovy grails - infowayOficina  groovy grails - infoway
Oficina groovy grails - infoway
 
Grails: O Java em Alta Produtividade
Grails: O Java em Alta ProdutividadeGrails: O Java em Alta Produtividade
Grails: O Java em Alta Produtividade
 
Groovy grails
Groovy grailsGroovy grails
Groovy grails
 
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
ZF2 básico : Desenvolvendo um Blog com o Zend Framework 2
 
Começando com Zend Framework 2
Começando com Zend Framework 2Começando com Zend Framework 2
Começando com Zend Framework 2
 
Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1Java Web 3 - Servlets e JSP 1
Java Web 3 - Servlets e JSP 1
 
Angular js
Angular jsAngular js
Angular js
 
Servlets e jsp
Servlets e jspServlets e jsp
Servlets e jsp
 
Zend Framework 1.11
Zend Framework 1.11Zend Framework 1.11
Zend Framework 1.11
 
Desenvolvimento para a Web com CakePHP
Desenvolvimento para a Web com CakePHPDesenvolvimento para a Web com CakePHP
Desenvolvimento para a Web com CakePHP
 
Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010Beyond Ruby with NodeJS - RubyConf Brasil 2010
Beyond Ruby with NodeJS - RubyConf Brasil 2010
 
Java Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuraçãoJava Web 2 - Ferramentas e configuração
Java Web 2 - Ferramentas e configuração
 
Introdução ao vraptor
Introdução ao vraptorIntrodução ao vraptor
Introdução ao vraptor
 
Aula Ruby
Aula RubyAula Ruby
Aula Ruby
 
Mini curso: Ionic Framework
Mini curso: Ionic FrameworkMini curso: Ionic Framework
Mini curso: Ionic Framework
 
Desenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e ServletsDesenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e Servlets
 
Grails
GrailsGrails
Grails
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Rapida apresentacao sobre o Grails
Rapida apresentacao sobre o GrailsRapida apresentacao sobre o Grails
Rapida apresentacao sobre o Grails
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 

Semelhante a TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS

TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015  - Interfaces Ricas com Rails e React.JSTDC São Paulo 2015  - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
Rodrigo Urubatan
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
Dr. Spock
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
Dr. Spock
 
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Sergio Lima
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
Giovanni Bassi
 
React nos Trilhos
React nos TrilhosReact nos Trilhos
React nos Trilhos
John Carneiro
 
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesJSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
Eder Magalhães
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
Denis Velrino
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
Pedro Sousa
 
JSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com JavaJSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com Java
Dr. Spock
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
José Barbosa
 
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.jsDesenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Gustavo Castro
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
Rodrigo Valerio
 
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPRTecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
Alessandro Dias
 
Intodução ao React
Intodução ao ReactIntodução ao React
Intodução ao React
Dev PP
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
Joel Rodrigues
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma Fintech
Rafael Gomes
 
Lampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 PalestraLampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 Palestra
David O'Keefe
 
Lab
LabLab
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 

Semelhante a TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS (20)

TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015  - Interfaces Ricas com Rails e React.JSTDC São Paulo 2015  - Interfaces Ricas com Rails e React.JS
TDC São Paulo 2015 - Interfaces Ricas com Rails e React.JS
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
 
React nos Trilhos
React nos TrilhosReact nos Trilhos
React nos Trilhos
 
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesJSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
 
Workshop react + adonis.js
Workshop react + adonis.jsWorkshop react + adonis.js
Workshop react + adonis.js
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
JSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com JavaJSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com Java
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.jsDesenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
Desenvolvimento de aplicações mobile com bootstrap, cordova e vue.js
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPRTecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
Tecnologias para desenvolvimento ágil de aplicações Web-Isemanatsi_UTFPR
 
Intodução ao React
Intodução ao ReactIntodução ao React
Intodução ao React
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 
Dockerizando aplicações em uma Fintech
Dockerizando aplicações em uma FintechDockerizando aplicações em uma Fintech
Dockerizando aplicações em uma Fintech
 
Lampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 PalestraLampada Php Conference Brasil 2007 Palestra
Lampada Php Conference Brasil 2007 Palestra
 
Lab
LabLab
Lab
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 

Mais de Rodrigo Urubatan

Ruby code smells
Ruby code smellsRuby code smells
Ruby code smells
Rodrigo Urubatan
 
Data science in ruby is it possible? is it fast? should we use it?
Data science in ruby is it possible? is it fast? should we use it?Data science in ruby is it possible? is it fast? should we use it?
Data science in ruby is it possible? is it fast? should we use it?
Rodrigo Urubatan
 
Data science in ruby, is it possible? is it fast? should we use it?
Data science in ruby, is it possible? is it fast? should we use it?Data science in ruby, is it possible? is it fast? should we use it?
Data science in ruby, is it possible? is it fast? should we use it?
Rodrigo Urubatan
 
2018 the conf put git to work - increase the quality of your rails project...
2018 the conf   put git to work -  increase the quality of your rails project...2018 the conf   put git to work -  increase the quality of your rails project...
2018 the conf put git to work - increase the quality of your rails project...
Rodrigo Urubatan
 
2018 RubyHACK: put git to work - increase the quality of your rails project...
2018 RubyHACK:  put git to work -  increase the quality of your rails project...2018 RubyHACK:  put git to work -  increase the quality of your rails project...
2018 RubyHACK: put git to work - increase the quality of your rails project...
Rodrigo Urubatan
 
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
Rodrigo Urubatan
 
Your first game with unity3d framework
Your first game with unity3d frameworkYour first game with unity3d framework
Your first game with unity3d framework
Rodrigo Urubatan
 
Tdc Floripa 2017 - 8 falácias da programação distribuída
Tdc Floripa 2017 -  8 falácias da programação distribuídaTdc Floripa 2017 -  8 falácias da programação distribuída
Tdc Floripa 2017 - 8 falácias da programação distribuída
Rodrigo Urubatan
 
Rubyconf2016 - Solving communication problems in distributed teams with BDD
Rubyconf2016 - Solving communication problems in distributed teams with BDDRubyconf2016 - Solving communication problems in distributed teams with BDD
Rubyconf2016 - Solving communication problems in distributed teams with BDD
Rodrigo Urubatan
 
resolvendo problemas de comunicação em equipes distribuídas com bdd
resolvendo problemas de comunicação em equipes distribuídas com bddresolvendo problemas de comunicação em equipes distribuídas com bdd
resolvendo problemas de comunicação em equipes distribuídas com bdd
Rodrigo Urubatan
 
vantagens e desvantagens de trabalhar remoto
vantagens e desvantagens de trabalhar remotovantagens e desvantagens de trabalhar remoto
vantagens e desvantagens de trabalhar remoto
Rodrigo Urubatan
 
Using BDD to Solve communication problems
Using BDD to Solve communication problemsUsing BDD to Solve communication problems
Using BDD to Solve communication problems
Rodrigo Urubatan
 
Full Text Search com Solr, MySQL Full text e PostgreSQL Full Text
Full Text Search com Solr, MySQL Full text e PostgreSQL Full TextFull Text Search com Solr, MySQL Full text e PostgreSQL Full Text
Full Text Search com Solr, MySQL Full text e PostgreSQL Full Text
Rodrigo Urubatan
 
Ruby para programadores java
Ruby para programadores javaRuby para programadores java
Ruby para programadores java
Rodrigo Urubatan
 
Treinamento html5, css e java script apresentado na HP
Treinamento html5, css e java script apresentado na HPTreinamento html5, css e java script apresentado na HP
Treinamento html5, css e java script apresentado na HP
Rodrigo Urubatan
 
Ruby on rails impressione a você mesmo, seu chefe e seu cliente
Ruby on rails  impressione a você mesmo, seu chefe e seu clienteRuby on rails  impressione a você mesmo, seu chefe e seu cliente
Ruby on rails impressione a você mesmo, seu chefe e seu cliente
Rodrigo Urubatan
 
Mini curso rails 3
Mini curso rails 3Mini curso rails 3
Mini curso rails 3
Rodrigo Urubatan
 
Aplicações Hibridas com Phonegap e HTML5
Aplicações Hibridas com Phonegap e HTML5Aplicações Hibridas com Phonegap e HTML5
Aplicações Hibridas com Phonegap e HTML5
Rodrigo Urubatan
 
Git presentation to some coworkers some time ago
Git presentation to some coworkers some time agoGit presentation to some coworkers some time ago
Git presentation to some coworkers some time ago
Rodrigo Urubatan
 
Intrudução ao Behavior Driven Development (BDD) com Ruby on Rails
Intrudução ao Behavior Driven Development (BDD) com Ruby on RailsIntrudução ao Behavior Driven Development (BDD) com Ruby on Rails
Intrudução ao Behavior Driven Development (BDD) com Ruby on Rails
Rodrigo Urubatan
 

Mais de Rodrigo Urubatan (20)

Ruby code smells
Ruby code smellsRuby code smells
Ruby code smells
 
Data science in ruby is it possible? is it fast? should we use it?
Data science in ruby is it possible? is it fast? should we use it?Data science in ruby is it possible? is it fast? should we use it?
Data science in ruby is it possible? is it fast? should we use it?
 
Data science in ruby, is it possible? is it fast? should we use it?
Data science in ruby, is it possible? is it fast? should we use it?Data science in ruby, is it possible? is it fast? should we use it?
Data science in ruby, is it possible? is it fast? should we use it?
 
2018 the conf put git to work - increase the quality of your rails project...
2018 the conf   put git to work -  increase the quality of your rails project...2018 the conf   put git to work -  increase the quality of your rails project...
2018 the conf put git to work - increase the quality of your rails project...
 
2018 RubyHACK: put git to work - increase the quality of your rails project...
2018 RubyHACK:  put git to work -  increase the quality of your rails project...2018 RubyHACK:  put git to work -  increase the quality of your rails project...
2018 RubyHACK: put git to work - increase the quality of your rails project...
 
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
TDC2017 - POA - Aprendendo a usar Xamarin para desenvolver aplicações moveis ...
 
Your first game with unity3d framework
Your first game with unity3d frameworkYour first game with unity3d framework
Your first game with unity3d framework
 
Tdc Floripa 2017 - 8 falácias da programação distribuída
Tdc Floripa 2017 -  8 falácias da programação distribuídaTdc Floripa 2017 -  8 falácias da programação distribuída
Tdc Floripa 2017 - 8 falácias da programação distribuída
 
Rubyconf2016 - Solving communication problems in distributed teams with BDD
Rubyconf2016 - Solving communication problems in distributed teams with BDDRubyconf2016 - Solving communication problems in distributed teams with BDD
Rubyconf2016 - Solving communication problems in distributed teams with BDD
 
resolvendo problemas de comunicação em equipes distribuídas com bdd
resolvendo problemas de comunicação em equipes distribuídas com bddresolvendo problemas de comunicação em equipes distribuídas com bdd
resolvendo problemas de comunicação em equipes distribuídas com bdd
 
vantagens e desvantagens de trabalhar remoto
vantagens e desvantagens de trabalhar remotovantagens e desvantagens de trabalhar remoto
vantagens e desvantagens de trabalhar remoto
 
Using BDD to Solve communication problems
Using BDD to Solve communication problemsUsing BDD to Solve communication problems
Using BDD to Solve communication problems
 
Full Text Search com Solr, MySQL Full text e PostgreSQL Full Text
Full Text Search com Solr, MySQL Full text e PostgreSQL Full TextFull Text Search com Solr, MySQL Full text e PostgreSQL Full Text
Full Text Search com Solr, MySQL Full text e PostgreSQL Full Text
 
Ruby para programadores java
Ruby para programadores javaRuby para programadores java
Ruby para programadores java
 
Treinamento html5, css e java script apresentado na HP
Treinamento html5, css e java script apresentado na HPTreinamento html5, css e java script apresentado na HP
Treinamento html5, css e java script apresentado na HP
 
Ruby on rails impressione a você mesmo, seu chefe e seu cliente
Ruby on rails  impressione a você mesmo, seu chefe e seu clienteRuby on rails  impressione a você mesmo, seu chefe e seu cliente
Ruby on rails impressione a você mesmo, seu chefe e seu cliente
 
Mini curso rails 3
Mini curso rails 3Mini curso rails 3
Mini curso rails 3
 
Aplicações Hibridas com Phonegap e HTML5
Aplicações Hibridas com Phonegap e HTML5Aplicações Hibridas com Phonegap e HTML5
Aplicações Hibridas com Phonegap e HTML5
 
Git presentation to some coworkers some time ago
Git presentation to some coworkers some time agoGit presentation to some coworkers some time ago
Git presentation to some coworkers some time ago
 
Intrudução ao Behavior Driven Development (BDD) com Ruby on Rails
Intrudução ao Behavior Driven Development (BDD) com Ruby on RailsIntrudução ao Behavior Driven Development (BDD) com Ruby on Rails
Intrudução ao Behavior Driven Development (BDD) com Ruby on Rails
 

Último

Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
Ian Oliveira
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
anpproferick
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
Rafael Santos
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
tnrlucas
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
EliakimArajo2
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
anpproferick
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Annelise Gripp
 

Último (7)

Por que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdfPor que escolhi o Flutter - Campus Party Piauí.pdf
Por que escolhi o Flutter - Campus Party Piauí.pdf
 
Teoria de redes de computadores redes .doc
Teoria de redes de computadores redes .docTeoria de redes de computadores redes .doc
Teoria de redes de computadores redes .doc
 
Gestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefíciosGestão de dados: sua importância e benefícios
Gestão de dados: sua importância e benefícios
 
Como fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptxComo fui de 0 a lead na gringa em 3 anos.pptx
Como fui de 0 a lead na gringa em 3 anos.pptx
 
Orientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço BrasilOrientações para utilizar Drone no espaço Brasil
Orientações para utilizar Drone no espaço Brasil
 
PRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product ownerPRATICANDO O SCRUM Scrum team, product owner
PRATICANDO O SCRUM Scrum team, product owner
 
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
Ferramentas e Técnicas para aplicar no seu dia a dia numa Transformação Digital!
 

TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS

  • 1. Globalcode  – Open4education Interfaces  ricas  com  Rails  e  React.JS Rodrigo  Urubatan @urubatan
  • 2. Globalcode  – Open4education Quem? Programador  desde  1997 Trabalha  com  Ruby  na  Brightwire Escreveu  "Ruby  On  Rails:  Desenvolvimento  fácil  e  Rápido  de   aplicações  web” Já  trabalhou  com  diversas  linguagens  (C,  C++,  Delphi,  PHP,   ASP,  ColdFusion,  VisualBasic,  C#,  Python,  Ruby,  Assembly,   …) Apaixonado  por  Agile  e  atualmente  por  trabalho  remoto Patinador,  Corredor,  Ciclista  e  agora  resolveu  aprender  Karate   :D Pai  de  um  Guri  de  6  anos http://urubatan.com.br -­ Anda  meio  abandonado  mas  vai  voltar http://sobrecodigo.com -­ idem
  • 3. Globalcode  – Open4education Objetivo Usar  o  Rails  como  backend  da  aplicação Toda  a  interação  com  o  usuário  será  implementada   no  cliente Validações  e  regras  de  negócio  serão   implementadas  no  servidor (sim,  eu  poderia  usar  Sinatra  mas  sou  preguiçoso)
  • 4. Globalcode  – Open4education Cuidado! Nesta  palestra  vamos  falar  de  uma  SPA  (Single   Page  Application) Isto  tem  vantagens  e  desvantagens Melhora  muito  a  interação  com  o  usuário  sem   duplicação  de  código,  já  que  o  código  de   renderização  fica  todo  no  JS Piora  muito  a  indexação  da  sua  aplicação  por   buscadores  (adeus  SEO  -­ ou  não…)
  • 5. Globalcode  – Open4education O  que,  quando,  onde  e  por   que? Muitas  aplicações  hoje  em  dia  exigem  um  nível  alto   de  interação  com  o  usuário Implementar  isto  usando  bibliotecas  mais  baixo   nível  é  muito  fácil  de  causar  uma  grande   confusão  do  código  (PHP  alguem?) Componentização  evita  duplicação  de  código  e   facilita  a  organização
  • 6. Globalcode  – Open4education Por que rails? Eu gosto :P
  • 7. Globalcode  – Open4education Por que React.js? JSX!!!!!! Unir o  código  Javascript  e  o  Código  HTML  de   cada  componente   Facilidade  de  manutenção   Facilidade  de  organização   Mantem  o  CSS  separado  de  propósito,  CSS  é   mais  especifico  de  aplicação  do  que   componente  (pode  se  usar  imports  SASS  se   necessário)  
  • 8. Globalcode  – Open4education Por que React.js? Virtual  DOM Fácil  de  testar  em  uma  pequena  parte  de  uma  tela   Renderização  reativa   Componentes  stateful   Comunicação  entre  componentes  via  propriedades  
  • 9. Globalcode  – Open4education Mãos  a  obra!  (O  blog  mais feio do  mundo!)
  • 10. Globalcode  – Open4education Criando  a  aplicação Uma  aplicação  padrão  Rails  (rails  new  …) Gemfile  updates gem 'backbone-on-rails' gem 'react-rails', github: 'reactjs/react-rails', ref: 'master' Environment  update  (development.rb  para   começar) config.react.variant = :development config.react.addons = true # defaults to false config.react.server_renderer = React::ServerRendering::SprocketsRenderer bundle  install rails  g  react:install
  • 11. Globalcode  – Open4education Componentes Componentes  javascript  vão  ficar  em   app/assets/javascript/components Backbone.js  vai  facilitar  a  comunicação   cliente/servidor arquivos  .js.jsx  tem  uma  facilidade  extra,  são   compilados  pelo  react-­rails  via  asset  pipeline  e   permitem  adicionar  HTML  inline  
  • 12. Globalcode  – Open4education Cadastrando  um  Post rails  g  scaffold  post  title:string slug:text content:text Apagar todas as  views  do  post  exceto index.html.erb
  • 13. Globalcode  – Open4education Alterações  no  controller Fazer  todos  os  métodos  retornarem  json Remover  edit,  new  e  show Apagar  todo  o  código  de  index.html.erb  e   mudar  para: <%=  react_component('Blog',  {collection:   @posts,  item:  @post})  %>
  • 14. Globalcode  – Open4education Agora  mãos  a  obra já  temos  uma  “API"  em  Rails,  poderíamos  ter  o   código  em  Sinatra  que  seria  mais  leve,  mas  eu   gosto  do  asset  pipeline  e  assim  fica  mais  fácil  para   um  iniciante Falta  criar  os  componentes  backbone  para  acessar   o  backend Criar  os  componentes  react  para  a  UI
  • 15. Globalcode  – Open4education backbone.js app/assets/javascripts/collections/posts.js var Posts  =  Backbone.Collection.extend({ model:  Post, url:  '/posts' });; app/assets/jaascripts/models/post.js var Post  =  Backbone.Model.extend({ });;
  • 16. Globalcode  – Open4education blog.js.jsx var Blog  =  React.createClass({ ….. render:  function  ()  { if(this.state.editing)   { return  (<div> <div  id="blogList"> <PostList collection={this.state.collection}   viewModel={this.viewModel}   newModel={this.newModel}/> </div> <div  id="blogPost"> <PostForm collection={this.state.collection}   model={this.state.model}   viewModel={this.viewModel}/> </div> </div>);; }else{ return  (<div> <div  id="blogList"> <PostList collection={this.state.collection}   viewModel={this.viewModel}   newModel={this.newModel}/> </div> <div  id="blogPost"> <PostView model={this.state.model}   editModel={this.editModel}/> </div> </div>);; } } });;
  • 17. Globalcode  – Open4education post_list.js.jsx var PostList =  React.createClass({ …. render:  function  ()  { var users  =  this.props.collection.map(function  (model)  { var viewModel =  function  ()  { this.props.viewModel(model);; };; return  ( <tr key={model.get("id")}> <td><a  href="#"  onClick={viewModel.bind(this)}>{model.get("title")}</a></td> <td>{new  Date(model.get("created_at")).toDateString()}</td> </tr> );; }.bind(this));; return  ( <div> <table  className="post-­list"> <thead> <tr> <th>Post</th> <th>Published</th> </tr> </thead> <tbody> {users} </tbody> </table> <hr/> <a  href="#"  onClick={this.props.newModel}>Create  post</a> </div> );; } });;
  • 18. Globalcode  – Open4education post_view.js.jsx var PostView =  React.createClass({ editModel:  function  ()  { this.props.editModel(this.props.model);; }, render:  function  ()  { var innerLines =  null;; if(this.props.model.get("content"))   { innerLines=_.map(this.props.model.get("content").split("n"),   function  (txt,  idx)  { return  <p  key={idx}>{txt}</p> });; } return  ( <div  className="blog-­post"> <h1><a   href={this.props.model.get("slug")}>{this.props.model.get("title")}</a></h1> <div  className="post-­body"> {innerLines} </div> <hr/> <a  href="#"  onClick={this.editModel}>Edit  post</a> </div> );; } });;
  • 19. Globalcode  – Open4education post_form.js.jsx var PostForm =  React.createClass({ saveModel:  function  ()  { if  (this.props.model.get("id"))  { this.props.model.save();; }  else  { this.props.collection.create(this.props.model);; } this.props.viewModel(this.props.model) }, render:  function  ()  { return  ( <div  className="blog-­post"> <InputWithLabel model={this.props.model}  label="Title"  name="title"  type="text"/> <InputWithLabel model={this.props.model}  label="Body"  name="content"  type="textarea"/> <div  className="form-­field"> <button  onClick={this.saveModel}>Save</button> </div> </div> );; } });;
  • 20. Globalcode  – Open4education input_with_label.js.jsx var InputWithLabel = React.createClass({ handleChange: function(event) { this.props.model.set(this.props.name,event.target.value) }, render: function() { return <div className="form-field"> <label htmlFor={this.props.name}>{this.props.label}</label> <div> <input id={this.props.name} type={this.props.type} name={this.props.name} ref="input" onChange={this.handleChange} value={this.props.model.get(this.props.name)}/> </div> </div>; } });
  • 22. Globalcode  – Open4education indexação?  performance? renderização  no  servidor: <%=  react_component('Layout',  {collection:   @users},  {prerender:  true})  %> components.js //=  require  underscore //=  require  backbone //=  require_tree  ./models //=  require_tree  ./collections //=  require_tree  ./components
  • 23. Globalcode  – Open4education Mas  é  só  isto? React-­router Backbone.Router Flux  -­ arquitetura  JS  usada  pelo  Facebook