Elm для React/Redux разработчиков (Elm #1: Знакомимся с Elm)

На данном вебинаре мы знакомились с языком Elm проводя параллели между Elm и Redux, поэтому если вы пишите на React/Redux вы будете чувствовать себя как дома в гостях у Elm на первом видео 2020 года.

Видео

Затравка

UI анти-патерн и его решение в Elm
Пост от Kent C.Dodds и X State вдохновлены речью Ричарда «Make impossible state impossible» (конспект здесь, крайне рекомендую видео к просмотру)
не забываем про то, что Redux был вдохновлен Elm

Чему может научить нас Elm

освоить функциональное программирование;
думать о структуре данных;
смотреть исходный код / доклады;

Так же можете почитать статью «Почему мне стоит изучать Elm«.

Установка

В документации есть ссылки на установщики для windows / mac + инструкция для linux.

Редактор

Оба редактора бесплатные (у IntelliJ IDEA есть платная версия)

Create-elm-app

Чтобы не уходить далеко от привычных шаблонов, воспользуемся знакомой техникой (readme проекта поможет установить и запустить приложение).

Ellie app

Онлайн редактор, на подобие Codepen позволит вам поиграться с elm в браузере или поможет пошарить примеры, чтобы получить ответ на вопрос в slack чате (en) или чате в телеграмм (ру).

Пример счетчика

На вебинаре мы разбирали счетчик, добавляя модификации.

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

Counter 1.1 (Reset добавлен, сравнение сразу в коде)
Counter 1.2 (Reset через helper функцию)
[Counter 1.3] (открыто/закрыто bool)

Добавляем custom Type и две кнопки «открыто/закрыто» + msg: PleaseOpen, PleaseClose

[Counter 1.4] (PleaseOpen, PleaseClose + переименовали Opened/Closed)
[Counter 1.5] (версия со строковыми «Open» / «Close»)
Counter 1.6 (версия со статусом Open / Close)

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

До встречи. Пожалуйста, оставляйте свои комментарии к видео на youtube, даже если это просто «спасибо». Для вопросов по теме, можете использовать те же комментарии или написать комментарий здесь на сайте.

Макс