8. Elm - Eine funktionale Programmiersprache zur Entwicklung von Web-Apps

8.2 Einfache Webseiten mit Elm

Völlig statisch

Jedes Html-Element der Seite entspricht einem Html-Objekt in Elm. Zu jedem Html-Tag wie <p> oder <h1> gibt es eine Elm-Funktion, hier zum Beispiel Html.p oder Html.h1 mit folgender Signatur:

Html.p                    
 : List (Attribute msg) -> List (Html msg) -> Html msg

Ignorieren Sie erstmal das msg. Es ist eine Funktion, die zwei Parameter erwartet: erstens eine Liste von Attributen, zweitens eine Liste von Html-Objekten. Ganz analog zu dem, wie ein Html-Dokument aufgebaut ist.

Hier sehen Sie ein Beispiel für eine Elm-Programm, das eine statische Html-Seite baut:

module Website01Static exposing (..)                        
                        
import Html exposing (..)


main : Html Never
main =
    div []
        [ h1 []
            [ text "This is a webpage created with elm" ]
        , p [] [ text "This is a paragraph. Ich schreibe hier einfach etwas Text." ]
        , table []
            [ tr []
                [ th [] [ text "n" ], th [] [ text "F_n" ] ]
            , tr
                []
                [ th [] [ text "0" ], th [] [ text "0" ] ]
            , tr
                []
                [ th [] [ text "1" ], th [] [ text "1" ] ]
            , tr
                []
                [ th [] [ text "2" ], th [] [ text "1" ] ]
            , tr
                []
                [ th [] [ text "3" ], th [] [ text "2" ] ]
            , tr
                []
                [ th [] [ text "4" ], th [] [ text "3" ] ]
            ]
        ]                        
                    

Speichern Sie diesen Text im Verzeichnis elm/src als Website01Static.elm. Gehen Sie nun mit der Konsole in das Verzeichnis elm und geben Sie ein

elm reactor

Das startet Ihnen einen Server auf Port 8000. Gehen Sie nun auf in Ihrem Browser auf localhost:8000 und klicken Sie sich durch bis zu Website01Static.elm.

Der Bezeichner main ist zwar kein Schlüsselwort, zeigt aber dem Elm-Runtime-Umgebung, wo der "Einstiegspunkt" in die dargestellte Webseite ist. In diesem einfachen Beispiel ist die Webseite einfach ein (statisches) Html-Element.

Css in Elm einbinden

Das Html-Dokument mit Css zu gestalten ist in Elm etwas lästig. Am einfachsten geht es, wenn man ein <link>-Element direkt mit Elm erschafft. Den Beispiel-Code finden Sie in Website01StaticCss.elm:

module Website01StaticCss exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)


main : Html Never
main =
    div [ class "well container" ]
        [ node "link" [ rel "stylesheet", href "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" ] []
        , node "link" [ rel "stylesheet", href "styles.css" ] []
        , h1 []
            [ text "This is a webpage created with elm" ]
        , p [] [ text "This is a paragraph. Ich schreibe hier einfach etwas Text." ]
        , table [ class "table table-striped" ]
            [ tr []
                [ th [] [ text "n" ], th [] [ text "F_n" ] ]
            , tr
                []
                [ td [] [ text "0" ], td [] [ text "0" ] ]
            , tr
                []
                [ td [] [ text "1" ], td [] [ text "1" ] ]
            , tr
                []
                [ td [] [ text "2" ], td [] [ text "1" ] ]
            , tr
                []
                [ td [] [ text "3" ], td [] [ text "2" ] ]
            , tr
                []
                [ td [] [ text "4" ], td [] [ text "3" ] ]
            ]
        ]

Dann sehen Sie zu, dass styles.css in dem gleichen Ordner liegt wie die Elm-Quelldatei.

Elm kompilieren

Mit elm reactor können Sie Ihren Code gut lokal auf dem Rechner testen. Wenn Ihre App aber fertig ist, wollen Sie die ja irgendwo hochladen. Und Ihre Nutzer/Kunden sollen ja nicht Elm installieren müssen. Sie können die App einfach in eine Html-Seite kompilieren:

elm make src/Website01StaticCss.elm

Das Ergebnis ist dann eine Html-Seite mit viel (unlesbarem, weil maschinell erzeugten) Javascript. Alternativ können Sie den Elm-Code in eine separate .js-Datei kompilieren:

elm make src/Website01StaticCss.elm --output=website-01-static-css.js

Dann müssen Sie allerdings die umgebende Html-Datei per Hand schreiben. Oder Sie kopieren diesen Code hier:

<!DOCTYPE html>
<html>
<body>

<div>
	Dieser Teil ist nicht Teil der Elm-App sondern separates Html.	
</div>

    <div id="elm-code-is-loaded-here"></div>
		
    <script src="./website-01-static-css.js"></script>
    <script>
      var app = Elm.Website01StaticCss.init({
        node: document.getElementById("elm-code-is-loaded-here")
      });      
    </script>

</body>
</html>

Die genauen Dateinamen und Modulnamen in den rot markierten Zeilen 11 und 13 müssen Sie natürlich dann jedes Mal anpassen.