Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware...

Le Mois Du JS

@XebiaFr @a_bachar #moisdujs

Abdelhakim BacharDéveloppeur full-stack

Twitter -> a_bachar abachar@xebia.fr Github -> abachar

React / Redux

La stack tendance, efficace et performante

Sources -> https://github.com/xebia-france/moisdujs-react

@XebiaFr @a_bachar #moisdujs

MVW

Model

Mutation

Y a-t-il une autre façon ?

React

React est une librairie qui permet de créer des interfaces utilisateurs

@XebiaFr

React

● Pas un framework● Librairie UI● Vue déclarative● Binding unidirectionnel● DOM Virtuel

@a_bachar #moisdujs

@XebiaFr

Exemple de composant React

import React from 'react';import ReactDOM from 'react-dom';

class Bonjour extends React.Component { render() { return ( <h1 className='titre'> Bonjour {this.props.user} </h1> ); }}

ReactDOM.render( <Bonjour user='Abdelhakim'/>, document.getElementById('root'));

@a_bachar #moisdujs

@XebiaFr

Stateless Function Component

@a_bachar #moisdujs

import ReactDOM from 'react-dom';

const Bonjour = ({user}) => {

return (

<h1 className='titre'>

Bonjour {user}

</h1>

);

};

ReactDOM.render( <Bonjour user='Abdelhakim'/>, document.getElementById('root'));

@XebiaFr

// JSX<Bonjour user='Abdelhakim' />;

// JavascriptReact.createElement('Bonjour', { user: 'Abdelhakim'});

JSX

@a_bachar #moisdujs

Javascript Syntax eXtension

@XebiaFr

Binding unidirectionnel

@a_bachar #moisdujs

@XebiaFr

DOM Virtuel

@a_bachar #moisdujs

Action Store View

Action

Dispatcher

@XebiaFr

Quelques implémentations :

● Redux par Dan Abramov 753k/mois

● Flux par Facebook 242k/mois

● Alt par Josh Perez 46k/mois

● Reflux par Mikael Brassman 62k/mois

● Relay par Facebook 26k/mois

@a_bachar #moisdujs

@XebiaFr

Pourquoi Redux

● Plus grande simplicité par rapport à Flux● Store unique et non mutable● Reducers à la place des Stores● Écosystème d’outils et de bibliothèques

complémentaires.

@a_bachar #moisdujs

Vous pouvez utilisez Redux avec : React, Angular, Angular 2, Backbone...

@XebiaFr

Principe de base

(previousState, action) => newState

@a_bachar #moisdujs

Action Reducer Store View

Action

@XebiaFr

Action

const action = { type: 'ADD_SLOT', slot: { group: 'Les 4 fantastiques', name: 'React / Redux' }}

@a_bachar #moisdujs

@XebiaFr

Action Creator

function addSlot(group, slotName) { const slot = { group: group, name: slotName } return { type: 'ADD_SLOT', slot: slot }}

@a_bachar #moisdujs

@XebiaFr

Reducer

function slots(state = {}, action) { switch (action.type) { case 'ADD_SLOT': const newSlot = action.slot; const existingSlots = state[newSlot.group];

return { ...state, [newSlot.group]: [ ...existingSlots, newSlot.name ] };

default: return state; }}

@a_bachar #moisdujs

@XebiaFr

Store

import {createStore} from 'redux'import slotReducer from './reducers'import addSlot from './actions'

const store = createStore(slotReducer)

store.subscribe(() => { console.log('State :', store.getState())})

store.dispatch( addSlot('Les 4 fantastiques', 'React / Redux'))

@a_bachar #moisdujs

Action Reducer Store View

Action

Provider connect

@XebiaFr

Store -> Provider

import {createStore} from 'redux';import {Provider} from 'react-redux';import ReactDOM from 'react-dom';import App from './containers/App';

const store = createStore(slotReducer);

ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'))

@a_bachar #moisdujs

@XebiaFr

connect -> View

import {connect} from 'react-redux';

import {bindActionCreators} from 'redux'

import {addSlot} from './actions'

const mapStateToProps = (state) =>

({ slots: state.slots });

const mapDispatchToProps = (dispatch) =>

bindActionCreators({ addSlot }, dispatch)

const SlotComponent = ({slots, addSlot}) => { /* ... */ };

export default connect

(mapStateToProps, mapDispatchToProps)(SlotComponent)

@a_bachar #moisdujs

@XebiaFr

Redux Ecosystem

@a_bachar #moisdujs

Bindings Middleware DevTools ...

react-reduxng-reduxng2-reduxbackbone-redux...

redux-thunkredux-promiseredux-axios-middlewareredux-rx redux-loggerredux-immutable-state-invariantredux-unhandled-action...

Redux DevToolsLog MonitorDock Monitor...

redux-formredux-actions redux-mock-store ...

Regardons le code

@XebiaFr

Take away

● Composants réutilisables● Stateless Function Components● Code Prévisible● Historique des actions● Performance et légèreté

@a_bachar #moisdujs

@XebiaFr

Merci

@a_bachar #moisdujs

Questions ?

Sources :

https://github.com/xebia-france/moisdujs-react

The philosophy of small, composable, single-purpose tools

never goes out of style.

Unix philosophy

Rejoignez-nous !

recrutement@xebia.fr

blog.xebia.fr