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

Почему Mint?

Я испробовал Mint, потому что мне захотелось несколько отстраниться от уже чересчур знакомой экосистемы JavaScript/TypeScript/React/Vue. Mint же как раз предложил нужное количество изменений. Это абсолютно другой язык, но при этом написанный на нем UI-компонент выглядит весьма похожим на те, что создаются в React:

Зачастую, когда разработчики хотят на время сделать перерыв в JS-разработке, они выбирают язык Elm. Он похож на Mint в нескольких отношениях, к примеру тем, что является типизированным и функциональным. Однажды и я попробовал освоить этот язык, но понял, что продвигаюсь медленно, так как в освоении он непрост и подразумевает большой объем шаблонного кода. Mint же показал себя с противоположной стороны.

Что я создал?

Я воссоздал расширение Chrome, а именно использовал Mint для создания “всплывающего окна”, которое появляется при клике по иконке расширения в панели инструментов и, по сути, является мелким одностраничным веб-приложением.

В исходном коде можно подробнее ознакомиться с этим расширением и сравнить его оригинальную JS-версию с новым улучшенным вариантом, написанным на Mint. Пока сосредоточимся на том, что мне в целом понравилось в процессе создания приложения на Mint. 

Сайт Mint приятным образом демонстрирует все его возможности и как языка программирования, и как фреймворка для веб-разработки. Я же из всего его богатого арсенала выделил для себя пару основных особенностей:

  • отсутствие внешних зависимостей ввиду большого количества встроенных возможностей;
  • функциональную совместимость с JavaScript.

Встроенное управление состоянием

Придя из разработки на React, где npm install составляет существенную часть работы, было приятно увидеть, что в случае с Mint практически все уже встроено изначально. Это означает использование очень малого числа зависимостей либо полное их отсутствие.

Mint, подобно Redux, предлагает невероятно простое решение по управлению состоянием, но с меньшим беспокойством о немутабельных данных и правильном “подключении” компонентов.

С помощью этого языка можно определять хранилища, содержащие состояние приложения и функции для его обновления. Любой компонент, которому нужен доступ к этому состоянию или возможность обновлять его, может легко подключаться к соответствующему хранилищу с помощью ключевых слов connect и exposing. Когда данные в хранилище изменяются, подключенные компоненты выводятся повторно с новыми значениями.

Как правило, вам нужно определять хранилище и компонент в отдельных файлах, но ради небольшого примера я приведу их вместе:

Обратите внимание, что значение состояния обновляется при помощи ключевого слова next, которое служит для безопасного изменения состояния. 

Встроенная стилизация и CSS

Встроенное решение стилизации оказалось для меня очень кстати: область CSS ограничена компонентом, в котором определена, условная стилизация основана на аргументах/пропсах, медиа-запросах, вложенных селекторах и реальном CSS-синтаксисе (например, align-items, а не alignItems). Все это ощущалось как преимущества стилизованных компонентов, но без необходимости npm install.

Вот относительно простой пример, показывающий, как можно присваивать CSS-значения согласно аргументам:

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

  1. Основного цвета приложения, настроенного в глобальном ThemeStore.
  2. Пропса variant кнопки, чьи значения определяются перечислением ButtonVariants.

Согласно допустимым значениям в перечислении ButtonVariants, можно отобразить этот компонент кнопки как Contained или Outlined.

Стилизация и управление состоянием  —  это два примера встроенной функциональности Mint. Помимо них, данный язык оснащен маршрутизацией, инструментом форматирования кода, тестировщиком, возможностью документирования и многим другим.

Интеграция с JavaScript  —  написание JavaScript в коде Mint

Для большинства программистов эта возможность показалась бы просто удобной, для меня же она стала существенной, учитывая то, что я создавал расширение Chrome, которое бы использовало JavaScript Chrome API. 

Вот обобщенный пример интеграции, в котором функция Mint handleSubmit вызывает JS-функцию и даже передает аргумент, получаемый из переменной Mint:

На деле Mint предлагает несколько разных способов взаимодействия с JS, и здесь я показываю самый основной: встраивание JS-кода заключением его в обратные кавычки. Это работает, потому что Mint компилируется в JavaScript. Когда вы создаете приложение Mint, в конечном итоге оно все равно преобразуется в JavaScript.

Но несмотря на то, что этот метод с обратными кавычками быстр и удобен, он опирается на вывод типов, который не всегда может выполняться идеально. Более типобезопасным способом использования JS-кода в Mint будет преобразование JS-объектов в типизированные значения при помощи выражений декодирования.

Заключение

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

Создал я очень простое и маленькое приложение, поэтому не могу сказать уверенно, что Mint окажется столь же хорош и для больших проектов, в которых будет сложная маршрутизация, получение данных, оптимизация производительности и т.д. Но на своем опыте я не вижу причин сомневаться в том, что Mint способен и на такое.

Буквально недавно вышла официальная библиотека компонентов mint-ui, после чего к языку появилось еще более пристальное внимание. Надеюсь, что 2021 станет успешным годом для Mint.

Читайте также:

Читайте нас в TelegramVK и Яндекс.Дзен


Перевод статьи Chris Vibert: Leave JavaScript Aside — Mint Is a Great Language for Building Web Apps

Предыдущая статьяТри библиотеки для удаления неиспользуемого CSS
Следующая статьяСтоит ли винить Python в низкой производительности?