// BLOG

Elm #10 - Intégration d'un projet

Dernière partie de cette série sur la découverte du langage fonctionnelle Elm, comment intégrer Elm à ses projets. Vous pouvez utiliser Elm pour construire une application à part entière en full js ou pour construire des fonctionnalités que vous intégrerez dans un projet web classique (HTML, CSS, un langage back …).

Rédigé le 29.10.2018

Par Gilles Vauvarin

Elm Programmation fonctionnelle

Intégrer son projet Elm dans une page HTML

Vous pouvez utiliser Elm pour construire une application à part entière en full js ou pour construire des fonctionnalités que vous intégrerez dans un projet web classique (HTML, CSS, un langage back …).

Ainsi vous pouvez commencer votre apprentissage de Elm en remplaçant progessivement des fonctionnalités de votre application actuelle sans avoir besoin de tout récrire de zéro.

Une page HTML peut accueillir une ou plusieurs fonctionnalités construitent en Elm.

Intégration d'un seul module Elm

Supposons que nous utilisions qu’un seul fichier Main.elm dans notre programme.

Nous compilons le programme de la façon suivante :

elm make src/Main.elm --output=elm.js

Puis nous intégrons notre programme compilé en JavaScript dans un un fichier HTML existant de la façon suivante :

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='main-app'></div>

        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('main-app'))
        </script>
    </body>
</html>

Intégration de plusieurs modules Elm

Si maintenant nous avons organisé notre programme Elm en plusieurs modules, nous pouvons tous les compliler dans un seul fichier JavaScript mais les utiliser sur des noeuds HTML différents.

Compilations des modules Elm en un seul fichier JavaScript :

elm make Header.elm Footer.elm Main.elm --output=elm.js

Intégration des différents modules Elm sur des noeuds distincts de notre page HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='header-app'></div>
        <div id='main-app'></div>
        <div id='footer-app'></div>

        <script src="elm.js"></script>
        <script>
            var headernode = document.getElementById('header');
            var footernode = document.getElementById('footer');
            var mainnode = document.getElementById('main');

            Elm.Header.embed(headernode);
            Elm.Footer.embed(footernode);
            Elm.Main.embed(mainnode);  
        </script>
    </body>
</html>