Первый рукописный блог рунета™

Килозвёздочка дала себя знать явно – чувак, который мне её поставил, чирикнул в тви про это. 1K☆ репо при 15 issues за три года и всего одном контрибуторе – это в моей извращённой картине мира достижение, да.

На гитхабе ~1.7M javascript-репозиториев, из них ~470k c 1+☆, 11.7k 100+, 1615 с 1000+ (я здесь, это 0.1%) и всего 66 с 10К+☆.

Багов, каэш, не 15 нашлось за всё это время – но большинство я нашёл сам. Плюс я не запариваюсь оперативно переписываться с юзерами вне гитхаба и либо чинить промежуточными версиями, либо предлагать roundtrip до релиза. Вообще, багов реально практически нет.

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

При таком вот месячном покрытии jquerymy.com я получаю примерно 10-15 писем в месяц с вопросами по фичам. Приемлемо, хотя точно можно лучше – вопросы по преимуществу на две всего темы, по которым маны нестройные и неполные.

Раз у меня такой майлстоун случился, я решил расписать длинной ретроспективой, что это и как оно всё развивалось.

Откуда оно взялось

$.my как плагин к jQuery оформился в 2012, в самом начале июня. Первый пост в ЖЖ про плагин, пока без имени, был 6 июня 2012, там в конце с картиночкой.

Идея что-то такое сделать появилась куда раньше – примерно когда я слез со связки XML/InfoPath и стал перебирать JS-фреймворки. Перебор не дал мне подходящей модели того, к чему я привык с InfoPath – приложение живёт над единым объектом с данными. Причём этот объект должен быть в любой момент сериализуем целиком, и без вызова самого приложения.

То-есть мне надо было сделать так, чтобы окружающий данные код самой программы вообще ничего ни о каком UI не знал. А контролы интерфейс(ы) просто мутировали/отображали какие-то ветки документа, напрямую.

Эта идея у меня оформилась примерно в 2011, после того, как я сделал несколько систем на разных фреймворках и на vanilla js + jquery. За следующий года было 3-4 подхода к снаряду, все неудачные – потому что получалось много специфичной однотипной писанины и очень путано.

А хотелось то декларативно, без программирования отображать дерево объектов данных на дерево объектов HTML DOM. И в какой-то момент декларативный синтаксис придумался, и дальше всё стало более-менее просто.

Синтаксис вот такой в простейшем виде (правая колонка, внутренний объект)

То-есть у нас ключ – это jquery-selector (не обязательно #id), а значение – ссылка на поле данных, с которым этот контрол связывать.

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

Нулевая версия ещё не умела сама рисовать HTML, поэтому $.my-формы можно было навесить только на готовую HTML-страничку. То-есть я полагал тогда, что $.my будет частью каких-то более крупных приложений, что это не приложения сами по себе. Какое-то время так и было.

Догфуд

Дальше я стал активно использовать то, что получилось – и довольно скоро пришлось всё переписать с нуля, зато новый подход сделал $.my расширяемым и быстрым.

Самая нагруженная часть $.my – набор “драйверов”, которые имплементят к любому контролу два метода – “записать значение” и “взять значение”.

Это не так легко, как сначала кажется, даже для обычных HTML-контролов, и становится совсем непросто для некоторых контролов с плагинами.

А мне хотелось, чтобы достаточно было написать jQuery-селектор как ключ, а $.my сам определял, что там именно по этому селектору и как с ним обращаться. “Уметь обращаться с контролом” значит знать:

• что это за контрол,
• как в него записать значение,
• как с него прочитать значение,
• на какие события весить хэндлеры, чтобы реагировать на user interaction с этим контролом,
• как дизэйблить контрол,
• где у контрола контейнер и есть ли он вообще.

Самое главное – это первый поинт, определить что за контрол живёт по селектору. $.my использует рекурсивный набор паттернов и эвристик, чтобы по элементу в HTML DOM угадать, что он такое и подставить перед контролом нужный набор “драйверов”.

Например, чтобы понять, что за <textarea> перед нами, нам мало просто знать, что это textarea. Может, её и не видно уже и к ней плагин привязан. Это внутри кода $.my выглядит так:

То-есть тут ветка из дерева паттернов, у которых ключи – это селекторы-правила, а листья – функции read/write. Дерево обходится рекурсивно, и подошедший драйвер полностью скрывает от приложения, как именно функционирует тот или иной контрол.

Формы –> приложения

Идея сделать так, чтобы JSON-манифесты $.my образовывали самодостаточное приложение, возникла почти сразу, а вот имплементил я её два с небольшим года, потому что не везде был понятен хороший и компактный подход.

То-есть нужно было сделать так, чтобы:

• можно было скомандовать jQuery.my “вот тебе json-манифест, вот объект с данными, вот пустой DOM-node, сделай в этом DOM-ноде приложение”.
• любое приложение могло быть контролом для вышестоящего приложения (то-есть их можно было бы вкладывать просто вложением данных друг в друга).
• это всё работало для списков дочерних приложений (чтобы отображать массивы из объектов на UI в обе стороны).
• внутри приложений был централизованный и многоуровневый pub/sub.
• приложение могло само менять свой CSS ruleset под меняющееся окружение.
• можно было скомандовать приложению “умри”.
• приложение могло бы само пискнуть наверх “я это, умерло, хороните”.
• приложение могло бы скомандовать “ну вот, всё, я поменяло уже данные, делайте с ними дальше что хотите” (типа commit).

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

Всё это на настоящий момент реализовано и тщательнейщим образом отлажено, даже почти вылизано не только для десктопных браузеров вплоть до IE8, но и для мобильных вплоть до Opera mini (!).

Дальше – вылизать механику списков подчинённых приложений, я над ней работаю уже год. Сейчас нормальному проявлению в корпосекторе мешает то, что $.my приложения маскруются от Selenium-а например и плохо поддаются автоматическому тестированию UI-части. Во многом эта “маскировка” результат того, как сейчас сделаны списки.

Я это доделаю.

Приложения –> ОС

CloudWall.me стал естественным продолжением jQuery.my – это платформа, которая исполняет $.my-приложения, используя браузерный сторидж как в некотором смысле файловую систему под приложениями.

Сам CloudWall, платформа, – пока не $.my манифест, это vanilla JS код из соображений секурности и скорости.

Тем не менее, я знаю как превратить 80Кб кода платформы в 30 и упаковать это в манифест. То-есть, сделать платформу приложением.

Это потребует существенных модификаций $.my и отказа от совместимости с Opera mini и IE8-9 (теряется скорость на проверках и шимах), но я это сделаю.

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

Плюс надо дорабатывать мой заброшенный проект “серверной” валидации – чтобы имея манифест и данные можно было проверить корректность объекта с данными, не запуская само приложения “во плоти”.

Итого

Горд и доволен, как слон, будем продолжать. jQuery рулит. Поздравляйте, ога.

И да, тег же у меня есть – http://ermouth.livejournal.com/tag/jquerymy.