Комментарии 79
Небольшое отступление для читателей из России!
Сайт Mavo хостится на серверах Netlify, адреса которых попали в «чёрный список» в результате «войны» с мессенджером Telegram. А значит, ресурсы, размещённые на этих серверах, равно как и все связанные с ними сервисы заблокированы на территории России (по крайней мере, на момент написания этой статьи).
Не знаю что и где «заблокировано», но mavo.io работает прекрасно.
Только что проверил (РФ, Томск).
Видимо, разные интернет-провайдеры по-разному исполняют распоряжения о всякого рода запретах и блокировках (например, московские провайдеры сайт Mavo блокируют). К счастью, мы — конечные пользователи — можем от этого выиграть. Приятного Вам знакомства с Mavo!
Полагаю, от провайдера зависит
Ничего серьезного с Mavo сделать не удастся, а для сайта, подобного выше, хватит пару десятков строк js.
Javascript имеет стандарты хотя бы. А тут еще один вид специальных атрибутов, которые напомнили мне аналогичные в vue.js.
В итоге свой мини-dsl в значениях атрибутов. Может кому и понравится, но я пробовать не стану.
Почему на малоизвестном? :)
Всё на том же HTML. Вы же, когда появляются новые элементы и/или атрибуты в HTML, используете их для решения своих задач, если они для них применимы? Например, тот же самый слайдер () всё ещё можно закодировать руками самостоятельно, но зачем?
Так и Mavo — он лишь расширяет имеющийся словарь (и немного синтаксис — для выражений) HTML и добавляет в него отсутствующий в нём (пока) функционал.
Мне кажется, это можно отнести к любому инструменту (фреймворку, расширению языка, библиотеке), нет? Везде нужен порог вхождения.
Не могу сказать, что в Mavo он непреодолимый. Наличие большого словаря — это неплохо: по нему можно искать. Реально, он не такой большой. Если посмотреть на итог в конце статьи, там всего 5 основных пунктов и 5 дополнительных.
Вопрос полезности знаний — вопрос субъективный. Чтобы хорошо знать Mavo, нужно хорошо знать HTML, поскольку он расширяет его несколькими (на самом деле, не так уж их и много, можете посмотреть в документации) атрибутами. А значит, это знание не будет бесполезным. Но это моё мнение. Мы можем с Вами совершенно не сходиться в мнениях. Это нормально. :)
Понятие «серьёзности» — вещь субъективная. Что серьёзно для одного, совсем не обязательно серьёзно для другого. И это замечательно. Мир прекрасен в его многообразии. :)
Главное — находить инструмент, адекватный решаемой задаче, чтобы не палить из пушки по воробьям. Видимо, Ваши задачи не предполагают использование Mavo. И в этом нет ничего страшного.
Удачи Вам в Ваших проектах и хорошего дня! Спасибо за комментарий. :)
mv-app, mv-multiple
выглядит, как ангуляр… не то, чтобы это было плохо, но почему бы его и не использовать?
Хм, оказывается, ответ есть в 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
Но разве нельзя добавить соответствующие кастомные теги в него?..
Кстати, здорово, если вы, как разработчик, будете заинтересованы внести в Mavo что-то новое и полезное. На Github можно открыть, например, feature request или даже направить PR.
В любом случае, проект развивается. То, что включать в него, решается открытым обсуждением. А также в результате последующего эксперимента. У создателей Mavo есть определённое видение того, каким он должен быть. И если будет больше кейсов, доказывающих необходимость включения в ядро той или иной фичи, то она будет включена. А пока можно написать плагин, добавляющий в Mavo новые элементы, если имеющихся недостаточно. :)
Насколько я понимаю идею Лии, она старается максимально использовать имеющийся потенциал HTML и CSS. Именно поэтому в него не были добавлены новые элементы, а лишь расширен перечень атрибутов имеющихся.
Дочитал до конца. Возник вопрос. Авторизация. Разграничение прав. Возможно ли панель и функции показывать только авторизованному пользователю? Или любой может зайти на сайт и внести изменения.
Авторизация осуществляется средствами Mavo через соответствующий сервис выбранного бэкенда: GitHub, Dropbox, Google Drive и т. п. Изменить данные может только авторизованный пользователь, а видеть будут все. Правда, у авторизованного пользователя есть возможность направить PR (например, если в качестве бэкенда используется GitHub) на изменение данных. Автор сам решает мерджить их или нет.
Что касается возможности показывать что-то только авторизованному пользователю, то такая возможность тоже есть — с помощью CSS. Как это сделать, описано в паре предложений вот здесь.
Какие-то разграничения прав пользователей поддерживаются и на уровне выбранного бэкенда. Например, Firebase позволяет задавать правила работы с хранимым с его помощью контентом. Этот бэкенд можно подключить с помощью плагина.
Пока, к сожалению, нет гранулированных прав доступа (авторизованный пользователь может редактировать не только свои данные). Это перспектива. Но перспектива когда-то становится реальностью. Будем работать в этом направлении. :)
Мне Mavo очень понравился. Я из его ЦА — HTML с CSS еще помню, но за JS так и не брался. А тут шикарная возможность превратить статичную страничку в полноценное приложение. Здорово!) Только вот хочется чуть более практических кейсов. Для любого публичного сервиса понадобится авторизация. Или, еще как пример — добавление простенького калькулятора на существующий сайт или создание формы обратной связи…
Думаю, все можно найти в примерах по ссылкам. Но если бы появилась такая понятная статья на эти тему — было бы здорово.
Сейчас я активно работаю над тем, чтобы в ближайшее время на CodePen появился раздел о Mavo (с Крисом Койером мы уже обо всём договорились). Так вот он будет посвящён именно практическим примерам применения Mavo. Сейчас там уже есть пример лендинговой страницы с возможностью редактирования её контента и его сохранения в локальном хранилище браузера, в GitHub и в DropBox. Посмотрите, пожалуйста. Может быть, Вам и это пригодится.
Приятного Вам знакомства с Mavo! Если будут возникать вопросы, обязательно задавайте их: здесь, в Twitter, Gitter, где угодно. :)
Посмотрел примеры лендингов — это действительно очень круто! Хранить данные на дропбоксе/гитхабе — действительно удобно. Думаю даже стоило бы добавить об этом пару слов в статью — по сути изменение в одной строчке, а приложение из домашней поделки (которая пропадет при смене браузера), становится вполне себе рабочим инструментом для изучающих язык.
И вообще лендинги на Mavo — это шикарная идея. Думаю, мой следующий лендинг точно будет на нем))
Единственное чего теперь не хватает для счастья — это такого-же простого инструмента для разметки страницы:) Сейчас разметку определяет CSS, мешая ее пополам с описанием визуального стиля элементов, и у новичка возникает путаница. Описать стили не проблема, свойства понятные и их можно править прямо в браузере. А вот создать нормальный кроссплатформенный макет страницы — гораздо сложнее. Не хватает простого инструмента, где, задав несколько правил, можно было бы описать положение всех элементов на странице. Когда то я описывал идею чего-то подобного. И хотя статья за 7 лет сильно устарела, но вот на вскидку, простого инструмента для этой задачи как не было, так и нет.
Буду ждать новых статей)
Я тут вспомнил, что Вам также могут оказаться полезны небольшие «трюки», которыми я стараюсь регулярно делиться в Twitter. Найти их можно по хэштегу #mavotricks. Ничего сверхординарного, конечно, но для расширения границ в познании Mavo может пригодиться. К сожалению, пока Mavo не так широко известен в российских кругах, мне приходится их писать на английском. Надеюсь, в скором времени и этот «недостаток» мы исправим. Предлагаю действовать сообща. :)
Единственное чего теперь не хватает для счастья — это такого-же простого инструмента для разметки страницы:)
Когда то я описывал идею чего-то подобного.
Да, неплохо было бы иметь подобный инструмент. :)
Кстати, Вы можете вернуться к своей идее и попробовать реализовать её с помощью Mavo: за 7 лет CSS прирос многими полезными свойствами, позволяющими упрощать (тут, конечно, можно спорить — проще ли стало, но гибче точно) процесс создания макета сайта. Плюс, появились переменные (кастомные свойства), с помощью которых можно динамически менять, например, тот же самый макет, а значения свойствам можно задавать непосредственно в атрибуте style нужного элемента с помощью выражений Mavo. Подобную идею я использовал в одном из своих экспериментов с Mavo — клоне системы управления проектами на основе досок — Kanbanchi, где динамически отражал прогресс выполнения задачи, изменяя линейный градиент, применённый к одному из элементов.
Таким образом, можно, например, создать некую админку именно для задания макета страницы. Скорее всего, сделать это сложнее, чем кажется на первый взгляд, но уже есть, с чего начать. Буду рад, если поделитесь результатами, если решитесь на этот эксперимент! :)
На счет реализации разметки на Mavo — можно подумать. Хотя мне, кажется, тут все же правильнее использовать JS. Идея нового языка разметки в том, чтобы он брал на себя как можно больше логики. Примерно так как если бы дизайнер описывал верстальщику как нужно сверстать его макет: «вот это поле не тянется, это видео всегда во всю ширину экрана, тут параллакс фона по горизонтали, а эти блоки группируются если хватает места...» Движок должен на основе этих правил создать систему уравнений (или задачу оптимизации) и решать ее под каждый размер экрана и конфигурацию (скажем для слабовидящих, или под шлем VR/AR, или еще что-нибудь пока неизвестное). Думаю, писать такое на Mavo — не совсем верно. А ограничиваться просто еще одним языком разметки со своим синтаксисом — не интересно.
То есть, некоего условного Васю, который смог в html и css, и который сможет осилить все вот эти вот метаязыковые вставки, языки выражений, и прочую пургу, но при этом категорически не сможет осилить JS.
И чёт моей фантазии на это не хватает.
Потратив час на эту статью и разбор примеров, я уже понимаю, что за несколько часов могу сделать интерактивный лэндинг, с калькулятором расчета яркости проектора, мини каталогом моделей, формой обратной связи и сохранением заявок на дропбокс. Плюс все тексты и картинки будут на том же дропбоксе, и любой менеджер с доступом к папке сможет править тексты, картинки и т.п. Сколько мне бы понадобилось времени чтобы изучить JS на уровне достаточном для этого?
Понимаю, что вы вероятно профессиональный программист, и подобные решения могут казаться кощунственными. Но бизнесу нужны простые, но не типовые решения. На мой взгляд Mavo — пример удачного баланса между сложностью и возможностью полной кастомизации.
Потратив час на эту статью и разбор примеров, я уже понимаю, что за несколько часов могу сделать интерактивный лэндинг, с калькулятором расчета яркости проектора, мини каталогом моделей, формой обратной связи и сохранением заявок на дропбокс.
Если Ваша разработка не будет являться коммерческой тайной, сможете ей поделиться, пожалуйста, по её готовности? Мы могли бы добавить ссылку на неё на сайт Mavo, как пример использования Mavo в «дикой природе». Чем больше будет подобных примеров, тем больше у нас будет возможностей развенчать миф и «несостоятельности» и «ущербности» Mavo и невозможности создать с его помощью что-то полезное.
Что же касается знающих JS людей, то они могут использовать Mavo в качестве полноценного реактивного JS-фреймворка для разработки кастомного UI, прототипирования интерфейсов, быстрой проверки гипотез и т. п. Сфер достаточно. Просто кейсов пока мало. Но через этот этап проходят все инструменты на начальном этапе своего развития.
Как знающий JS человек, кстати, Вы могли бы способствовать появлению таких кейсов. Дерзайте. Если, конечно, есть желание. :)
И учить новичков, конечно. Это крайне важно не убить живой интерес начинающих разработчиков в новой для них сфере. Если вы считаете, что только обучение может быть сферой применения Mavo, что ж, это Ваше право. Время расставит всё на свои места. Возможно, мы оба окажемся неправы. :)
Все современные фреймворки были спроектированы разработчиками больших веб-приложений для разработчиков больших же веб-приложений.
Но это очевидная неправда. Фреймворки существуют абсолютно любых размеров, под абсолютно любого размера проекты, и от команд какого угодно размера (включая активистов-одиночек).
Mavo — лишь один из ответов на вопрос, как сделать веб-программирование проще для начинающих (а значит, как следствие, и для всех). Возможно, он не самый лучший. Это и не важно. Главное — поиск ответа. И рано или поздно он будет найден. Возможно, это будет не Mavo, а что-то другое. Но пока, по крайней мере для меня (и я, к счастью, не одинок) Mavo — хорошее приближение к ответу на этот непростой вопрос.
И использование фреймворка для, например, разработки простого лендинга или сайта-портфолио может оказаться сродни стрельбе из пушки по воробьям.
Для них и JS скорее не нужен, чем нужен, давайте с этого начнём. А раз не нужен JS, то не нужен и ваш проект.
Нужен JS или нет, зависит от идеи и сложности реализации этого самого лендинга или портфолио. Это чтобы не начать, а закончить.
Я не пытаюсь Вас ни в чём убедить и призвать Вас пользоваться тем, в чём Вы не видите смысла. Нет и нет. Ни у кого из нас от этого не убудет.
Остальные пикирование становятся просто бессмысленными. Вы можете потратить свои силы на разработку чего-то лучшего, чем Mavo. Мир веб-разработки, может быть, от этого только выиграет. Удачи! :)
озвольте с Вами не согласиться. Если под эффективностью использования инструмента понимать возможность создания с его помощью пусть и не сверхсложного, но рабочего интерактивного веб-приложения, то это доказано проведёнными исследованиями (так называемыми, user study). Ознакомиться с результатами одного из них можно здесь.
We recruited 20 participants
где 11 — отметились как advanced html+css юзеры
вы вообще всю статью прочитали?
В любом случае, я никому ничего не пытаюсь доказать, я делюсь тем, что мне интересно. Если это не интересно Вам, это Ваше право. Вступать в какую-то очередную непримиримую священную войну я, честно говоря, не вижу никакого смысла.
Это полезно для обучения школьников — в нише типа Blockly этот Mavo может быть полезен. Но ни в коем случае не для реальных сайтов. Других ниш я не вижу.
Что же касается Вашего столько категоричного суждения: «ни в коем случае не для реальных сайтов», то здесь Вы просто заблуждаетесь. Назову лишь несколько реальных сайтов, построенных с помощью Mavo: собственно, сайт Mavo, сайт школы боевых искусств, персональный блог, сайт рабочей группы W3C CSS.
А чтобы увидеть другие ниши, может быть, просто стоит чуть пристальнее присмотреться к Mavo? :)
Я прочитал вводный первый параграф и с трудом могу представить человека, который бы сказал "дык это же я". Человек, который хорошо разбирается в HTML и CSS, и при этом не может вдохнуть чуть интерактивности через какой-нибудь простейший инлайновый скрипт + jQuery + jQuery.ui плагины. Я могу представить, как это делает человек без понимания циклов и концепций ООП, вооружившись StackOverflow.
Я бы сказал, что хорошо разобраться в вёрстке и HTML гораздо сложнее, чем как-то стартануть с JavaScript. В КДПВ понапридумано "Виртуальный DOM, MVC, базы данных" — зачем всё это на этапе "мне нужно добавить каплю интерактива в статичную страницу"?
Да, в серьёзной фронтенд разработке сейчас всё сложно, потому что JS исторически плохо был заточен под огромные кодобазы и чтобы это исправить сделали очень-очень-очень много приблуд. Но у JS отличная кривая старта с этапа "я абсолютно ничего не знаю, мне надо чтобы одна кнопка мигала при нажатии на другую"
Интересно, как этот инструмент проявит себя в качестве админок для лендингов. По-моему хорошая замена, для тех кто лендосы на Wordpress прикручивает. Нужно только понять что у Mavo под капотом для работы с формами.
Mavo — это новый подход к разработке интерактивных веб-приложений только за счёт написания HTML и CSS, без необходимости написания кода на языке JavaScript и разворачивания собственного сервера.Это не новый подход, это жалкое подобие Oracle APEX. В апексе можно делать все то же самое и даже намного больше, но при этом не надо знать даже HTML и CSS.
Не слышал, чтобы Mavo опирался на Oracle APEX, чтобы быть его «жалким подобием». Может быть, в том случае так бы оно и было. Но нет. Рождение Mavo — результат научных изысканий и исследований того, чтобы было до него или существует с ним параллельно. Если Вам интересно, о каких исследованиях и системах идёт речь, Вы можете найти информацию здесь.
В этом и трагедия: 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.Но при этом не дают (или я пропустил?) никаких методик сравнения мощности приложений и дополнительной сложности инструментов. А без этого как-то банально получается: мы дали людям более сложный инструмент, и они с его помощью сделали более функциональное приложение. Ну как бы да, именно так и должно быть, было бы наоборот — это был бы полный провал.
У 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 можно перенести к себе на сервер. Но это уж точно задача не для новичка.
И Вы считаете, что этот порог ниже, чем у Mavo?Это порог для чтения моего туториала, а не для освоения апекса. А далее в моем туториале, между прочим, написано следующее:
… по своему опыту я могу сказать, что человек, не читавший никаких туториалов вообще, самостоятельно найдет, как создать приложение, добавить страницу, поместить на нее отчет и так далееВ апексе можно создавать таблицы и страницы для записи в них данных и отображения отчетов, не изучая SQL. Там действительно интуитивно-понятный интерфейс, есть графический построитель запросов и так далее. Просто мне неинтересно писать туториал по очевидным вещам для тех, кто ничего не знает, мне интересно писать про более крутые фичи для тех, кто знает хотя бы SQL.
Прочитав Вашу статью — я понятия не имею как это сделать на APEX. Но если «Mavo — жалкое подобие апекса» — то, по логике, любая задача легко решаемая на Mavo может быть также или еще проще решена на APEX. Или нет?Как я уже и сказал выше, в моем туториале нет никаких очевидных вещей. Когда я начинал изучать апекс, я только немного знал SQL, не имел никакого опыта работы с ораклом, и не знал ничего вообще о HTML, CSS и javascript. И книг и туториалов тоже не читал. Мне этого вполне хватило, чтобы зайти на apex.oracle.com, и самостоятельно разобраться, как создать таблицы, страницы, поля для ввода и так далее.
Вообще, странно, что Вы сравниваете Mavo именно с APEX.Что знаю, с тем и сравниваю. В статье что написано? Вот что:
Так вот, почему бы нам с вами вместе не разработать такое приложение? Назовём его… (барабанная дробь!) «Карточки». Это будет полноценное CRUD-приложение для изучения иностранного языка с помощью карточекТак вот, апекс создан именно для разработки CRUD-приложений, и на этом поле с ним мало кто может тягаться.
У меня ситуация обратная — я десктопный программист который не знает HTML и CSS. Есть ли инструмент позволяющий создавать интерфейс, а код обработки событий уж напишу сам?
Могу посоветовать два фреймворка, которые использую лично: GWT (Java) и Wt (C++), потому что я примерно в такой же ситуации. Оба позволяют использовать и чистый HTML/CSS, а также интеропиться с JS, но основной способ создания интерфейсов всё же через компоненты, которые пишутся на основном языке, не на JS.
Они нестрашные для базовых вещей, а чем дальше в лес, тем как всегда. Лучше всего сочетать эти подходы, но при этом писать на JS нет никакого желания. Вот такие фреймворки тогда сильно выручают (при необходимости всегда можно прицепить любой JS-код к ним, конечно же).
Поясню: у меня будут веб-приложения (Python — к нему много библиотек, решающих стандартные запросы юзеров — от обработки файлов до работы с Gmail), а сайт — просто UI к ним, то-есть стандартная функциональность для магазинов/блогов мне не поможет, а вот каркас фреймворка — помешает, так что ручная обработка ввода и изменение HTML/CSS очень пригодятся.
Если я правильно Вас понял, то да. Такой инструмент есть. Это side-проект. И он всё ещё находится в состоянии work in progress. И у меня нет полной уверенности, что он всё ещё поддерживается. Хотя надежда теплится. :)
Вот он: https://github.com/mavoweb/create
Посмотрите, пожалуйста.
Когда изобретали SQL тоже думали что это простой язык и бухгалтеры сами для себя смогут запросы писать.
А вообще, как обычно, время всё расставляет на свои места. Да, не все бухгалтеры знают SQL и могут писать на нём запросы (хотя, наверное, и такие таланты тоже есть), но язык никуда не пропал и прекрасно себе занимает свою нишу.
Если будете реализовывать этот функционал с привлечением JS, то обратите внимание на несколько разделов сайта Mavo, которые могут Вам пригодиться: For JS developers и API Reference.
Кстати, под капотом Mavo использует библиотеку Bliss (авторства всё той же Лии Веру — она прекрасный и многогранный разработчик), так что Вы можете использовать весь синтаксический сахар, который она предоставляет.
Но кончил он плохо.
Интерактивное веб-приложение без программирования? Легко! Mavo вам в руки