Le déroulement d’un programme Elm est basé sur une architecture MVU (Model - View - Update).

Le model représente l’état (“state”) de vos données telles qu’elles sont mémorisées à un instant “t”.

La view représente la façon dont les données de votre model sont représentées à l’écran. C’est ce que verront les utilisateurs dans leur navigateur. Concrétement, il s’agit d’une page web sur laquelle vos utilisateurs pourront intéragir.

L’update reçoit sous forme de “Messages” les interactions effectuées par les utilisateurs et transforme le model en conséquence. Le “state” est mis à jour.

Modèle MVU

Exemple simple d’une application Elm qui incrémente ou décrémente un compteur borné entre 0 et 5. Ce programme affiche le chiffre “5” est celui-ci peut être incrémenté ou décrémenté de “1” en appuyant sur deux boutons distinct. (version Elm 0.19)

Les commentaires sont indiqués de la façon suivante :

-- Ceci est un commentaire

{-
Ceci est un commentaire
multiligne
-}

Le programme ci-dessous est commenté pour expliquer les différentes articulations entre le Model la View et l’Update.

module Main exposing (..)

import Browser exposing (..)
import Html exposing (..)
import Html.Events exposing (..)

-- l'état initial du model est transmis à la fonction "main", point d'entrée de l'application, qui combine le model, la vue et l'update
main =
 sandbox { 
 init = 5
 , update = update
 , view = view 
 }


-- MODEL
-- les données, ici il s'agit d'un simple entier

type alias Model =
 Int



-- VIEW
-- définition de la fonction view qui prend en paramètre le model et l'insère dans une representation HTML


view model =
 div []
 [ h1 []
 [ text ("Fruit to eat: " ++ (String.fromInt model))
 ]
 ,button [onClick Decrement] [text "Eat fruit -1"]
 ,button [onClick Increment] [text "Eat fruit +1"]
 ]



-- MESSAGE
-- déclaration d'un type "Msg" avec deux états possibles


type Msg
 = Decrement | Increment



-- UPDATE
-- définition de la fonction update qui prend en paramètre le msg et le model
-- en fonction du message reçu, le model est modifié en conséquence


update msg model =
 case msg of
 Decrement ->
 if model > 0 then model - 1 else model + 5
 Increment ->
 if model > 4 then model else model + 1

Ne vous inquiétez pas si le code vous parrait un peu obscure, nous reviendrons plus en détails sur la synthaxe et les principes du langage dans des articles ultérieurs. Essayez simplement de faire le lien entre les explications, le schéma et le code pour comprendre la logique de l’architecture de Elm.

Disclaimer:
Etant un total débutant dans le langage Elm et la programmation fonctionnel, il se peut que des incompréhensions ou des erreurs se soient glissées dans mes explications. Si vous en remarquez, merci de me les signaler pour que je puisse les corriger au plus vite.