Привет, Хабр!

Данный обзор познакомит вас с частичкой мира функциональных языков программирования, а именно с Elm, кто-то узнает про этот инструмент, кто-то про то, что фронтенд – это не только HTML, CSS и JS.

Elm – это функциональный язык программирования, который компилируется во всеми любимый javascript. Он обладает всеми плюсами и минусами этого семейства языков. Из самых важных особенностей стоит отметить, что язык является компилируемым. А также свойства языка принуждают вас сразу обдумать архитектуру вашего приложения: расписать, что попадёт в конкретную функцию, что из неё выйдет, и куда пойдёт дальше.

В данном материале я не буду углубляться в синтаксис языка, для этих целей существует множество гайдов (пусть и не так много, как в мейнстрим-языках).

Начну сразу с архитектуры приложений на Elm, которая показана на картинке ниже:

Elm генерирует HTML для отображения на экране, а затем приложение отправляет обратно сообщения (Msg) о каком-либо событии (например, нажатие кнопки).

Любое SPA (single page application) на Elm состоит из следующих элементов:

Init – начальное состояние модели.

Model — текущее состояние проекта.

View — отображение model.

Update — обновление состояния проекта на основе сообщений (Msg).

Что мы будем делать?

Для того что бы разобраться как работает Elm, было реализовано великое и могучее SPA под названием To-Do List (список дел) с возможностью записи дел и проведения некоторых операций над ними. Для демонстрации работы с запросами было добавлено соединение с БД (базой данных).

Наше SPA To-Do List будет обладать следующими возможностями:

• создание элемента To-Do List’а;

• редактирование (изменение названия и статуса выполнения задачи);

• удаление;

• сохранение в БД списка дел.

А реализовывать всё это мы будем с помощью следующих технологий:

1. Elm – виновник торжества.

2. Json-server и db.json в роли базы данных (БД).

3. Bootstrap – будет отвечать за красоту. 

Начинаем с начала

Для того что бы использовать Elm, как бы это странно не звучало, необходимо установить Elm. Лучше скачивать с официального сайта (elm-lang.org). Так же на нём находится самая актуальная документация языка, которая по своей структуре напоминает обучающий курс. Можно скачать и с pypi, но пакет там не обновлялся с конца 2018 года.

После того как Elm установился, необходимо перейти в директорию проекта и запустить его с помощью команды:

elm reactor

Проект запустится на localhost:8000 и всё, достаточно изредка нажимать ctrl+s для сохранения и проект будет автоматически обновляться, не нужен даже LiveServer.

Архитектура приложения

Приложение состоит из 3-х модулей, каждый из которых вынесен в отдельный файл структура проекта показана на изображении ниже.

1. Main – основной модуль приложения, в котором происходит его инициализация, добавление в проект теги html, body и всех статичных элементов, а также вызов других модулей. Код данного модуля находится в файле с логичным названием Main.elm.

Main : Program Value Model Msg
Main = 
    Browser.document
        { init = =init,
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

type Msg = NoOp | TodosMsg TodosMsg.Msg

type alias Model = {todos : List Todo, todoEditView : TodoEditView}

init : flags -> ( Model, Cmd Msg )
init fs = 
    let model = Model [] None
        cmds = Cmd.batch[ Cmd.map TodosMsg Todos.Models.fetchAll ]
    in ( model, cmds)

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model = 
    case msg of
        let
            ( newTodoEditView, newTodos, cmd ) = Todos.Models.update subMsg mod-el.todoEditView model.todos
            newModel = { model | todoEditView = newTodoEditView, todos = newTodos }
        in ( newModel, Cmd.map TodosMsg cmd )
        
view : Model -> Document Msg
view model = 
    { title = "Туду"
    , body = 
        [ div [] 
            [
            Html.map TodosMsg <| Todos.Models.viewEdit model.todoEditView
            , br [] []
            , Html.map TodosMsg <| Todos.Models.viewList model.todos
            ]   
        ]
    }

2. Models – модуль приложения, который отвечает за список дел. Из-за того, что пример небольшой, всё хранилось в одном месте. Но при более серьёзном проекте, хорошим тоном будет разделить код на разные модули. Здесь лежит таблица, которая хранит в себе дела, а также осуществлялись все действия с ними. Ниже приведена часть кода из данного модуля, который лежит в директории Todos и называется Models.elm.

-- Корпус таблицы
viewList : List Todo -> Html Msg
viewList todos =
    Table.table{ options = [ Table.striped ]
    , thead = Table.thead []
        [ Table.tr []
            [ Table.th [] [ text "Название" ]
            , Table.th [] [ text "Готово" ]
            , Table.th [] [
                     div [][ text "Действия" ]
                    , div[][ delCompl ]
                    ]
            ]
        ]
    , tbody = Table.tbody [] ( List.map todoRow todos )
    }

-- Строки таблицы
todoRow : Todo -> Table.Row Msg
todoRow t = 
    let 
        { id, title, completed } = table
        ( completedText, buttonText, buttonMsg ) = 
            if completed then ("Да", "Невыполненно", Revert )
            else ("Нет", "Выполненно", Complete)
        in
        Table.tr []
            [ Table.td [] [ text title ]
            , Table.td [] [ text completedText ]
            , Table.td [] [ 
                Button [ onClick <| buttonMsg t ][ text buttonText ]
                , Button [ onClick <| ShowEditView <| Editing t ][ text "Редактиро-вать" ]
                , Button [ onClick <| Delete t ][ text "Удалить" ]
            ]
            
-- Функция удаления
delCompl : Html Msg
delCompl = Button[ onClick DeleteCompleted ][ text "Удалить выполненные" ]

3. Utils – модуль связи с БД. Здесь находится всё, что связано с данными, а именно: кодирование и декодирование json’а и запросы, для выполнения которых использовался пакет Http.request. Пример запроса показан ниже. Код вынесен из модуля Utils.elm.

--запрос для удаления
delete : a -> String -> Platform.Task Http.Error a
delete a url =
    let decoder = Json.Decode.succeed a
        request = 
            Http.request
                {method = "DELETE"
                , headers = []
                , url = url
                , body = Http.emptyBody
                , expect = Http.expectJsopn decoder
                , timeout = Maybe.Nothing
                , withCredentials = False
                }
            in Http.toTask request

После реализации всех указанных модулей получится следующий результат:

Для тестового проекта, который никто не увидит – сойдёт. Но я делаю его для души, поэтому просто необходимо добавить немного красоты. И Elm в этом поможет, с помощью тесной интеграции с Bootstrap. Подключаем его следующей строкой в main:

import Bootstrap.CDN as CDN 

А также импортируем bootstrap классы добавляя элиасы для простоты вызова:

import Bootstrap.Button as Button  # и т.д. по необходимости

Благодаря bootstrap’у и небольшой доработке кода получается следующая картина:

При изменении названия, кнопка «Новая задача» заменяется на поля для редактирования наименования дела.

База данных

Для подъёма базы данных я использовал json-server, который был запущен на 4000 порту. Всего БД имеет 3 поля для каждого дела, а именно:

title <str> - название дела;

completed <boolean> - готовность дела;

id <int> - идентификатор дела.

Команда для запуска следующая:

Json-server db.json -p 4000

В итоге база данных выглядит следующим образом:

Что касается ответа на вопрос:

«Elm - забава или серьёзный инструмент?», он очень прост - всё зависит от вашего проекта. От себя скажу, что изначально программирование на Elm было похоже на поход в магазин на руках. Из-за того, что всё было непривычно, Elm требовал на разработку часы, когда с javascript на то же самое хватило бы и нескольких минут. Данное неудобство связано скорее с изначальным обучением программированию в императивном стиле и обычной привычкой.

Elm, как и множество функциональных языков программирования ломает ваш мозг, если раньше вы никогда не программировали в функциональном стиле, но взамен, он структурирует ваши мысли. Учит не создавать множество лишних переменных и функций, а также продумывать архитектуру приложения до того, как вы садитесь за написание кода.

Из минусов так же стоит отметить нераспространённость этого языка, и как следствие - отсутствие актуальной документации и примеров на русском языке, иногда даже на английском. Не всегда получается сразу найти информацию и приходится копать в дебри форумов.

Полный код приложения доступен по ссылке.