Elm Language Samouczek
Pierwsze kroki w Elm Language

CSS F# Haskell Language HTML JavaScript Node.js React Regular Expressions Ruby on Rails SVG
Szukaj…


Uwagi

[Elm] [1] to przyjazny funkcjonalny język programowania kompilujący się w JavaScript. Elm koncentruje się na GUI opartych na przeglądarce, aplikacjach jednostronicowych.

Użytkownicy zazwyczaj chwalą to za:

Wersje

Wersja Data wydania
0.18.0 14.11.2016
0.17.1 27.06.2016
0,17 2016-05-10
0,16 2015-11-19
0.15.1 30.06.2015
0,15 2015-04-20

Instalacja

Aby rozpocząć programowanie z Elm, musisz zainstalować zestaw narzędzi o nazwie elm-platform .

Obejmuje on: wiąz , reaktor wiązów , wiąz wiązów i pakiet wiązów .

Wszystkie te narzędzia są dostępne za pośrednictwem interfejsu CLI, innymi słowy można z nich korzystać z poziomu terminala.

Wybierz jedną z następujących metod, aby zainstalować Elm:

Korzystanie z instalatora

Pobierz instalator z oficjalnej strony internetowej i postępuj zgodnie z instrukcjami kreatora instalacji.

Korzystanie z npm

Możesz użyć Menedżera pakietów Node, aby zainstalować platformę Elm.

Instalacja globalna: 

$ npm install elm -g

Instalacja lokalna: 

$ npm install elm

Lokalnie zainstalowane narzędzia platformy Elm są dostępne poprzez: 

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

Korzystanie z homebrew 

$ brew install elm

Przełączaj się między wersjami z użyciem wiązu

Zainstaluj wiąz 

$ npm install -g elm-use

Przełącz na starszą lub nowszą wersję wiązu 

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

Dalsza lektura

Dowiedz się, jak zainicjować i zbudować swój pierwszy projekt.

Witaj świecie

Zobacz, jak skompilować ten kod w Inicjalizuj i buduj 

import Html

main = Html.text "Hello World!"

Redakcja

Atom

Lekki stół

Wzniosły tekst

Wigor

Emacs

IntelliJ IDEA

Wsporniki

Kod VS

Zainicjuj i skompiluj

Powinieneś mieć zainstalowaną platformę Elm na swoim komputerze, poniższy samouczek jest napisany z założeniem, że znasz terminal.

Inicjalizacja

Utwórz folder i przejdź do niego za pomocą terminala: 

$ mkdir elm-app
$ cd elm-app/

Zainicjuj projekt Elm i zainstaluj podstawowe zależności: 

$ elm-package install -y

elm-package.json i folder elm-stuff powinny pojawić się w twoim projekcie.

Utwórz punkt wejścia dla swojej aplikacji Main.elm i wklej do niej przykład Hello World .

Budowanie projektu

Aby zbudować swój pierwszy projekt, uruchom: 

$ elm-make Main.elm

Spowoduje to wygenerowanie pliku index.html z plikiem Main.elm (i wszystkimi zależnościami) skompilowanymi w JavaScript i wbudowanymi w HTML. Spróbuj otworzyć w przeglądarce!

Jeśli to się nie powiedzie z błędem, I cannot find module 'Html'. oznacza to, że nie używasz najnowszej wersji Elm. Możesz rozwiązać problem albo poprzez aktualizację Elm i ponowienie pierwszego kroku, albo za pomocą następującego polecenia: 

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

Jeśli masz własny plik index.html (np. Podczas pracy z portami), możesz również skompilować pliki Elm do pliku JavaScript: 

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

Więcej informacji w przykładzie Osadzanie w HTML .

Przewodnik po stylach i format wiązu

Oficjalny przewodnik po stylu znajduje się na stronie głównej i ogólnie dotyczy:

  • czytelność (zamiast zwartości)
  • łatwość modyfikacji
  • czyste różnice

Oznacza to na przykład, że: 

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'

jest uważany za lepszy niż: 

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

Narzędzie wiąz formacie pomaga formatowania kodu źródłowego dla Ciebie automatycznie (zazwyczaj na SAVE), w podobnym duchu, aby przejść na język gofmt . Ponownie, podstawową wartością jest jeden spójny styl i zapisywanie argumentów i flamewars na różne tematy, takie jak tabulatory vs. spacje lub długość wcięcia .

Możesz zainstalować elm-format zgodnie z instrukcjami na repozytorium Github . Następnie skonfiguruj edytor, aby automatycznie formatował pliki Elm lub uruchom elm-format FILE_OR_DIR --yes ręcznie.

Osadzanie w HTML

Istnieją trzy możliwości wstawienia kodu Elm do istniejącej strony HTML.

Osadzony w znaczniku body

Załóżmy, że skompilowałeś przykład Hello World do pliku elm.js , możesz pozwolić elm.js przejąć znacznik <body> sposób: 

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

OSTRZEŻENIE : Czasami niektóre rozszerzenia chrome nie zgadzają się z <body> co może spowodować przerwanie produkcji aplikacji. Zaleca się, aby zawsze osadzać w konkretnym pliku div. Więcej informacji tutaj .

Osadzanie w Div (lub innym węźle DOM)

Alternatywnie, podając konkretny element HTML, kod Elm można uruchomić w tym konkretnym elemencie strony: 

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

Osadź jako pracownik sieciowy (bez interfejsu użytkownika)

Kod wiązu można również uruchomić jako proces roboczy i komunikować się przez porty : 

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

Dobrym sposobem na poznanie Elm jest próba napisania wyrażeń w REPL (pętla do odczytu i odczytu). Otwórz konsolę w folderze elm-app (utworzonym w fazie inicjalizacji i kompilacji ) i spróbuj wykonać następujące czynności: 

$ 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 jest tak naprawdę dość potężnym narzędziem. Załóżmy, że tworzysz plik Test.elm w folderze elm-app z następującym kodem: 

module Test exposing (..)


a = 1


b = "Hello"

Teraz wróć do swojej REPL (która pozostała otwarta) i wpisz: 

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

Jeszcze bardziej imponujące, jeśli dodasz nową definicję do pliku Test.elm , na przykład 

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

Zapisz plik, wróć jeszcze raz do REPL i bez ponownego importowania Test nowa definicja jest natychmiast dostępna: 

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

Jest to bardzo wygodne, gdy chcesz pisać wyrażenia obejmujące wiele wierszy. Bardzo przydatne jest także szybkie testowanie właśnie zdefiniowanych funkcji. Dodaj następujące elementy do pliku: 

f x =
  x + x * x

Zapisz i wróć do REPL: 

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

Za każdym razem, gdy modyfikujesz i zapisujesz zaimportowany plik, a następnie wracasz do REPL i próbujesz cokolwiek zrobić, pełny plik jest ponownie kompilowany. Dlatego powie ci o każdym błędzie w twoim kodzie. Dodaj: 

c = 2 ++ 2

Spróbuj tego: 

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


>

Aby zakończyć to wprowadzenie do REPL, dodajmy, że elm-repl wie również o pakietach, które zainstalowałeś z elm package install . Na przykład: 

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

Lokalny serwer kompilacji (Elm Reactor)

Elm Reactor to niezbędne narzędzie do prototypowania aplikacji.

Pamiętaj, że nie będziesz mógł skompilować Main.elm z Elm Reactor, jeśli używasz Http.App.programWithFlags lub Ports

Uruchomienie wiązu w katalogu projektów uruchomi serwer WWW z eksploratorem projektu, który pozwoli Ci skompilować każdy osobny komponent.

Wszelkie zmiany wprowadzone w kodzie są aktualizowane po ponownym załadowaniu strony. 

$ 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


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow