Фронтенд веб-разработка остро нуждается в оптимизации

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

Mint пытается объединить основные практики современной разработки: функциональное программирование, неизменяемость, статическую типизацию, css-in-js, в тесную среду разработки.

В конце концов, я попробовал это сделать, чтобы создать fontofweb.com, и с удовольствием с ним поработал. То, для чего вам понадобятся несколько библиотек и собака вашего дяди, может быть достигнуто с помощью начальной установки mint. Я считаю, что наличие самоуверенного языка вместо того, чтобы решать, какие библиотеки использовать для маршрутизации и управления состоянием, - отличный способ обеспечить единообразное и прямое взаимодействие с разработчиками.

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

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

  1. Встроенный форматтер
  2. Неизменяемые структуры данных
  3. Маршрутизация
  4. Полная стилизация CSS с медиа-запросами
  5. Глобальное управление государством
  6. Совместимость JavaScript
  7. Тестирование
  8. Очень быстрое время компиляции.

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 }

Правила создания функций

  1. В mint нет ключевого слова return, возвращается первое и единственное выражение в теле функции.
  2. Имя функции должно начинаться с строчной буквы и может содержать только буквенно-цифровые символы.
  3. Аргументы функции должны иметь указанный тип, но не возвращаемый тип.
  4. Для функций без аргументов круглые скобки не нужны.
  5. Функции должны иметь тело
  6. Анонимным функциям не требуется ключевое слово 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

Если вы видите большие перспективы и хотите внести свой вклад, отправляйтесь на репо.

Спасибо за прочтение