https://habr.com/ru/company/ruvds/blog/520430/

• Блог компании RUVDS.com
• Разработка веб-сайтов
• JavaScript

Сегодня речь пойдёт об очередной JavaScript-библиотеке, предназначенной для разработки интерфейсов. Возникает такое ощущение, что такие библиотеки появляются всё чаще и чаще. В этом материале мы рассмотрим библиотеку Moon.js и раскроем её особенности, о которых нужно знать для того чтобы приступить к работе с ней. В частности, мы поговорим о том, как создавать новые Moon.js-проекты, о том, как создавать элементы интерфейсов, как обрабатывать события. Освоив это руководство, вы сможете пользоваться Moon.js для разработки собственных приложений.

Библиотека Moon.js

Moon.js — это минималистичная JavaScript-библиотека, предназначенная для разработки быстрых и функциональных интерфейсов. Она имеет сравнительно небольшие размеры, что позволяет создавать на её основе достаточно компактные приложения. Библиотека отличается очень высокой производительностью

В Moon.js используется подход к проектированию интерфейсов, основанный на компонентах. Для создания компонентов применяются шаблоны. Эта библиотека весьма похожа на Vue.js.

Сильные стороны Moon.js

• Moon.js отличается компактными размерами (в минифицированном и сжатом виде это — около 2 Кб). Это меньше, чем размеры других библиотек и фреймворков вроде React и Angular.
• Эта библиотека отличается высокой скоростью рендеринга интерфейсов.
• Moon.js — это библиотека, основанная на функциональных методах разработки. При работе с ней используется подход к проектированию интерфейсов, основанный на так называемых «драйверах».

Начало работы

Библиотеку Moon.js можно включить в проект двумя способами. Первый заключается в установке её из NPM. Второй — в её подключении непосредственно к странице, на которой её планируется использовать.

Если решено воспользоваться NPM-вариантом библиотеки, то сначала нужно будет установить пакет moon-cli, инструмент командной строки:

$ npm i moon-cli -g

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

Для создания проекта, основанного на Moon.js, можно выполнить следующую команду:

$ moon create moon-prj

Эта команда создаёт новый проект в папке moon-prj. После того, как будет завершено создание проекта, в вашем распоряжении окажется основа будущего приложения.

Второй вариант использования Moon.js предусматривает её подключение к странице, на которой её планируется использовать. У библиотеки есть модуль moon-browser, который позволяет пользоваться её возможностями непосредственно на странице, к которой она подключена.

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

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

Как видите, соответствующие скрипты загружаются с CDN unpkg. В первом теге импортируется основная библиотека. Во втором — библиотека moon-browser. Она отвечает за компиляцию шаблонов Moon.js, за приведение их к виду, пригодному для вывода браузером.

Теперь, для того чтобы воспользоваться синтаксическими конструкциями Moon.js на странице, нужно будет включить их в тег <script>, не забыв задать его атрибут type как text/moon.

<!-- Подключение к странице внешнего скрипта -->
<script src="./main-script.js" type="text/moon"></script>
<!-- Описание интерфейса в коде, встроенном в страницу -->
<script type="text/moon">
    ...
</script>

Подключение Moon.js-приложения к странице

Moon.js, как и другие библиотеки и фреймворки, используемые для создания одностраничных приложений, подключается к определённому элементу страницы. Обычно роль контейнера для Moon.js-приложения играет элемент <div>:

<div id="root"></div>

Подобный элемент, являющийся корневым элементом Moon.js-приложения, размещают в коде файла index.html, представляющего собой точку входа в проект.

Для подключения Moon.js-приложения к этому элементу используется драйвер view (ниже мы поговорим о драйверах подробнее):

Moon.use({
    view: Moon.view.driver("#root")
})

Данная конструкция сообщает библиотеке о том, что она должна подключить приложение к элементу с идентификатором root. При необходимости указать библиотеке подобный элемент можно, воспользовавшись браузерным API, предназначенным для работы с DOM:

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

Теперь поговорим о том, как в Moon.js организована работа с данными, и о том, как с помощью этой библиотеки создавать элементы интерфейсов.

Синтаксис описания элементов интерфейса

Для описания Moon.js-интерфейсов используется язык программирования Moon View Language (MVL), который был разработан специально для решения данной задачи. Он напоминает JSX. Этот язык применяется для описания элементов и для настройки их взаимоотношений. Вот пример:

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

Несложно заметить то, что в этом фрагменте Moon.js-кода, ответственного за формирование элемента <div>, используются синтаксические структуры, напоминающие HTML. Но эти структуры используются в JavaScript-коде. Такой JavaScript-код браузер выполнить не сможет, но это от него и не требуется, так как Moon.js компилирует подобные конструкции в обычный JavaScript.

Работа с данными

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

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

Задать начальные данные Moon.js-приложения можно с помощью API Moon.use:

Moon.use({
    data: Moon.data.driver
})

Записывать новые данные в состояния можно, возвращая их из соответствующих функций:

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

API Moon.run отвечает за запуск приложения. Коллбэк, переданный этому API, получает ссылку на глобальные данные в аргументе data. Так как на момент вызова этой функции в data пока ничего нет, команда console.log из этого примера выведет undefined.

Мы возвращаем из коллбэка объект, у которого имеется свойство data со значением Nnamdi. Этот объект будет представлять собой новое состояние приложение, данными которого смогут воспользоваться любые другие функции, обращающиеся к data.

Механизм работы с данными в Moon.js мы рассмотрели. Теперь подробнее поговорим о работе с элементами интерфейса.

Работа с элементами интерфейса

В Moon.js имеется драйвер view, который предназначен для создания элементов и для монтирования их в DOM.

Мы уже рассматривали фрагмент кода, повторённый ниже, в котором к элементу <div> подключается базовый элемент Moon.js:

Moon.use({
    view: Moon.view.driver("#root")
})

Именно тут производится монтирование элемента. Теперь функции могут возвращать элементы, которые способны заменять старые элементы. Их можно представлять в виде объектов, содержащих свойство view, в которое записаны соответствующие данные. Библиотека берёт значение свойства view из возвращаемого функцией объекта и записывает его в элемент, подключённый к элементу с идентификатором root.

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

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

Здесь коллбэк, передаваемый Moon.run, выводит в DOM кнопку. Происходит это из-за того, что функция возвращает объект со свойством view. Значение, назначенное этому свойству, попадает в DOM.

У кнопки имеется обработчик события click, представленный функцией handleClick. Эта функция возвращает пустой объект, её вызов не приводит к внесению изменений в DOM.

Создание элементов

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

const { div, text, node, p } = Moon.view.m

Moon.js экспортирует функции, имена которых соответствуют именам создаваемых с их помощью элементов. Так, функция div позволяет создавать элементы <div>. Функция text создаёт текстовые узлы. Функция node позволяет создавать пользовательские элементы. Функция p создаёт элементы <p>. Как видите, имена этих функций ясно указывают на их предназначение.

Создадим элемент <div>:

const Div = div({});

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

const Div = div({
    class: "DivClass"
});

Здесь мы описали элемент <div>, в атрибут class которого должно быть записано значение DivClass.

Вот как создать текстовый элемент:

const Text = text({ data: "A text node" });

В свойстве data объекта, переданного функции text, имеется текст для элемента.

Создадим пользовательский элемент:

const CustomEl = node("custom-el");

Для того чтобы задать этому элементу какой-нибудь атрибут, можно поступить так:

CustomEl({ "attr": "attr-value"})

События

Подключать к элементам обработчики событий можно, пользуясь конструкцией, в которой применяется символ @:

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

В результате на страницу будет выведена кнопка с текстом Click Me, по нажатию на которую будет вызвана функция handleClick.

Компоненты

В Moon.js функции — это компоненты. Это означает, что функции можно упоминать в описании элементов интерфейса. То, что возвращает функция, будет включено в состав элемента.

Предположим, у нас есть такая функция:

function aView({ data }) {
    return <div>A View</div>
}

Эта функция, aView, возвращает элемент, который может быть отрендерен:

Moon.run(() => {
    view: <div><aView /></div>
})

Имя функции в этом примере используется в роли имени элемента. В результате выполнения этого кода окажется, что то, что возвращает функция, будет помещено в тег <div>. Когда всё это попадёт в DOM, там окажется такая разметка:

<div>
    <div>A View</div>
</div>

Разработка приложений, основанных на Moon.js

Для того чтобы собрать воедино всё то, о чём мы только что говорили, давайте создадим на Moon.js простое TODO-приложение. Здесь мы воспользуемся соответствующим примером, который подготовлен разработчиками Moon.js.

Хочу напомнить о том, что рекомендуется, осваивая новые библиотеки и фреймворки, создавать с их помощью небольшие приложения. Это позволяет ускорить обучение и помогает понять особенности работы изучаемых инструментов. Поначалу речь идёт об их основах, но со временем приходит и понимание более сложных механизмов.

Вот как выглядит страница этого приложения.


Страница приложения

На странице имеется заголовок, поле, кнопка, и список дел, который можно пополнять, вводя их описания в поле и нажимая на кнопку.

Начнём работу с создания файла index.html. Здесь мы подключим Moon.js непосредственно к странице:

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!-- Воспользуемся скриптом, встроенным в страницу -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!-- Настройка драйверов data и view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!-- Запуск приложения -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

Функция viewTodos выводит элементы, необходимые для ввода сведений о новых делах и для вывода их в виде списка. Её аргументами являются data и view.

Функция createTodo создаёт новое дело и возвращает его в свойстве data возвращаемого ей объекта.

Функция updateTodo записывает новое дело в состояние приложения.

Обратите внимание на обработчики событий @click и @input, которые имеются в функции viewTodos. Событие @input вызывается при вводе текста, описывающего дело, в соответствующее поле. При обработке этого события вызывается функция updateTodo. Аргумент view в этой функции представляет произошедшее событие. Пользуясь им, мы обращаемся к DOM и получаем данные, введённые в поле. Затем эти данные попадают в состояние в виде свойства todo.

Событие @click вызывается после нажатия на кнопку. Оно выполняет запись нового дела в список дел. Для решения этой задачи используется функция createTodo. Эта функция обращается к свойству состояния todo и записывает новые данные в свойство todos, после чего, в свойстве view возвращаемого ей объекта, возвращает элемент <viewTodos>, представленный соответствующей функцией, в атрибут data которого записано значение dataNew.

Это приведёт к выполнению повторного рендеринга viewTodos и к обновлению DOM. В список дел, выводимый на странице, будет добавлено новое дело.

Запустите это приложение в браузере и поэкспериментируйте с ним.

Итоги

Мы разобрали основы Moon.js. А именно, поговорили о том, что пользоваться библиотекой можно, устанавливая её из NPM и подключая к страницам напрямую. Далее, мы обсудили внутренние механизмы библиотеки: работу с данными, обработку событий, разработку компонентов.

Мне кажется, что Moon.js — это приятная библиотека. И, если даже не говорить о других её достоинствах, она мне симпатична из-за её компактного размера.

Пользовались ли вы Moon.js?