Aplicaciones Modernas

REACT.JS

Octavio Luna

@tavo_luna@Itaqua

Desarrollador, Geek, OCD y Fisico-Matemático de hobbie,

Programación Funcional y Procesos de Negocio

REACT.JS

Octavio Luna

@tavo_luna@Itaqua

Gerente de Desarrollo de SoftwareUnlimited Vacation Club by AM Resorts

(http://www.unlimitedvacationclub.com/)

Fellow Developer para NavigatorMD( http://www.navigatormd.com/)

REACT.JS

@tavo_luna@Itaqua

REACT.JS

Octavio Luna

@tavo_luna@Itaqua

Miembro del Tequila Valley Cancun Group (TQV)

Barcampist 2013: Scala Un lenguaje para la era del Multiprocesador(http://es.slideshare.net/octavio_luna/scala-un-lenguaje-para-multiprocesador)

Contributor to Asterisk-Java API Interface (https://github.com/asterisk-java/asterisk-java)

REACT.JS

@tavo_luna@Itaqua

FRAMEWORKS

REACT.JS

@tavo_luna@Itaqua

W T F …ramework

REACT.JS

@tavo_luna@Itaqua

REACT.JS

@tavo_luna@Itaqua

REACT.JS

@tavo_luna@Itaqua

https://facebook.github.io/react/

REACT.JS

@tavo_luna@Itaqua

W T F

REACT.JS

@tavo_luna@Itaqua

WTF

HYhisramework

REACT.JS

@tavo_luna@Itaqua

• Es la V en un MVC• Amigable con SEO• Los componentes son el Futuro de la Red• Extremadamente eficiente (gracias al DOM

virtual)• Mucha retroalimentación al Desarrollador

REACT.JS

@tavo_luna@Itaqua

• La mutabilidad es la raíz de todos los Males.

• Puede colaborar con otros Frameworks y otras librerías (mientras no alteres el DOM)

• Permite migrar una aplicación existente poco a poco

• Facebook lo usa y mantiene, así que no se ira pronto.

REACT.JS

@tavo_luna@Itaqua

var HelloMessage = React.createClass({ render: function() { return <div>Hola {this.props.name}</div>; }});

React.render( <HelloMessage name="Octavio" />, document.getElementById('example'));

JSX

REACT.JS

@tavo_luna@Itaqua

var HelloMessage = React.createClass({ displayName: "HelloMessage",

render: function render() { return React.createElement( "div", null, "Hola ", this.props.name ); }});

React.render( React.createElement(HelloMessage, { name: "Octavio" }), document.getElementById('example'));

Javascript

REACT.JS

@tavo_luna@Itaqua

var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); }});

React.render(<Timer />, document.getElementById('example'));

Statefull Component

REACT.JS

@tavo_luna@Itaqua

Ampersand.js

Especificación del Componente

• render• getInitialState• getDefaultProps• propTypes• mixins• statics• displayName

REACT.JS

@tavo_luna@Itaqua

Ciclo de Vida del Componente

• Montaje• componentWillMount• componentDidMount

• Desmontaje• componentWillUnmount

REACT.JS

@tavo_luna@Itaqua

• Actualización• componentWillReceiveProps• shouldComponentUpdate• componentWillUpdate• componentDidUpdate

REACT.JS

@tavo_luna@Itaqua

• Es importante que elijas tu arquitectura en un inicio

• Cada vez se verán mas SPAs

GRACIAS