Меня зовут Воякин Данил, я действующий 1С-разработчик франчайзинговой сети «ИнфоСофт». До того, как прийти в 1С, занимался разработкой игр, пробовал себя в создании веб-сайтов и мобильных приложений – это были скорее потребительские (консьюмерские) проекты. И лишь когда я познакомился с платформой «1С:Предприятие 8», я остановился, и с тех пор считаю себя 1С-разработчиком: пишу на 1С.
Платформа 1С дает ощутимый результат от автоматизации. Меня вдохновляет и заряжает то, что мой код решает конкретную задачу, стоящую перед заказчиком здесь и сейчас. Именно этот фактор определил мою любовь к технологии 1С:Предприятие.Элемент – она позволяет предоставлять заказчикам еще больше вариантов приложений и форматов решения их задач.
Универсальность и самореференциальность 1С:Элемент: пример с опросником
Технология получилась достаточно универсальной. Даже сами разработчики из 1С и 1cmycloud, когда создавали опросник для пользователей – чтобы узнать, как у них проходит опыт разработки и работа в облаке, – отправляли по электронной почте ссылку на опросник, написанный на 1С:Элементе. Вдумайтесь: опросник, посвященный самому 1С:Элементу, был написан на 1С:Элементе. Они не стали использовать сторонние решения – выбрали свою собственную технологию для своих задач. Мне кажется, это потрясающая иллюстрация гибкости и самодостаточности Технологии.
Эта статья не столько о личных кабинетах, сколько про возможности самой Технологии, и способах ее применения: мы рассмотрим и фронтенд, и бэкенд. Обсудим, как начать разработку, если у вас уже есть команда, но они заняты другими задачами.
Ограничения и реальные возможности 1С:Элемент как фронтенд-фреймворка
Начнем с самого привычного и общепризнанного формата – когда 1С:Элемент рассматривают в роли фронтенд-фреймворка. Давайте посмотрим, по каким причинам стоит выбирать 1С:Элемент в качестве фронтенд-фреймворка для своей системы.
Прежде всего, важно договориться на берегу: если вы сейчас ищете инструмент для создания приложения или сайта с визуально нестандартным дизайном – например, хотите реализовать анимированную графику, где кнопка плавно перетекает в контент и так далее, – и это является основным содержанием вашего приложения, то 1С:Элемент вам не подойдет. Технология раскрывается в другом.
Почему я об этом говорю? Потому что разработчики, особенно приходящие из других стеков, видят пресс-релизы и маркетинговые материалы, где говорится, что 1С:Элемент – это фронтенд, и начинают думать, что на Элементе можно легко создавать сложные визуальные эффекты. В итоге получают не то, чего ожидали, разочаровываются и распространяют мифы, которые вредят как самой Технологии, так и ее сообществу.
Реальная польза 1С:Элемента в том, что это фронтенд-фреймворк для создания полноценных приложений в комплексе, это не замена CSS. Его главное преимущество по сравнению с другими технологиями строится на нескольких ключевых принципах.
Во-первых, по сравнению с «восьмеркой» у нас появилась модульность: мы можем вкладывать один компонент в другой и переиспользовать компоненты интерфейса в разных частях приложения. А когда приходит время поддерживать форму, нам достаточно внести изменения в самый нижний компонент – например, во всплывающее окно. И эти изменения автоматически отразятся на всех уровнях, включая, например, форму доски задач. Что это дает? Очевидно – экономию времени и сил на сопровождение и поддержку приложения.
Еще одно важное преимущество – автоматическая адаптация под мобильные устройства. Стандартные компоненты интерфейса, предоставляемые вендором в библиотеке, изначально рассчитаны на работу на всех устройствах и не требуют дополнительной адаптации. Если вы разработали приложение для мобильного устройства, оно будет корректно работать и на планшете, и в браузере – даже если вы этого не планировали (хотя, конечно, поведение можно дополнительно ограничить, если нужно).
Кроме того, весь интерфейс рисуется асинхронно, в полном соответствии с современными стандартами веб-приложений. Если изменяются клиентские данные, то компонент, зависящий от этих данных, автоматически перечитывает их и обновляет свое представление.
Сила в удобстве и скорости разработки
Специально утаил «слона в комнате» – до этого момента я говорил о технических аспектах. Вы видите перед глазами приложение с разделами. Что это такое? По сути – это шаблон, который уже продумали в 1С. И в этом, пожалуй, заключается главное преимущество 1С:Элемента как инструмента для фронтенд-разработки.
Представьте ситуацию: за дверью стоит заказчик и говорит: «Хочу приложение, которое будет выполнять конкретную функцию – сделайте мне его». Что происходит, если у нас нет Элемента? Мы начинаем с нуля: проектируем панель навигации, ищем готовые решения, изучаем шаблоны в других фреймворках или тратим время на визуальные вещи, которые не решают бизнес-задачу напрямую.
В 1С же собрали стандартные сценарии взаимодействия с приложениями – то, чего ожидают пользователи, как им удобно работать, как приложение должно вести себя на мобильном устройстве, на планшете или на ноутбуке. Все это было скомпоновано, описано и превращено в набор стандартных компонентов, а также в четкую философию построения прикладных решений на 1С:Элементе: каким должно быть приложение, какие задачи оно решает, как выглядит.
Например, определено, что у нас есть панель навигации, есть главная страница с виджетами, выполняющими определенные действия. У вендора есть четкое видение – своего рода гайдлайн, который, надеюсь, со временем станет общедоступным.
В чем ценность таких приложений? В том, что мы можем показать заказчику скриншот и сказать: «Вот так будет выглядеть, только с вашими бизнес-процессами». Заказчик сразу понимает, как будет устроен интерфейс, поведение будущего решение для него предсказуемо – ведь, например, он уже пользовался «1С: Кабинетом Сотрудника» и знает, как это работает. Это снижает порог входа, и он готов разрабатывать свое решение на знакомой технологии.
Тут вы можете меня подловить: выше я написал, что технология универсальна и подходит не только для личных кабинетов – а теперь я рассказываю о шаблонах. Как это сочетается?
Дело в том, что помимо стандартного «приложения с разделами» – то есть шаблона, если говорить простым языком – у нас есть возможность создавать произвольное клиентское приложение, которое не содержит встроенной логики компоновки этих объектов. То есть мы сами решаем, что и где будет отображаться.
Приведу пример. На рисунке мое приложение «Напоминатель», которое я интегрировал в Telegram WebApps. Telegram WebApps – это небольшие приложения, которые открываются прямо в Telegram.
Так получилось, что в 1С не предусмотрели сценарий, что кто-то будет использовать Элемент в качестве интегрированного приложения. Когда пользователь открывает его с компьютера, интерфейс выглядит как слева на картинке выше. Это, конечно, не катастрофа, но точно не то, что можно показывать заказчику: панель навигации, которую определил не я, а мне определили в этом шаблоне, не адаптируется, занимает больше половины экрана, контент-страницы даже не видно.
Вместо того чтобы использовать то, что есть, я, используя произвольное клиентское приложение, сам определяю, какие элементы где будут находиться. Поскольку 1С:Элемент – это модульный фреймворк, то используя те же самые заранее определенные компоненты, которые я дополнительно не описывал и не адаптировал, отображаю это так, как справа на рисунке.
В итоге приложение, которое изначально выглядело «сломанным», стало работать идеально – я с комфортом пользуюсь им и с компьютера, и с мобильного устройства.
Произвольные клиентские приложения и управление сложностью через модульность
Далее, когда мы будем разрабатывать произвольные приложения со своей собственной компоновкой и панелями навигации, важно понимать: если мы используем произвольное клиентское приложение, на нас, как на прикладных разработчиков, ложится необходимость описывать панель навигации.
Отказываясь от стандартного приложения с готовой панелью навигации, вы сами определяете, как пользователь будет перемещаться по вашему приложению. Соответственно, вы, скорее всего, будете наследовать одни компоненты интерфейса от других и активно использовать модульность на всех уровнях.
Рано или поздно вы столкнетесь с ситуацией, когда ваш тип, будучи дочерним, наследуется от другого типа, который, в свою очередь, тоже унаследован от третьего. Когда вы переносите такой тип на форму, у вас появляется целая «портянка» свойств – длинный, перегруженный список, в котором сложно ориентироваться.
Чтобы избежать этого, можно воспользоваться типом «Произвольный компонент». Он содержит только базовую логику и позволяет обернуть любой компонент интерфейса, вынося наружу лишь те свойства, которые вы, как разработчик, хотите предоставить другому разработчику – или себе, чтобы упростить дальнейшую работу.
Реактивность и вычисляемые выражения в 1С:Элемент
Пару слов о реактивности и новом механизме вычисляемых выражений. В 1С:Элементе появился новый синтаксис: теперь в свойстве компонента можно указать выражение через знак равенства. Что это значит и какие возможности это дает прикладным разработчикам?
Если раньше во время выполнения какого-то события – например, после создания на сервере – формы в 1С меняли значение надписи, то сейчас этот код можно не писать в модуле. Мы можем писать его прямо в конфигурации через «равно». При этом выражение всегда клиентское – оно должно быть доступно для вызова с клиента, и все используемые в нем типы данных также должны быть доступны на клиенте.
Если нужно реализовать более сложную логику, можно указать метод, например, из модуля формы. Этот метод должен возвращать значение, которое будет подставлено в свойство. Более того, это может быть даже серверный метод, который доступен с клиента. 1С:Элемент тоже позволяет делать такие аннотации.
Однако важно помнить, что используя этот новый механизм, вы лишитесь возможности программно устанавливать значение свойств. Например, если вы определили свойство Доступность через выражение, а затем попытаетесь в коде написать Компоненты.Кнопка.Доступность, то во время выполнения приложения вы получите ошибку.
Эта ошибка возникает именно в рантайме, то есть на этапе работы приложения. Поэтому нужно четко понимать: либо вы используете новый подход с вычисляемыми выражениями, либо остаетесь на старом.
Пример разработки Kanban-доски и необходимость админ-панели
Такого компонента интерфейса, как Kanban-доска, в 1С:Элементе изначально нет – я реализовал ее самостоятельно. Здесь отображаются задачи, для каждой из которых указаны метки: хорошая задача или нет, какой у нее приоритет и так далее.
Пользователю это удобно, понятно и нравится – его пользовательский опыт мы учли. Но когда речь заходит о реальных приложениях, рано или поздно возникает проблема: из-за всех этих клиентских абстракций объектная модель становится размытой. Как это поддерживать?
Обратите внимание на пример: вот задача в статусе «В процессе» – «Настроить отчет комиссионера». Пользователю все ясно, а вот нам? Что делать, если в этой задаче что-то пошло не так? Эти метки – что это? Табличная часть? Реквизит? Или, возможно, отдельный регистр, с которым мы связаны? Откуда берется логотип?
Мы, как специалисты по сопровождению системы, начинаем испытывать дискомфорт. И тогда у нас появляется вполне логичная потребность – отдельное приложение для администратора, так называемая админ-панель.
Сейчас я покажу, как за 1–2 минуты создать такую панель, и как несколько встроенных механизмов 1С:Элемента помогут нам сэкономить огромное количество времени и ресурсов.
Быстрое создание админ-панели с помощью автоинтерфейса
У нас есть возможность определить приложение как объект метаданных – так называемый тип «Приложение». Фактически, это своего рода синоним или, как я бы назвал, точка входа в приложение. В том числе это правило, по которому будут компоноваться элементы интерфейса, которые пользователь увидит при переходе.
У нас осталось наше основное приложение – то самое, с которым мы работали. Это стандартное «ПриложениеСРазделами», как оно называется по умолчанию. Мы уже говорили о нем и видели его на предыдущем рисунке. Его доработали – оно получилось удобным, современным, с хорошим пользовательским опытом.
Теперь мы создаем второе приложение для администратора. В его свойствах указываем другой путь. В чем разница? Если пользователь заходит по адресу [приложение].ru, он попадает в основное приложение – то самое, которое мы уже показывали. А если он перейдет по адресу [приложение].ru/admin, то попадет во второе приложение, которое и будет нашей админ-панелью.
Обязательно устанавливаем режим аутентификации – «аутентифицированный».
Здесь важный момент: чтобы админ-панель не требовала постоянной доработки, мы убираем весь командный интерфейс панели навигации. Удаляем и фрагмент командного интерфейса – его нужно убрать полностью. Если командный интерфейс панели навигации оставить пустым, 1С:Элемент автоматически сгенерирует так называемые автоинтерфейсы. На основе всей вашей объектной модели – подсистем, справочников, документов – система сама построит навигационные ссылки, по которым администратор сможет переходить.
Однако у нас остаются другие элементы интерфейса – например, панель действий и дополнительная панель. Туда мы можем добавить инструменты, которые облегчат жизнь администратору. Например, стандартную консоль запросов. В Элементе есть очень удобная встроенная консоль запросов. 1С-никам, думаю, она знакома. Вы можете добавить консоль журнала заданий, настройки системы взаимодействия – все, что помогает в администрировании. Вы вольны дорабатывать эту админ-панель под свои нужды.
В итоге у нас два приложения: одно – для пользователя, другое – для администратора. Пользователь продолжает работать в привычном интерфейсе, ничего не замечая. А администратор получает полный доступ к данным и инструментам управления.
При этом админ-панель, как вы видите, работает и на мобильных устройствах – не только на компьютере. Хотя мы изначально даже не планировали такой сценарий. В этом плане 1С:Элемент дает огромное преимущество по скорости разработки.
Безопасность и защита админ-панели: важность серверных прав
Что делать, если обычный пользователь введет адрес [приложение].ru/admin? Мы ведь не приложили никаких усилий, чтобы защитить админ-панель от несанкционированного доступа. Пользователь может быть аутентифицирован, но при этом не обладать правами администратора. Как быть в такой ситуации?
Может возникнуть соблазн решить проблему на уровне интерфейса: зайти в приложение, проверить, есть ли у пользователя признак администратора, и, если его нет, выбросить информационное исключение или просто скрыть элементы управления. Но пытаться решать проблему таким образом - неправильный подход. Потому что даже если у нас не будет приложения для администратора, то мы можем, находясь в нашем клиентском приложении, за счет того, что это веб, попасть в какие-то данные, которые нам недоступны.
Единственный правильный ответ – настройка прав на уровне сервера. Необходимо четко разграничить доступ ко всем объектам метаданных: например, указать, что справочник «Номенклатура» могут читать только администраторы, а удаление записей в нем разрешено исключительно для пользователей с соответствующими правами. И так надо пройтись по всем объектам метаданных.
Это знакомый механизм выдачи ключей для тех, кто работал с 1С, просто он выглядит немного по-другому.
Если вы уже настроили права, в том числе на конкретные объекты и операции, и хотите дополнительно улучшить пользовательский опыт, то самый корректный способ – перенаправить его на отдельное приложение. То есть если пользователь зашел, но он не администратор, мы перенаправляем его на отдельное приложение.
Технически это обычный редирект. Но его стоит делать только после того, как настроены серверные права, потому что в «вебе» все ваши формочки при желании все равно обойдут. Помните, что вы находитесь в браузере, а все механизмы для отладки и тестирования тоже в браузере. В конце концов, существуют расширения для браузера, которые выполняют произвольный JavaScript-код. Такое бывает, так что никогда не пренебрегайте правами.
Кейс внедрения: фронтенд-приложение для учета показаний приборов
Долго говорили о механизмах – давайте теперь перейдем к опыту реального внедрения.
У нас есть приложение, которое помогает отслеживать и отображать печатные формы показателей общедомовых приборов учета. Этот кейс примечателен тем, что, скорее всего, без 1С:Элемента этого приложения просто не существовало бы.
Технически это очень интересный случай. Это микросервисы на C#, которые стоят непосредственно на самих приборах. Они собирают данные, которые затем поступают в back-office, а оттуда – в 1С, где все аккумулируется. И сейчас для такого немного технически необычного кейса в этом ландшафте нашлось место для 1С:Предприятие.Элемент.
В данном случае приложение выступает исключительно в роли фронтенда. Оно не хранит бизнес-данные – только данные пользователей: логины и пароли. Причем даже они не сохраняются в базе приложения, а находятся на сервере 1С:Элемента.
От идеи до того, как приложением начали массово пользоваться реальные пользователи, прошла всего одна неделя. Мне кажется, этот факт очень многое говорит о технологии.
Элемент как фулстек-решение: на примере трекера задач
Я плавно подвожу к следующему: 1С:Элемент отлично работает и в роли бэкенд-системы и, в принципе, в роли фулстек-системы: мы можем показать пользователю красивый и удобный интерфейс и при этом хранить все данные в одной и той же базе.
Вот, например, приложение – трекер задач. Мы можем добавлять задачи, указывать в них трудозатраты, сортировать по статусам, управлять жизненным циклом задачи и прикреплять к ним произвольные метки. Приложение полностью реализовано на 1С:Элементе: и фронтенд, и логика, и сами объекты хранятся в одной базе – в облаке 1cmycloud. Здесь не задействовано ни одной внешней системы – ни для хранения данных, ни для обработки. Это полностью автономное решение, независимое от других технологий.
Гибкость выбора формата приложения: шаблоны и произвольные решения
Если у вас нет готового шаблона, но есть идея, 1С:Элемент поможет выбрать подходящий формат, определить расположение виджетов и автоматически построить панель навигации – при условии, что вы используете стандартный шаблон.
Но если у вас есть собственная идея и четкое техническое задание, не бойтесь отойти от рекомендаций 1С. Существует возможность создания произвольного клиентского приложения, которая позволяет реализовать именно вашу идею.
Использование Элемента в качестве бэкенда: преимущества для 1С-разработчиков
Если вы выбираете инструмент для создания бэкенд-системы, то самое главное – 1С-ники у вас в штате. Почему? Потому что они уже хорошо знакомы с объектной моделью, понимают, что такое справочники, регистры, документы, и умеют работать с этими базовыми концепциями платформы.
Соответственно, вы можете сразу привлечь 1С-ника к созданию объектной модели на бэкенде. Даже если ваша команда пока не работала с Элементом, вы можете посадить 1С-ника создавать справочники – он их создаст, как создаст и документы, и регистры. А более опытного специалиста, который глубже разбирается в Элементе, можно посадить на объекты, с которыми он еще не знаком.
Таким образом, разработчик, который начинал с создания простых объектов, постепенно погружается в технологию, осваивает более продвинутые механизмы – например, контракты. Это очень мощная возможность, которая позволяет в дальнейшем делать решения еще более комплексными и удобными в сопровождении. По сути, контракт – это спецификация, договоренность между разработчиками о том, какое значение должно быть у конкретного поля. Если приводить пример из «восьмерки», то «Контракт» похож на описание веб-сервисов – WSDL. Не стоит бояться, что новые концепции в архитектуре языка повышают порог вхождения. Новые механизмы можно внедрять в свой репертуар постепенно – начинать постигать Технологию можно и без «Контрактов».
Ключи доступа в Элементе организованы немного иначе – они определяются через специальные типы, но суть такая же, что и привычный нам RLS из Платформы: разработчик сможет настраивать объекты и права на них.
Не стоит забывать и о том, что 1С:Элемент – это облачный инструмент. Облако вендора 1cmycloud – это самый популярный формат взаимодействия разработчика/пользователя с приложением. “Панель управления” бережно выгружает ваши приложения, делает резервные копии перед обновлениями и другими операциями.
Очень важно и то, что вы можете буквально отправить заказчику ссылку на решение, которое уже развернуто в сети. Показываете: «Вот как выглядит, вот так работает – ну как, норм?» Он отвечает: «Ну да, нормально» – и вы сразу переходите к новой итерации разработки. Упор на работу в облаке – это не просто маркетинговый слоган, а реальная экономия времени и удобство.
Внутренняя автоматизация: кейс приложения-напоминателя в Telegram
Хочу показать один кейс по внутренней автоматизации: приложение «Напоминатель». По сути, это исполнитель промптов по расписанию. Идея простая, и техническая реализация тоже достаточно проста.
Это личный кабинет, в котором можно настроить: «Выполни такое-то действие в такое-то время» – например, напоминание о предстоящей встрече.
Когда срабатывает обработчик запланированного задания, приложение не отправляет ссылку сразу. Вместо этого оно сначала передает промпт во внешний сервис, получает оттуда результат, а уже затем отправляет этот результат в Telegram-чат.
Когда выбирать 1С:Элемент и как развивать команду
Итак, когда стоит выбирать 1С:Элемент в качестве основы для построения веб - приложения? Ответ прост: когда у вас в команде есть 1С-разработчики, есть потребность в автоматизации чего-либо через веб-сайт, и по этому блоку у вас запланирован большой пласт работ.
1С-ники смогут быстро построить объектную модель, писать интеграции, общаясь на одном языке с коллегами-разработчиками на «1С:Предприятие». Элемент позволяет решать многие задачи, которые перед вами встанут (например, создание админ-панели), оставаясь в парадигме Low-code, а также привносит в экосистему 1С много новых инструментов, такие как лямбда-операции или контрактное программирование.
Если в вашей команде пока нет специалистов по Элементу, но есть желание развиваться, отличный способ начать – это хакатон. У нас уже был успешный опыт: мы провели хакатон, в котором участвовало шесть команд. Все задачи были реальными – по запросам от заказчиков.
В основном, это были личные кабинеты для подачи заявок – самая частая потребность. Но были и опросники, анкеты обратной связи, и даже очень интересный кейс – обучающая платформа. Ее мы планируем использовать для стажерской программы.
Это удобно, потому что, во-первых, мы замещаем сторонние сервисы, например, от Google. Во-вторых, можем загружать обучающие видео прямо в приложение. Стажер смотрит ролики, выполняет домашние задания, прикрепляет их в том же интерфейсе и получает обратную связь от наставника – все в одной системе. Такой интересный формат мы попытаемся внедрить.
Таким образом разработчики, еще не знакомые с технологией, постепенно будут погружаться в новые механизмы. Если вы уделяете им внимание – например, записываете обучающие ролики, помогаете настраивать окружение – со временем они растут. И кто знает, возможно, именно они станут будущими участниками сообщества. А если у Элемента будет крепкое сообщество, то у него будет крепкое будущее.
*************
Статья написана по итогам доклада (видео), прочитанного на конференции INFOSTART TECH EVENT.
Вступайте в нашу телеграмм-группу Инфостарт
