Привет, Хабр! (И тебе, 1С-ник, который привык к «желтой» программке, и тебе, веб-разработчик, который до сих пор думает, что 1С - это только про накладные и бухгалтеров.)

В прошлой серии мы выяснили, что «1С:Предприятие.Элемент» - это не та «желтая программа», к которой привыкли бухгалтеры, а вполне себе модный cloud-native зверь с IDE в браузере. Но слова - это дешево. Разработчику нужно видеть код, архитектуру и понимать, как это соотносится с тем, что он уже знает (будь то 1C, Python или JavaScript).

Сегодня мы лезем под капот. Мы разберем синтаксис, систему типов, декларативный UI и узнаем, как 1С реализовала ORM, который (спойлер) удобнее многого, что вы знали, но не без своих 1С-овских замашек.

Как обычно я всё буду сравнивать с тем с чем успел поработать или ознакомиться в своём опыте (Python, JS, Java, 1C). В чём-то я могу ошибаться либо у вас будет своём мнение и это нормально

Поехали.

Глава 0. 1С уходит в облака (но землю не бросает)

Для начала давайте вспомним, что же такое 1С:Элемент если кто-то не читал мою прошлую статью. Хотя всё же советую её прочесть…

Что такое «1С:Элемент»? Если совсем просто: это технология, чтобы делать B2B и B2C кабинеты, витрины и порталы, не сходя с ума от JavaScript-фреймворков.

Раньше было как: есть «большая» 1С (ERP, Бухгалтерия), она сидит на мощном сервере за высоким забором. А пользователю нужен личный кабинет на сайте. Вы звали веб-разработчика, он пилил сайт на React/Angular, потом вы мучительно настраивали обмен данными по REST/SOAP, и всё это ломалось при обновлении. Хороший пример это Корп. Универ. от 1С.

«Элемент» говорит: «Хватит это терпеть».

Это cloud-native технология. То есть:

• Среда разработки - в браузере. Да, IDE прямо в Chrome.

• Приложения - веб-ориентированные. Они живут в браузере и на мобилках.

• Low-code. Многое можно накликать мышкой, но (спойлер!) писать код всё равно придётся, и очень много.

Кто страдал в 1С с версионированием? «Хранилище конфигурации» - эти слова вызывают боль.

Отступление: Да! Есть уже, конечно, EDT с полноценным Git-ом как у всех, но разве все массово переедут, на что-то непонятное, когда есть старый добрый конфигуратор.

В «Элементе» разработчики наконец-то посмотрели на остальной мир.

• Git - из коробки. Вы можете пушить ветки, мержить изменения и использовать GitLab (звучит, конечно, сильно модно после «Захватить в хранилище» и «Поместить в хранилище»). Групповая разработка теперь выглядит как разработка, а не как перетягивание каната.

• Веб-IDE. Редактор кода, отладчик, конструктор форм - всё в вебе. Можно кодить с планшета (если вы мазохист, конечно, но возможность есть). Я уже, конечно, говорил об этом прошлой статье, но вынужден сказать ещё раз: - Они просто вкрутили VS Code в Web, что-то переписали, а про что-то забыли и ещё плюсом Яндекс Браузер постоянно пытается перевести Русский язык на Русский, что вызывает множество вопросов.

Это уже не тот закрытый мир. Это современный инструмент, просто говорящий на русском (или английском, язык встроенный теперь двуязычный). - Не тот закрытый мир, но документацию можно прочитать только по учётке которую выдаёт 1С:Элемент, и на выдачу которой уходит от 3-7 дней.

Немного о изменениях

Когда я писал прошлую статью про знакомство с новой игрушкой 1С я давал уточнение что 1С:Элемент это не язык, а лишь надстройка над Исполнителем, но за пол года много всего изменилось и теперь стало ещё всё более запутано, что теперь 1С:Исполнитель называется 1С:Элемент и 1С:Элемент называется 1С:Элемент. Забавновность изменений видно на примере этих книг.

Глава 1. Синтаксис: TypeScript, ты ли это?

Переходим к делу…

Если вы писали на старом языке 1С, забудьте всё чему вас учили. Ну, почти всё. Ключевые слова остались русскими (хотя поддерживается и английский), но парадигма сменилась.

Язык стал строго типизированным. Это больше не динамический хаос, где в переменную можно положить сначала число, потом строку, а потом Справочник. Теперь это ближе к TypeScript или Kotlin.

Объявление переменных

Сравним.

JavaScript / старый 1С:

let count = 10;
count = "десять"; // И так сойдёт!

1С:Элемент (XBSL):

// Строгая типизация
пер Количество: Число = 10 
// Количество = "десять" // Ошибка компиляции! Type mismatch.
// Вывод типов (Type Inference) работает, как в современных языках
знч Приветствие = "Hello World" // Система поняла, что это Строка

Обратите внимание на ключевые слова:

• пер (переменная) - изменяемое значение (var/let).

• знч (значение) - неизменяемое значение (const/val).

• конст - это постоянная величина для всего модуля.

Возможно у некоторых возникнут вопросы по поводу отличия знч и конст, но тут всё просто константа используется для статичного значения применимого на уровне всего модуля и к ней можно обращаться от куда угодно к примеру можно указать @ВПроекте конст ИД_ПОДСИСТЕМЫ = "Администрирование" в xbsl файле и потом обращаться из других файлов к этому значению, а знч работает как и переменная в рамках методов (функций).

Дженерики (Обобщения)

Да, в 1С завезли дженерики. И это киллер-фича для надежности кода.

Java:

List<String> names = new ArrayList<>();

1С:Элемент:

// Массив, в котором могут лежать ТОЛЬКО строки
пер Имена: Массив<Строка> = []
Имена.Добавить("Василий")
// Имена.Добавить(42) // Компилятор бьёт по рукам

Работа с None или Null-safety или Undefined или как кому нравиться

Больше никаких ошибок за то, что ваш объект пуст (ну почти). Система типов поддерживает опциональность явно.

// Знак вопроса означает, что переменная может быть Неопределено (null)
пер Клиент: Справочник.Контрагенты.Ссылка? 
если Клиент != Неопределено
    // Только внутри этой проверки можно безопасно обращаться к свойствам
    Сообщить(Клиент.Наименование)
;

Глава 2. Структура проекта: YAML как сердце всего

В классической 1С структура базы данных (метаданные) была зашита внутри бинарника или XML-блоба. В «Элементе» всё стало текстовым и читаемым. Весь проект - это набор папок и YAML-файлов.

Хотите создать таблицу в базе данных (Справочник)? Вы не пишете CREATE TABLE. Вы описываете сущность.

Пример файла Сотрудники.yaml:

ВидЭлемента: Справочник
Имя: Сотрудники
Ид: ... (UUID)
ОбластьВидимости: ВПроекте
Реквизиты:
    -
        Имя: ФИО
        Тип: Строка
        Длина: 150
        Обязательное: Истина
    -
        Имя: Возраст
        Тип: Число
        ДлинаЦелойЧасти: 3
    -
        Имя: Отдел
        # Ссылка на другой справочник (Foreign Key)
        Тип: Подразделения.Ссылка?

Что делает компилятор, когда видит этот YAML?

• Создает таблицу в PostgreSQL.

• Создает индексы (по UUID, Коду, Наименованию).

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

Это называется Low-code, но правильный: вы пишете конфигурацию, а платформа берет на себя скучную работу DBA, ну что я в принципе рассказываю ребята владеющие Docker-ом шарят.

Глава 3. Работа с данными: ORM, который мы заслужили

В обычной веб-разработке у вас есть боль под названием ORM (Hibernate, EF). Вам нужно маппить классы на таблицы, следить за сессиями, ленивой загрузкой и т.д.

Как я уже сказал, один YAML-файл Справочник порождает несколько типов объектов. Разберем их, потому что это фундамент:

Сотрудники.Ссылка Это легкий объект, содержащий только UUID. Аналог Pointer-а.

• Он не тянет данные из БД, пока вы не попросите.

• Его можно передавать между клиентом и сервером.

Магия: Если нужно получить имя отдела сотрудника, вы просто пишете: (Ссылка как Справочник.Ссылка).ЗагрузитьОбъект().Отдел.Наименование Платформа сама сделает нужные JOIN (это называется разыменование ссылки). Ну или простой разворот наименования по ссылке: Ссылка.Представление()

Сотрудники.Объект Это «толстый» объект с данными. Нужен для изменения (INSERT/UPDATE).

// Транзакция открывается и закрывается платформой
пер НовыйСотр = новый Сотрудники.Объект()
НовыйСотр.ФИО = "Иванов И.И."
НовыйСотр.Записать()

Глава 4. Клиент и Сервер: Игра в пинг-понг

Главная боль и главная фича «Элемента» - жесткое разделение контекста.

• Клиент (Браузер/Мобилка): JS-движок.

• Сервер (бэкенд): Доступ к СУБД.

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

Аннотации контекста исполнения (Где выполняется код?)

Аннотации начинаются с символа @ и размещаются перед объявлением метода, переменной, типа или структуры. Аннотации управляют контекстом исполнения, областью видимости и назначением кода.

• @НаСервере

  • Метод выполняется на сервере.

  • Имеет доступ к базам данных и «тяжелой» логике.

  • Если модуль по умолчанию серверный (например, модуль справочника), эту аннотацию можно не писать.

• @НаКлиенте

  • Метод выполняется в браузере или на мобильном устройстве.

  • Имеет доступ к интерфейсу, но не к базе данных напрямую.

• @ДоступноСКлиента

  • Используется только в паре с @НаСервере.

  • Позволяет вызвать серверный метод из клиентского кода.

  • Важное условие: Такой метод обязательно должен быть объявлен как статический - такие здесь приколы.

• @Контекстный (используется с @НаСервере)

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

Аннотации области видимости (Кто видит этот код?)

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

• @Локально (по умолчанию) - видно только в текущем модуле.

• @ВПодсистеме - видно всем элементам внутри текущей подсистемы.

• @ВПроекте - видно во всем проекте (во всех подсистемах).

• @Глобально - видно даже в других проектах (актуально при разработке Библиотек).

• @ВТипе - видно внутри текущего типа и его наследников.

Аннотации событий и поведения (Когда это запускается?)

Эти аннотации говорят платформе, что данный метод - это не просто функция, а реакция на определенное событие.

• @Обработчик- @Обработчик метод ПередЗаписью(...)

  • Указывает, что метод обрабатывает стандартное событие (нажатие кнопки, запись объекта в базу, создание формы).

  • Имя метода обычно должно совпадать с именем события или быть привязано через свойства.

• @ОбновлениеПроекта

  • Используется в модуле проекта.

  • Помечает методы, которые должны выполниться один раз при обновлении версии приложения (миграция данных).

    @ОбновлениеПроекта(Ид = "8.2.2.7", Номер = 1)
    метод ЗаполнитьДанные()
    ;
    

Продолжим по теме...

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

Пример: Кнопка «Рассчитать скидку»

// Модуль Формы (выполняется в браузере)
@НаКлиенте
метод ПриНажатииКнопки()
    // Собираем данные с формы
    знч Сумма = ПолеВводаСумма.Значение
    // Вызываем сервер, так как база скидок лежит там
    // Асинхронный вызов, UI не фризится
    знч Итог = РассчитатьНаСервере(Сумма)
    ПолеВводаИтог.Значение = Итог

;

@НаСервере @ДоступноСКлиента
статический метод РассчитатьНаСервере(ВходнаяСумма: Число): Число
    // Тут мы уже на бэкенде. Можем делать SQL-запросы.
    // Пример XBQL (язык запросов 1С)
    знч Запрос = Запрос{
        ВЫБРАТЬ
            Максимум(Процент)
        ИЗ
            Скидки
    }
    пер Процент = Запрос.Выполнить().Получить(0).Процент
    возврат ВходнаяСумма * (1 - Процент / 100)
;

Глава 5. UI: Забудьте про HTML и CSS (хотя потом всё равно придётся вспомнить)

«Элемент» не дает вам верстать. Ну почти)))

Вы описываете интерфейс деревом компонентов (в YAML или визуальном редакторе).

YAML формы:

Тип: Форма
Содержимое:
    - 
        Тип: ПолеВвода
        Заголовок: Ваше имя
        Значение: =Объект.Имя // Data Binding!
    -
        Тип: Кнопка
        Заголовок: Отправить
        ПриНажатии: ОбработчикНажатия

Плюсы:

Не нужно думать о flexbox, отступах и адаптивности. Платформа сама перерисует это в нативный интерфейс мобилки или в React-компоненты веба.

Единый стиль во всем приложении - конечно сомнительно считать это плюсом, но океееейй...

Минусы:

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

Но если мы подумаем о грехе разработчика – умении всё закостылять, то мы найдём такой компонент интерфейса как КонтейнерHTML – в который мы уже можем вписать и HTML, и CSS, и JS и с помощью родителей в DOM-дереве (кто шарит тот шарит) проникнуть в само Web-приложение и переделать всё то, что не даёт нам сделать сам Элемент.

Глава 6. RLS: Безопасность, которую нельзя забыть

В обычной веб-разработке (Java/Node.js/Python) безопасность данных часто превращается в ад ручного контроля. Вы постоянно должны помнить: «А добавил ли я WHERE user_id = current_user в этот SQL-запрос?». Забыли в одном месте — и вот уже Вася видит заказы Пети, скандал, утечка данных, боль, слёзы, депрессия.

В «Элементе» система прав делится на два уровня:

Уровень 1. Статические права (в YAML-файле сущности):

• Задают, кто вообще имеет доступ к документу или справочнику (чтение, создание).

• Пример: Чтение: РазрешеноОграниченно, ПоУмолчанию: РазрешеноАдминистраторам.

ВидЭлемента: Документ
Имя: Заказы
...
КонтрольДоступа:
    Разрешения:
        # Аутентифицированные пользователи могут создавать
        Создание: РазрешеноАутентифицированным 
        # А вот читать - только если есть RLS (об этом ниже)
        Чтение: РазрешеноОграниченно 
        # Администраторы могут всё
        ПоУмолчанию: РазрешеноАдминистраторам

Уровень 2. Динамические права (RLS):

• Определяют, какие конкретные записи видит пользователь.

• Вместо условий в SQL используются Ключи доступа - «бирки», привязанные к строкам данных.

• Разработчик в коде сущности описывает правило, кто получает доступ к объекту.

@Обработчик
метод ВычислитьРазрешенияДоступаДляОбъектов(Элементы: ЧитаемыйМассив<Заявление.ДанныеРасчетаРазрешений>): ЧитаемоеСоответствие<Заявление.ДанныеРасчетаРазрешений, ЧитаемаяКоллекция<РазрешениеДоступа>>
    знч Разрешения: Соответствие<Заявление.ДанныеРасчетаРазрешений, ЧитаемаяКоллекция<РазрешениеДоступа>>
    для Элемент из Элементы
        знч РазрешенияОбъекта: Множество<РазрешениеДоступа>
        Разрешения.Вставить(Элемент, РазрешенияОбъекта)
        // Здесь мы даём доступ конкретному пользователю
        РазрешенияОбъекта.Добавить(новый РазрешениеДоступа([новый КлючДоступаПользователя.Объект(ДоступКУправлениюКадрами.ДоступКУправлениюКадрамиПолучить())], [Сущность.Право.Чтение, Сущность.Право.Изменение, Сущность.Право.Создание]))
    ;
    возврат Разрешения
;

Но перед этим наше приложение должно обязательно выполнить пересчёт прав доступа из панели управления (вручную) или из кода ПересчитатьПрава().

Утрированный пример на JS:

// Где-то в коде контроллера
const orders = await db.query(
  "SELECT * FROM orders WHERE manager_id = $1", 
  [currentUser.id]
);
// ЗАБЫЛИ WHERE? Поздравляю, вы слили базу.

Заключение

«1С:Предприятие.Элемент» с технической точки зрения - это попытка создать идеальный монолит для бизнес-задач.

• Язык стал современным (типизация, функциональщина).

• Архитектура стала прозрачной (YAML-файлы, Git).

• Бэкенд берет на себя всю грязную работу (ORM, API, JSON-сериализация, права доступа).

Это не убийца Python или JavaScript в широком смысле. Вы не будете писать на «Элементе» нейросети или драйверы видеокарты (Очевидно же). Но если ваша задача - быстро сделать кабинет B2B-клиента со сложной логикой, реестрами и правами доступа, и быстро склеить это с 1С-кой то писать это на чистом к примеру HTML/JS/CSS вы будете в 3-4 раза дольше, а изучать Элемент со слезами на глазах пару месяцев, но кому, что нравиться. Ну или вообще допиливать продукты уже выпущенные компанией 1С на Элементе - Классика 1С реалий.

Компьютер по-прежнему видит нули и единицы, но слоев абстракции между ним и разработчиком 1С стало меньше, а сами абстракции - чище. И это хорошо.

P.S. Конечно у меня не поучиться обратить на все особенности Элемента внимание в этой статье, но самое интересное для себя я уже я описал. Надеюсь статья хоть чуть-чуть вас заинтересовала и обратило ваше внимание к этой статье и возможно кто-то из вас вскоре будет Элементчиком.

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