Современный фронтенд насчитывает приличное количество технологий, среди которых есть популярные и не очень. Популярные технологии, подразумевают большое количество вакансий на рынке труда. Непопулярные — чаще про расширение кругозора, чем про работу.
В 2019 году я наткнулся на Elm в тестовом задании от компании из Мюнхена. В это время я был в отпуске, но задача меня так заинтересовала, что сквозь гнев и непонимание как это все работает, в принципе, я захотел ее выполнить. Это был новый вызов. Вызов оказался удачным и меня позвали поработать в Европу. Но история не об этом…
Elm — это язык, который спроектирован специально под нужды фронтенда. В конечном счете ваш elm
код превращается в xxx.js
и выполняется в бразуере. Kажется, что «еще одно» чудо-юдо, которое превращается в js пройдет незаметно мимо основной массы, не тут то было! В подтверждении этого можно наблюдать растущую популярность, несколько удачных конференций и развитие самого языка, который на данный момент промаркирован версией 0.19.1. Что же интересного может дать Elm?
То есть, ошибок, которые возникли во время работы вашей программы. Прощайте undefined is not a function. Еще раз — никаких undefined
! В Elm, так же нет null
, типа, который считается «большой ошибкой» в дизайне языка. Есть противники и сторонники данного подхода, мне хватает и того, что нет undefined
Как это обстоит на практике? Вы пишите код на elm, затем запускается компилятор, который проверяет ваш код (привет, Turbo Pascal), затем если проверка прошла успешно — программа выполняется. Такая программа (в нашем случае это js файл) не должна «неожиданно упасть», так как прошла проверку. На деле, все так и есть. Наше приложение стабильно.
Заметьте, здесь нет гарантии, что все будет работать так как вы задумали. Код по прежнему пишите вы. Вы можете ошибиться в логике, но при этом, ваше приложение будет работать. Вы не увидите в консоли красный текст: Uncaught error exception...
.
Я знаю, таким образом вам Elm «не продать», но поверьте, если вы начнете писать на Elm, то первым делом, когда привыкнете и вам нужно будет написать js — вы испытаете шок от давно забытой в консоли ошибки про то, что undefined
— не функция и «все упало».
Если вы решили «запрыгнуть в IT» с минимумом знаний, то данная опция для вас сейчас недоступна. Легче выучить что-то популярное и начать битву на выживание среди других, кто поступил так же.
Если вы еще учитесь и вам необходимо выполнить курсовую / диплом с визуальной состовляющей в web — я очень рекомендую присмотреться к Elm.
Если же вы уже умеете программировать и присматриваетесь к тому, чтобы разрабатывать стабильные SPA, которые легко поддерживать — вновь я призываю вас посмотреть на Elm. Что вы получите?
Помимо уже упомянутого выше «расширения кругозора» и стабильной работы приложения, вам станут доступны немногочисленные вакансии в зарубежных компаниях. В СНГ есть люди, кто работает с Elm, но открытых вакансий я не нашел. На сегодня (19 ноября 2019) есть как минимум две (смешно!?) вакансии с релокейтом — в Мюнхен и в Мельбурн. Не так давно, была закрыта вакансия с релокейтом (то есть, переездом с помощью от компании) в США.
На stackoverflow можно найти 4 вакансии на elm (из которых чистый фронтенд — одна).
Не густо, согласен, но позиции предполагают удаленную работу или переезд, что придется по нраву многим.
К тому же, я думаю Elm коммьюнити продолжит расти и со временем будет доступно больше позиций.
Elm позволит вам выделиться на рынке труда. Так же, если вы можете выбирать стэк технологий на работе, вы можете использовать новые знания, для создания бронебойного приложения с любовью к расширению функционала.
Elm шустрый. По тестам — работает быстрее. Размер билда меньше. Данные об этом есть на главной странице elm-lang.
На практике — писать получается с комфортом, так как компилятор в терминале висит и ругается (причем, очень тактично, об этом еще поговорим), если что-то пошло не так. В браузер стоит переключиться, если стадия компиляции прошла успешно и настал момент увидеть результат.
Конечно, в начале писать получается, не то чтобы медленно. Не получается, вообще. Мне было трудно понять новый язык. Однако, бытует мнение, что в Elm не так уж и сложно «въехать», особенно если вы проходите стажировку в компании, что подтверждено в нескольких компаниях, если верить подкасту Elm Town.
Заслуживает отдельного пункта. Так как в процессе написания программы в терминале вы видите подробный текст ошибки и «предложения» по исправлению.
Данный инструмент невероятно упрощает рефакторинг. Вы можете исправить модель данных (сердце вашей программы) и затем следовать сообщения компилятора об ошибках, исправляя код везде, где нужно. В конце работы, вы откроете браузер и с удивлением обнаружите, что все работает!
Когда ваша кодовая база растет, возможность удобного наращивания функционала в приложении (разработки новых фич) выходит на первое место. Elm предоставляет для этого удобнейший инструментарий, состоящий из компилятора и … достаточно
Причем, речь не только про проверку передан ли тип строка
в аргумент функции, который ожидает строку
(это и TypeScript умеет). Elm компилятор умеет гораздо больше, так как система типов в Elm гораздо сильнее. Это нужно попробовать.
Помимо того, что нам привычно: строки, числа, объекты, массивы, в Elm можно создать свой тип данных.
WAT?
В начале — непонятно, что это такое и зачем. Но, когда втянешься…
Расскажу вам любимый пример из «интернетов»:
Стандартный запрос за списком новостей в redux
:
В чем здесь проблема? В том, что у нас изначально в data
— пустой массив. То есть, на этапе загрузки приложения мы увидим: «нет новостей», а затем прелоадер и затем новости.
Если же новостей на сервере нет — вновь увидим «нет новостей».
Проблема на данный момент в том, что мы плохо спроектировали модель данных, в которой нет разницы для ситуаций: «мы еще не запросили новости», и «запрос вернулся, новостей нет».
Проблема легко решаема, конечно. Можно установить data
в null
на начальном этапе, можно добавить дополнительный флаг в стиле «был ли запрос за данными» и т.д.
А можно, сделать свой тип! В котором мы модель данных новостей укажем следующую:
При таком раскладе отрисовать текущее состояние приложения становится заметно проще.
Выше в ссылке на пример, так же указано про проблему отображение лайков в twitter. Проблема та же — не удобно задавать модель данных.
Здесь, я хочу сказать, что дело не в том, что ваш код плохой, а на Elm вы не напишете плохой код, дело в том, что Elm предоставляет удобный язык для того, чтобы данная проблема не существовала.
Elm — функциональный язык программирования. Разобравшись с данным подходом в рамках elm, вы сможете лучше использовать «функциональщину» в ваших текущих javascript приложениях или же продолжите изучать другие языки программирования в поисках того инструмента, который позволит разрабатывать приложения с азартом.
Elm учит новой парадигме: думать о модели данных в первую очередь, подбирать такую модель, которая изначально покроет только возможные состояния приложения, не больше ни меньше. Больше о подобном подходе можно узнать из доклада «Делайте невозможное состояние не возможным«, от Elm-евангелиста Richard Feldman.
Elm — это новый вызов, если вы «подустали» от стабильности или от того, что вы как рыба в воде, не видите новых вершин для покорения в js коде.
Если вы пишите на elm, то вам не нужно настраивать много инструментов для форматирования и проверки (типа eslint и prettier). В elm мире, есть один пакет elm-format, который не имеет настроек. Код у всех выглядит одинаково, не о чем спорить. То же самое касается и подхода к архитектуре приложения. Elm провоцирует вас использовать elm architecture и следовать этой практике.
Так или иначе, знакомство с языком не пройдет бесследно, а внедрение его на ваш рабочий проект можно провести по частям, монтируя elm-приложение в определенный div
, как это было с реактом, когда переписывались старые приложения.
Если описывать разработку на elm в трех словах, то я бы сказал: непривычно, стабильно, вдохновляет.
Все материалы на английском:
Материалы на русском тоже имеются, но маловато (я помогу с этим :D). Пока что можно поискать на хабре.
Сегодня будем использовать parcel и IntelliJ IDEA Community Edition. Все инструменты бесплатные. Инициализация elm проекта…
На данном вебинаре мы знакомились с языком Elm проводя параллели между Elm и Redux, поэтому…
Richard Feldman рассказывает как масштабировать Elm приложение без боли. Показаны техники: extended records, подход narrow…
В данной заметке вы найдете конспект видео по Elm, которые я посмотрел в ноябре 2019.…
Итоги года 2019 // Max Frontend Покажи мне свой гитхаб, и я скажу работал ли…
В докладе разобраны различные техники создания модели данных в Elm, чтобы сделать невозможное состояние приложения,…
View Comments
Есть вопрос касательно либ для этого языка их достаточно или все плюсы коммьюнити пока что не существуют?
И еще вопрос про типизацию, раз это фрп, что на счет тайпскрипта или там свой какой-то типизатор?
Спсибо для вопрос! Либ для языка уже не мало, можно посмотреть официальный репозиторий пакетов или Elm package catalog. Так же, Elm поддерживает (и двигает вперед) web components (огромный список уже существующих), которые можно использовать с любым фреймворком/библиотекой. По поводу типизации - не понял. В elm все по умолчанию строго типизировано и система типов позволяет гораздо больше чем в TS, поэтому typescript здесь и не нужен.
Elm вдохновляет! Вот только не понял как быть с SSR, пока ощущение такое что можно использовать только в существующем react проекте, в тех местах где SSR не нужен, например внутренних частях, закрытых авторизацией или есть нормальные варианты приготовить SSR с Elm?
Да, все верно описали. SSR пока нет. Можно использовать в существующем или в новом проекте, где SSR не нужен. Рад, что вас заинтересовало!