Сегодня речь пойдёт об очередной JavaScript-библиотеке, предназначенной для разработки интерфейсов. Возникает такое ощущение, что такие библиотеки появляются всё чаще и чаще. В этом материале мы рассмотрим библиотеку Moon.js и раскроем её особенности, о которых нужно знать для того чтобы приступить к работе с ней. В частности, мы поговорим о том, как создавать новые Moon.js-проекты, о том, как создавать элементы интерфейсов, как обрабатывать события. Освоив это руководство, вы сможете пользоваться Moon.js для разработки собственных приложений.
![](https://habrastorage.org/r/w780q1/webt/ab/tj/sw/abtjsw3uitq2jvaif2bp0v9bdgu.jpeg)
Moon.js — это минималистичная JavaScript-библиотека, предназначенная для разработки быстрых и функциональных интерфейсов. Она имеет сравнительно небольшие размеры, что позволяет создавать на её основе достаточно компактные приложения. Библиотека отличается очень высокой производительностью
В Moon.js используется подход к проектированию интерфейсов, основанный на компонентах. Для создания компонентов применяются шаблоны. Эта библиотека весьма похожа на Vue.js.
Библиотеку Moon.js можно включить в проект двумя способами. Первый заключается в установке её из NPM. Второй — в её подключении непосредственно к странице, на которой её планируется использовать.
Если решено воспользоваться NPM-вариантом библиотеки, то сначала нужно будет установить пакет
В данном примере этот инструмент устанавливается глобально, вызвать его можно из любой директории.
Для создания проекта, основанного на Moon.js, можно выполнить следующую команду:
Эта команда создаёт новый проект в папке
Второй вариант использования Moon.js предусматривает её подключение к странице, на которой её планируется использовать. У библиотеки есть модуль
Итак, для подключения библиотеки к странице нам нужно включить в состав страницы два следующих тега:
Как видите, соответствующие скрипты загружаются с CDN unpkg. В первом теге импортируется основная библиотека. Во втором — библиотека
Теперь, для того чтобы воспользоваться синтаксическими конструкциями Moon.js на странице, нужно будет включить их в тег
Moon.js, как и другие библиотеки и фреймворки, используемые для создания одностраничных приложений, подключается к определённому элементу страницы. Обычно роль контейнера для Moon.js-приложения играет элемент
Подобный элемент, являющийся корневым элементом Moon.js-приложения, размещают в коде файла
Для подключения Moon.js-приложения к этому элементу используется драйвер
Данная конструкция сообщает библиотеке о том, что она должна подключить приложение к элементу с идентификатором
Теперь поговорим о том, как в Moon.js организована работа с данными, и о том, как с помощью этой библиотеки создавать элементы интерфейсов.
Для описания Moon.js-интерфейсов используется язык программирования Moon View Language (MVL), который был разработан специально для решения данной задачи. Он напоминает JSX. Этот язык применяется для описания элементов и для настройки их взаимоотношений. Вот пример:
Несложно заметить то, что в этом фрагменте Moon.js-кода, ответственного за формирование элемента
В Moon.js для управления визуальными представлениями элементов и для работы с данными используется концепция драйверов. Здесь мы взглянем на драйвер, позволяющий работать с данными, а в следующем разделе поговорим о драйвере, предназначенном для работы с элементами интерфейса.
Драйвер, предназначенный для работы с данными, отвечает за хранение данных приложения и позволяет пользоваться данными там, где они нужны. Другими словами, этот драйвер хранит глобальное состояние приложения.
Задать начальные данные Moon.js-приложения можно с помощью API
Записывать новые данные в состояния можно, возвращая их из соответствующих функций:
API
Мы возвращаем из коллбэка объект, у которого имеется свойство
Механизм работы с данными в Moon.js мы рассмотрели. Теперь подробнее поговорим о работе с элементами интерфейса.
В Moon.js имеется драйвер
Мы уже рассматривали фрагмент кода, повторённый ниже, в котором к элементу
Именно тут производится монтирование элемента. Теперь функции могут возвращать элементы, которые способны заменять старые элементы. Их можно представлять в виде объектов, содержащих свойство
В Moon.js используется концепция виртуальной DOM и мощный алгоритм сравнения старой и новой версий интерфейса. Это позволят библиотеке принимать решения о том, когда нужно обновлять DOM, и о том, какие именно части DOM нуждаются в обновлении.
Здесь коллбэк, передаваемый
У кнопки имеется обработчик события
Moon.js представляет разработчику большой набор вспомогательных функций, предназначенных для создания элементов интерфейсов. В результате оказывается, что элементы можно создавать, используя не язык описания интерфейсов Moon.js, а соответствующие функции:
Moon.js экспортирует функции, имена которых соответствуют именам создаваемых с их помощью элементов. Так, функция
Создадим элемент
Назначать элементам атрибуты можно, передавая соответствующей функции объект со свойствами:
Здесь мы описали элемент
Вот как создать текстовый элемент:
В свойстве
Создадим пользовательский элемент:
Для того чтобы задать этому элементу какой-нибудь атрибут, можно поступить так:
Подключать к элементам обработчики событий можно, пользуясь конструкцией, в которой применяется символ
В результате на страницу будет выведена кнопка с текстом
В Moon.js функции — это компоненты. Это означает, что функции можно упоминать в описании элементов интерфейса. То, что возвращает функция, будет включено в состав элемента.
Предположим, у нас есть такая функция:
Эта функция,
Имя функции в этом примере используется в роли имени элемента. В результате выполнения этого кода окажется, что то, что возвращает функция, будет помещено в тег
Для того чтобы собрать воедино всё то, о чём мы только что говорили, давайте создадим на Moon.js простое TODO-приложение. Здесь мы воспользуемся соответствующим примером, который подготовлен разработчиками Moon.js.
Хочу напомнить о том, что рекомендуется, осваивая новые библиотеки и фреймворки, создавать с их помощью небольшие приложения. Это позволяет ускорить обучение и помогает понять особенности работы изучаемых инструментов. Поначалу речь идёт об их основах, но со временем приходит и понимание более сложных механизмов.
Вот как выглядит страница этого приложения.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/4da/a82/295/4daa822956e4e7cb3fff1e9d6cc92a9b.png)
Страница приложения
На странице имеется заголовок, поле, кнопка, и список дел, который можно пополнять, вводя их описания в поле и нажимая на кнопку.
Начнём работу с создания файла
Функция
Функция
Функция
Обратите внимание на обработчики событий
Событие
Это приведёт к выполнению повторного рендеринга
Запустите это приложение в браузере и поэкспериментируйте с ним.
Мы разобрали основы Moon.js. А именно, поговорили о том, что пользоваться библиотекой можно, устанавливая её из NPM и подключая к страницам напрямую. Далее, мы обсудили внутренние механизмы библиотеки: работу с данными, обработку событий, разработку компонентов.
Мне кажется, что Moon.js — это приятная библиотека. И, если даже не говорить о других её достоинствах, она мне симпатична из-за её компактного размера.
Пользовались ли вы Moon.js?
![](https://habrastorage.org/r/w1560/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
![](https://habrastorage.org/r/w1560/webt/3p/iw/1j/3piw1j3wd_cgmzq9sefgferaumu.png)
![](https://habrastorage.org/webt/ab/tj/sw/abtjsw3uitq2jvaif2bp0v9bdgu.jpeg)
Библиотека 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.
Хочу напомнить о том, что рекомендуется, осваивая новые библиотеки и фреймворки, создавать с их помощью небольшие приложения. Это позволяет ускорить обучение и помогает понять особенности работы изучаемых инструментов. Поначалу речь идёт об их основах, но со временем приходит и понимание более сложных механизмов.
Вот как выглядит страница этого приложения.
![](https://habrastorage.org/getpro/habr/post_images/4da/a82/295/4daa822956e4e7cb3fff1e9d6cc92a9b.png)
Страница приложения
На странице имеется заголовок, поле, кнопка, и список дел, который можно пополнять, вводя их описания в поле и нажимая на кнопку.
Начнём работу с создания файла
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?
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
![](https://habrastorage.org/webt/3p/iw/1j/3piw1j3wd_cgmzq9sefgferaumu.png)