le mois du js - publicis sapient€¦ · redux ecosystem @a_bachar #moisdujs bindings middleware...

31
Le Mois Du JS

Upload: others

Post on 22-May-2020

30 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Le Mois Du JS

Page 2: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr @a_bachar #moisdujs

Page 3: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Abdelhakim BacharDéveloppeur full-stack

Twitter -> a_bachar [email protected] Github -> abachar

Page 4: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

React / Redux

La stack tendance, efficace et performante

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

Page 5: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr @a_bachar #moisdujs

MVW

Page 6: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Model

Page 7: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Mutation

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

Page 8: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

React

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

Page 9: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

React

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

@a_bachar #moisdujs

Page 10: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 11: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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'));

Page 12: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

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

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

JSX

@a_bachar #moisdujs

Javascript Syntax eXtension

Page 13: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

Binding unidirectionnel

@a_bachar #moisdujs

Page 14: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

DOM Virtuel

@a_bachar #moisdujs

Page 15: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Action Store View

Action

Dispatcher

Page 16: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 17: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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...

Page 18: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

Principe de base

(previousState, action) => newState

@a_bachar #moisdujs

Page 19: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Action Reducer Store View

Action

Page 20: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

Action

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

@a_bachar #moisdujs

Page 21: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

Action Creator

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

@a_bachar #moisdujs

Page 22: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 23: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 24: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Action Reducer Store View

Action

Provider connect

Page 25: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 26: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 27: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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 ...

Page 28: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Regardons le code

Page 29: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@XebiaFr

Take away

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

@a_bachar #moisdujs

Page 30: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

@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

Page 31: Le Mois Du JS - Publicis Sapient€¦ · Redux Ecosystem @a_bachar #moisdujs Bindings Middleware DevTools ... react-redux ng-redux ng2-redux backbone-redux... redux-thunk redux-promise

Rejoignez-nous !

[email protected]

blog.xebia.fr