В начале 2016 года в опросе Лии Веру в Твиттере половина из 3578 человек ответили, что не очень комфортно чувствуют себя с JavaScript. И речь не только о новичках. Профессионалам тоже нелегко — ежедневно выходит огромное количество библиотек, и невозможно уследить за всеми современными трендами в мире веб-разработки.
Но кое-что все-таки выделяется. В 2016 году появилась новая технология от лаборатории Массачусетского технологического института — Mavo. Он прекрасен тем, что позволяет прокачать HTML за счёт добавления в него относительно небольшого количества атрибутов. В результате вы получаете рабочее веб-приложение так, будто вы использовали JavaScript, но на самом деле кода JS там будет ноль. Точнее, там не будет JS-кода, который вам пришлось бы писать руками.
Дмитрий Шарабин, евангелист технологии Mavo, сегодня расскажет нам про ее 50 цветных оттенков. Видео его выступления на FrontendConf 2020 — здесь.
Если мы можем сделать веб-программирование проще для начинающих, от этого выиграют все. Потому что оно автоматически станет простым для всех. Например, в языке HTML долгое время не было слайдера, и каждому разработчику приходилось программировать его логику. Но теперь в HTML он есть, добавить его в свое приложение может любой новичок — и это радует всех.
Чтобы Mavo можно было использовать, нужно в голову вашего документа подключить два файла — JavaScript-файл и таблицу стилей, которые обеспечивают основной функционал Mavo.
Если вы не хотите связываться с отдельными файлами, вы можете поиграть с Mavo по адресу play.mavo.io.
А теперь давайте посмотрим, что мы можем создать на Mavo.
TO DO
На сайте todomvc.com можно увидеть много версий приложения Todo, реализованного на разных технологиях, библиотеках, фреймворках. Любой может попробовать создать его из предлагаемого набора HTML- и CSS-файлов согласно спецификации.
С помощью Mavo я тоже могу создать полностью работающее ToDo и удовлетворяющее спецификации. Я могу добавлять сюда новые элементы и изменять существующие, помечать их как выполненные и удалять их. Все задачи будут разбиты на активные или выполненные, а система покажет, сколько задач осталось для выполнения. Выполненные можно очистить. Можно одновременно выделить все задачи и пометить как выполненные или нет. А если ни одной задачи нет, то будет видна только строка ввода.
Виджет «Было-стало»
С помощью уже добавленного в HTML слайдера я могу открывать/закрывать ту или иную часть изображения. Все остальное достигается стилизацией.
Чтобы превратить наш код в приложение Mavo, выбираем, какая часть страницы будет будущим веб-приложением. В данном случае — это main, и я должен сообщить об этом Mavo через атрибут mv-app. Его значение — это уникальное имя приложения (но можно оставить и пустым).
Далее сообщаем Mavo, какие элементы будут важными. В Mavo они называются свойствами, и их можно будет редактировать, а их значения — использовать и сохранять. Чтобы описать свойство, добавим к нужному элементу атрибут property, а значением будет некое уникальное значение, фактически имя переменной. Через него мы сможем ссылаться на значение слайдера, которое будет меняться при изменении положения его на экране.
Положение слайдера в стилях задаем кастомной переменной CSS. Меняя ее значение, увидим цветное или черно-белое изображение. Число, которое я указал, определяет положение вертикальной разделительной линии. И осталось только связать эту переменную со слайдером, чтобы можно было изменяя положение слайдера, двигать линию физически на виджете. Кастомные CSS-свойства можно изменять и задавать прямо внутри inline-стилей. Для этого обращаемся к переменной slider. По правилам Mavo для этого используются квадратные скобки, но это тоже можно изменить.
В итоге можем менять положение нашего слайдера, открывая ту или иную часть изображения. Сам виджет тут.
Это были примеры для начинающих. Давайте посмотрим, что дает Mavo нам как разработчикам.
Mavo как CMS
Mavo может заменить систему управления контентом (CMS). Причем вы можете редактировать содержимое страницы непосредственно в окне браузера, сохраняя изменения в процессе. Mavo прямо из коробки поддерживает работу с плагином, активирующим rich editing инструменты: можно что-то выделять полужирным шрифтом, добавлять ссылки, изображения и т.д.
Изображения можно добавлять без настройки бэкендов. Поддержка GitHub и Dropbox уже включена, и вы можете загружать изображения (на самом деле любые файлы). Можно указывать местоположение файла в файловой системе, перетаскивать его (Drag & Drop), выполнять копипаст.
Cамое первое приложение, разработанное на Mavo — список докладов, которые делает Лия Веру по всему миру. Mavo при работе с элементами разных типов предоставляет свои виджеты редактирования. Если добавляете дату, Mavo предложит календарь. Если добавляете изображение — появится виджет выбора изображения. Каждый виджет можно настроить отдельно.
Наконец, Mavo предоставляет возможность работы с коллекциями. Вы можете добавлять элементы, или удалять их. Например, можно добавлять в персональной системе учета финансов очередной счет, заодно добавляя числовые данные для вычислений: работы, их стоимость, общая сумма. То есть управление потоком данных тоже изначально заложено в Mavo.
Если возможностей из коробки вам недостаточно, то можно разработать плагин или найти уже имеющийся. Mavo — это изначально расширяемый инструмент. Сейчас плагинов уже достаточно много, некоторые из их вводят новые бэкенды, например, Firebase. Другие позволяют локализовать приложения и целиком Mavo на любой другой язык, добавлять диаграммы, работать с изображениями, даже писать математические выражения и тексты.
Переключатели
Мини-приложения, которые облегчают жизнь разработчика.
Скрыть/показать пароль
Мы можем это реализовать через динамическое изменение значение атрибута type с text на password. Можно также менять текст на кнопке, динамически добавлять классы для изменения эмодзи на кнопке и т.д.
Анимация
Следующий пример — улыбающееся шоколадное мороженое, чью анимацию мы можем отключить. Принцип действия очень похож на предыдущий пример, но здесь используются SVG внутри страницы. Да, мы можем использовать Mavo при работе с SVG, если оно inline и располагается на странице.
Темная/светлая тема
Куда без них в современном мире? С помощью Mavo можно изменять значение, передаваемое фильтру invert, чтобы менять темы. Причем это можно применить и к блоку страницы, и ко всей странице целиком.
Динамическая диаграмма
Вы можете стилизовать сами элементы управления Mavo. Например, для выбора базового цвета (hue) для диаграммы. Это выглядит как цветовая шкала, перемещаясь по которой можно сразу же видеть изменения, и как перестраивается диаграмма.
В этом примере подключен плагин, который позволяет работать с динамическими диаграммами. Источник данных — гугловская таблица. Все, что мы здесь видим — заголовок Leads, названия категорий, числовые значения — получено из гугловской таблицы в виде JSON-файла и использовано Mavo.
Виджеты
Карусель изображений
Этот виджет полностью настраиваемый. Можно указать, сколько максимально будет изображений, какая задержка между их сменами. Можно переставлять элементы и добавлять их. Можно даже предоставить это пользователю.
Пагинация (разбивка блока на страницы)
Вы можете выбирать любую страницу кнопками «вперед/назад», при этом будет меняться содержимое. Кнопки блокируются, если нет возможности переходить к следующей или предыдущей странице. То есть это полноценный виджет.
Аккордеон
Этот виджет работает по принципу — при открытии одного раздела сворачиваются все остальные.
Вкладки
Если аккордеон оформить по-другому, то можно получить вкладки. Виджет тоже полностью настраиваемый. Можно поменять заголовок вкладки и каждое изображение — и оно автоматически изменится на ярлычке вкладки. Можно поменять текст вкладки или надпись на кнопке — Mavo всё автоматически подхватит. Не ограничивайте себя в фантазиях :)
Погода
Здесь примечательно еще то, что вы можете управлять тем, как редактируются элементы. Можно выбрать разные города. При этом показывается не только температура, но и описание погодных условий. Для этого виджета данные генерируются сервисом OpenWeatherMap в JSON-формате, который Mavo может без проблем интерпретировать.
Инструменты разработчика
HSLA Colour Picker
Очень простой инструмент, в котором с помощью слайдеров можно задать любой цвет.
Редактор SVG
С помощью визуальных компонент можно легко построить изображение, которое впоследствии можно скопировать и вставить в свой код или даже сохранить его в виде SVG-файла.
Flexbox Playground
Это было первое приложение, которое я написал на Mavo. Мне нужно было просто посмотреть, как работает инструмент, а заодно и разобраться в Flexbox. Здесь вы можете добавлять дочерние элементы в родительский компонент и менять его свойства. Всё будет отображаться в предпросмотре. В результате вы получите код, который можно скопировать в CSS-файл и получить нужное поведение.
Readability Playground
Здесь вы можете сами определить, может ли пользователь прочитать текст, который вы ему предлагаете. Можно увеличить расстояние между строчками, изменить длину абзаца, задать выравнивание, включить переносы (если это поддерживается браузером). Можно просто скопировать этот фрагмент кода, вставить его в свой CSS-файл и — вуаля! — у вас будет всё работать.
Интеграция с библиотеками
Mavo — это не только самостоятельная библиотека, он может интегрироваться и с другими.
A-Frame
Интеграция с библиотекой A-Frame позволит вам построить виртуальную реальность. Если превратить слайдеры в элементы управления, то можно сразу видеть, как меняется положение куба. Если их потом анимировать, можно реализовать очень интересные эффекты. Эта интеграция возможна, потому что A-Frame все свойства объектов отражает в атрибутах соответствующих элементов.
Ionic Framework
Еще один пример — интеграция с библиотекой Ionic Framework. Это, конечно, больше UI kit для создания приложений, но они будут выглядеть на мобильных устройствах как родные. Например, на Android тот же Todo-App имеет все нужные функции и тот же вид, к которому привыкли Android-пользователи. На iOS также будет привычный вид. Более того, здесь даже работают свайпы.
Правда, тут в колонке JS есть уже код. К сожалению, не всё, что есть в Ionic Framework, отражается внутрь атрибутов элементов, которые добавляются с его помощью. Поэтому нужно сообщить Mavo, что есть элемент с таким-то селектором и его изменения происходят по такому-то событию. Добавив небольшое количество строк кода, я смог подружить элементы из Ionic Framework с Mavo.
Приложения
И посмотрим вместо фрагментов уже сами приложения. Их тоже можно построить с Mavo.
Интернет-магазин
Прежде всего, здесь не одно Mavo приложение, а два. Первое отвечает за набор компонентов (товаров, которые доступны в магазине) и предоставляет возможность добавлять их в корзину. Второе приложение — это непосредственно корзина, которая содержит перечень товаров. Оно отвечает за то, что мы можем поменять их количество, а также подводит подытог и даже позволяет осуществить оплату этих товаров через PayPal.
Карточки
Можно с помощью Mavo разработать приложение, которое позволяет учить слова. При этом вы сможете скрыть или отобразить перевод. Можно привести примеры, чтобы самооценить себя, хорошо ли выучил слово. Приложение поддерживает фильтрацию, если нужно отобразить только конкретные слова на конкретную букву, или отобразить их все. Также можно загружать новые карточки, экспортировать карточки и т.д.
Про упрощенную версию этого приложения есть статья на Хабре, где можно посмотреть, как это приложение создавалось.
Kanban-доска
Это приложение для управления проектами — клон приложения Kanbanchi и представляет собой Kanban-доску. Здесь есть абсолютно все, что нужно. Можно перемещать карточки из одного трека в другой и редактировать их. Можно создавать задачи, задать приоритеты и отслеживать прогресс их выполнения. Здесь поддерживается Markdown, как способ написания текста документа. Можно менять цвет карточки, устанавливать дату начала и окончания и добавить теги с отдельными ярлычками.
Github Issue Closing Times
Это очень нишевое и специфическое приложение. Позволяет отслеживать, как быстро в том или ином репозитории закрываются Issue. Автором является Лия Веру. В ее блоге есть очень интересная публикация, где она описывает, как она это приложение делала прямо по шагам. На основе последних 100 Issue для любого указанного репозитория можно получить следующую статистику: что самое быстрое, что самое медленное, как закрывалось, медиану и т.д.
Итоги
Я не очень объективен, потому что очень люблю технологию Mavo, и то, что она умеет — пока что самая вершина айсберга. Каким Mavo может стать в будущем — скрыто под водой. Потому что разработчики видят очень и очень много того, что можно было бы в Mavo еще добавить.
Если вы хотите стать участником нашего сообщества — не отказывайте себе в этой радости, присоединяетесь к нам. Вносите свои предложения в репозиторий Mavo, заводите новые фичареквесты. Помогите нам разработать документацию или пополнить количество примеров, которые иллюстрируют возможности Mavo. Или просто приходите пообщаться в Gitter или в Telegram, задать свои вопросы. Мы очень открытое сообщество и с радостью делимся тем, что знаем и умеем.
Да пребудет с вами Mavo!
Хотите быть быстрее конкурентов? Подписывайтесь на наш email-курс по производительности!
12 писем один раз в неделю — основано на гайдах Виталия Фридмана — на русском языке — полное погружение в вопросы производительности — ссылки на дополнительные материалы по каждой теме.
FrontendConf 2021 состоится 11-12 октября в Москве. Расписание опубликовано на сайте. С 1 августа — повышение цен!
