Elm Language Zelfstudie
Aan de slag met Elm Language

Opmerkingen

versies

Installatie

Om de ontwikkeling met Elm te starten, moet u een set hulpmiddelen installeren genaamd elm-platform .

Het omvat: iep-merk , iep-reactor , iep-repl en iep-pakket .

Al deze tools zijn beschikbaar via CLI, met andere woorden, u kunt ze vanaf uw terminal gebruiken.

Kies een van de volgende methoden om Elm te installeren:

Het installatieprogramma gebruiken

Download het installatieprogramma van de officiële website en volg de installatiewizard.

Npm gebruiken

U kunt Node Package Manager gebruiken om het Elm-platform te installeren.

Wereldwijde installatie:

$ npm install elm -g

Lokale installatie:

$ npm install elm

Lokaal geïnstalleerde Elm-platformtools zijn toegankelijk via:

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

Homebrew gebruiken

$ brew install elm

Schakel tussen versies met iepengebruik

Iep-gebruik installeren

$ npm install -g elm-use

Schakel over naar een oudere of nieuwere iepversie

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

Verder lezen

Leer hoe u uw eerste project kunt initialiseren en bouwen .

Hallo Wereld

Bekijk hoe u deze code compileert in Initialiseren en bouwen

import Html

main = Html.text "Hello World!"

Editors

Atoom

• https://atom.io/packages/language-elm
• https://atom.io/packages/elmjutsu

Lichte tafel

• https://github.com/rundis/elm-light

Sublieme tekst

• https://packagecontrol.io/packages/Elm%20Language%20Support

Vim

• https://github.com/ElmCast/elm-vim

Emacs

• https://github.com/jcollard/elm-mode

IntelliJ IDEE

• https://plugins.jetbrains.com/plugin/8192

beugels

• https://github.com/tommot348/elm-brackets

VS-code

• https://marketplace.visualstudio.com/items?itemName=sbrink.elm

Initialiseer en bouw

Je moet Elm platform op je computer geïnstalleerd hebben, de volgende tutorial is geschreven in de veronderstelling dat je bekend bent met terminal.

initialisatie

Maak een map en ga er naartoe met uw terminal:

$ mkdir elm-app
$ cd elm-app/

Initialiseer Elm-project en installeer kernafhankelijkheden:

$ elm-package install -y

elm-package.json map elm-package.json en elm-stuff zouden in uw project moeten verschijnen.

Maak het beginpunt voor uw applicatie Main.elm en plak hier Hello World- voorbeeld in.

Bouw van het project

Voer het volgende uit om uw eerste project te bouwen:

$ elm-make Main.elm

Dit zal index.html produceren met het Main.elm bestand (en alle afhankelijkheden) gecompileerd in JavaScript en gealigneerd in de HTML. Probeer het te openen in uw browser!

Als dit met de fout mislukt, I cannot find module 'Html'. het betekent dat u niet de nieuwste versie van Elm gebruikt. Je kunt het probleem oplossen door Elm te upgraden en de eerste stap opnieuw uit te voeren, of met de volgende opdracht:

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

Als u uw eigen index.html bestand hebt (bijvoorbeeld wanneer u met poorten werkt), kunt u uw Elm-bestanden ook compileren naar een JavaScript-bestand:

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

Meer info in het voorbeeld Inbedden in HTML .

Stijlgids en iep-formaat

De officiële stijlgids bevindt zich op de startpagina en geldt in het algemeen voor:

• leesbaarheid (in plaats van compactheid)
• gemak van aanpassing
• schoon verschil

Dit betekent bijvoorbeeld dat dit:

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'

wordt als beter beschouwd dan:

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'

Inbedden in HTML

Er zijn drie mogelijkheden om Elm-code in een bestaande HTML-pagina in te voegen.

Inbedden in de body-tag

Stel dat u het Hello World- voorbeeld in het bestand elm.js hebt gecompileerd, kunt u Elm als volgt de tag <body> overnemen:

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

WAARSCHUWING : soms verpesten sommige Chrome-extensies met <body> waardoor uw app in productie kan breken. Het wordt aanbevolen om altijd in te sluiten in een specifieke div. Meer info hier .

Inbedden in een div (of andere DOM-knoop)

Als alternatief kan door het aanbieden van een concreet HTML-element Elm-code in dat specifieke pagina-element worden uitgevoerd:

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

Insluiten als webmedewerker (geen gebruikersinterface)

Elm-code kan ook als medewerker worden gestart en communiceren via poorten :

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

REPL

Een goede manier om over Elm te leren, is door een paar uitdrukkingen in de REPL (Read-Eval-Print Loop) te schrijven. Open een console in uw map elm-app (die u hebt gemaakt in de fase Initialiseren en bouwen ) en probeer het volgende:

$ 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 is eigenlijk een behoorlijk krachtig hulpmiddel. Stel dat u een Test.elm bestand maakt in uw map elm-app met de volgende code:

module Test exposing (..)


a = 1


b = "Hello"

Ga nu terug naar uw REPL (die geopend is gebleven) en typ:

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

Nog indrukwekkender, als u een nieuwe definitie toevoegt aan uw Test.elm bestand, zoals

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

Sla uw bestand op, ga opnieuw terug naar uw REPL en zonder Test opnieuw te importeren, is de nieuwe definitie onmiddellijk beschikbaar:

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

Het is echt handig als u expressies wilt schrijven die vele regels beslaan. Het is ook erg handig om snel functies te testen die u zojuist hebt gedefinieerd. Voeg het volgende toe aan uw bestand:

f x =
  x + x * x

Opslaan en teruggaan naar de REPL:

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

Elke keer dat u een geïmporteerd bestand wijzigt en opslaat en u terugkeert naar de REPL en alles probeert te doen, wordt het volledige bestand opnieuw gecompileerd. Daarom zal het u vertellen over eventuele fouten in uw code. Voeg dit toe:

c = 2 ++ 2

Probeer dat eens:

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


> 

Om deze inleiding van de REPL af te ronden, laten we toevoegen dat elm-repl ook op de hoogte is van de pakketten die u hebt geïnstalleerd met elm package install . Bijvoorbeeld:

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

Local Build Server (Elm Reactor)

Elm Reactor is het essentiële hulpmiddel voor het maken van prototypen van uw toepassing.

Houd er rekening mee dat u Main.elm niet kunt compileren met Elm Reactor als u Http.App.programWithFlags of Ports gebruikt

Als u iep-reactor in een projectmap uitvoert, wordt een webserver gestart met een projectverkenner, waarmee u elk afzonderlijk onderdeel kunt compileren.

Alle wijzigingen die u in uw code aanbrengt, worden bijgewerkt wanneer u de pagina opnieuw laadt.

$ 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