Интерактивное веб-приложение без программирования? Легко! Mavo вам в руки

  • Tutorial
Вы владеете HTML и CSS и умеете создавать простые (и не очень) статические веб-страницы, а хотели бы вдохнуть в них больше «жизни» и интерактивности? У вас есть работы (картины, фотографии, стихи, коллекция марок и т. п.), которыми вам хотелось бы поделиться с миром, но создание сайта-портфолио или блога, куда можно их разместить и без лишних усилий обновлять, вам не под силу? Или мечтаете вести дневник путешественника, или собирать необычные кулинарные рецепты, или отслеживать свою фитнес-активность и делать всё это онлайн на собственном сайте? Возможно, у вас есть любимый питомец, уход за которым требует особых процедур, и их обязательно нужно отслеживать и оперативно фиксировать? 

Но от упоминания JavaScript вас бросает в лёгкую (а иногда и не очень) дрожь, а количество технологий и концепций, которыми нужно овладеть, чтобы реализовать ваши задумки, приводит вас в замешательство и отчаяние? В итоге вы задаётесь вопросами: «Почему веб-программирование должно быть таким трудным? Неужели нельзя что-то придумать, чтобы сделать его проще?». 

Тогда вы пришли точно по адресу. Прочитав статью, вы получите в руки инструмент, с помощью которого, я уверен, сможете воплотить в жизнь, если не все, то многие свои идеи, аналогичные перечисленным выше.

Автор оригинальных картинок: Mart Virkus (toggl.com)

Маститые и умудрённые опытом фронтенд-разработчики, не спешите закрывать статью с криками, что сейчас тут будут что-то «втирать» новичкам и вам здесь делать нечего. Я уверен, вы тоже сможете почерпнуть для себя что-то полезное. Главное, помните: если что-то станет простым для новичков, это автоматически станет простым для всех! А значит, в какой-то мере упростит жизнь и вам. Это неплохо, согласитесь?

Итак, к делу! Эта статья будет целиком и полностью посвящена Mavo.

Mavo — это новый подход к разработке интерактивных веб-приложений только за счёт написания HTML и CSS, без необходимости написания кода на языке JavaScript и разворачивания собственного сервера.

Mavo разрабатывается группой учёных Haystack Group лаборатории компьютерных наук и искусственного интеллекта Массачусетского технологического института (MIT CSAIL) под руководством Лии Веру.

Небольшое отступление для читателей из России!

Сайт Mavo хостится на серверах Netlify, адреса которых попали в «чёрный список» в результате «войны» с мессенджером Telegram. А значит, ресурсы, размещённые на этих серверах, равно как и все связанные с ними сервисы заблокированы на территории России (по крайней мере, на момент написания этой статьи).

Есть, правда, и хорошая новость: мы с Лией Веру (Lea Verou) активно работаем над решением этой проблемы. Надеюсь, в скором времени мы и это уладим. А до тех пор, пожалуйста, пользуйтесь, например, VPN для работы с Mavo (это справедливо как при доступе к сайту Mavo, так и при изучении демо-приложений на Codepen, а также и при создании собственных веб-приложений).

Я убежден (и, думаю, я не одинок), что лучший способ «пощупать» новую технологию и оценить, на что она способна, — это построить что-то полезное с её помощью. Не очень сложное, иначе мы можем просто не увидеть леса за деревьями, но нужное. Осталось только выбрать что. О! Есть идея.

Думаю, многие из вас изучают иностранный язык (может быть, для кого-то таким является язык программирования). И, скорее всего, для его изучения вы используете какое-нибудь приложение. Новые слова в этих приложениях обычно изучают с помощью карточек. Кстати, этот приём изучения иностранного языка отлично работает и в офлайне. Но сейчас не об этом.

Так вот, почему бы нам с вами вместе не разработать такое приложение? Назовём его… (барабанная дробь!) «Карточки». Это будет полноценное CRUD-приложение для изучения иностранного языка с помощью карточек, которое позволит:

  • создавать, удалять, изменять карточки, а также упорядочивать их с помощью перетаскивания;
  • импортировать карточки в приложение из файла и экспортировать их в файл;
  • отслеживать прогресс (функция самооценки).

Финальная версия приложения будет выглядеть примерно так:


Годится? Надеюсь, да. Тогда в путь!

На протяжении статьи я проведу вас по всем этапам разработки приложения. И по ходу чтения вы будете встречать фрагменты, помеченные с помощью особых меток.

Следуй за белым кроликом!

Во фрагментах, помеченных таким образом, содержится важная, но дополнительная информация про Mavo. При первом чтении эти фрагменты можно пропускать, не боясь упустить главную мысль.

Практика — путь к совершенству!

В конце некоторых разделов я буду предлагать вам небольшие самостоятельные упражнения, выполнив которые, вы сможете чуть лучше познакомиться с возможностями Mavo и одновременно улучшить разрабатываемое приложение. Подобного рода упражнения будут помещаться вот в такие фрагменты.

Запоминай через руки!

Готовы, следуя за нитью моего изложения, сразу применять новые знания на практике? Отлично! Ведь, как известно, мы лучше запоминаем то, что делают наши руки. Вы можете постепенно разрабатывать своё приложение, читая статью от начала и до конца, либо можете начать с любого интересующего вас этапа. 

В таких фрагментах будут приводиться ссылки на соответствующие версии приложения на Codepen.

Теперь всё. Начинаем!

Статическая веб-страница


Чтобы проиллюстрировать, как Mavo расширяет возможности HTML, мы создадим статическую HTML-страницу, которую затем с помощью Mavo превратим в полнофункциональное веб-приложение.

Предположим, у нас есть следующий HTML-код внутри элемента <body>:

<header>
  <h1>Карточки</h1>
</header>
<main>
  <article>
    <p>Слово или фраза</div>
    <p>Перевод</div>
  </article>
</main>

В приведённом выше фрагменте кода элемент <article> соответствует одной карточке.

Добавим немного стилей, чтобы наша страничка стала больше похожа на будущее приложение:


Хотите полностью увидеть исходный код? Вы можете сделать это здесь.

Подключаем Mavo


Пока у нас есть только статический макет. Настало время превратить его в полноценное веб-приложение. Вот тут как раз Mavo и вступает в игру!

Чтобы использовать Mavo, нам необходимо подключить его JavaScript- и CSS-файлы к нашей странице. Для этого добавим в элемент <head> две следующие строки:

<head>
  ...
  <script src="https://get.mavo.io/mavo.min.js"></script>
  <link rel="stylesheet" href="https://get.mavo.io/mavo.css">
  ...
</head>


Небольшое отступление для читателей из России!

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

Следуй за белым кроликом!

Возможно, ваше приложение должно корректно работать в старых браузерах? Или вы хотите иметь возможность заглянуть в исходный код Mavo и ожидаете, что он будет читаемым? Всё в ваших руках. Вы можете тонко настроить, с какой сборкой и/или версией Mavo вы хотите поработать, ответив на несколько простых вопросов.

Подключив Mavo, нам необходимо указать, какой элемент страницы будет содержать наше будущее приложение. Таким элементом может быть любой HTML-элемент, даже <body> или <html>! К этому элементу нам необходимо добавить атрибут mv-app, а в качестве его значения указать имя нашего приложения — уникальный в пределах всей HTML-страницы идентификатор. Элемент с атрибутом mv-app называется корневым элементом приложения.

Следуй за белым кроликом!

Если не присвоить атрибуту mv-app значение и при этом в том же самом элементе нет ни одного из атрибутов: id или name, — Mavo автоматически присвоит приложению имя mavo1, mavo2 и т. п.

Однако я настоятельно рекомендую вам явно указывать имя приложения, так как оно используется (явно и неявно) в других местах приложения.

Запоминай через руки!

https://codepen.io/dsharabin/pen/PoYxNjN

Итак, пусть в нашем случае элемент <main> будет содержать будущее приложение. Добавим к нему атрибут mv-app, а в качестве его значения укажем имя нашего приложения — flashcards:

<main mv-app="flashcards">
  ...
</main>

Атрибут property


Теперь пора сообщить Mavo, какие элементы приложения являются важными, то есть будут редактироваться и/или сохраняться, а также, возможно, будут использоваться в выражениях (но об этом чуть позже — запаситесь терпением).

В нашем приложении пока есть два таких элемента — это элементы <p>. Добавим к этим элементам атрибут property, сообщив тем самым Mavo, что эти элементы содержат данные, с которыми нужно работать. Элементы с атрибутом property называются свойствами (properties).

Следуй за белым кроликом!

Атрибут property можно добавить к любому HTML5-элементу — Mavo знает, как сделать его редактируемым. Например, содержимое элемента <span> вы сможете редактировать вручную с клавиатуры, а значение элемента <time> (дату или время) вы сможете установить с помощью соответствующего виджета.

Набор правил, по которому Mavo делает элементы редактируемыми, может быть легко расширен с помощью плагинов. Нужно, чтобы пользователь мог форматировать текст с помощью панели инструментов, аналогичной той, что есть у таких программ, как Microsoft® Wordpad или Microsoft® Word, т. е. работать с текстом, как в любом WYSIWYG-редакторе? Или вы хотите разрешить пользователю набирать текст с использованием команд языка Markdown? Нет никаких ограничений. Просто активируйте соответствующие плагины. Нет подходящего плагина? Не проблема. Напишите свой. Mavo поддерживает соответствующий функционал прямо «из коробки».

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

Превратим наши элементы <p> в свойства:

...
  <p property="source">Слово или фраза</p>
  <p property="translation">Перевод</p>
...

Следуй за белым кроликом!

Если у элемента уже есть атрибут id, class или itemprop, точно описывающий его назначение, можно не присваивать атрибуту property значение. Например, одно из свойств нашего приложения можно было бы описать так: <p property class="source">.

Заметили какие-нибудь изменения в нашем приложении после добавления в него свойств? Уверен, что да. Вверху приложения появилась панель инструментов Mavo (Mavo bar) с кнопкой Edit. Эта кнопка позволяет переключаться между двумя режимами работы приложения: режимом чтения и режимом редактирования. Сейчас наше приложение находится в режиме чтения. Это означает, что мы не можем редактировать его данные непосредственно в окне браузера.

Следуй за белым кроликом!

Панель инструментов Mavo полностью настраиваемая (как и все элементы интерфейса, автоматически добавляемые Mavo в приложение): вы можете изменить её положение, внешний вид, задать набор доступных на ней кнопок или даже назначить ей свой HTML-элемент.

Чуть позже мы увидим один из вариантов такой кастомизации панели инструментов Mavo. А пока, если хотите чуть подробнее познакомиться с описанными возможностями, почитайте документацию на официальном сайте.

Что ж, самое время переключиться в режим редактирования и познакомиться с ним. Нажмите кнопку Edit.

Что же изменилось? Поменялось название кнопки: теперь её имя Editing. Это визуальный сигнал для нас: внимание, мы находимся в режиме редактирования. Попробуйте навести курсор мыши на любой из абзацев с текстом («Слово или фраза» или «Перевод»). Mavo сообщает нам с помощью жёлтой подсветки, что по этому фрагменту можно щёлкнуть и отредактировать его.


Смелее! Щёлкните по тексту и внесите в него изменения. Ну разве это не здорово?! Мы можем редактировать содержимое страницы непосредственно в окне браузера!

Практика — путь к совершенству!

Предположим, что помимо изучаемого слова (или фразы) и его перевода, мы хотим, чтобы на карточке присутствовал пример употребления этого слова (фразы) в предложении. Мы же знаем, что именно так нужно учить иностранные слова — в контексте, правда?

Усовершенствуйте приложение, добавив в него недостающий элемент, и дайте ему имя, например, example.

Атрибут mv-multiple


На данный момент в нашем приложении всего одна карточка. Откровенно говоря, это не очень-то полезно! Для полноценного приложения нам не хватает возможности добавлять новые карточки, удалять ненужные, а также переставлять карточки так, как нам удобно. Но как мы можем всё это реализовать?

Запоминай через руки!

https://codepen.io/dsharabin/pen/PoYxNmN

Будучи разработчиками приложения, мы могли бы добавить в него новые карточки, просто добавив ещё элементов <article> в его HTML-код. Но тогда каким образом пользователь сможет добавлять и удалять карточки самостоятельно?

К счастью, в Mavo есть то, что позволит нам добавить в приложение соответствующий функционал на раз-два — атрибут mv-multiple. С помощью этого атрибута мы указываем Mavo, какие элементы приложения могут быть размножены. Атрибут mv-multiple превращает элемент, к которому он добавлен, в редактируемую коллекцию элементов (collection). При этом Mavo добавит к элементам такой коллекции элементы управления, с помощью которых можно добавлять в коллекцию новые элементы, удалять существующие и упорядочивать элементы коллекции с помощью перетаскивания. И да, стиль этих элементов управления тоже полностью настраиваемый!

Следуй за белым кроликом!

Если добавить атрибут mv-multiple к элементу без атрибута property, Mavo автоматически исправит эту ситуацию: добавит property со значением collection (или collection2, collection3, чтобы сохранить уникальность имени).

Однако, как и в случае с именем приложения, я рекомендую обязательно использовать атрибут property с коллекциями: это гарантирует сохранность данных приложения при внесении изменений в его HTML-структуру.

Что ж, давайте добавим атрибут mv-multiple к элементу <article> приложения, чтобы превратить нашу одинокую карточку (flashcard) в полноценную редактируемую коллекцию карточек (обратите внимание, что при этом мы добавили ещё и атрибут property):

<article property="flashcard" mv-multiple>
  ...
</article>

Следуй за белым кроликом!

Mavo позволяет указать имя свойства в качестве значения атрибута mv-multiple. Таким образом, мы могли бы описать коллекцию карточек чуть короче: <article mv-multiple="flashcard">.

Обратите внимание, что атрибут mv-multiple должен добавляться к размножаемому элементу, а не к контейнеру, в котором размещается коллекция. Очень распространена ошибка, когда разработчики пишут <ul mv-multiple> вместо <li mv-multiple>. И поначалу подобную ошибку достаточно трудно обнаружить. Пока, например, используемые в приложении стили не сделают её очевидной.

Теперь смело переключайтесь в режим редактирования. Заметили, что под карточкой появилась кнопка Add flashcard? Устроим ей тест-драйв: добавьте с её помощью пару новых карточек. Это просто что-то невероятное: мы можем динамически добавлять новые карточки в приложение, даже если в его исходном коде нет соответствующих элементов!

Следуй за белым кроликом!

Заметили, что добавление атрибута property к элементу <article> не сделало его содержимое редактируемым? Mavo считает этот элемент группой. Так происходит, когда атрибут property добавляется к элементу, содержащему внутри себя другие свойства, то есть элементы с атрибутом property.

Но и это ещё не всё! Наведите курсор мыши на любую из карточек. Видите, что у правого верхнего угла карточки Mavo добавил три новые кнопки (слева направо): для удаления карточки, добавления новой и перемещения существующей. И наводя курсор мыши на любую из этих кнопок, можно легко догадаться по генерируемой Mavo подсветке, к какой именно карточке они относятся.


Удобно, правда?

Следуй за белым кроликом!

Генерируемые Mavo кнопки работы с элементами коллекции полностью настраиваемые. Например, вы можете создать свою собственную кнопку перемещения элемента коллекции, добавив класс mv-drag-handle к соответствующему HTML-элементу.

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

Атрибут mv-storage


Запоминай через руки!
https://codepen.io/dsharabin/pen/WNeYwpj

Теперь, когда основной интерфейс будущего приложения разработан, предлагаю сделать следующее:

  1. Переключитесь в режим редактирования (если вы не сделали этого раньше).
  2. Добавьте несколько карточек, указав на каждой из них слово и его перевод.
  3. Вернитесь в режим чтения.
  4. И… обновите страницу.

Ой! Куда же делись все данные, которые мы только что ввели? Неужели Mavo не должен был сохранить их? Что пошло не так? Где мы ошиблись?

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

Так давайте сделаем это сейчас. Для этого в Mavo есть специальный атрибут — mv-storage. Осталось только выяснить, какие значения он может принимать. И оказывается, Mavo открывает нам широчайшие возможности. А плагины — открывают ещё большие!

Пусть наше приложение сохраняет данные в локальном хранилище браузера — localStorage. Это самый простой из доступных в Mavo вариантов и отлично подходит для нашего первого приложения. Всё, что нам нужно сделать, — просто добавить атрибут mv-storage со значением local к корневому элементу приложения (так называется элемент с атрибутом mv-app, помните?):

<main mv-app="flashcards" mv-storage="local">
  ...
</main>

А теперь взгляните на панель инструментов Mavo. Заметили новую кнопку Save? Помимо прямого назначения — сохранять изменения в приложении — у неё есть ещё одна полезная функция. Попробуйте отредактировать данные ещё раз. Обратите внимание, что кнопка Save теперь подсвечена. Наведите на неё курсор мыши, и Mavo подсветит вам данные, которые вы отредактировали, но не сохранили!


Здорово, да?

Нажмите кнопку Save и обновите страницу (при этом не обязательно переключаться в режим чтения). Ну что, теперь ваши данные сохранились? Отлично! Мы стали ещё на один шаг ближе к полноценному веб-приложению.

Атрибут mv-autosave


Сейчас наше приложение работает так, что пользователь должен нажимать кнопку Save всякий раз, когда ему нужно сохранить внесённые в приложение изменения. Это правильно с точки зрения сохранения жизненно важной информации, но часто пользователи забывают это делать. Как же быть? Вот бы наше приложение могло сохранять данные автоматически через какие-то промежутки времени! «А что, это реально можно сделать с помощью Mavo?» — спросите вы. А я с радостью и гордостью отвечу, что да, можно!

Итак, чтобы научить приложение автоматически сохранять изменения, вносимые пользователем в данные, мы можем воспользоваться атрибутом mv-autosave. Добавить его нужно к корневому элементу приложения. Значение этого атрибута — количество секунд, которое должно пройти с момента внесения пользователем изменений в данные до их сохранения приложением. Внесём соответствующие изменения в наше приложение:

<main mv-app="flashcard" mv-storage="local" mv-autosave="3">
  ...
</main>

Следуй за белым кроликом!

Атрибут mv-autosave="3" предписывает Mavo сохранять вносимые в данные изменения раз в три секунды. Наличие подобного рода задержки между сохранениями становится принципиально важным, если выбранный для сохранения данных сервис (бэкенд) хранит историю их изменения (например, GitHub и Dropbox). Отсутствие такой задержки сделает историю изменений просто-напросто бесполезной.

Чтобы заставить Mavo сохранять изменения немедленно, можно задать атрибут mv-autosave="0" или просто mv-autosave. При этом с панели инструментов Mavo будет удалена (за ненадобностью) кнопка Save.

Чтобы увидеть и оценить внесённые в приложение изменения, ещё раз обновите данные на какой-либо из карточек и обратите внимание на кнопку Save. Заметили? Сначала она была подсвеченной, но через три секунды погасла, указывая тем самым, что несохранённых данных в приложении нет. Теперь все изменения сохраняются автоматически!

Таким образом, основная часть нашего приложения выглядит сейчас следующим образом:

<main mv-app="flashcards" mv-storage="local" mv-autosave="3">
  <article property="flashcard" mv-multiple>
    <p property="source">Слово или фраза</p>
    <p property="translation">Перевод</p>
  </article>
</main>

Практика — путь к совершенству!

Мы почти закончили с альфа-версией нашего приложения. Ура-ура! Теперь ваша очередь сделать его ещё лучше. Не волнуйтесь! Вы вооружены всеми необходимыми знаниями, чтобы выполнить задание, которое я вам предложу.

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

Подсказки!

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

  1. Какой HTML-элемент вы будете использовать в качестве группирующего элемента (группы)? Пользователям приложения было бы удобно, если бы группе карточек можно было дать имя (название темы), а также если бы эту группу можно было сворачивать при необходимости до её заголовка.
  2. Какой атрибут (атрибуты) вы добавите к выбранному элементу (если, конечно, будете что-то добавлять). Будет ли этот элемент свойством или коллекцией?
  3. Будет ли у пользователей приложения возможность добавлять новые группы карточек, удалять ненужные, перемещать как сами группы, так и карточки между разными группами?

Вы, кстати, можете решить, что объединять карточки в группы с помощью отдельных элементов — не ваш метод. И это нормально. Может быть, вы захотите просто добавить к карточкам соответствующие теме метки (хэштеги). И это тоже будет прекрасное решение!

Чтобы «набить руку» и чуть больше познакомиться с Mavo и его возможностями, реализуйте оба этих способа решения.

Атрибут mv-bar


Продолжим расширять функционал нашего приложения. Мы настроили его так, что данные пользователя хранятся в локальном хранилище браузера. Но наше приложение остаётся однопользовательским: пользователи не могут делиться своими карточками с другими пользователями. А было бы здорово иметь такую возможность! Да и учить иностранный язык в компании куда веселее, не так ли?

Есть ли в Mavo способ разрешить пользователям экспортировать из приложения свои карточки и импортировать в него чьи-то чужие? Нам повезло! И этот функционал поддерживается в Mavo, как говорится, «из коробки». Конечно, это не сделает наше приложение многопользовательским в каноническом понимании этого слова, но наличие подобного функционала — уже немало для столь простого приложения, согласитесь.

Запоминай через руки!

https://codepen.io/dsharabin/pen/ZEzmWBr

Для подобных задач в Mavo есть атрибут mv-bar, с помощью которого можно указывать, какие кнопки отображаются на панели инструментов Mavo (если там вообще нужны какие-либо кнопки). Обычно этот атрибут добавляется к корневому элементу приложения. Сами кнопки имеют очень логичные (с точки зрения их наименования на английском языке) идентификаторы. Вот лишь некоторые из них: edit, import, export.

Поскольку мы хотим лишь добавить кнопки к уже имеющемуся на панели инструментов Mavo набору, мы можем воспользоваться так называемым относительным синтаксисом (relative syntax). Такой синтаксис позволяет нам добавлять и удалять кнопки из дефолтного набора без необходимости явно перечислять все кнопки, входящие в него. Всё, что нам достаточно сделать в нашем случае, — просто начать значение атрибута mv-bar с ключевого слова with, а затем перечислить (через пробел) идентификаторы нужных нам кнопок:

<main mv-app="flashcards"
      mv-storage="local"
      mv-autosave="3"
      mv-bar="with import export">
      ...
</main>

Практика — путь к совершенству!

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

Выражения. MavoScript


Перефразируя известную фразу, произнесённую персонажем Евгения Евстигнеева в знаменитом советском фильме «Берегись автомобиля», спрошу: «А не замахнуться ли нам в нашем приложении на статистику?!» Предлагаю отображать где-то вверху приложения общее количество карточек в нём. Заинтригованы? На это я и рассчитывал.

Но прежде чем суметь «замахнуться» и реализовать намеченное, нам нужно узнать кое-что новое о Mavo.

Мы уже знаем, что важные элементы приложения (которые, в частности, можно редактировать и сохранять) называются свойствами. Напомню, это элементы, для которых указан атрибут property. Значение этого атрибута — имя свойства, описывающее его роль в приложении.

Так вот, мы можем использовать значение любого свойства, ссылаясь на него, в любом месте внутри приложения Mavo (даже в значениях HTML-атрибутов). Для этого нужно просто заключить имя свойства в квадратные скобки. Вот так: [имяСвойства]. Эта запись является примером так называемого простого выражения. Простые выражения позволяют нам производить вычисления всякий раз, как только что-то в приложении меняется, то есть реактивно.

Следуй за белым кроликом!

Язык выражений, поддерживаемый Mavo, называется MavoScript. Он очень похож на язык формул в электронных таблицах (таких как Microsoft® Excel, Apple Numbers или Google Sheets) и позволяет производить вычисления и другие операции с числами, текстом, списками и т. п.

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

Плюс, MavoScript позволяет работать с данными, имеющими иерархическую структуру.

Более подробно о выражениях Mavo и языке MavoScript можно почитать в официальной документации.

Запоминай через руки!

https://codepen.io/dsharabin/pen/rNBQeMv

Перейдём от слов к делу и посмотрим на реактивность в действии. В качестве эксперимента, давайте добавим выражение [source] внутрь свойства flashcard. Например, между свойствами source и translation:

...
  <p property="source">Слово или фраза</p>
  [source]
  <p property="translation">Перевод</p>
...

Какие же изменения произошли в нашем приложении? Как минимум, мы видим, что значение свойства source отображается в карточке дважды. Так? Так!

Идём дальше. Переключимся в режим редактирования и попробуем изменить значение свойства source. Видите, что происходит в то время, как вы меняете значение этого свойства? Значение выражения [source] реактивно вычисляется, и изменения, которые вы вносите в значение свойства source, автоматически отображаются ниже: там, где мы использовали выражение. Ну не чудо ли?!

Это, разумеется, здорово, но пока мы не приблизились к решению нашей задачи — отображению информации о количестве карточек в приложении. Почему? Просто выражение [source], помещённое внутрь карточки, всегда будет возвращать ровно одно значение — значение свойства source именно этой карточки. А нам бы нужно как-то добраться до всех карточек в приложении.

А что если теперь мы поместим выражение [source] не внутри свойства flashcard, а снаружи? Вот так:

...
  [source]
  <article property="flashcard" mv-multiple>
    ...
  </article>
...

Как это будет отличаться от рассмотренного ранее случая? Чтобы увидеть эти самые изменения, добавьте в приложение несколько карточек. Обратите внимание, что теперь вместо одного значения над карточками мы видим список разделённых запятыми значений свойства source всех(!) имеющихся в приложении карточек. Если мы посчитаем, сколько значений в этом списке, то получим количество карточек в приложении. Согласны?

Осталось устранить одно маленькое логическое противоречие. Какое? Не кажется ли вам, что логичнее было бы считать количество самих карточек, а не количество значений их свойства source? В конце концов, добавляемая в приложение карточка уже существует до того, как пользователь заполнит её свойство source или translation. Как же поступить? Я предлагаю просто скорректировать выражение и сделать его более логичным: вместо [source] написать [flashcard]. В итоге получим:

...
  [flashcard]
  <article property="flashcard" mv-multiple>
    ...
  </article>
...

Как же отразились внесённые нами изменения на том, что мы видим в приложении? У нас всё ещё есть список разделённых запятыми значений, но значения эти теперь являются комплексными значениями — объектами. Каждый объект соответствует одной карточке и содержит все её свойства (даже если карточка пустая(!)).

Таким образом, теперь у нас есть, что посчитать (количество объектов, соответствующих карточкам, в списке), но остаётся вопрос, как это сделать. Что ж, у Mavo есть ответ и на этот вопрос. В MavoScript есть функция count(), которая позволит нам посчитать количество элементов в списке.

Следуй за белым кроликом!

MavoScript — достаточно богатый язык выражений. В нём изначально есть почти всё необходимое, включая наиболее часто используемые функции.

Дело за малым — научиться правильно использовать функции в выражениях. Есть всего пара моментов, которые нужно иметь в виду.

  1. Функции являются частью выражения, следовательно, в квадратные скобки заключается всё выражение, а не функция в отдельности.
  2. Вкладывать одни квадратные скобки в другие нельзя.

Что ж, предлагаю испробовать функцию count() для подсчёта количества карточек в приложении в действии. А заодно и увидеть на примере, как правильно записать выражение с функцией:

...
<span>[count(flashcard)] шт.</span>
<article property="flashcard" mv-multiple>
  ...
</article>
...

Мы получили ровно то, к чему стремились, — теперь наше приложение показывает полезную статистику!


Практика — путь к совершенству!

Надеюсь, вы уже достаточно разогрелись и готовы продолжить экспериментировать с Mavo и… статистикой. Предупреждаю, здесь задание будет чуть позаковыристее, и вам придётся кое-что самостоятельно изучить. Но не волнуйтесь, нужными подсказками я вас вооружу.

Усовершенствуйте приложение так, чтобы статистика отображалась не только по общему количеству карточек в приложении, а также отдельно по каждой группе карточек (если вы добавляли соответствующий функционал ранее).

Подсказка!

Вам может понадобиться умение отбирать карточки, удовлетворяющие определённому критерию, и подсчитывать их количество. Для этих целей вам пригодится оператор where или функция filter().

Самооценка


У нас уже есть готовое приложение, которое позволяет создавать, редактировать и хранить набор карточек. Но как отслеживать наш прогресс: какие карточки мы уже хорошо выучили, а с какими нужно поработать ещё? Давайте подумаем, что мы можем здесь сделать.

Предлагаю остановиться на очень полезной и в то же время модной (можно сказать, хайповой) функции — функции самооценки.

Запоминай через руки!

https://codepen.io/dsharabin/pen/WNeYwxR

Итак, добавим в наше приложение две кнопки: Плохо и Хорошо. Какого поведения мы ожидаем от приложения, когда пользователь нажимает эти кнопки? В принципе, идея достаточно простая:

  • если пользователь нажал кнопку Плохо, это означает, что он ещё не выучил содержащееся на карточке слово (фразу), и приложение должно переместить её в начало — пользователь при запуске приложения будет видеть эту карточку сразу;
  • если пользователь нажал кнопку Хорошо, это означает, что он выучил соответствующее слово (фразу), и приложение должно переместить карточку в конец, чтобы предоставить пользователю возможность поработать как можно раньше с карточками, которые он ещё не выучил.

«И мы правда сможем реализовать этот функционал, не прибегая к программированию на JavaScript?» — удивитесь вы. Да. Разве я не упоминал, что Mavo — чрезвычайно мощный инструмент и может вооружить нас всем необходимым?!

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

...
<article property="flashcard" mv-multiple>
  ...
  <section>
    <h2>Оцените себя</h2>
    <button> Плохо</button>
    <button> Хорошо</button>
  </section>
</article>
...


Атрибут mv-action


Mavo предоставляет нам возможность описывать собственные правила, по которым должны обрабатываться пользовательские данные нашим приложением, — так называемые настраиваемые действия (custom actions).

Чтобы определить настраиваемое действие, необходимо добавить атрибут mv-action к соответствующему элементу приложения. Описанное с помощью данного атрибута действие выполняется при каждом щелчке по элементу, к которому добавлен этот атрибут. Это как раз соответствует тому, какое поведение мы ожидаем от кнопок самооценки — Плохо и Хорошо.

Следуй за белым кроликом!

Если добавить атрибут mv-action к элементу <form>, соответствующее настраиваемое действие выполнится при отправке формы.

Значением атрибута mv-action является выражение. При построении этого выражения можно использовать любые операции и функции, предоставляемые нам MavoScript, а также несколько специальных функций манипулирования данными: add(), set(), move() и delete().

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

И ещё один момент: Mavo ожидает в качестве значения атрибута mv-action выражение. А раз так, то нет необходимости отдельно выделять его с помощью квадратных скобок. Таким образом, правильно будет написать mv-action="выражение", а не mv-action="[выражение]". Более того, если вы напишете квадратные скобки, они будут считаться частью выражения, и вы можете получить не совсем тот результат, которого ожидаете.

Итак, вернёмся к реализации функции самооценки. При нажатии кнопок Плохо и Хорошо мы должны перемещать карточку внутри коллекции карточек на новое место: первое или последнее. Именно это действие позволяет реализовать функция move(). В качестве первого аргумента функции нужно указать перемещаемую карточку, а в качестве второго — новое место (позицию) этой карточки в коллекции. Имейте в виду, что элементы коллекции нумеруются с нуля, то есть первая карточка имеет в коллекции позицию 0.

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

...
<article property="flashcard" mv-multiple>
  ...
  <button mv-action="move(flashcard, 0)"> Плохо</button>
  ...
</article>
...

Обратите внимание, что в значении атрибута mv-action мы ссылаемся на свойство flashcard внутри самого этого свойства. Это позволяет нам работать с текущей карточкой и перемещать именно её.

Если мы попытаемся по аналогии реализовать и вторую часть функционала самооценки, то неминуемо столкнёмся с проблемой. Можете, не заглядывая вперёд, догадаться, с какой? 

Вспомним, что происходит при нажатии кнопки Хорошо: соответствующая карточка перемещается в конец коллекции, то есть становится последней. А чтобы сделать карточку последней, нам нужно знать, сколько всего карточек в коллекции (приложении). К счастью, мы уже знаем, как решить задачу вычисления количества карточек в приложении, и даже реализовали соответствующий функционал. Сможем ли мы воспользоваться найденным ранее способом решения в этой новой ситуации?

К сожалению, нет. И вот почему: чтобы подсчитать количество карточек в коллекции, мы ссылались на соответствующее свойство — flashcard — вне самого этого свойства. Но в этом случае нам пришлось бы сослаться на свойство flashcard внутри него. То есть нам пришлось бы написать что-то типа такого:

...
<article property="flashcard" mv-multiple>
  ...
  <button mv-action="move(flashcard, count(flashcard))">
     Хорошо
  </button>
  ...
</article>
...

И это не сработает! Вы можете легко в этом убедиться экспериментальным путём.

Так как же нам быть в этой ситуации?

Вычисляемые свойства. Элемент <meta>


Итак, с одной стороны, мы знаем, что выражение [count(flashcard)] возвращает в качестве результата количество карточек в приложении, если оно записано вне свойства flashcard. С другой стороны, нам необходимо использовать результат этого выражения внутри свойства flashcard. Да, дилемма!

Чтобы её разрешить, нам нужно суметь вычислить значение выражения [count(flashcard)] вне свойства flashcard и каким-то образом сохранить результат, чтобы впоследствии можно было его использовать в любом месте приложения. А в нашем случае — внутри свойства flashcard. Для решения такого рода задач в Mavo есть, так называемые, вычисляемые свойства (computed properties).

Запоминай через руки!

https://codepen.io/dsharabin/pen/NWKENNb

Для хранения результатов промежуточных вычислений, которые мы могли бы позже использовать в приложении, нужно выделить в коде отдельный HTML-элемент. И хотя в качестве такого элемента подойдёт любой HTML-элемент, рекомендуется использовать элемент <meta>: <meta property="имяСвойства" content="[выражение]">. У этого способа хранения результатов промежуточных вычислений есть неоспоримое преимущество: вне режима редактирования элемент <meta> скрыт как визуально, так и семантически.

Следуй за белым кроликом!

Имейте в виду, что по умолчанию вычисляемые свойства, в отличие от обычных свойств, не сохраняются.

Добавим вычисляемое свойство flashcardCount в приложение. Но не забывайте, что мы должны добавить это свойство обязательно вне свойства flashcard (но использовать его значение мы сможем в любой части приложения):

...
<meta property="flashcardCount" content="[count(flashcard)]">
<article property="flashcard" mv-multiple>
    ...
</article>
...

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

...
<meta property="flashcardCount" content="[count(flashcard)]">
<article property="flashcard" mv-multiple>
  ...
  <button mv-action="move(flashcard, flashcardCount)">
     Хорошо
  </button>
</article>
...

Вот мы и закончили! Наше приложение готово. Поздравляю!

Практика — путь к совершенству!

Есть и другой способ решения этой задачи — с помощью специального свойства $all.

Специальное свойство $all, использованное внутри коллекции, соответствует ей всей. Таким образом, отпадает необходимость прибегать к вычисляемому свойству для работы со всей коллекцией внутри этой коллекции. Попробуйте самостоятельно применить специальное свойство $all вместо вычисляемого свойства flashcardCount для реализации функционала самооценки другим способом. Какой из способов вам нравится больше? Почему?

В реализованном нами приложении осталась крошечная деталь, которую нужно поправить. Теперь, когда у нас есть вычисляемое свойство, мы можем (и должны) использовать его для вычисления количества карточек в приложении. Внесите соответствующие изменения.

Выводы


Мы прошли с вами достаточно долгий путь разработки пусть и простого, но полноценного интерактивного веб-приложения. И при этом мы не написали ни одной строчки кода на языке JavaScript. Если это не чудо, то я не знаю, как это назвать по-другому. И если вы читаете эти строки, то вы оказались «крепкими орешками». Благодарю вас за это.

Как известно, образование — то, что остается после того, как забыто все, чему учили в школе. Давайте напоследок соберём воедино всё, что, я надеюсь, останется в вашей памяти после прочтения этой статьи. Итак, чтобы превратить статическую HTML-страницу в полноценное приложение Mavo, необходимо выполнить нескольких несложных шагов:

  1. Подключить (в элементе <head>) к странице JavaScript- и CSS-файлы Mavo.
  2. Добавить атрибут mv-app к корневому элементу приложения.
  3. Указать, какие элементы страницы являются важными (будут редактироваться и/или сохраняться, и/или использоваться в выражениях) для приложения, снабдив их атрибутом property.
  4. Добавить атрибут mv-multiple к свойствам, которые должны быть преобразованы в коллекции.
  5. Указать Mavo, где сохранять данные приложения, добавив атрибут mv-storage к корневому элементу приложения.
  6. Определиться, нужно ли сохранять вносимые в данные изменения автоматически. Если да, то добавить атрибут mv-autosave к корневому элементу приложения.

    Дополнительно следует знать и учитывать, что:
  7. Панель Mavo полностью настраиваемая (как и все генерируемые Mavo элементы интерфейса). С помощью атрибута mv-bar, добавленного к корневому элементу приложения, можно определить, какие системные кнопки доступны на ней.
  8. Выражения (expressions) позволяют отображать (и использовать) текущее значение свойства (property) в разных частях приложения и выполнять вычисления с ним. Значение выражения (и его тип) зависит от места, которое это выражение занимает в коде приложения. У Mavo есть свой язык выражений, называемый MavoScript.
  9. Настраиваемые действия (custom actions) позволяют модифицировать данные приложения особым образом. Для определения настраиваемых действий в приложении используется атрибут mv-action.
  10. В приложениях могут использоваться так называемые вычисляемые свойства (computed properties) — это свойства, значениями которых являются выражения. Для хранения таких свойств, а также результатов промежуточных вычислений рекомендуется использовать элемент <meta>.

Вместо эпилога


Вот мы и разработали наше приложение. Идеальное ли оно? Конечно, нет. В этом мире нет ничего идеального. Всегда есть, что можно улучшить, и всегда найдётся функционал, который можно было бы включить в приложение (например, можно сделать приложение многоязычным). Как говорится, нет предела совершенству. Дерзайте! Улучшайте приложение на ваше усмотрение. Не бойтесь экспериментировать и пробовать что-то новое — это прекрасный способ учиться и закреплять приобретённые знания! Откуда знаю? Просто уже больше 17 лет учить людей — моя профессия (работаю в учебном центре «Сетевая Академия ЛАНИТ»)!

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

Mavo ещё очень молод. И если вам понравился заложенный в него подход к разработке веб-приложений, вы можете стать полноценными участниками нашего сообщества. Как? Есть несколько вариантов:

  • вы можете присоединиться к команде разработчиков ядра Mavo, чтобы добавлять в него новый функционал, — загляните в репозиторий Mavo и вы найдёте там массу интересного;
  • или вы можете стать автором крутого и очень полезного плагина, за который вам обязательно скажут спасибо, и уверен, не один раз;
  • готовы доработать документацию Mavo, написать самоучитель, разработать примеры, на которых будут учиться новички и не только, — будем только рады;
  • ну, или просто заглядывайте в наш чат или на страничку Mavo в Twitter, чтобы обсудить с нами, что получается, а что нет, или просто сказать «Привет» (кстати, в Gitter есть комната и для русскоговорящих поклонников Mavo);
  • а вообще, просто рассказывайте о Mavo как можно большему количеству людей — он этого достоин!

Да пребудет с вами Mavo!

Благодарности


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

В первую очередь, я очень благодарен Лие Веру (Lea Verou), которая не только сподвигла меня к написанию оригинала этой статьи на английском языке (и помогла мне воплотить её в жизнь), но и постоянно вдохновляет меня своим примером: тем, как она делает мир веб-разработки лучше для всех. Я никогда не встречал столь одарённого человека и безумно рад, что мне выпала счастливая возможность поработать с ней!

Я также благодарю Джеймса Мура (James Moore). Примеры, которые он использует в своем курсе «Функциональное программирование в JavaScript для начинающих» на платформе Udemy, а также выбранный им подход к обучению, мотивировали меня к созданию первой версии приложения «Карточки». Он замечательный учитель!
ГК ЛАНИТ
508,67
Ведущая многопрофильная группа ИТ-компаний в РФ
Поддержать автора
Поделиться публикацией

Комментарии 79

    +1
    Спасибо за статью (+1)!

    Небольшое отступление для читателей из России!

    Сайт Mavo хостится на серверах Netlify, адреса которых попали в «чёрный список» в результате «войны» с мессенджером Telegram. А значит, ресурсы, размещённые на этих серверах, равно как и все связанные с ними сервисы заблокированы на территории России (по крайней мере, на момент написания этой статьи).


    Не знаю что и где «заблокировано», но mavo.io работает прекрасно.
    Только что проверил (РФ, Томск).
      +3
      ЗдОрово! Значит, я могу выдохнуть и радоваться тому, что про Mavo сможет узнать ещё большее количество людей. :)
      Видимо, разные интернет-провайдеры по-разному исполняют распоряжения о всякого рода запретах и блокировках (например, московские провайдеры сайт Mavo блокируют). К счастью, мы — конечные пользователи — можем от этого выиграть. Приятного Вам знакомства с Mavo!
        +1
        Уберем одну букву — РФ, Омск. Не работает :(
        Полагаю, от провайдера зависит
          0
          И это очень печально. :( Пока не удаётся победить эту проблему малой кровью. Но если долго думать над тем, как решить проблему, то решение обязательно придёт. Продолжаем думать. :)
            0
            Netlify предоставляет шикарные сервис, не выгодный многим хостерам.
            Netlify прекращает работу стохастически, то работает то нет.
            Подобная проблема была с Firebase от google, в мае 2017.
            –1
            Перемешаем все буквы и добавим новых — РФ, Нижний Новгород, ТТК. Работает.

            Но у меня вопрос к автору DSharabin — разработчикам из РФ вы предлагаете впн… Пользователям конечным тоже потом предлагать впн? Какой-то тупичок…

            //статью дочитал ровно до плашки про впн. большенькая статейка… ;)
              +2

              Предлагать пользователям предлагаю так :) — вы просто забираете JS- и CSS-файлы и подключаете к своему проекту их локальные версии. Тогда проблемы нет. Но надеюсь, скоро мы снимем проблему с доступом без VPN.
              И да, статейка большая. Не могу обещать, что другие будут короче. ;)

            0
            У меня тоже работает в СПб. Провайдер РТ.
              0
              Отлично! Спасибо за информацию.
              Всё-таки забавно, как по-разному работают наши интернет-провайдеры.
              Значит, ничто Вам не помешает познакомиться с Mavo. И это меня очень радует. :)
            +9
            Имхо, лучше учить javascript.
            Ничего серьезного с Mavo сделать не удастся, а для сайта, подобного выше, хватит пару десятков строк js.
            Javascript имеет стандарты хотя бы. А тут еще один вид специальных атрибутов, которые напомнили мне аналогичные в vue.js.
            В итоге свой мини-dsl в значениях атрибутов. Может кому и понравится, но я пробовать не стану.
              +1
              Ну, всё как обычно. «Вы хотите сайт, но не хотите кодить? Есть решение! Вы всё равно будете кодить, только на малоизвестном языке и технологии!».
                0

                Почему на малоизвестном? :)
                Всё на том же HTML. Вы же, когда появляются новые элементы и/или атрибуты в HTML, используете их для решения своих задач, если они для них применимы? Например, тот же самый слайдер () всё ещё можно закодировать руками самостоятельно, но зачем?
                Так и Mavo — он лишь расширяет имеющийся словарь (и немного синтаксис — для выражений) HTML и добавляет в него отсутствующий в нём (пока) функционал.

                  0
                  Малоизвестный — в том плане что там свои кастомные атрибуты и настройки. В итоге я, человек который шестой год ежедневно пишет на HTML+CSS+JS, не могу так просто взять, и начать писать на Mavo. Мне надо сначала сесть и изучать что там да как (тут вот целый огромный пост об этом!). И наоборот — человек который идеально освоит Mavo, получит почти бесполезные знания, ибо нигде кроме Mavo всю эту кучу надстроек он применить не сможет.
                    0

                    Мне кажется, это можно отнести к любому инструменту (фреймворку, расширению языка, библиотеке), нет? Везде нужен порог вхождения.
                    Не могу сказать, что в Mavo он непреодолимый. Наличие большого словаря — это неплохо: по нему можно искать. Реально, он не такой большой. Если посмотреть на итог в конце статьи, там всего 5 основных пунктов и 5 дополнительных.
                    Вопрос полезности знаний — вопрос субъективный. Чтобы хорошо знать Mavo, нужно хорошо знать HTML, поскольку он расширяет его несколькими (на самом деле, не так уж их и много, можете посмотреть в документации) атрибутами. А значит, это знание не будет бесполезным. Но это моё мнение. Мы можем с Вами совершенно не сходиться в мнениях. Это нормально. :)

              +2
              Думаю, Вы не станете утверждать, что в статье я призываю кого-то не учить JavaScript. Это совсем не так. Напротив, людям, которые планируют построить свою карьеру, например, во фронтенд-разработке, это жизненно необходимо. И я призываю их учить (и делать это осознанно и кропотливо) JavaScript. Но не стоит списывать со счетов людей, которые не являются разработчиками (и не планируют ими становиться), но у которых есть идеи, для реализации которых нужен простой инструмент. А если он будет опираться на уже известные им технологии (такие, как HTML и CSS), то вообще замечательно. Вот именно для таких людей и был создан Mavo.
              Понятие «серьёзности» — вещь субъективная. Что серьёзно для одного, совсем не обязательно серьёзно для другого. И это замечательно. Мир прекрасен в его многообразии. :)
              Главное — находить инструмент, адекватный решаемой задаче, чтобы не палить из пушки по воробьям. Видимо, Ваши задачи не предполагают использование Mavo. И в этом нет ничего страшного.
              Удачи Вам в Ваших проектах и хорошего дня! Спасибо за комментарий. :)
                +1
                люди, которые не являются разработчиками (и не планируют ими становиться)… простой инструмент… известные им технологии HTML и CSS
                А что, есть такие люди?
                  +1
                  Ума не приложу, откуда они бы могли взяться! :)
                0
                Мда, 21 плагин, из которых 4 — это локали, маловато…
                  +1
                  Вы правы. Но это временно — проект очень молодой (всего 2 года). Зато есть, где приложить свои умения и написать новые плагины, которые будут полезны всем. Будет здорово, если Вы готовы.
                  0

                  mv-app, mv-multiple


                  выглядит, как ангуляр… не то, чтобы это было плохо, но почему бы его и не использовать?

                    0

                    Хм, оказывается, ответ есть в FAQ:


                    However, Angular was never designed with the goal of writing apps entirely in HTML. It treats HTML as a shortcut for data binding to views, but everything else is expected to be written in JavaScript. For example, persistence or editability needs to be coded from scratch, just like with every other JavaScript framework

                    Но разве нельзя добавить соответствующие кастомные теги в него?..

                      +2
                      Да-да. Вы угадали самый популярный вопрос тех, кто знаком с фреймворками. :)
                      Кстати, здорово, если вы, как разработчик, будете заинтересованы внести в Mavo что-то новое и полезное. На Github можно открыть, например, feature request или даже направить PR.
                      В любом случае, проект развивается. То, что включать в него, решается открытым обсуждением. А также в результате последующего эксперимента. У создателей Mavo есть определённое видение того, каким он должен быть. И если будет больше кейсов, доказывающих необходимость включения в ядро той или иной фичи, то она будет включена. А пока можно написать плагин, добавляющий в Mavo новые элементы, если имеющихся недостаточно. :)
                      Насколько я понимаю идею Лии, она старается максимально использовать имеющийся потенциал HTML и CSS. Именно поэтому в него не были добавлены новые элементы, а лишь расширен перечень атрибутов имеющихся.
                    +1

                    Дочитал до конца. Возник вопрос. Авторизация. Разграничение прав. Возможно ли панель и функции показывать только авторизованному пользователю? Или любой может зайти на сайт и внести изменения.

                      +2
                      Отличный вопрос. Тоже, кстати, часто возникающий.
                      Авторизация осуществляется средствами Mavo через соответствующий сервис выбранного бэкенда: GitHub, Dropbox, Google Drive и т. п. Изменить данные может только авторизованный пользователь, а видеть будут все. Правда, у авторизованного пользователя есть возможность направить PR (например, если в качестве бэкенда используется GitHub) на изменение данных. Автор сам решает мерджить их или нет.
                      Что касается возможности показывать что-то только авторизованному пользователю, то такая возможность тоже есть — с помощью CSS. Как это сделать, описано в паре предложений вот здесь.
                      Какие-то разграничения прав пользователей поддерживаются и на уровне выбранного бэкенда. Например, Firebase позволяет задавать правила работы с хранимым с его помощью контентом. Этот бэкенд можно подключить с помощью плагина.
                      Пока, к сожалению, нет гранулированных прав доступа (авторизованный пользователь может редактировать не только свои данные). Это перспектива. Но перспектива когда-то становится реальностью. Будем работать в этом направлении. :)
                        +1
                        Было бы здорово увидеть похожую статью (для новичков) на эту тему («Авторизация. Возможно ли панель и функции показывать только авторизованному пользователю?»).

                        Мне Mavo очень понравился. Я из его ЦА — HTML с CSS еще помню, но за JS так и не брался. А тут шикарная возможность превратить статичную страничку в полноценное приложение. Здорово!) Только вот хочется чуть более практических кейсов. Для любого публичного сервиса понадобится авторизация. Или, еще как пример — добавление простенького калькулятора на существующий сайт или создание формы обратной связи…

                        Думаю, все можно найти в примерах по ссылкам. Но если бы появилась такая понятная статья на эти тему — было бы здорово.
                          0
                          Спасибо Вам большое за приятные слова! Я обязательно буду писать про Mavo ещё — мне он тоже очень-очень нравится. Теперь я точно знаю, что у моих статей на эту тему найдутся читатели. :)
                          Сейчас я активно работаю над тем, чтобы в ближайшее время на CodePen появился раздел о Mavo (с Крисом Койером мы уже обо всём договорились). Так вот он будет посвящён именно практическим примерам применения Mavo. Сейчас там уже есть пример лендинговой страницы с возможностью редактирования её контента и его сохранения в локальном хранилище браузера, в GitHub и в DropBox. Посмотрите, пожалуйста. Может быть, Вам и это пригодится.
                          Приятного Вам знакомства с Mavo! Если будут возникать вопросы, обязательно задавайте их: здесь, в Twitter, Gitter, где угодно. :)
                            +1
                            Спасибо!)) Уверен, что Mavo многим будет полезен и то что Вы делаете — очень здорово! Буду ждать новых статей)

                            Посмотрел примеры лендингов — это действительно очень круто! Хранить данные на дропбоксе/гитхабе — действительно удобно. Думаю даже стоило бы добавить об этом пару слов в статью — по сути изменение в одной строчке, а приложение из домашней поделки (которая пропадет при смене браузера), становится вполне себе рабочим инструментом для изучающих язык.

                            И вообще лендинги на Mavo — это шикарная идея. Думаю, мой следующий лендинг точно будет на нем))

                            Единственное чего теперь не хватает для счастья — это такого-же простого инструмента для разметки страницы:) Сейчас разметку определяет CSS, мешая ее пополам с описанием визуального стиля элементов, и у новичка возникает путаница. Описать стили не проблема, свойства понятные и их можно править прямо в браузере. А вот создать нормальный кроссплатформенный макет страницы — гораздо сложнее. Не хватает простого инструмента, где, задав несколько правил, можно было бы описать положение всех элементов на странице. Когда то я описывал идею чего-то подобного. И хотя статья за 7 лет сильно устарела, но вот на вскидку, простого инструмента для этой задачи как не было, так и нет.
                              +1
                              Буду ждать новых статей)

                              Я тут вспомнил, что Вам также могут оказаться полезны небольшие «трюки», которыми я стараюсь регулярно делиться в Twitter. Найти их можно по хэштегу #mavotricks. Ничего сверхординарного, конечно, но для расширения границ в познании Mavo может пригодиться. К сожалению, пока Mavo не так широко известен в российских кругах, мне приходится их писать на английском. Надеюсь, в скором времени и этот «недостаток» мы исправим. Предлагаю действовать сообща. :)

                              Единственное чего теперь не хватает для счастья — это такого-же простого инструмента для разметки страницы:)

                              Когда то я описывал идею чего-то подобного.

                              Да, неплохо было бы иметь подобный инструмент. :)
                              Кстати, Вы можете вернуться к своей идее и попробовать реализовать её с помощью Mavo: за 7 лет CSS прирос многими полезными свойствами, позволяющими упрощать (тут, конечно, можно спорить — проще ли стало, но гибче точно) процесс создания макета сайта. Плюс, появились переменные (кастомные свойства), с помощью которых можно динамически менять, например, тот же самый макет, а значения свойствам можно задавать непосредственно в атрибуте style нужного элемента с помощью выражений Mavo. Подобную идею я использовал в одном из своих экспериментов с Mavo — клоне системы управления проектами на основе досок — Kanbanchi, где динамически отражал прогресс выполнения задачи, изменяя линейный градиент, применённый к одному из элементов.
                              Таким образом, можно, например, создать некую админку именно для задания макета страницы. Скорее всего, сделать это сложнее, чем кажется на первый взгляд, но уже есть, с чего начать. Буду рад, если поделитесь результатами, если решитесь на этот эксперимент! :)
                                +1
                                Спасибо за ссылку на «трюки»:) Есть очень интересные мысли. К примеру, переключение языка путем смены хранилища данных — очень элегантное решение. Позволяет менять не только тексты, но и грузить разную графику, давать разные адреса реселлеров. И всего пара строк кода. Очень круто!)

                                На счет реализации разметки на Mavo — можно подумать. Хотя мне, кажется, тут все же правильнее использовать JS. Идея нового языка разметки в том, чтобы он брал на себя как можно больше логики. Примерно так как если бы дизайнер описывал верстальщику как нужно сверстать его макет: «вот это поле не тянется, это видео всегда во всю ширину экрана, тут параллакс фона по горизонтали, а эти блоки группируются если хватает места...» Движок должен на основе этих правил создать систему уравнений (или задачу оптимизации) и решать ее под каждый размер экрана и конфигурацию (скажем для слабовидящих, или под шлем VR/AR, или еще что-нибудь пока неизвестное). Думаю, писать такое на Mavo — не совсем верно. А ограничиваться просто еще одним языком разметки со своим синтаксисом — не интересно.
                                  0
                                  Очень рад, что «трюки» Вам пригодились. Скоро напишу ещё один. Надеюсь, он тоже окажется полезным. :)
                      +2
                      Читая это, я всё силился себе представить, как нынче выражаются хипстеры продуктовой разработки, юзер стори пользования всем этим.
                      То есть, некоего условного Васю, который смог в html и css, и который сможет осилить все вот эти вот метаязыковые вставки, языки выражений, и прочую пургу, но при этом категорически не сможет осилить JS.

                      И чёт моей фантазии на это не хватает.
                        +1
                        Ну, юзер-стори разные бывают. Как и «условные Васи». И, знаете, перефразировав строчку из одного известного стихотворения, скажу: «Васи разные нужны. Васи разные важны». И Вы не поверите, но среди них есть и те, кто, действительно, не сможет освоить на профессиональном уровне JS (может, ему это просто и не нужно — под этим солнцем есть место и НЕразработчикам). Зато сможет, наравне с HTML и CSS, освоить ту самую «пургу» и успешно решать свои, вполне земные задачи. Не будем ему навязывать свою точку зрения, а дадим возможность выбирать самому. Вот так всё просто!
                          0
                          Я не сомневаюсь, что такие люди принципиально существуют (принципиально существуют практически какие угодно люди). Вопрос в том, достаточно ли их существует, чтоб создавать вам на проекте активность посильнее статистической погрешности.
                            +1
                            А вот это нам с Вами покажет время.
                          +1
                          Каждый смотрит со своей колокольни, вам такая ЦА не видна и не понятна, а мне например — очень даже.

                          Потратив час на эту статью и разбор примеров, я уже понимаю, что за несколько часов могу сделать интерактивный лэндинг, с калькулятором расчета яркости проектора, мини каталогом моделей, формой обратной связи и сохранением заявок на дропбокс. Плюс все тексты и картинки будут на том же дропбоксе, и любой менеджер с доступом к папке сможет править тексты, картинки и т.п. Сколько мне бы понадобилось времени чтобы изучить JS на уровне достаточном для этого?

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

                            Если Ваша разработка не будет являться коммерческой тайной, сможете ей поделиться, пожалуйста, по её готовности? Мы могли бы добавить ссылку на неё на сайт Mavo, как пример использования Mavo в «дикой природе». Чем больше будет подобных примеров, тем больше у нас будет возможностей развенчать миф и «несостоятельности» и «ущербности» Mavo и невозможности создать с его помощью что-то полезное.
                              0
                              Да, конечно!
                              Не обещаю, что очень скоро, сейчас на очереди другие задачи (не web), но как будут наработки обязательно напишу в ЛС, если сочтете что их не стыдно показать — пожалуйста:)
                                0
                                Договорились! Спасибо. :)
                          0
                          Инструмент интересный, но на мой взгляд, человек не знающий JS эффективно использовать его не сможет, а вот знающий — вполне. Однако, зачем человеку знающему, этот инструмент вообще может понадобится, ума не приложу.
                            0
                            Позвольте с Вами не согласиться. Если под эффективностью использования инструмента понимать возможность создания с его помощью пусть и не сверхсложного, но рабочего интерактивного веб-приложения, то это доказано проведёнными исследованиями (так называемыми, user study). Ознакомиться с результатами одного из них можно здесь.
                            Что же касается знающих JS людей, то они могут использовать Mavo в качестве полноценного реактивного JS-фреймворка для разработки кастомного UI, прототипирования интерфейсов, быстрой проверки гипотез и т. п. Сфер достаточно. Просто кейсов пока мало. Но через этот этап проходят все инструменты на начальном этапе своего развития.
                            Как знающий JS человек, кстати, Вы могли бы способствовать появлению таких кейсов. Дерзайте. Если, конечно, есть желание. :)
                              0
                              Уже есть такие фреймворки, зачем ещё один? Комментатор ниже пишет, что подойдёт только для обучения, тут я с ним согласен.
                                +1
                                Все современные фреймворки были спроектированы разработчиками больших веб-приложений для разработчиков больших же веб-приложений. И, к сожалению, приходится констатировать тот факт, что они усложнили жизнь обычных разработчиков или, например, дизайнеров, которые работают над небольшими клиентскими сайтами. Или просто обычных людей, которые занимаются веб-разработкой как хобби. Нужен инструмент, который позволит решать и их задачи в том числе.
                                И учить новичков, конечно. Это крайне важно не убить живой интерес начинающих разработчиков в новой для них сфере. Если вы считаете, что только обучение может быть сферой применения Mavo, что ж, это Ваше право. Время расставит всё на свои места. Возможно, мы оба окажемся неправы. :)
                                  0
                                  Все современные фреймворки были спроектированы разработчиками больших веб-приложений для разработчиков больших же веб-приложений.

                                  Но это очевидная неправда. Фреймворки существуют абсолютно любых размеров, под абсолютно любого размера проекты, и от команд какого угодно размера (включая активистов-одиночек).
                                    +1
                                    В чём же здесь неправда? С помощью фреймворков можно, действительно, разработать приложение любой сложности и размера. И я нисколько не отрицаю их полезности и важности. Но остаётся вопрос выбора адекватного решаемой задаче инструмента. И использование фреймворка для, например, разработки простого лендинга или сайта-портфолио может оказаться сродни стрельбе из пушки по воробьям. Да и кривая входа в современные фреймворки не такая уж и гладкая: нужно много чего знать и понимать, чтобы написать даже простое приложение по типу Todo List.
                                    Mavo — лишь один из ответов на вопрос, как сделать веб-программирование проще для начинающих (а значит, как следствие, и для всех). Возможно, он не самый лучший. Это и не важно. Главное — поиск ответа. И рано или поздно он будет найден. Возможно, это будет не Mavo, а что-то другое. Но пока, по крайней мере для меня (и я, к счастью, не одинок) Mavo — хорошее приближение к ответу на этот непростой вопрос.
                                      0
                                      И использование фреймворка для, например, разработки простого лендинга или сайта-портфолио может оказаться сродни стрельбе из пушки по воробьям.

                                      Для них и JS скорее не нужен, чем нужен, давайте с этого начнём. А раз не нужен JS, то не нужен и ваш проект.
                                        +1

                                        Нужен JS или нет, зависит от идеи и сложности реализации этого самого лендинга или портфолио. Это чтобы не начать, а закончить.
                                        Я не пытаюсь Вас ни в чём убедить и призвать Вас пользоваться тем, в чём Вы не видите смысла. Нет и нет. Ни у кого из нас от этого не убудет.
                                        Остальные пикирование становятся просто бессмысленными. Вы можете потратить свои силы на разработку чего-то лучшего, чем Mavo. Мир веб-разработки, может быть, от этого только выиграет. Удачи! :)

                                0
                                озвольте с Вами не согласиться. Если под эффективностью использования инструмента понимать возможность создания с его помощью пусть и не сверхсложного, но рабочего интерактивного веб-приложения, то это доказано проведёнными исследованиями (так называемыми, user study). Ознакомиться с результатами одного из них можно здесь.


                                We recruited 20 participants

                                где 11 — отметились как advanced html+css юзеры

                                вы вообще всю статью прочитали?
                                  +1
                                  Не совсем понял, как комментарий и вопрос связаны между собой. Можете пояснить?
                                    0
                                    В своем комментарии вы аппелируете к статье, которая говорит о исследовании, в котором участвовало 20 человек (это уже как бы сказать, нелепо что ли), из которых 11 заявило что они продвинутые css+html пользователи. Так как вы пытались с помощью этой статьи доказать, что даже не связанные с программированием пользователи могут вполне успешно использовать (прошу прощения за тавталогию) этот фреймворк — я сделал вывод, что вы не читали цитируемую статью полностью.
                                      +1
                                      Правда, я не могу понять Вашу логику. Простите. 11 продвинутых HTML+CSS пользователей — это не релевантная группа или что? Что их было мало (что Вам кажется почему-то нелепым), так, во-первых, это было одно из user study, а во-вторых, этого количества вполне достаточно для проверки выбранного направления развития инструмента и корректировки маршрута, если необходимо.
                                      В любом случае, я никому ничего не пытаюсь доказать, я делюсь тем, что мне интересно. Если это не интересно Вам, это Ваше право. Вступать в какую-то очередную непримиримую священную войну я, честно говоря, не вижу никакого смысла.
                              +1
                              Проблема Mavo в том, что создание всех этих атрибутов, увязывание их вместе и всё такое прочее — это именно программирование. По мере развития проекта он будет всё больше усложняться, пока не станет очевидно, что нужно отделить код от представления. Всё это мы уже проходили.
                              Это полезно для обучения школьников — в нише типа Blockly этот Mavo может быть полезен. Но ни в коем случае не для реальных сайтов. Других ниш я не вижу.
                                +1
                                Не могу согласиться с тем, что увязывание элементов и их атрибутов (что и предполагает декларативный стиль описания документов и их свойств средствами HTML и CSS) — это проблема Mavo. Напротив, будучи расширением HTML, он впитал в себя его сильные стороны: он лоялен к ошибкам пользователя, имеет небольшой синтаксис (практически не отличающийся от синтаксиса HTML), но достаточно богатый словарь. Следовательно, кривая входа в этот инструмент очень плавная. И Вы правы, он отлично может подойти для обучения школьников и начинающих веб-разработчиков. Разве это плохо? По-моему, совсем нет. Даже, напротив, это просто отлично.
                                Что же касается Вашего столько категоричного суждения: «ни в коем случае не для реальных сайтов», то здесь Вы просто заблуждаетесь. Назову лишь несколько реальных сайтов, построенных с помощью Mavo: собственно, сайт Mavo, сайт школы боевых искусств, персональный блог, сайт рабочей группы W3C CSS.
                                А чтобы увидеть другие ниши, может быть, просто стоит чуть пристальнее присмотреться к Mavo? :)
                                +1
                                На мой взгляд тоже самое, что и с конструкторами сайтов — ну есть и есть.
                                  0

                                  Я прочитал вводный первый параграф и с трудом могу представить человека, который бы сказал "дык это же я". Человек, который хорошо разбирается в HTML и CSS, и при этом не может вдохнуть чуть интерактивности через какой-нибудь простейший инлайновый скрипт + jQuery + jQuery.ui плагины. Я могу представить, как это делает человек без понимания циклов и концепций ООП, вооружившись StackOverflow.


                                  Я бы сказал, что хорошо разобраться в вёрстке и HTML гораздо сложнее, чем как-то стартануть с JavaScript. В КДПВ понапридумано "Виртуальный DOM, MVC, базы данных" — зачем всё это на этапе "мне нужно добавить каплю интерактива в статичную страницу"?


                                  Да, в серьёзной фронтенд разработке сейчас всё сложно, потому что JS исторически плохо был заточен под огромные кодобазы и чтобы это исправить сделали очень-очень-очень много приблуд. Но у JS отличная кривая старта с этапа "я абсолютно ничего не знаю, мне надо чтобы одна кнопка мигала при нажатии на другую"

                                    0

                                    Интересно, как этот инструмент проявит себя в качестве админок для лендингов. По-моему хорошая замена, для тех кто лендосы на Wordpress прикручивает. Нужно только понять что у Mavo под капотом для работы с формами.

                                      0
                                      Интересно, как этот инструмент проявит себя в качестве админок для лендингов.

                                      Нет разделения прав доступа — читай, «никак».
                                        0
                                        Просто попробуйте! И тогда сможете сделать вывод на собственном, а не чужом опыте. Даже если набьёте шишек. Но они Вам принесут опыт. Это как раз и ценно.
                                        0
                                        Mavo — это новый подход к разработке интерактивных веб-приложений только за счёт написания HTML и CSS, без необходимости написания кода на языке JavaScript и разворачивания собственного сервера.
                                        Это не новый подход, это жалкое подобие Oracle APEX. В апексе можно делать все то же самое и даже намного больше, но при этом не надо знать даже HTML и CSS.
                                          0
                                          В этом и трагедия: HTML и CSS — база и фундаментальная основа веб. Не знать их (или сознательно отказываться), на мой взгляд, — преступление.
                                          Не слышал, чтобы Mavo опирался на Oracle APEX, чтобы быть его «жалким подобием». Может быть, в том случае так бы оно и было. Но нет. Рождение Mavo — результат научных изысканий и исследований того, чтобы было до него или существует с ним параллельно. Если Вам интересно, о каких исследованиях и системах идёт речь, Вы можете найти информацию здесь.
                                            0
                                            В этом и трагедия: HTML и CSS — база и фундаментальная основа веб. Не знать их (или сознательно отказываться), на мой взгляд, — преступление.
                                            Да ну? А я думал, база — это TCP/IP и HTTP!
                                            Не знать их (или сознательно отказываться), на мой взгляд, — преступление.
                                            Это громкие слова, за которыми ничего не стоит. Что значит «преступление»? Меня посадят? А вот примерно 7 миллиардов человек не знают HTML и CSS — их тоже посадят? Или что сделают с нами всеми?
                                            Не слышал, чтобы Mavo опирался на Oracle APEX, чтобы быть его «жалким подобием».
                                            А ему и не надо опираться. Вы в статье упираете на то, что у Mavo низкий порог входа и широкие возможности. У APEX примерно та же область применения, но порог входа ниже, а возможности шире. Именно поэтому Mavo — жалкое подобие апекса.
                                            Если Вам интересно, о каких исследованиях и системах идёт речь
                                            Совершенно неинтересно. Но я все-таки глянул по диагонали — так себе исследование. Авторы придумали простенький недоязык с десятком (от силы) команд, а потом проверили, смогут ли выучить этот язык люди, которые уже выучили более сложные вещи. Результат — смогут! Называть такое наукой я бы постеснялся.
                                            Ну и потом. В абстракте авторы заявляют:
                                            We show that it lets authorscreate a more powerful set of applications than they couldpreviously, while adding little additional complexity to theauthoring process.
                                            Но при этом не дают (или я пропустил?) никаких методик сравнения мощности приложений и дополнительной сложности инструментов. А без этого как-то банально получается: мы дали людям более сложный инструмент, и они с его помощью сделали более функциональное приложение. Ну как бы да, именно так и должно быть, было бы наоборот — это был бы полный провал.
                                              0
                                              У APEX примерно та же область применения, но порог входа ниже, а возможности шире. Именно поэтому Mavo — жалкое подобие апекса.

                                              Из вашей собственной статьи с базовым описанием APEX:
                                              Предполагается, что читатель знаком с Oracle Database версии хотя бы с 11-й, SQL, PL/SQL и особенно с тем, что такое EXECUTE IMMEDIATE и как оно работает.

                                              И Вы считаете, что этот порог ниже, чем у Mavo?

                                              Возьмем элементарную конкретную задачу, которая может возникнуть у новичка (с которой я и сам не однажды сталкивался): добавить кастомный онлайн калькулятор для расчета скидок на существующий сайт.

                                              Прочитав данную статью, я прекрасно понимаю, как это сделать на Mavo.

                                              Прочитав Вашу статью — я понятия не имею как это сделать на APEX. Но если «Mavo — жалкое подобие апекса» — то, по логике, любая задача легко решаемая на Mavo может быть также или еще проще решена на APEX. Или нет?

                                              Вообще, странно, что Вы сравниваете Mavo именно с APEX. У них совершенно разные подходы, задачи, целевые аудитории (насколько мне удалось понять). Получается с тем же успехом можно сравнить его с каким-нибудь онлайн конструктором типа wix.com (я не о том, что APEX и Wix похожи, а о том, что они в равной степени не похожи на Mavo). Да, судя всему приложение APEX можно перенести к себе на сервер. Но это уж точно задача не для новичка.
                                                0
                                                И Вы считаете, что этот порог ниже, чем у Mavo?
                                                Это порог для чтения моего туториала, а не для освоения апекса. А далее в моем туториале, между прочим, написано следующее:
                                                … по своему опыту я могу сказать, что человек, не читавший никаких туториалов вообще, самостоятельно найдет, как создать приложение, добавить страницу, поместить на нее отчет и так далее
                                                В апексе можно создавать таблицы и страницы для записи в них данных и отображения отчетов, не изучая SQL. Там действительно интуитивно-понятный интерфейс, есть графический построитель запросов и так далее. Просто мне неинтересно писать туториал по очевидным вещам для тех, кто ничего не знает, мне интересно писать про более крутые фичи для тех, кто знает хотя бы SQL.

                                                Прочитав Вашу статью — я понятия не имею как это сделать на APEX. Но если «Mavo — жалкое подобие апекса» — то, по логике, любая задача легко решаемая на Mavo может быть также или еще проще решена на APEX. Или нет?
                                                Как я уже и сказал выше, в моем туториале нет никаких очевидных вещей. Когда я начинал изучать апекс, я только немного знал SQL, не имел никакого опыта работы с ораклом, и не знал ничего вообще о HTML, CSS и javascript. И книг и туториалов тоже не читал. Мне этого вполне хватило, чтобы зайти на apex.oracle.com, и самостоятельно разобраться, как создать таблицы, страницы, поля для ввода и так далее.

                                                Вообще, странно, что Вы сравниваете Mavo именно с APEX.
                                                Что знаю, с тем и сравниваю. В статье что написано? Вот что:
                                                Так вот, почему бы нам с вами вместе не разработать такое приложение? Назовём его… (барабанная дробь!) «Карточки». Это будет полноценное CRUD-приложение для изучения иностранного языка с помощью карточек
                                                Так вот, апекс создан именно для разработки CRUD-приложений, и на этом поле с ним мало кто может тягаться.
                                          0

                                          У меня ситуация обратная — я десктопный программист который не знает HTML и CSS. Есть ли инструмент позволяющий создавать интерфейс, а код обработки событий уж напишу сам?

                                            0

                                            Могу посоветовать два фреймворка, которые использую лично: GWT (Java) и Wt (C++), потому что я примерно в такой же ситуации. Оба позволяют использовать и чистый HTML/CSS, а также интеропиться с JS, но основной способ создания интерфейсов всё же через компоненты, которые пишутся на основном языке, не на JS.

                                              0
                                              Спасибо, так привык что в инете никто не отвечает, что только добрался — на поверку HTML + CSS оказались совсем не страшными, теперь пытаюсь в NGINX UNIT
                                                0

                                                Они нестрашные для базовых вещей, а чем дальше в лес, тем как всегда. Лучше всего сочетать эти подходы, но при этом писать на JS нет никакого желания. Вот такие фреймворки тогда сильно выручают (при необходимости всегда можно прицепить любой JS-код к ним, конечно же).

                                                  0
                                                  Добрый человек, подскажите что лучше — NGINX UNIT? Apache? Apache и NGINX?
                                                  Поясню: у меня будут веб-приложения (Python — к нему много библиотек, решающих стандартные запросы юзеров — от обработки файлов до работы с Gmail), а сайт — просто UI к ним, то-есть стандартная функциональность для магазинов/блогов мне не поможет, а вот каркас фреймворка — помешает, так что ручная обработка ввода и изменение HTML/CSS очень пригодятся.
                                                    0

                                                    Тут не посоветую, сам пишу на Java/C++ и в качестве сервера использую Lighttpd.

                                                      0
                                                      Ясно — значит у вас нагрузки не чета моим. В любом случае спасибо за помощь
                                              0
                                              Гляньте упомянутый выше Oracle APEX (и мои публикации на Хабре тоже как раз о нем). Иерархия требований к скиллам примерно следующая: SQL — PL/SQL — Javascript — HTML/CSS (чем раньше написан скилл, тем раньше и больше он понадобится, но на базовом уровне можно вообще ничего не знать).
                                              +1

                                              Если я правильно Вас понял, то да. Такой инструмент есть. Это side-проект. И он всё ещё находится в состоянии work in progress. И у меня нет полной уверенности, что он всё ещё поддерживается. Хотя надежда теплится. :)
                                              Вот он: https://github.com/mavoweb/create
                                              Посмотрите, пожалуйста.

                                                0

                                                Когда изобретали SQL тоже думали что это простой язык и бухгалтеры сами для себя смогут запросы писать.

                                                  0
                                                  Просто технологии, которые развиваются с SQL параллельно, например, табличные процессоры, оказались более юзер-френдли, что ли. Для бухгалтеров. Хотя, SQL — прекрасный язык. И некоторые его идеи легли в основу механизмов работы с данными в Mavo. В частности, при группировке и фильтрации данных.
                                                  А вообще, как обычно, время всё расставляет на свои места. Да, не все бухгалтеры знают SQL и могут писать на нём запросы (хотя, наверное, и такие таланты тоже есть), но язык никуда не пропал и прекрасно себе занимает свою нишу.
                                                  0
                                                  Можно ли динамически создавать mv-multiple элементы? То есть если я хочу не строго задавать вложенность коллекций, и по ходу потребностей уходить в глубь дерева. Например если я хочу эмулировать структуру папок. Я создаю папку, а в ней хочу еще одну, и так бесконечно. Пока что у меня получилось жестко задать название одной папки и в ней раскрывающимся списком создавать подпапки.
                                                    0
                                                    Без привлечения JS этого, к сожалению, сделать нельзя. По крайней мере, на данный момент.
                                                    Если будете реализовывать этот функционал с привлечением JS, то обратите внимание на несколько разделов сайта Mavo, которые могут Вам пригодиться: For JS developers и API Reference.
                                                    Кстати, под капотом Mavo использует библиотеку Bliss (авторства всё той же Лии Веру — она прекрасный и многогранный разработчик), так что Вы можете использовать весь синтаксический сахар, который она предоставляет.
                                                    0
                                                    ColdFusion, вид сбоку?
                                                      0
                                                      К сожалению, я не знаком с ColdFusion. Поэтому не могу дать Вам сколько-нибудь полезный и развёрнутый ответ. Не исключено, что идеи, ранее адаптированные другими продуктами, нашли своё воплощение и развитие в Mavo. Как известно, чтобы видеть дальше, нужно встать на плечи предшественников. И это подход прекрасно работает на практике.
                                                        0
                                                        ColdFusion, в кратце — ЯП на xml.
                                                        Но кончил он плохо.
                                                          0
                                                          Что ж, от этого никто не застрахован: какие-то идеи, продукты, сервисы рано или поздно могут оказаться на свалке истории. Но они сделали свой вклад в развитие чего-то большего и, возможно, в определённый момент послужили тем самым необходимым топливом, двигавшим прогресс.

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

                                                    Самое читаемое