Elm #2: Загрузка и отображение json

Сегодня будем использовать parcel и IntelliJ IDEA Community Edition. Все инструменты бесплатные.

Инициализация elm проекта (parcel)

Все стандартно, устанавливаем parcel глобально, инициализируем проект.

Затем копируем содержимое файлов со страницы документации

По мелочи добавим .gitignore и npm start скрипт.

Исходный код данного шага.

На этом шаге, если вы выполните «npm start» — у вас должно запуститься приложение на localhost:1234

Настраиваем IDE: IntelliJ Idea CE

Elm, elm-format и elm-test у меня установлены глобально. Можно установить и локально, IDE найдет их автоматически, либо укажете вручную.

Обычно, все наилучшие побуждения разбиваются об настройку инструментов, которая меня изрядно бесит. Я хочу писать код, но приходится танцевать каждый раз, когда обновился webpack или что-либо еще. Настройка ide + parcel не исключение, но у вас хотя бы есть план.

Во-первых, откройте IDE и выберите директорию с проектом.

Во-вторых, откройте настройки (на mac это cmd + ,, на остальных системах — в верхнем меню найдите настройки редактора).

В-третьих, добавьте Elm как новый плагин и настройте его следуя скриншотам ниже.

После этого у вас появится «в-четвертых»:

Здесь, после выбора elm.json файла, IDE может сказать «не могу найти файлы проекта» (или что-то подобное). Исправляется легко — переносим файлы index.html, index.js и Main.elm в директорию src/.

Затем правим .gitignore и скрипты в package.json и мы готовы использовать преимущества мощной IDE + быстрого сборщика (парсел).

Итого: настроили IntelliJ Idea Community Edition для работы с Elm используя Parcel.

Надеюсь, вы узнали что-то новое сегодня. Исходный код.

P.S. Parcel как и некоторые другие инструменты сбоит, если включена опция «safe write». Отключить можно (и нужно) здесь:

Непосредственно код

Ниже краткий конспект урока. Более подробно смотрите видео. Видео и конспект могут незначительно различаться, так как на вебинаре мы программируем вживую.

Отображение списка фруктов

• Задача: Отобразить список фруктов из массива ["яблоко", "банан", "груша"]

В elm нет let/const в привычном нам понимании, любая переменная эта функция, поэтому даже для объявления списка фруктов мы использовали функцию. Остальные шаги в целом не отличаются от других языков: сделали функцию для отрисовки UL списка, затем прошлись с помощью List.map (аналог [].map из js) и вернули LI верстку.

Решение (коммит)

Не забывайте, что Elm чувствителен к отступам. Даже для автоматической работы elm-format иногда приходится подогнать пару ошибочных отступов вручную.

• Задача: Отобразить список фруктов с emoji. Список emoji: 🍏 🍐 🍌

Решение

• Задача: Отобразить список фруктов, который мы «как будто» получили извне

Для этого разберемся с flags (флагами).

Флаги — это некий набор переменных, которые мы передаем в elm приложение в момент инициализации (старта). Обычно это какие-то конфигурационные настройки. Это может быть полезно, если вы «встраиваете» небольшое Elm приложение в уже существующее SPA, написанное на react, например. Зачем так делать? Причины могут быть разными, одна из них: вы хотите продемонстрировать в компании как работает Elm, например на странице корзины.

Для использования флагов, нам необходимо оформить Main.elm более стандартным способом с моделью (Model), функцией update и view. Коммит для этих изменений здесь.

Теперь мы готовы поработать с флагами. Хотя, по больше части все уже готово, чтобы заставить список продуктов отображаться, нужно лишь подкрутить функцию инициализации. Коммит.

Обратите внимание, что если вы, например, удалите поле name у Лимона, то приложение не запустится, будет ошибка в консоли браузера.

• Задача: отобразить список фруктов, пришедший с сервера

В качестве сервера будем использовать my-json-server.typicode.com. Мой список фруктов можно найти здесь.

Нам потребуется стандартный пакет для работы с http запросами — elm/http

elm install elm/http

Далее, изменив код согласно коммита мы можем прийти к рабочему примеру, в котором будет выполнен запрос на сервер, но лист фруктов будет пустым, так как мы еще не обрабатываем его корректно. Обратите внимание, что некоторые type variable (переменные типа) msg стали Msg, так как теперь это конкретный тип (тип «Msg»). Ранее это был type variable, то есть можно сказать «неконкретный тип», а некая переменная типа, которая будет каким-то конкретным типом в момент работы программы.

Потребуется elm/json

Итоговый код для загрузки json массива с данными и отображения в этом коммите.