La philosophie Elm en Javascript

Juin 2016 - Paris.js

Guillaume Claret

Front End Developer @ouicar


Théophile Kalumbu

Lead Front End Developer @ouicar

Frontend OuiCar

  • Environ 75.000 lignes de Javascript
  • Surtout du React / es6 mais encore du jQuery
  • Nombreux développeurs, certains partis

Une des solutions

S'inspirer du langage Elm.

elm-logo

Qu'est-ce que Elm ?

Un langage :

  • purement fonctionel
  • typé
  • compile vers Javascript

Qu'est-ce que Elm ?

Une architecture :

elm-architecture

Exemple

Compteur

type alias Model = Int

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment -> model + 1
    Decrement -> model - 1

view : Model -> Html Msg
view model =
  div [] [ button [ onClick Decrement ] [ text "-" ]
         , div [] [ text (toString model) ]
         , button [ onClick Increment ] [ text "+" ] ]
Demo

Apports

  • débogage à la compilation (types)
  • composabilité
  • maintenabilité
  • maîtrise des side-effects (ex: Appel API)

Comment se rapprocher de cette philosophie en JS ?

On casse tout et on passe à ELM ?

seriously

On a décidé de passer à REDUX
et son écosystème

happy

Apports

Redux evolves the ideas of Flux, but avoids its complexity by taking cues from Elm.

Documentation Redux.

Avantages

  • On reste sur un language connu et une stack maitrisée
  • Un écosystème riche et mature ( oui ça fait qu'1 ans mais bon )
  • Les développeurs sont content
  • Le business aussi

View

En Elm :

view : Model -> Html Msg

view model =
  div [] [ button [ onClick Decrement ] [ text "-" ]
         , div [] [ text (toString model) ]
         , button [ onClick Increment ] [ text "+" ] ]

View

En Javascript : avec le DOM :

Objet avec mutations :/

View

En Javascript : avec React :

class Counter extends Component {
  render() {
    return (
      

{this.props.counter}

); } }

React

La vue devient une fonction :

component : Props -> HTML

Virtual DOM avec diff pour optimiser le rendu : react

Composition

react-composition

Storybook

github.com/kadirahq/react-storybook storybook

Model

En Elm :

-- Counter
type alias Model = Int
-- Car
type alias Model =
  { brand : String,
    model : String,
    km : Int
  }

Model

En Javascript :

Pas de typage :/.

Model

En Javascript + Flow :

// Counter
type Model = number;
// Car
type Model = {
  brand: string,
  model: string,
  km: number
};

Typage avec Flow

  • Typage du javascript avec des annotations
  • Détection des erreurs à la compilation
  • Très bonne integration avec l'IDE Nuclide
  • Ça reste du Javascipt au final
  • Typage graduel

Flow

flow

Nuclide

nuclide

Update

En Elm :

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment -> model + 1
    Decrement -> model - 1

Update

En Javascript : Action + Reducer nuclide

Update

En Javascript : Action + Reducer nuclide

Les apports

  • Prédictibilité du code
  • Lisibilité et Débogage facilité

Redux DevTools

nuclide

Comment garantir l'immutabilité ?

eslint-plugin-immutable

nuclide

Ce qui nous reste à explorer

  • Commands et Tasks ELM ou Promises
  • Redux Thunk Middleware ou Redux SAGA
  • Subscriptions ( Click, WebSocket, Clavier )
  • Communication avec le monde non-Flow Decode et API

Merci.

Blog technique :
ouicar.github.io