Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Aplicaciones isomorfas con React js en Ruby on ...

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

Avatar for Richard Roncancio

Richard Roncancio

May 12, 2015
Tweet

More Decks by Richard Roncancio

Other Decks in Programming

Transcript

  1. Aplicaciones web nativas • Browser como motor de aplicaciones •

    Browser conserva el estado • Backend API’s y servicios • AJAX para la comunicación
  2. 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
  3. Componentes en React var MyComponent = React.createClass({ render: function(){ return

    ( React.createElement(‘h1’, null, ‘Hello, world!’); ); } }); React.render(MyComponent, document.body);
  4. Componentes en React (factory) var MyComponent = React.createClass({ render: function(){

    return ( React.DOM.h1(null, ‘Hello, world!’) ); } }); React.render(MyComponent, document.body);
  5. Componentes en React (JSX) ♥ var MyComponent = React.createClass({ render:

    function(){ return ( <h1>Hello, world!</h1> ); } }); React.render(<MyComponent />, document.body);
  6. 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
  7. Componentes en React (JSX) ♥ var MyComponent = React.createClass({ render:

    function(){ return ( <h1>Hello, world!</h1> ); } }); React.render(<MyComponent />, document.body);
  8. 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())
  9. estado (state) var MyComponent = React.createClass({ getInitialState: function(){ return {

    count: 5 } }, render: function(){ return ( <h1>{this.state.count}</h1> ) } }); React.render(<MyComponent />, document.body);
  10. 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);
  11. 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
  12. 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);
  13. 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 }
  14. 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)
  15. 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
  16. Componente React + Habilidad de correr JS = Habilidad de

    renderizar un componente React a una cadena HTML en el servidor
  17. Desventajas • Código Repetido • Javascript desactivado • FOUC (Flash

    of unstyled content) • Huge white screen of death • SEO • PROGRESSIVE ENHANCEMENT
  18. 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
  19. 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}