Друзья, сегодня отличный день, чтобы сделать свою первую статью на Хабре, который я читаю многие годы. Сегодня я успешно запустил в прод свой первый полноценный хобби (пет) проект.

Два года назад работая с замечательной командой консультантов института Адизеса, мы столкнулись с проблемой наличия бесплатного гибкого софта для построения орг.моделей. Быстро собрать подразделения и функции, перетащить ветки в новое место, покрасить и так что бы не рисовать линии и квадратики, а только сосредоточиться на самой модели, потому что все это происходит во время страт. сессии, где сидят руководители тех самых подразделений. А подразделений и веток много, сценариев много – кого-то временно скрыть или свернуть, кого-то скопировать как типовую функцию в другие ветки. Все делать нужно быстро и на большом экране и не всегда в логике HR штатной модели (а точнее всегда не в ней). Миро, Фигма и прочие конструкторы не подходят по той или иной причине.

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

Но мало сделать приложение, не менее важным было сделать легкий обмен сформированными моделями, возможность их просмотра и доработки участниками. А еще лучше часть рутины по низшим ветвям отдать ИИ на проверку или доработку. Так родилась еще одна идея – создать формат моделей, который говорит и на языке программы (data-to-diagram), и на языке человека, и на языке ИИ, и не зашит никакими лицензиями и нечитаемым кодом. То есть открытый формат. Было важно, чтобы формат работал с иерархическими моделями и не позволял никакие кросс-связи буквально, что бы пользователи не творили хаос между ветвями. Только прямая естественная потоковая иерархия и прямая ответственность. Но и признаки блокам нужны, так как не все способна отразить иерархия - так пришла идея тегов, как гибкая система реквизитов (а во многом и, по сути, мини база данных, при необходимости. Лайфхак!). Так же очень хотелось, что бы модель не только строила связи, но и по ним могла что-то посчитать - конечно же нужна универсальная ценность (value), но не ограничивать ее только одним типом, а дать свободно выбирать, что считать и в каких единицах схмерения – бюджет, время, единицы товара или количество населения страны. И это тоже нам надо! Для всего это отлично подошел хорошо известный ИТ-ишникам формат YAML, который для людей открыт, как текст, а для машины, по сути, четкая структура данных. Вот и отлично, я собрал на его базе прототип структуры и необходимых атрибутов. И дал короткое название .orgf. Сгенерировал несколько моделей через ИИ и дал проверить результат другой ИИ – результат великолепный. ИИ легко переводила любые данные в этот формат, хоть штатное расписание из Екселя, хоть выгруженные в PDF структуры функций и процессов. Прототип открытого формата ORGF себя полностью оправдал! Так получилось, что модели и формат появились раньше самого редактора моделей (приложения). Ну что же есть понятный запрос, теперь надо было сделать под него софт!

reference:
  format: "ORGF 1.0.0"
  syntax: "YAML|UTF-8 without BOM"

  sections_fixed:
    orgformat: "string|required"
    reference: "section|optional"
    meta: "section|required"
    model: "section|optional"
    root: "block|required"
    hierarchy: "root.children[*].children[*]..."

  meta:
    title: "string|max250|optional"
    author: "string|max250|optional"
    rights_holder: "string|max250|optional"
    copyright: "string|max500|optional"
    license: "string|max120|optional"
    created: "string|optional|YYYY-MM-DD/ISO 8601"
    updated: "string|optional|YYYY-MM-DD/ISO 8601"
    status: "draft/final/archived|optional"

  model:
    name: "string|max250|optional"
    desc: "string|max1000|optional"
    value_label: "string|max80|optional|one_value_type_per_model"
    value_unit: "string|max40|optional|one_value_unit_per_model"

  block:
    name: "string|max250|optional|empty_allowed"
    desc: "string|max500|optional"
    value: "number|optional|own_value_only"
    pic: "section|optional"
    pic.set: "emoji/lucide/feather/simple-icons/iconify|required_if_pic"
    pic.name: "string|required_if_pic"
    tags: "array[string|max80]|optional|default:[]"
    hidden: "boolean|optional|default:false"
    branch_orientation: "auto/horizontal/vertical|optional|default:auto"
    style:
      fill: "default/#HEX|optional|default:default"
      contour: "default/solid/dashed/dotted/double|optional|default:default"
      contour_width: "default/regular/bold|optional|default:default"
    relation:
      line: "default/solid/dashed/dotted|optional|default:default"
      line_width: "default/regular/bold|optional|default:default"
      color: "default/#HEX|optional|default:default"
    children: "array[block]|optional|default:[]"

  authoring_rules:
    - "one_file=one_model"
    - "hierarchy=children"
    - "no_id_parent_order"
    - "empty_blocks_allowed"
    - "tags=plain_classifiers_not_key_value"
    - "desc=short_human_note_not_data_dump"
    - "style_relation=custom_overrides_only"
    - "tag_colors_not_stored_in_orgf"
    - "value_one_type_per_model"
    - "value_one_unit_per_model"
    - "value_on_block_is_own_value_only"
    - "value_totals_are_computed_not_stored"
    - "reference_if_present=complete_unmodified_canonical_copy_published_for_declared_orgformat_version_at_https://github.com/orgformat/orgf/releases"
    - "hidden=true_on_a_block_requires_hidden=true_on_every_descendant"

  normalization:
    unknown_fields: remark
    invalid_values: default
    over_limit: truncate
    invalid_yaml: reject
    invalid_structure: reject

  normalization_rules:
    - "missing_optional=default"
    - "unknown_fields=remark"
    - "invalid_values=default"
    - "over_limit=truncate"
    - "normalization=view_only_not_source_mutation"
    - "hidden_branch_inconsistency=remark_not_reject"
    - "normalization_propagates_hidden=true_to_all_descendants"

Делать внешнее приложение не хотелось, а хотелось иметь возможность из любой точки мира на любом устройстве открыть приложение и при этом не выгружать ничего на чужой сервер, так как чаще всего в моделях данные крайне приватные или вообще персональные, короче нужен local-self. Да, браузер наше всё, но при этом задача, что бы все данные модели во время работы хранилось в локальной базе браузере. И вторая задача, чтобы блоков модели было много, ну минимум «тыща», а лучше две и все это легко вертелось! Так выбор пал на технологию DOM (Document Object Model), которая позволяет браузеру строить структуру объектов. Брать чужие библиотеки, типа D3.js не хотелось, был интерес сделать свое (ну как обычно) и не ограничиваться чужим видением и возможностями. Как всегда очень много вкусного придумалось походу – и экспорт в модели в мобильный интерактивный автономный файл (html), и подсветка веток, и своя система поиска по модели, и…. и много чего еще пришло в голову увлеченному идеей мне. Много еще чего было реализовано, но не буду все описывать, лучше сходите сами посмотрите :)

А как же сайт, а как же готовые примеры, как же все это выложить и дать понять не только профессионалам из консалтинга - что это и зачем, но и учителям, школьникам, которые так же хотели бы использовать наглядное построение моделей для своих биологических таксономий, географий, языковых справочников и т.д. и т.п.? Так пришла идея сделать демо-кейсы, да еще в игровом формате с объяснением как ORGF использовать на практике. Вот и получился сайт не только про ORGF, но и про бизнес и игровую практику применения с кейсами. Это, по сути, еще один проект в проекте, а точнее два (но кто считает).

Месяц плотного проектирования и разработки в личное время. И вот он готовый MVP - 423 патча, несколько сотен микропатчей и 491 коммит на Git. Плюс публичный Гит со свободной MIT лицензией на формат ORGF. Плюс все кейсы с лицензий общественного достояния CC0 (Creative Commons Zero), делайте с ними что хотите. Решение уже не трех языках (русский, английский и материковый китайский) и на подходе еще 4-ре. И до кучи супер-вызов перегнать таксономию животных (https://www.catalogueoflife.org) в ORGF - на сайте уже есть демо-кейс на 1004 карточки, хочу сделать на все 7 851 869 и положить свой комп (браузер).

Кстати, да, в Студии достаточно мощный отладчик (Debug) и различные счетчики производительности – кому интересно для своих DOM-проектов погонять браузерные технологии и провести так сказать бенчмаркинг – пользуйтесь.

Что дальше и где подвох? Да, браузерная ORGFORMAT Studio всегда будет бесплатной и будет поддерживать все требования самого формата. Это моя авторская установка и я точно буду развивать открытый формат ORGF и Студию бесплатно.

А где-же деньги и в чем смысл? Если будет монетизация, то когда-нибудь через корпоративную версию Cloud (OrgVue подвинься). В остальном это наверное классический хобби-проект, но сделанный под ключ от брендинга и дизайна до сайта и понятных рабочих примеров, чтоб самому не стыдно было.

Теперь по саммери

 Технологический стек (все сознательно максимально просто и быстро):

• Сервер разработки React/Vite

• Языки и код TypeScript/HTML/CSS

• VSC (visual studio code) – для меня лучшее и бесплатное решение для управления всем процессом.

• GitHub Desktop – обязательно приватный Гит, очень спасет если надо что-то откатить. Так же удобен для коммитов и удержания истории измений.

• Punto switcher (боже, я никогда в жизни так много не печатал и не бесился на неработающий win+space). Пунто все 20 лет был кривым решением, но даже в отключенном стоянии его shift+Break хорошо решает проблему ошибочной раскладки. Рекомендую.

• ИИ ChatGPT PLUS – тут надо отметить, что никаких ИИ-агентов и API не было по ряду причин в том числе финансовых. Да, я сделал проект с локальной памятью, да я создал на каждую роль свой суб.чат в проекте и регулярно их хэндоффал в следующую версию (например техлидов Студии у меня было 11 штук), да с каждым из суб.чатов я работал напрямую по четкому процессу и циклу разработки zip_source/cjs_patch/commit (который конечно же ИИ регулярно косячил). Да ИИ не панацея и проект точно потребует от вас понимания архитектуры и ИТ, полного вовлечения в проектирование и моделирование, и конечно же пользовательское тестирование.

• Яндекс Метрика с полным отключенным всем и ограничением GDPR, плюс окна на согласие сбора аналитики. Так что параноики тестируйте.

Бюджет MVP (примерно 15 000 руб + 600 000 моего личного времени):

• 7000р - Векторизация моего растрового логотипа в вектор и SVG (Дашенька Игнатьева спасибо тебе огромное за срочность и качество).

• 244р/мес – Хостинг timeweb (не реклама, но давно с ними работаю, реально беспроблемные и дешевые). Саааамый дешевый тариф, специально что бы протестить производительность проекта (все летает, так как Студия браузерная local-self), а welcome-сайт без лагучих CMS.

• Доменные имена – 20$/год.

• ИИ (ChatGPT PLUS) - 20$/мес. Благодаря подписке. С API агентами я бы влетел в трубу.

• Я занимаюсь в ИТ совершенно иными задачами, я не разработчик, и тем более не стажер и не джун, поэтому надо честно считать плотный месяц моей работы над проектом, как основной бюджет проекта. Для меня это около 600 000 руб.

Агрессивно настроенных прошу идти делать свои проекта, а тех кто хочет поддержать добрым пинком, словом или потестить – велком, добро пожаловать в проект!

Пы.Сы. никакой рекламы или рекламных ссылок.

Нетворкинг:

• https://orgformat.com/ - welcome-сайт

• https://orgformat.com/studio/ - собственно, Студия. Лучше десктопная версия браузера, под мобилки MVP еще на адаптировал (но вы всегда можете переключить браузер в режим просмотра ПК).  Темная «тема» прикольная!

• https://github.com/orgformat/orgf - публичный Гит по открытому формату ORGF, но в дискуссии можете постить и по Студии.

• https://t.me/orgformat - ТГ канал буду постить туда релизы, демо-кейсы и прочие позитивчики, присоединяйтесь. Комментарии включены.