Elm LanguageAan de slag met Elm Language


Opmerkingen

[Elm] [1] is een vriendelijke functionele programmeertaal die compileert met JavaScript. Elm richt zich op browser-gebaseerde GUI's, applicaties met één pagina.

Gebruikers prijzen het meestal om:

versies

Versie Publicatiedatum
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

Editors

Atoom

Lichte tafel

Sublieme tekst

Vim

Emacs

IntelliJ IDEE

beugels

VS-code

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>
 

Hallo Wereld

Bekijk hoe u deze code compileert in Initialiseren en bouwen

import Html

main = Html.text "Hello World!"
 

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 .

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 .

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
 

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
>
 

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'
 
0.16

De tool iep-formaat helpt door het formatteren van uw broncode automatisch voor u (meestal op save), in dezelfde geest te gaan taal van gofmt . Nogmaals, de onderliggende waarde heeft één consistente stijl en bewaart argumenten en vlammen over verschillende kwesties zoals tabbladen versus spaties of inspringingslengte .

U kunt elm-format installeren door de instructies op de Github-repo te volgen . Configureer vervolgens uw editor om de Elm-bestanden automatisch te formatteren of voer elm-format FILE_OR_DIR --yes handmatig uit.