Chi sono

Francesco Strazzullo

http://www.francescostrazzullo.info/

Chi sono

http://www.e-xtrategy.net/

Chi sono

http://www.cosenonjaviste.it/

http://www.blogzinga.it/

Chi sono

https://www.facebook.com/groups/developermarche/

React

React

" A JavaScript library for building user interfaces "

React

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

React.render(<HelloMessage name="World" />, document.body);

Stato

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.body);

Stato

Stato

Flux

Flux

" Application Architecture For Building User Interfaces "

Why Not MVC?

Why Not MVC?

Why Not MVC?

Why Not MVC?

Flux

Action

Un evento scatenato nel sistema che ha lo scopo di modificarne lo stato 

Dispatcher

Un Event Bus che fa girare gli eventi scatenati dalle Action all’interno dell’applicazione.

Store

Gli oggetti che contengono la business logic della vostra applicazione. Sono gli oggetti che in un classico MVC formerebbero la parte Model.

View

I componenti React

Why Flux?

Un unico modo di ragionare

Why Flux?

Complessità costante al crescere del progetto

Redux

Redux

Redux

" Redux is a predictable state container for JavaScript apps "

Why not Flux?

Verbosità

Why not Flux?

Un unico modo di ragionare?

Principi

" Single source of truth "

The state of your whole application is stored in an object tree inside a single store.

Principi

" State is read-only "

The only way to mutate the state is to emit an action, an object describing what happened.

Principi

" Mutations are written as pure functions "

To specify how the state tree is transformed by actions, you write pure reducers.

Elementi

Actions

import Dispatcher from "src/Dispatcher";

var add = function(text) {
	Dispatcher.dispatch({
		actionType: "addTodo",
		text: text
	});
};

var add = function(text) {
	return {
		actionType: "addTodo",
		text: text
	};
};

Flux

Redux

Elementi

Reducers

function addTodo(state,text){
	var toReturn = Object.assign({},state,{
		todos:[...state.todos]
	});

	toReturn.todos.push(text);

	return toReturn;
};

Elementi

Store + Dispatcher

import { createStore } from 'redux';
import Reducers from 'src/Reducers';

let store = createStore(Reducers);

Elementi

View

• Dumb components: non conoscono Redux
• Smart components: conoscono Redux

Why Redux?

Un unico modo di ragionare

Why Redux?

Stato serializzabile

Why Redux?

No side-effect

Why Redux?

Debito tecnico al minimo

That's It!

http://goo.gl/forms/9qhPaulS0N

That's It!

http://www.cosenonjaviste.it/react-tutorial/

http://www.cosenonjaviste.it/sviluppare-applicazioni-con-react-e-flux/

That's It!

f.strazzullo@e-xtrategy.net

@TheStrazz86