larlet-fr-david/david/blog/2016/javascript-reduit/index.md

title: JavaScript réduit
slug: javascript-reduit
date: 2016-03-03
chapo: Tout ce qu’on rend téléchargeable au développeur, on l’empêche de l’inventer ou de le découvrir.

> The JavaScript ecosystem is thriving and moving quickly, but there’s finally an end at the light of the tunnel. Best practices are no longer changing constantly, and it is becoming increasingly clear which tools are worth learning.
>
> The most important thing to remember is to keep it simple and only use what you need.
>
> <cite>*[State of the Art JavaScript in 2016](https://medium.com/@fward/state-of-the-art-javascript-in-2016-ab67fc68eb0b)* ([cache](/david/cache/93a8d8a7ec4108b541cbae05021dde66/))</cite>

Il y a une certaine ironie à arriver à cette conclusion après avoir cité des lignes et des lignes d’outils :-). Pour faire suite à ma recherche [de minimalisme et d’esthétique](/david/blog/2016/minimalisme-esthetique/), j’ai commencé [un projet un peu plus conséquent](https://github.com/davidbgk/justdata) pour voir jusqu’où je pouvais aller. J’ai rapidement eu besoin de gérer des données au niveau du *frontend* de manière un peu plus sérieuse et je me suis penché sur le *pattern* remis au goût du jour par [Flux](http://facebook.github.io/flux/docs/overview.html). Plus particulièrement [les principes qui sont utilisés dans Redux](http://redux.js.org/docs/introduction/ThreePrinciples.html) avec un état global mais en lecture seule qui n’est modifiable que par des *reducers*. Pour bien comprendre les concepts sous-jacents, je ne voulais pas utiliser Redux mais le découvrir en l’implémentant et réduire mes dépendances. Je suis parti [d’un gist](https://gist.github.com/bloodyowl/babd93183ff8581724fe) pour avoir la notion de `Store` :

    :::javascript
    const createStore = (reducer, state = reducer(undefined, {})) => {
      const subscribers = new Set()
      return {
        dispatch: (action) => {
          state = reducer(state, action)
          subscribers.forEach(func => func(action))
        },
        subscribe: (func) => {
          subscribers.add(func)
          return () => subscribers.delete(func)
        },
        getState: () => state
      }
    }

On a ici trois méthodes qui permettent d’expédier des actions, d’abonner des fonctions et de récupérer l’état en cours (à partir de maintenant je passe aux termes techniques en anglais car ça devient n’importe quoi). Lorsqu’on récupère l’état de notre `Store`, on a toutes les données d’un coup que l’on peut explorer, j’avais déjà parlé de l’importance de pouvoir avoir cette vision avec TinyDB côté serveur pour développer efficacement. **En tant que développeurs web, notre métier est de savoir quelles données correspondent à quelles URLs.** Il y a bien sûr leur représentation finale et la suite de sérialisations et déserialisations qu’elles subissent mais pouvoir être sûr des données et des URLs c’est déjà un pré-requis rarement atteint. On va maintenant passer aux `Reducers` qui permettent de transformer l’état global avec des fonctions pures (= qui retournent de nouveaux objets). Ici la syntaxe est généralement de gérer les nombreux cas avec un `switch` assez laid, un petit constructeur va nous aider à rendre ça plus esthétique :

    :::javascript
    const createReducer = (initialState, handlers) => {
      return (state = initialState, action) => {
        if (handlers.hasOwnProperty(action.type)) {
          return handlers[action.type](state, action)
        } else {
          return state
        }
      }
    }

Par défaut c’est l’état en cours qui est retourné si l’action n’est pas trouvée. Il nous reste à avoir un [créateur d’actions](http://redux.js.org/docs/recipes/ReducingBoilerplate.html) pour ne pas avoir à taper à la main la [logique standardisée](https://github.com/acdlite/flux-standard-action) pour chacune d’entre elles :

    :::javascript
    const createAction = (type, ...argNames) => {
      return (...args) => {
        let action = { type, payload: {} }
        argNames.forEach((arg, index) => {
          action.payload[argNames[index]] = args[index]
        })
        return action
      }
    }

Et voilà ! **En 35 lignes on obtient 80% d’utilité d’une bibliothèque et en plus on l’a comprise.** Il s’agit de mon budget lorsque je passe une soirée là-dessus, comme j’ai pu le faire [pour jQuery](/david/blog/2016/programmation-apprehension/).

Il s’agit maintenant de le mettre en pratique. Considérons un compteur et une liste, on va avoir les actions pour ajouter et enlever une unité au compteur ainsi que l’ajout d’items à la liste (de courses). On commence par définir le nom de nos actions avec des constantes car c’est une bonne pratique et on en profite pour créer nos `reducers` :

    :::javascript
    const INCREMENT = 'INCREMENT'
    const DECREMENT = 'DECREMENT'
    const ADD_ITEM = 'ADD_ITEM'

    const counter = createReducer({ counter: 0 }, {
      [INCREMENT](state, action) {
        return { counter: state.counter + 1 }
      },
      [DECREMENT](state, action) {
        return { counter: state.counter - 1 }
      }
    })

    const shoppingList = createReducer([], {
      [ADD_ITEM](state, action) {
        return [ ...state, action.payload.item ]
      }
    })

Il faut bien faire attention à cette étape à bien retourner un nouvel état et non à modifier l’état courant sinon vous perdez complètement les avantages liés. L’étape suivante est de créer nos actions liées à ce que l’on vient de créer :

    :::javascript
    const increment = createAction(INCREMENT)
    const decrement = createAction(DECREMENT)
    const addItem = createAction(ADD_ITEM, 'item')

Ici on reste simple, seule la dernière function a un paramètre pour l’exemple. Il ne nous reste plus qu’à créer notre `store` à l’aide de la méthode précédemment définie :

    :::javascript
    const store = createStore((state = {}, action) => {
      return {
        counter: counter(state.counter, action),
        shoppingList: shoppingList(state.shoppingList, action)
      }
    })

Il y aurait la possibilité de [combiner les reducers](http://redux.js.org/docs/api/combineReducers.html) mais je préfère rester explicite sur ce qu’il se passe dans mon `store`. Notre état va avoir deux clés (`counter` et `shoppingList`) qui restent indépendantes mais que l’on peut facilement parcourir à tout moment. Pour finir un exemple possible d’utilisation pour mieux comprendre :

    :::javascript
    console.group('Testing Redux concepts')
    console.log('Begin:', store.getState())
    const unsubscribe = store.subscribe((action) => {
      console.log('After', action.type, 'action:')
      console.table(store.getState())
    })
    store.dispatch(increment())
    store.dispatch(increment())
    store.dispatch(decrement())
    store.dispatch(increment())
    console.assert(store.getState().counter.counter == 2,
                   'Counter is now equal to 2')
    store.dispatch(addItem('Apples'))
    store.dispatch(addItem('Oranges'))
    console.assert(JSON.stringify(store.getState().shoppingList)
                   == JSON.stringify(['Apples', 'Oranges']),
                   'The shopping list has been filled')
    unsubscribe() // Stop the logging subscription.
    store.dispatch(decrement())
    console.log('End:', store.getState())
    console.groupEnd()

La seule subtilité est d’avoir le `subscribe` qui retourne la fonction permettant de se désinscrire une fois le moment venu. Ici ça ajoute un `log` dans la console avec l’état associé ce qui est pratique en *debug* (au passage, je découvre que l’on peut faire un `console.assert`). Mais qui s’avère également trivial si l’on souhaite [le stocker/récupérer localement](https://gist.github.com/DavidBruant/8b628704eee463dfb40e).

**Tout ce qu’on rend téléchargeable au développeur, on l’empêche de l’inventer ou de le découvrir.** Pour paraphraser Piaget qui lui-même paraphrasait Papert. Prendre le temps de réacquérir mes savoirs et mes concepts ne me permet pas d’être plus rapide ou meilleur mais je prends assurément plus de plaisir à les manipuler ensuite. Et [lorsqu’on travaille sur des mandalas](http://www.agmweb.ca/2016-03-02-mozpay/) ([cache](/david/cache/b33ebd3c4dbb1d572e2102539dd2b215/)), c’est la seule chose qui reste.

*<troll\>Oui, j’ai réussi à caser « plaisir » dans un billet sur JavaScript…*