Библиотека 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?
ссылка на оригинал статьи https://habr.com/ru/company/ruvds/blog/520430/
Добавить комментарий