Фронтенд веб-разработка остро нуждается в оптимизации
Несколько недель назад, пока я лениво просматривал свою ленту в Твиттере, я наткнулся на проект под названием mint, он рекламировал себя как язык, разработанный специально для создания одностраничных приложений, это звучало интересно, и усталость от JavaScript началась, поэтому я провел больше исследований, и это показалось мне многообещающим.
Mint пытается объединить основные практики современной разработки: функциональное программирование, неизменяемость, статическую типизацию, css-in-js, в тесную среду разработки.
В конце концов, я попробовал это сделать, чтобы создать fontofweb.com, и с удовольствием с ним поработал. То, для чего вам понадобятся несколько библиотек и собака вашего дяди, может быть достигнуто с помощью начальной установки mint. Я считаю, что наличие самоуверенного языка вместо того, чтобы решать, какие библиотеки использовать для маршрутизации и управления состоянием, - отличный способ обеспечить единообразное и прямое взаимодействие с разработчиками.
В этой статье рассказывается о некоторых основных особенностях мяты и о том, почему вам это должно быть интересно.
Mint - это строго типизированный язык, который компилируется в JavaScript, он пытается упростить веб-разработку за счет первоклассной поддержки следующих функций и многого другого:
- Встроенный форматтер
- Неизменяемые структуры данных
- Маршрутизация
- Полная стилизация CSS с медиа-запросами
- Глобальное управление государством
- Совместимость JavaScript
- Тестирование
- Очень быстрое время компиляции.
Mint использует Preact за кулисами, что делает его намного быстрее и легче, чем React.
Вы можете установить Mint на MacOSX и Linux, если вы используете Windows, вам нужно будет использовать WSL.
После установки вы можете использовать следующую команду для инициализации нового проекта:
mint init project-name
Затем, чтобы запустить локальный сервер разработки:
cd project-name && mint start
Открытие веб-страницы показывает:
Так, как это работает? Структура папок Mint выглядит так:
Файл точки входа - /source/Main.mint, который содержит следующий код:
Давайте разберем это:
- В mint компоненты определяются с помощью ключевого слова «component».
- Стили компонентов определяются с помощью ключевого слова «style». Свойства CSS работают без каких-либо изменений, в отличие от React.
- Как и компоненты класса React, компоненты mint должны иметь функцию рендеринга. Подробнее о функциях мы поговорим позже.
- Применение стилей CSS выполняется в следующем формате - tagname :: stylename.
Как указать несколько стилей? Читать дальше. А пока давайте рассмотрим примечательные языковые особенности Mint.
Mint как статически типизированный язык выполняет проверку типов во время компиляции. Mint пытается вывести типы на основе того, как переменная создается и присваивается. Он также не обещает исключений во время выполнения (если вы пишете на чистом монетном дворе без взаимодействия с JavaScript).
Он компилируется в JavaScript и незаметно для рендеринга использует Preact.
Массивы, кортежи и записи
Массивы в Mint могут иметь только один тип, определение нескольких типов в литерале массива вызывает ошибку компиляции.
Структуры данных записи позволяют объявлять форму объекта, аналогичную интерфейсам в машинописном тексте. Запись также поставляется с конструктором, позволяющим создавать экземпляры записи:
Структуры данных кортежей в Mint имеют фиксированную структуру, но позволяют определять несколько типов данных. Значения в кортежах не имеют идентифицирующего имени, но могут быть идентифицированы по их положению и реструктурированы:
Неизменность
Все типы в mint неизменяемы, вы не можете изменить уже определенную переменную, не создав новую. По этой причине приведенный ниже код не будет работать:
Для достижения вышеуказанного нужно создать новую переменную:
Равенство
Большинство типов данных в Mint используют логическое равенство, это означает, что экземпляры типов, если они имеют одинаковые значения, будут считаться равными:
Попробуем что-нибудь посложнее:
В этом отличие от JavaScript, в котором используется ссылочное равенство.
В mint нет оператора «===».
Перечисления
Enums в Mint позволяет указать тип с несколькими вариантами:
Эти перечисления можно сопоставить с помощью выражения case:
Перечисления также могут иметь связанные с ними типы значений:
Применение этих знаний позволяет нам создавать более сложные функции, например:
Функции
Функции Mint определяются с помощью удачно названного ключевого слова «fun». Общий формат функции выглядит следующим образом:
fun functionName (...arguments): returnType { ...body }
Правила создания функций
- В mint нет ключевого слова return, возвращается первое и единственное выражение в теле функции.
- Имя функции должно начинаться с строчной буквы и может содержать только буквенно-цифровые символы.
- Аргументы функции должны иметь указанный тип, но не возвращаемый тип.
- Для функций без аргументов круглые скобки не нужны.
- Функции должны иметь тело
- Анонимным функциям не требуется ключевое слово fun или имя.
Итак, это будут действительные функции:
А это не так:
Если вы ломаете голову над последней функцией приращения и задаетесь вопросом, как вообще можно использовать несколько операторов в функциях mint, я могу посочувствовать вам.
Чтобы функция приращения работала, вы можете использовать блок where для определения переменных, которые будут использоваться в теле функции:
Автоматическое частичное применение
Частичное приложение и каррирование функций - две важные концепции в функциональном программировании, которые позволяют выполнять ленивое вычисление функций. Он превращает функцию с несколькими аргументами в функции, которым требуется меньше аргументов.
Все функции в Mint автоматически частично применяются, если вы игнорируете некоторые аргументы:
Оператор канала Mint | › передает выражение левого операнда в первый аргумент функции правого операнда.
То же самое без труб:
Асинхронные функции
Асинхронные функции - это просто функции с возвращаемым типом Promise. Обычно вам не нужно указывать его, поскольку Mint автоматически определяет его на основе содержимого функции.
Параллельное выражение
Параллельное выражение похоже на функцию Promise.all () в JavaScript. Он позволяет выполнять асинхронные операции в своем блоке параллельно.
Выражение последовательности
Выражение последовательности запускает операции в своем блоке последовательно, это полезно в случаях, когда каждая операция зависит от результатов предыдущих операций:
Компоненты
В Mint есть два способа определения компонентов, первый - с помощью ключевого слова component:
Второй способ - просто определить функцию со встроенным возвращаемым типом Html:
Компоненты для укладки
Создавайте стили с помощью блока стилей. Их можно использовать только в компонентах, объявленных с помощью ключевого слова компонент.
Примените стили к элементам Html в этом формате:
<element::style1::style2::styleN ></element>
Вот так:
Положение объявления стиля имеет значение, стили, объявленные позже, перезаписывают предыдущие, расположение назначения стиля в теге не имеет значения.
Таким образом, следующий код по-прежнему приведет к тому, что текст будет синим:
Аргументы стиля
Объявления стилей также могут иметь аргументы, как обычные функции:
Условные стили
Блоки стилей поддерживают выражения if и case:
Приведенный выше код даст нам:
Вложенные стили
Стили могут быть вложены друг в друга, аналогично тому, как работают вложенные правила sass:
Встроенные стили и классы
Встроенные стили также можно использовать для непосредственного стилизации элемента:
Элементы Mint Html также принимают классы:
Вы можете указать CSS в тегах стилей и импортировать внешние библиотеки CSS, обновив файл assets / head.html:
Состояние компонента и свойства
Чтобы продемонстрировать состояние и свойства монетного двора, вот ваша реализация счетчика: https://sandbox.mint-lang.com/sandboxes/RCF62IZuxtxWfQ
Давайте рассмотрим основные части компонента Button:
Свойства компонентов определяются с помощью ключевого слова property. Обратите внимание, что для компонента Button определены только три свойства: onClick, dangerous и title. Требуется только свойство onClick, поскольку у него нет значения по умолчанию.
Списки рендеринга и условный рендеринг
Элементы Mint могут отображать массив (Html), поэтому этот код работает:
Вместо этого вы также можете использовать выражение for of:
Допустим, вы хотите отображать только четные числа:
Другой способ отфильтровать четные числа - использовать блок when с выражением for of:
Условный рендеринг в mint довольно прост, как и реагировать:
Одна вещь, на которую следует обратить внимание; HTML должен быть возвращен в функции рендеринга. Если вы не хотите ничего отображать с помощью функции Html.empty (), например:
Наконец, поговорим о модулях. Если вы заметили, что в этом руководстве мы никогда не говорили об импорте, это потому, что у Mint нет такой концепции; все компоненты Mint являются глобальными и могут использоваться в рамках всего проекта, следствием этого является то, что любая конструкция верхнего уровня, такая как функция, может быть без проблем перемещена в любой файл или папку любой глубины. Но это также означает, что могут произойти конфликты имен, чтобы избежать этого, можно использовать модули.
Заключение
Mint очень многообещающий, в нем отсутствуют некоторые функции, которые могут сделать его препятствием для серьезного крупномасштабного использования, например, рендеринг на стороне сервера, встроенная поддержка Windows и поддержка библиотек npm, но он идеально подходит для личных проектов.
Посетите сайт Mint
Проверьте код, использованный в этой статье, на github
Если вы видите большие перспективы и хотите внести свой вклад, отправляйтесь на репо.