Основи розробки на мові Elm (керівництво інструментарію для початківців)

Elm це функціональний мова програмування для розробки веб-додатків, що працюють в браузері. Elm строгий, статично типізований. Elm схожий на Haskell, однак це лише поверхневе подібність, адже Elm спочатку заточений для швидкої розробки веб-додатків.
Ця стаття представляє з себе шпаргалку для початківців з основ розробки на мові Elm, а саме, тут розглядається організація проекту, інструментарій Elm і середовище розробки Light Table.
Установка Elm
Elm можна встановити як пакет NPM:
npm install -g elm

Установка Light Table
Elm підтримується у вигляді плагінів багатьма просунутими редакторами: Emacs, Visual Studio Code, Brackets та іншими. Але, мабуть, сама просунута IDE для Elm доступна Light Table http://lighttable.com/ у вигляді відповідного доданка. Домашня сторінка цього плагіна: https://github.com/rundis/elm-light.
Установка пакета Html
Для розробки веб-додатків на Elm знадобиться пакет Elm html. Для цього переходимо в каталог проекту (він може бути порожнім) і запускаємо в ньому наступну команду:
elm install package elm-lang/html

Під час встановлення
elm-package
запропонує додати інформацію про цьому пакеті в файл
elm-package.json
. Погоджуємося з цим (тим більше, що плагін Light Table для Elm визначає проект Elm за наявності цього файлу). Потім він повідомить нам, що потрібно встановити залежність цього пакету. Теж погоджуємося. В результаті отримуємо встановленими три пакету:
elm-lang/core
,
elm-lang/html
та
elm-lang/virtual-dom
. Пакети встановлюються в підкаталог
elm-stuff
.
Відкриваємо проект Light Table
Тепер можна відкрити проект в Light Table. Для цього запускаємо сам редактор (в Linux команда
light
, якщо каталог Light Table прописаний в PATH) і йдемо в
File/Open folder
, вибираємо відповідний каталог проекту.
Правимо elm-package.json
Файл elm-package.json в проекті мовою Elm грає таку ж роль, як і package.json в проектах на базі JavaScript.
Після установки першого пакету ми отримаємо elm-package.json приблизно такого змісту:
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "4.0.1 <= v < 5.0.0",
"elm-lang/html": "1.0.0 <= v < 2.0.0"
},
"elm-version": "0.17.0 <= v < 0.18.0"
}

Очевидно, що потрібно відредагувати вміст полів
version
,
summary
та
repository
.
Створення головного модуля
В корені проекту розмістимо головний модуль програми Main.elm, наприклад, такого змісту:
module Main exposing (main)

import Html exposing (text)

main = text "Привіт"

(Природно, що у великому проекті исходники будемо складати не в корінь проекту, а у відповідний підкаталог.)
Запуск програми
Для запуску програми потрібно відкрити вікно команд редактора (
Ctrl-Space
) і набрати
elm: reactor
. У списку виберемо
Elm: current View elm file in browser (elm-reactor)
.
Зображення 1
Після чого повинно відкритися вікно вбудованого браузера з запущеним нашим додатком. Якщо бачимо порожнє вікно браузера, то, трохи почекавши, оновимо його вміст (
Ctrl-R
). Повинні побачити напис
Hello
.
Зображення 2
Щоб бачити вікно браузера з відкритим поруч з вікном редактора коду, потрібно викликати контекстне меню вікна браузера і вибрати пункт меню
Move tab to new tabset
.
Автооновлення програми
elm-reactor
призначений для полегшення розробки додатків на Elm. По-перше, він надає статичний веб-сервер для розроблювального додатка. По-друге, він стежить за змінами проекту, пересобирает його при появі змін і оновлює вміст вікна браузера. Правда у автора остання функція чомусь не працювала. Можливо із-за того, що плагін для Elm ще не був адаптований для версії 0.17.0.
Складання проекту
Для складання (компіляції) проекту або окремого модуля потрібно відкрити вікно команд (
Ctrl-Space
), набрати
elm: make
та вибрати відповідний пункт меню.
При першій спробі зібрати весь проект виникне така проблема:
Зображення 3
Відкриємо elm-package.json і відредагуємо його:
"make-info": {
"main": "Main.elm",
"out": "main.js"
}

В командному рядку потрібно в каталозі проекту запустити команду:
elm make

Перевірка модуля
Для перевірки модуля потрібно відкрити файл модуля, відкрити вікно команд, набрати
elm: lint
та вибрати
Lint selected file
. Після перевірки проблемні місця в коді будуть підкреслені. Щоб подивитися, що за проблеми, потрібно спочатку поставити курсор на підкреслене місце в коді, потім знову звернутися до вікна команд і набрати
linter: show
. Біля проблемного місця з'явиться спливаюче вікно з коментарем.
Зображення 4
Якщо натиснути клавішу Enter або клацнути на відповідну кнопку в вікні, можна отримати виправлення.
Набравши у вікні команд
linter:
можна побачити й інші функції цього інструмента.
Граф залежностей
Для побудови графа залежностей потрібно у вікні команд набрати
elm: graph
та вибрати пункт
Elm: Show dependency graph
.
Зображення 5
Управління пакетами
Для управління пакетами, як вже було сказано на самому початку, є команда
elm package
, але плагін для Light Table також надає візуальний засіб управління пакетами проекту. Для цього зазвичай відкриваємо вікно команд, набираємо в ньому
elm: package
і вибираємо пункт
Elm: Show project packages
.
Зображення 6
REPL
REPL можна викликати як з командного рядка, запустивши команду
elm repl

Так і в середовищі Light Table. Для цього відкриваємо вікно команд, набираємо в ньому
elm: repl
і вибираємо пункт
Elm repl: Open a elm repl
.
Для запуску коду модуля в REPL потрібно спочатку імпортувати модуль:
import Main

Після чого можна викликати яку-небудь функцію:
Main.main

У REPL після введення коду потрібно натискати
Ctrl-Enter
.
Зображення 7
далі
Післямова
Пошуки російськомовного співтовариства Elm-розробників навели мене на думку, що такого не існує, тому нещодавно я створив і почав наповнювати групу на Вконтакте: https://vk.com/elm_lang_ru. Приєднуйтесь!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.