Elm LanguageDémarrer avec Elm Language


Remarques

[Elm] [1] est un langage de programmation fonctionnel convivial compilant JavaScript. Elm se concentre sur les interfaces graphiques basées sur un navigateur, les applications à une seule page.

Les utilisateurs le louent généralement pour:

Versions

Version Date de sortie
0.18.0 2016-11-14
0,17,1 2016-06-27
0,17 2016-05-10
0,16 2015-11-19
0.15.1 2015-06-30
0,15 2015-04-20

Rédacteurs

Atome

Table lumineuse

Texte sublime

Vim

Emacs

IntelliJ IDEA

Supports

Code VS

Intégration dans HTML

Il existe trois possibilités pour insérer du code Elm dans une page HTML existante.

Intégrer dans la balise body

En supposant que vous ayez compilé l'exemple Hello World dans le fichier elm.js , vous pouvez laisser Elm reprendre la <body> comme elm.js :

<!DOCTYPE html>
<html>
    <body>
        <script src="elm.js"></script>
        <script>
          Elm.Main.fullscreen()
        </script>
    </body>
</html>
 

AVERTISSEMENT : Parfois, certaines extensions de chrome gâchent avec <body> ce qui peut entraîner la rupture de la production de votre application. Il est recommandé de toujours intégrer un div spécifique. Plus d'infos ici .

Intégrer dans une div (ou un autre nœud DOM)

Alternativement, en fournissant un élément HTML concret, le code Elm peut être exécuté dans cet élément de page spécifique:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <div id='app'></div>
        <script src="elm.js"></script>
        <script>
            Elm.Main.embed(document.getElementById('app'))
        </script>
    </body>
</html>
 

Intégrer en tant qu'agent Web (pas d'interface utilisateur)

Le code Elm peut également être démarré en tant que travailleur et communiquer via les ports :

<!DOCTYPE html>
<html>
    <head>
        <title>Hello Worker</title>
    </head>
    <body>
        <script src="elm.js"></script>
        <script>
            var app = Elm.Main.worker();
            app.ports.fromElmToJS.subscribe(function(world) {
                console.log(world)
            });
            app.ports.fromJSToElm.send('hello');
        </script>
    </body>
</html>
 

Bonjour le monde

Voir comment compiler ce code dans Initialize et build

import Html

main = Html.text "Hello World!"
 

Initialiser et construire

La plate-forme Elm doit être installée sur votre ordinateur. Le tutoriel suivant est écrit avec l’hypothèse que vous connaissez bien le terminal.

Initialisation

Créez un dossier et accédez-y avec votre terminal:

$ mkdir elm-app
$ cd elm-app/
 

Initialiser le projet Elm et installer les dépendances de base:

$ elm-package install -y
 

elm-package.json et le dossier elm-stuff devraient apparaître dans votre projet.

Créez le point d'entrée de votre application Main.elm et collez l'exemple Hello World dans celui-ci.

Construire le projet

Pour construire votre premier projet, exécutez:

$ elm-make Main.elm
 

Cela produira index.html avec le fichier Main.elm (et toutes les dépendances) compilé en JavaScript et intégré au HTML. Essayez de l'ouvrir dans votre navigateur!

Si cela échoue avec l'erreur, I cannot find module 'Html'. Cela signifie que vous n'utilisez pas la dernière version d'Elm. Vous pouvez résoudre le problème en mettant à niveau Elm et en reprenant la première étape, ou en exécutant la commande suivante:

$ elm-package install elm-lang/html -y
 

Si vous avez votre propre fichier index.html (par exemple, lorsque vous travaillez avec des ports), vous pouvez également compiler vos fichiers Elm dans un fichier JavaScript:

$ elm-make Main.elm --output=elm.js
 

Plus d'infos dans l'exemple Intégration dans HTML .

Installation

Pour démarrer le développement avec Elm, vous devez installer un ensemble d'outils appelé elm-platform .

Il comprend: elm-make , elm-réacteur , elm-repl et elm-package .

Tous ces outils sont disponibles via l'interface de ligne de commande, en d'autres termes, vous pouvez les utiliser depuis votre terminal.

Choisissez l'une des méthodes suivantes pour installer Elm:

Utiliser l'installateur

Téléchargez le programme d'installation à partir du site officiel et suivez l'assistant d'installation.

Utiliser npm

Vous pouvez utiliser Node Package Manager pour installer la plateforme Elm.

Installation globale:

$ npm install elm -g
 

Installation locale:

$ npm install elm
 

Les outils de plate-forme Elm installés localement sont accessibles via:

$ ./node_modules/.bin/elm-repl  # launch elm-repl from local node_modules/
 

En utilisant homebrew

$ brew install elm
 

Basculer entre les versions avec elm-use

Installez elm-use

$ npm install -g elm-use
 

Passer à une version orme plus ancienne ou plus récente

$ elm-use 0.18  // or whatever version you want to use
 

Lectures complémentaires

Apprenez à initialiser et à construire votre premier projet.

Serveur de construction local (réacteur Elm)

Elm Reactor est l'outil essentiel pour le prototypage de votre application.

Veuillez noter que vous ne pourrez pas compiler Main.elm avec Elm Reactor si vous utilisez Http.App.programWithFlags ou Ports

Lancer elm-réacteur dans un répertoire de projets démarrera un serveur Web avec un explorateur de projet, ce qui vous permettra de compiler chaque composant séparé.

Toutes les modifications apportées à votre code sont mises à jour lorsque vous rechargez la page.

$ elm-reactor                     # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000  # launch elm-reactor on 0.0.0.0:3000
 

REPL

Une bonne manière d’apprendre à connaître Elm est d’essayer d’écrire certaines expressions dans REPL (Read-Eval-Print Loop). Ouvrez une console dans votre dossier elm-app (que vous avez créé lors de la phase d' initialisation et de génération ) et procédez comme suit:

$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>
 

elm-repl est en fait un outil très puissant. Disons que vous créez un fichier Test.elm dans votre dossier elm-app avec le code suivant:

module Test exposing (..)


a = 1


b = "Hello"
 

Maintenant, vous revenez à votre REPL (qui est resté ouvert) et tapez:

import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>
 

Encore plus impressionnant, si vous ajoutez une nouvelle définition à votre fichier Test.elm , par exemple

s = """
Hello,
Goodbye.
"""
 

Sauvegardez votre fichier, revenez à votre REPL, et sans importer à nouveau Test , la nouvelle définition est disponible immédiatement:

> s
"\nHello,\nGoodbye.\n" : String
>
 

C'est très pratique lorsque vous voulez écrire des expressions couvrant plusieurs lignes. Il est également très utile de tester rapidement les fonctions que vous venez de définir. Ajoutez ce qui suit à votre fichier:

f x =
  x + x * x
 

Enregistrez et revenez au REPL:

> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>
 

Chaque fois que vous modifiez et enregistrez un fichier que vous avez importé, et que vous revenez à REPL et essayez de faire quoi que ce soit, le fichier complet est recompilé. Par conséquent, il vous indiquera toute erreur dans votre code. Ajoute ça:

c = 2 ++ 2
 

Essayez cela:

> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm

The left argument of (++) is causing a type mismatch.

22|     2 ++ 2
        ^
(++) is expecting the left argument to be a:

    appendable

But the left argument is:

    number

Hint: Only strings, text, and lists are appendable.


> 
 

Pour conclure cette introduction à la REPL, ajoutons elm-repl connaît également les packages que vous avez installés avec l' elm package install . Par exemple:

> import Html.App
> Html.App.beginnerProgram
<function>
    : { model : a, update : b -> a -> a, view : a -> Html.Html b }
      -> Platform.Program Basics.Never
>
 

Guide de style et format orme

Le guide de style officiel se trouve sur la page d'accueil et concerne généralement:

  • lisibilité (au lieu de compacité)
  • facilité de modification
  • diffs propres

Cela signifie que, par exemple, ceci:

homeDirectory : String
homeDirectory =
  "/root/files"


evaluate : Boolean -> Bool
evaluate boolean =
  case boolean of
    Literal bool ->
        bool

    Not b ->
        not (evaluate b)

    And b b' ->
        evaluate b && evaluate b'

    Or b b' ->
        evaluate b || evaluate b'
 

est considéré meilleur que:

homeDirectory = "/root/files"

eval boolean = case boolean of
    Literal bool -> bool
    Not b        -> not (eval b)
    And b b'     -> eval b && eval b'
    Or b b'      -> eval b || eval b'
 
0,16

L'outil elm-format vous aide à formater automatiquement votre code source (généralement lors de la sauvegarde), dans la même veine que le langage gofmt de Go language. Encore une fois, la valeur sous-jacente consiste à avoir un style cohérent et à enregistrer des arguments et des guerres de flamme sur diverses questions telles que les onglets, les espaces ou la longueur d'indentation .

Vous pouvez installer elm-format suivant les instructions du dépôt Github . Configurez ensuite votre éditeur pour formater automatiquement les fichiers Elm ou exécutez manuellement les elm-format FILE_OR_DIR --yes .