Aplicaciones isomorfas con React js en Ruby on Rails

Introduccion a los conceptos de react Js, aplicaciones isomorfas y como crear una app isomorfa en RoR

Transcript

1. Aplicaciones Isomorfas con React.js En Ruby on Rails
2. State of the ART
3. Aplicaciones web nativas • Browser como motor de aplicaciones • Browser conserva el estado • Backend API’s y servicios • AJAX para la comunicación
4. Posibles ventajas • Aplicaciones que se perciben mas rápidas • Mejor experiencia de usuario*
5. Desventajas • Código Repetido • Dependen de javascript, este se puede desactivar en el navegador • FOUC (Flash of unstyled content) • Huge white screen of death • SEO
6. Librerias/Frameworks • Backbone.js • RIOT.js • Ember.js • Angular.js • Meteor.js • T3.js • etc.js…
7. React.js Una librería de javascript para construir interfaces de usuario (La V en el MVC*)
8. Componentes <PostArea /> <PostList /> <Post /> <PostForm /> <PostStats />
9. Componentes en React var MyComponent = React.createClass({ render: function(){ return ( React.createElement(‘h1’, null, ‘Hello, world!’); ); } }); React.render(MyComponent, document.body);
10. Componentes en React (factory) var MyComponent = React.createClass({ render: function(){ return ( React.DOM.h1(null, ‘Hello, world!’) ); } }); React.render(MyComponent, document.body);
11. Componentes en React (JSX) ♥ var MyComponent = React.createClass({ render: function(){ return ( <h1>Hello, world!</h1> ); } }); React.render(<MyComponent />, document.body);
12. JSX? • Permite escribir componentes con una sintaxis parecida al HTML, que es transformada a funciones javascript. • NO ES HTML • NO ES HTML EN JAVASCRIPT • se usa por conveniencia
13. Componentes en React (JSX) ♥ var MyComponent = React.createClass({ render: function(){ return ( <h1>Hello, world!</h1> ); } }); React.render(<MyComponent />, document.body);
14. Propiedades y metodos de React js
15. estado de un componente (state) • Almacén de datos interno de un componente • maneja el estado de un componente en un punto en el tiempo • cuando se cambia el estado, el componente se vuelve a renderizar (setState())
16. estado (state) var MyComponent = React.createClass({ getInitialState: function(){ return { count: 5 } }, render: function(){ return ( <h1>{this.state.count}</h1> ) } }); React.render(<MyComponent />, document.body);
17. Eventos var MyComponent = React.createClass({ getInitialState: function(){ return { count: 5 } }, _handleClick: function(){ this.setState({ count: this.state.count + 1 }); }, render: function(){ return ( <h1 onClick={this._handleClick} >{this.state.count}</h1> ) } }); React.render(<MyComponent />, document.body);
18. Propiedades de un componente • Datos que son pasados a un componente hijo por un componente padre • Las propiedades son Inmutables • se pueden agregar propiedades default • se puede agregar el tipo de propiedad que espera el componente
19. Propiedades (props) var MyComponent = React.createClass({ proptypes: { name: React.props.string.isRequired }, getDefaultProps: { name: ‘Juan nevera’ }, render: function(){ return ( <h1>Hello, {this.props.name}</h1> ); } }); React.render(<MyComponent name={‘richard’} />, document.body);
20. Propiedades (props) propTypes: { optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string }
21. Flujo • Las propiedades son fijadas por el componente padre. • para que haga cambios, se ponen las propiedades del componente raíz en el estado. • cuando se detecte un cambio en el estado de la raíz, este se re-renderiza, y hace que se vuelvan a renderizar los componentes hijos (si hay cambios)
22. Aplicaciones isomorfas Javascript compartido que corre en el cliente y el servidor
23. El santo grial de las aplicaciones • En la primera carga, se sirve HTML real, que viene del servidor • El javascript del lado cliente se inicia encima del HTML dado por el servidor • En vez de iniciarse sobre un div vacío • Desde este punto, es una aplicación javascript del lado cliente
24. ¿Porque React.js?
25. Render! React.render(<MyComponent />); React.renderToString( <MyComponent />);
26. Componente React + Habilidad de correr JS = Habilidad de renderizar un componente React a una cadena HTML en el servidor
27. Como funciona hoy Client-rendered view Handlebars* template | | Server-rendered view ERB* template
28. Mas sencillo Client-rendered view React Component | | Server-rendered view React Component
32. Desventajas • Código Repetido • Javascript desactivado • FOUC (Flash of unstyled content) • Huge white screen of death • SEO • PROGRESSIVE ENHANCEMENT
33. ¿Como lo hago en Rails?
34. Añadir las gemas gem 'therubyracer', platforms: :ruby gem 'react-rails', '~> 1.0'
35. Añadir los archivos de react en el manifiesto //= require react //= require react_ujs
36. Configurar los environments config/environments/development.rb: # React development variant (unminified) config.react.variant = :development config/environments/production.rb: # React production variant (minified) config.react.variant = :production
37. Folder de componentes crear el folder javascripts/ components //= require_tree ./components
38. O solo ejecutar, (después del bundle) : rails g react:install rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
39. React-rails Helper react_component(component_class_name, props={}, html_options={}) <%= react_component('PostArea', { initialPosts: @posts, form: @form }, { prerender: params[:noprerender].nil? } )%>
40. <PostArea /> <PostList /> <Post /> <PostForm /> <PostStats />
41. Código en vivo