Elm Language учебник
Начало работы с Elm Language

CSS F# Haskell Language HTML JavaScript Node.js React Regular Expressions Ruby on Rails SVG
Поиск…


замечания

[Elm] [1] - дружественный язык программирования, который компилируется в JavaScript. Elm фокусируется на графических интерфейсах на основе браузера, одностраничных приложениях.

Пользователи обычно хвалит его за:

Версии

Версия Дата выхода
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

Монтаж

Чтобы начать разработку с Elm, вам нужно установить набор инструментов под названием elm-platform .

Он включает в себя: вяжущий , вяз-реактор , вяз-рет и вяза-пакет .

Все эти инструменты доступны через CLI, другими словами, вы можете использовать их с вашего терминала.

Выберите один из следующих способов установки Elm:

Использование установщика

Загрузите установщик с официального сайта и следуйте указаниям мастера установки.

Использование npm

Вы можете использовать Node Package Manager для установки платформы Elm.

Глобальная установка: 

$ npm install elm -g

Локальная установка: 

$ npm install elm

Локально установленные инструменты платформы Elm доступны через: 

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

Использование доморощенного 

$ brew install elm

Переключение между версиями с использованием вяза

Установка вяза 

$ npm install -g elm-use

Переключитесь на более старую или более новую версию вяза 

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

дальнейшее чтение

Узнайте, как инициализировать и построить свой первый проект.

Привет, мир

Узнайте, как скомпилировать этот код в разделе « Инициализация и сборка» 

import Html

main = Html.text "Hello World!"

редакторы

Атом

Световой стол

Возвышенный текст

напор

Emacs

IntelliJ IDEA

Скобки

Код VS

Инициализация и сборка

На вашем компьютере должна быть установлена ​​платформа Elm, следующий учебник написан с предположением, что вы знакомы с терминалом.

инициализация

Создайте папку и перейдите к ней с помощью своего терминала: 

$ mkdir elm-app
$ cd elm-app/

Инициализировать проект Elm и установить основные зависимости: 

$ elm-package install -y

elm-package.json вашем проекте должна появиться папка elm-package.json и elm-stuff .

Создайте точку входа для вашего приложения Main.elm и вставьте в нее пример Hello World .

Построение проекта

Чтобы создать свой первый проект, запустите: 

$ elm-make Main.elm

Это создаст index.html с файлом Main.elm (и всеми зависимостями), скомпилированным в JavaScript и встроенным в HTML. Попробуйте открыть его в своем браузере!

Если это не удается с ошибкой, I cannot find module 'Html'. это означает, что вы не используете последнюю версию Elm. Вы можете решить проблему либо путем обновления Elm и повторного ввода первого шага, либо с помощью следующей команды: 

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

Если у вас есть собственный файл index.html (например, при работе с портами), вы также можете скомпилировать ваши файлы Elm в файл JavaScript: 

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

Дополнительная информация в примере Встраивание в HTML .

Руководство по стилю и вязание

Руководство по официальному стилю находится на домашней странице и обычно подходит для:

  • читаемость (вместо компактности)
  • легкость модификации
  • чистый diffs

Это означает, что, например, это: 

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'

считается лучше, чем: 

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

Инструмент elm-format помогает, автоматически форматируя исходный код (обычно при сохранении), в том же ключе, что и Go gommt Go . Опять же, базовое значение имеет один согласованный стиль и сохранение аргументов и огней относительно различных проблем, таких как вкладки или пробелы или длина отступа .

Вы можете установить elm-format следуя инструкциям в репозитории Github . Затем настройте свой редактор для автоматического форматирования файлов Elm или вручную elm-format FILE_OR_DIR --yes вручную.

Встраивание в HTML

Существует три возможности вставить код Elm в существующую HTML-страницу.

Вставить в тег тела

Предположим, что вы собрали пример Hello World в файле elm.js , вы можете позволить Elm взять <body> следующим образом: 

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

ПРЕДУПРЕЖДЕНИЕ . Иногда некоторые хромовые расширения беспорядочны с <body> что может привести к тому, что ваше приложение начнет работать. Рекомендуется всегда встраивать в определенный div. Больше информации здесь .

Вставить в Div (или другой узел DOM)

В качестве альтернативы, предоставляя конкретный элемент HTML, код Elm может быть запущен в этом конкретном элементе страницы: 

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

Вставить в качестве веб-рабочего (без интерфейса)

Код Elm также можно запускать как рабочий и общаться через порты : 

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

РЕПЛ

Хороший способ узнать о Elm - попробовать написать некоторые выражения в REPL (Read-Eval-Print Loop). Откройте консоль в папке elm-app (которую вы создали на этапе инициализации и сборки ) и попробуйте выполнить следующее: 

$ 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 на самом деле довольно мощный инструмент. Предположим, вы создаете файл Test.elm внутри вашей папки elm-app со следующим кодом: 

module Test exposing (..)


a = 1


b = "Hello"

Теперь вы вернетесь в свой REPL (который остался открытым) и введите: 

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

Еще более впечатляюще, если вы добавите новое определение в файл Test.elm , например 

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

Сохраните файл, вернитесь еще раз к REPL и не импортируйте Test снова, новое определение доступно сразу: 

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

Это очень удобно, когда вы хотите писать выражения, которые охватывают многие строки. Также очень полезно быстро проверить функции, которые вы только что определили. Добавьте в свой файл следующее: 

f x =
  x + x * x

Сохраните и вернитесь к REPL: 

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

Каждый раз, когда вы изменяете и сохраняете файл, который вы импортировали, и возвращаетесь к REPL и пытаетесь сделать что-либо, полный файл перекомпилируется. Поэтому он расскажет вам о любой ошибке в вашем коде. Добавь это: 

c = 2 ++ 2

Попробуй это: 

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


>

Чтобы завершить это введение в REPL, добавим, что elm-repl также знает о пакетах, которые вы установили с elm package install . Например: 

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

Локальный сервер сборки (Elm Reactor)

Elm Reactor - важный инструмент для прототипирования вашего приложения.

Обратите внимание, что вы не сможете скомпилировать Main.elm с Elm Reactor, если вы используете Http.App.programWithFlags или порты

Запуск эль-реактора в каталоге проектов запустит веб-сервер с помощью проводника проекта, который позволит вам скомпилировать каждый отдельный компонент.

Любые изменения, внесенные в ваш код, обновляются при перезагрузке страницы. 

$ 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
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow