Разбираемся с WebKit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4
Многие уже знают, что в релизе платформы 8.3.14.1565, браузер Internet Explorer был заменен на Web-Kit, это на самом деле большой шаг вперед, но я уверен, многим, как и мне, пока не совсем понятно, что к чему. Возник опыт использования web-kit в 1С, вызова JS из 1С и вызова 1С из JS. Давайте вместе попробуем понять, чем одно отличается от другого, и заодно сделаем, что-нибудь полезное. Да и наверняка многим придется переписывать свои подобные поделки после обновления на новую платформу, так что надеюсь мой опыт окажется полезным.
Все началось с того, что возникла задача: «Хотим, в УТ, вводить форматированное описание для товара, чтобы оно потом летело в интернет-магазин», потому что стандартное описание для товара прилетает сплошной строкой без переносов и выглядит очень не очень. Сразу возникло желание использовать форматированный документ, там и редактор простенький есть, и в HTML можно выгрузить. Но как только я показал сформированный форматированным документом HTML веб-разработчикам, они сразу замахали руками и сказал, что так не пойдет. На сайте уже есть свои стили для отображения нужных блочных элементов и поведение такого рода текста может стать непредсказуемым.
Функция ПолучитьHTML, форматированного документа возвращает полностью сформированную страницу HTML, со всей структурой тегов, а что самое неприятное, с inline-стилями. Выглядит это так.
И если получить содержимое тега body это простая задача, то заниматься парсингом и вырезать атрибуты стиля из тегов совсем не хотелось.
TinyMCE же возвращает приятного вида верстку. Позволяя себе inline-стили только в случае с цветом, что уже гораздо лучше.
Было принято решение интегрировать сторонний редактор текста TinyMCE. К тому же опыт его интеграции сообществом 1С уже довольно большой.
Может быть это было ошибкой тогда, и нужно было просто парсить текст сформированный форматированным документом, но имеем, что имеем.
1.Особенности решения
Так как 1С не разрешает подгружать на страницу в поле HTML локальные файлы из файловой системы, для этого обязательно нужен веб-сервер или хотя бы адрес этого файла во временном хранилище, то положить js-библиотеку Tiny рядышком с 1С и подгружать ее в заголовках HTML документа нельзя — придется сформировать еще и файл с HTML-версткой который внутри себя формирует готовое окно редактора и его уже подключать к HTML документу.
Вообще, на самом деле, подгрузить библиотеку, если получить для нее адрес в хранилище, можно, если бы она была скомпилирована в один файл, а Tiny помимо основной библиотеки содержит еще и js-файлы плагинов, менеджер стилей, и сами файлы стилей, русификаторов, иконок и т.д., и как сами понимаете это довольно сильно усложняет задачу. В одно время даже возникла идея скомпилировать все это добро в один файл и не знать проблем, но разбираться в инструментах было долго. Потом был найден TinyMCE Builder на официальном сайте, который компилирует весь js в один файл и это же было бы маленькой победой, если бы он так же поступал с css, но нет, css по-прежнему лежал рядом в нескольких папках.
TinyMCE для окна редактирования создает iframe, который сам по себе является встроенным в страницу HTML-документом, так что события возникающие в этом iframe 1С не может отследить, об этом ниже.
Конфигурация УТ 11.4 на момент разработки имела режим совместимости 8.3.12, так что по факту сейчас она использовала IE в качестве встроенного браузера, но дальнейшее обновление подразумевало переход на новые версии, которые уже используют web-kit.
2. Первые шаги
Основные отличия в работе с web-kit:
Основной объект ПоляHTML теперь имеет другую структуру и, для того чтобы работать с содержимым страницы нужно использовать свойство defaultView
раньше для этого использовалось свойство parentWindow
Запрет на использование eval, который раньше повсеместно использовался для вызова JS кода. Что-то вроде этого
Элементы.ПолеHTML.Document.parentWindow.eval(«alert(‘Вызов кода из 1С’)»)
Зато можно обращаться к методам напрямую из 1С.
Элементы.ОписаниеHTML.Document.DefaultView.НазваниеМетодаJS();
И я быстро соорудил оберточные функции для всех методов Tiny которые мне нужны.
К которым дальше обращался из 1С так
Хотя можно было бы обойтись и прямыми обращениями к объекту редактора, например так
Сразу была скачана обработка из публикации (автору отдельный респект), которая показала мне много интересностей. Она более-менее работала на IE, но на webkit не работал копи-паст, сначала это вызвало ступор, но дальше стало понятно, что это из-за iframe поле HTML не активировалось при нажатии внутри него, так как нажатие фактически происходило во вложенном документе HTML, события которого где-то застревали по пути к 1С. И потому если нажать Ctrl+C в одном месте формы и попытаться вставить внутри поля редактора, то текст вставится в том поле откуда был копирован потому что поле HTML документа не активируется. То же происходит и в обратном случае, сочетания клавиш для копирования и вставки не работают.
Сначала возникла мысль, что это косяк Tiny, и он блокирует непосредственную вставку из буфера, как CKEditor, который предлагает отдельное окно для вставки из буфера. Но проверить это было довольно легко, я создал пустой документ с одним полем ввода и попробовал копирования и вставки
Как видите все работает. Значит проблема где-то в Tiny или во взаимодействии с 1С.
3. Решение
Для решения проблемы с взаимодействием браузера и 1С был применен обычный прием, я создал невидимую кнопку на странице HTML, и планировал нажимать на нее из JS при возникновении нужных событий внутри страницы, которые 1С перехватывала бы в событии ПриНажатии HTMLДокумента. Но при каком событии осуществлять программное нажатие?
Верстка выглядит примерно так:
И функция для вызова события нажатия на кнопку
Раньше можно было передать объект формы 1С в поле HTML как объект, и из-за того, что IE подключался к 1С по COM, форма как-то сама конвертировалась в понятный для IE объект и можно было вызывать экспортный функции формы 1С прямо из кода JS. Теперь так нельзя.
Была изучена документация по API Tiny, и найдена конструкция для перехвата обработчиков событий и подходящая комбинация событий, которая должна активировать поле HTML документа
Нужно поместить этот код в том месте, когда Tiny уже проинициализровался. Я сделал это в обработчике onload объекта window. Но можно сделать более красиво и разместить код при инициализации Tiny в параметре:
Теперь все должно быть в порядке. И форма должна работать как надо…
Стало сильно лучше, поле HTML действительно стало активироваться, но не всегда, почему-то некоторые нажатия не вызывали перехода фокуса к полю:
На этой записи видно, что если нажать в строку, где мигает курсор, то фокус поля работает как нужно, но если нажать ниже, то активации поля не происходит.
Это был досадный артефакт, и попытки понять, что происходит не давали никакого решения. Я выводил алерты в обработчик и алерты выводились, но 1С не реагировала на событие ПриНажатии
Внезапно пришла в голову идея, а что, если 1С не успевает обработать событие происходящее в поле, что если немного затормозить выполнение JS скрипта, и посмотреть, что получится. Быстро была реализована функция паузы в JS с помощью промисов и async await. Как видите в JS ее тоже нет по умолчанию и ничего, живут люди).
Здесь я устанавливаю задержку в одну миллисекунду, перед нажатием на кнопку. И вуаля, все заработало. 1С стала вовремя обрабатывать нажатие на кнопку.
4. Допиливаем обмен
Так как для хранения нового описания в формате HTML, был добавлен новый реквизит к справочнику, то нам нужно подменить значение типового поля при выгрузке. Для этого в модуле ОбменССайтомПереопределяемый, добавляем в расширение функцию ПолучитьТекстыЗапросовКаталог, и пишем там:
На этом все. Запускаем обмен и все работает, остается только внести изменения на сайте, если это нужно, чтобы описание товара воспринималось как верстка а не как строка.
Резюме
На данном примере я попробовал взаимодействие JS WebKit и 1С, пособирал грабли и нашел решение.
Возможно для решения этой задачи было проще распарсить и очистить HTML-текст из форматированного документа, но было бы не так интересно и возможно получило бы какие-то проблемы при каких-то сложных вариантах форматирования.
Веб-клиент
Веб-клиент — это одно из клиентских приложений системы «1С:Предприятие 8». В отличие от «привычных» клиентских приложений (толстого клиента и тонкого клиента), его не нужно предварительно устанавливать на компьютер пользователя. У веб-клиента нет исполняемого файла. Веб-клиента вы не найдете ни в меню, ни среди исполняемых файлов. Потому он и веб-клиент, что ему для начала работы не нужно иметь никаких файлов на компьютере пользователя.
Веб-клиент, в отличие от толстого и тонкого клиентов, исполняется не в среде операционной системы компьютера, а в среде интернет-браузера (Windows Internet Explorer, Mozilla Firefox, Google Chrome или Safari). Поэтому любому пользователю достаточно всего лишь запустить свой браузер, ввести адрес веб-сервера, на котором опубликована информационная база, — и веб-клиент сам «приедет» к нему на компьютер и начнет исполняться.
Веб-клиент использует технологии DHTML и HTTPRequest. При работе веб-клиента клиентские модули, разработанные в конфигурации, компилируются автоматически из встроенного языка «1С:Предприятия 8» и непосредственно исполняются на стороне веб-клиента.
Таким образом, независимо от клиентского приложения (толстый, тонкий, веб-клиент), вся разработка прикладного решения ведется полностью в конфигураторе 1С:Предприятия, серверный и клиентский код пишется на встроенном языке «1С:Предприятия 8».
Работа в интернет-браузере без установки системы на компьютер пользователя
Для работы в режиме веб-клиента требуется веб-сервер, настроенный на работу с «1С:Предприятием 8». Браузер клиента взаимодействует с веб-сервером по протоколу HTTP или HTTPS. Веб-сервер, в свою очередь, взаимодействует с «1С:Предприятием 8» в файловом или клиент-серверном варианте работы.
В качестве веб-сервера используется Apache или IIS.
Progressive Web Apps
В веб-клиенте реализована поддержка технологии PWA (Progressive Web Apps). Эта технология поддерживается браузерами (как настольными, так и мобильными). Она позволяет создавать веб-приложения, которые выглядят как нативные приложения и работают почти так же быстро, как нативные приложения.
В веб-клиенте есть команда, которая устанавливает его как отдельное PWA-приложение. В результате на рабочем столе появляется иконка для запуска приложения. Веб-клиент, запущенный из этой иконки, будет похож на нативное приложение — в нем не будет адресной строки браузера, кнопок Домой, Вперед, Назад и др.
Во встроенном языке реализована объектная модель, которая позволяет устанавливать PWA-приложения и обрабатывать события начала и окончания установки.
Аутентификация OpenID Connect
В веб-клиенте реализована поддержка провайдеров OpenID Connect. Для аутентификации в «1С:Предприятии 8», дополнительно к имеющимся способам, пользователи могут использовать свои учётные данные на других сайтах, поддерживающих OpenID Connect аутентификацию.
Веб-клиент на мобильных устройствах
Реализована ограниченная поддержка работы веб-клиента на мобильных устройствах — в браузере Google Chrome под ОС Android и в браузере Safari на iPhone/iPad. Доступны только основные функции веб-клиента.
Управляемые формы: Поле HTML Документа и веб-клиент
Вступление
Взаимодействие javascript и интерфейса 1С дает огромные возможности для реализации нестандартных функций. Раньше можно было напрямую вызывать функции JavaScript через DOM объект document Поля HTML документа. В современных браузерах эта возможность ушла. Более того, в веб-клиенте появляется тип ВнешнийОбъект, который вообще нигде не описан. На Инфостарте были предложения вызывать JavaScript через fireEvent, но это очень неудобно. Предлагаю свой вариант решения.
С чего все началось
Разбираться с HTML полем меня сподвигло большое количество задач, в которых была необходимость реализовать интерактивные карты с мониторингом, маршрутизацией и т.д. Поскольку встроенными средствами 1С сделать это невозможно, то раньше использовал ActiveX компоненту собственного изготовления. На обычных формах все работало приемлимо, не считая, что решение и рядом не стояло с открытыми фреймворками типа OpenLayers. После появления управляемых форм, была попытка встроить все тот же ActiveX в HTML документ и разместить его в поле. Решение работает, но в виду ужесточения политики безопасности Microsoft, требовало изменения настроек безопасности на каждом клиенте, что в конечном счете оказалось неприемлимым. Вот тогда мы и поставили перед собой задачу, прикрутить к управляемым формам карты на основе Web-движков (Яндекс.Карты, OpenLayers и прочие Tile ориентированные движки).
Вариант 1. Работает в толстом клиенте, работает в тонком клиенте, не работает в веб-клиенте
Суть метода заключается в получении свойства parentWindow элемента формы ПолеHTMLДокумента. Выглядит примерно так:
Все это прекрасно работает в толстом и тонком клиенте, но в веб-клиенте это работать не будет, так как в веб-клиенте у ПоляHTMLДокумента в свойстве Документ нет parentWindow.
Вариант 2. Работает в Толстом клиенте, тонком клиенте, веб-клиенте (проверено Chrome, IE, Edge)
Для реализации этого варианта необходимо немного исправить HTML макет. А именно:
И небольшие правки в коде формы
Таким образом для толстого и тонкого клиента мы оставляем все как и было, но для универсальности используем расширенный нами объект DOM body. В веб-клиенте элемент формы ПолеHTMLДокумента.Документ содержит тип ВнешнийОбъект, что на самом деле является COM реализацией элемента body по структуре DOM.
Теоретически можно написать функцию в body, которая вернет ссылку на window, и тогда можно вызывать глобальные функции.
Про веб-клиент 1С
Одной из приятных особенностей технологии 1С:Предприятие является то, что прикладное решение, разработанное по технологии управляемых форм, может запускаться как в тонком (исполняемом) клиенте под Windows, Linux, MacOS X, так и как веб-клиент под 5 браузеров – Chrome, Internet Explorer, Firefox, Safari, Edge, и все это – без изменения исходного кода приложения. Более того – внешне приложение в тонком клиенте и в браузере функционирует и выглядит практически идентично.
Найдите 10 отличий (под катом 2 картинки):
Окно тонкого клиента на Linux:
То же окно в веб клиенте (в браузере Chrome):
Зачем мы сделали веб-клиент? Говоря несколько пафосно, такую задачу перед нами поставило время. Уже давно работа через Интернет стала необходимым условием для бизнес-приложений. Вначале мы добавили возможность работы через Интернет для нашего тонкого клиента (некоторые наши конкуренты, кстати, на этом и остановились; другие, напротив, отказались от тонкого клиента и ограничились реализацией веб-клиента). Мы же решили дать нашим пользователям возможность выбрать тот вариант клиента, который им подходит больше.
Добавление возможности работы через Интернет для тонкого клиента было большим проектом с полной сменой архитектуры клиент-серверного взаимодействия. Создание же веб-клиента — и вовсе новый проект, начинавшийся с нуля.
Постановка задачи
Итак, требования к проекту: веб-клиент должен делать то же самое, что и тонкий клиент, а именно:
Клиентский код на языке 1С может содержать в себе серверные вызовы, работу с локальными ресурсами (файлами и т.п.), печать и многое другое.
И тонкий клиент (при работе через веб), и веб-клиент пользуются одним и тем же набором веб-сервисов для общения с сервером приложений 1С. Реализация у клиентов, конечно, разная – тонкий клиент написан на С++, веб-клиент – на JavaScript.
Немного истории
Проект создания веб-клиента стартовал в 2006 году, в нем (в среднем) участвовала команда из 5 человек. На отдельных этапах проекта привлекались разработчики для реализации специфической функциональности (табличного документа, диаграмм и т.д.); как правило, это были те же разработчики, что делали эту функциональность в тонком клиенте. Т.е. разработчики заново писали на JavaScript компоненты, ранее созданные ими на C++.
С самого начала мы отвергли идею какой-либо автоматической (хотя бы частичной) конверсии C++ кода тонкого клиента в JavaScript веб-клиента ввиду сильных концептуальных различий этих двух языков; веб-клиент писался на JavaScript с чистого листа.
В первых итерациях проекта веб-клиент конвертировал клиентский код на встроенном языке 1С непосредственно в JavaScript. Тонкий клиент поступает иначе — код на встроенном языке 1С компилируется в байт-код, и затем этот байт-код интерпретируется на клиенте. Впоследствии так же стал делать и веб-клиент – во-первых, это дало выигрыш в производительности, во-вторых – позволило унифицировать архитектуру тонкого и веб-клиентов.
Первая версия платформы 1С:Предприятие с поддержкой веб-клиента вышла в 2009 году. Веб-клиент на тот момент поддерживал 2 браузера – Internet Explorer и Firefox. В первоначальных планах была поддержка Opera, но из-за непреодолимых на тот момент проблем с обработчиками закрытия приложения в Opera (не удавалось со 100%-ной уверенностью отследить, что приложение закрывается, и в этот момент произвести процедуру отключения от сервера приложений 1С) от этих планов пришлось отказаться.
Структура проекта
Всего в платформе 1С:Предприятие есть 4 проекта, написанных на JavaScript:
Структурно веб-клиент по-крупному разделяется на следующие подсистемы:
Особенности разработки
Реализация всего вышеописанного на JavaScript – дело непростое. Возможно, веб-клиент 1С – одно из самых больших client-side приложений, написанных на JavaScript – около 450.000 строк. Мы активно используем в коде веб-клиента объектно-ориентированный подход, упрощающий работу с таким большим проектом.
Для минимизации размера клиентского кода мы вначале использовали свой собственный обфускатор, а начиная с версии платформы 8.3.6 (октябрь 2014) стали использовать Google Closure Compiler. Эффект использования в цифрах – размер фреймворка веб-клиента после обфускации:
Google Closure Compiler очень хорошо работает с объектно-ориентированным кодом, поэтому его эффективность именно для веб-клиента максимально высокая. Closure Compiler делает для нас несколько хороших вещей:
Для анализа кода мы используем SonarQube, куда интегрируем статические анализаторы кода. С помощью анализаторов мы отслеживаем деградацию качества исходного кода на JavaScript и стараемся ее не допускать.
Какие задачи решали/решаем
В ходе реализации проекта мы столкнулись с рядом интересных задач, которые нам пришлось решать.
Обмен данными с сервером и между окнами
Существуют ситуации, когда обфускирование исходного кода может помешать работе системы. Код, внешний по отношению к исполняемому коду веб-клиента, вследствие обфускации может иметь имена функций и параметров, отличающиеся от тех, которые наш исполняемый код ожидает. Внешним кодом для нас является:
А чтобы избежать обфускации при взаимодействии с другими окнами мы используем так называемые экспортируемые интерфейсы (интерфейсы, у которых все методы являются экспортируемыми).
We used Virtual DOM before it became mainstream)
Как и все разработчики, имеющие дело со сложным Веб UI, мы быстро поняли, что DOM плохо подходит для работы с динамическим пользовательским интерфейсом. Практически сразу был реализован аналог Virtual DOM для оптимизации работы с UI. В процессе обработки события все изменения DOM запоминаются в памяти и, только при завершении всех операций, накопленные изменения применяются к DOM-дереву.
Оптимизация работы веб-клиента
Чтобы наш веб-клиент работал быстрее, мы по максимуму стараемся задействовать штатные возможности браузера (CSS и т.п.). Так, командная панель формы (расположенная практически на каждой форме приложения) отрисовывается исключительно средствами браузера, динамической версткой на базе CSS.
Тестирование
Для функционального тестирования и тестирования производительности мы используем инструмент собственного производства (написанный на Java и C++), а также набор тестов, построенных на базе Selenium.
Наш инструмент универсален – он позволяет тестировать практически любые оконные программы, а потому подходит для тестирования как тонкого клиента, так и веб-клиента. Инструмент записывает действия пользователя, запустившего прикладное решение «1С», в файл-сценарий. В это же время происходит запись изображений рабочей области экрана — эталонов. При контроле новых версий веб-клиента сценарии проигрываются без пользовательского участия. В случаях несовпадения скриншота с эталонным на каком-либо шаге тест считается провалившимся, после чего специалист по качеству проводит расследование – ошибка это или запланированное изменение поведения системы. В случае запланированного поведения эталоны автоматически подменяются на новые.
Инструмент также проводит замеры производительности приложений с точностью до 25 миллисекунд. В ряде случаев мы закольцовываем части сценария (например, несколько раз повторяем ввод заказа) для анализа деградации времени выполнения со временем. Результаты всех замеров записываются в лог для анализа.
Наш инструмент тестирования и тестируемое приложение
Наш инструмент и Selenium дополняют друг друга; например, если какая-то кнопка на одном из экранов поменяла свое местоположение – Selenium это может не отследить, но наш инструмент заметит, т.к. делает попиксельное сравнение скриншота с эталоном. Также инструмент в состоянии отследить проблемы с обработкой ввода с клавиатуры или мыши, так как именно их он и воспроизводит.
Тесты на обоих инструментах (нашем и Selenium) запускают типовые сценарии работы из наших прикладных решений. Тесты автоматически запускаются после ежедневной сборки платформы «1С:Предприятие». В случае замедления работы сценариев (по сравнению с предыдущей сборкой) мы проводим расследование и устраняем причину замедления. Критерий у нас простой – новая сборка должна работать не медленнее предыдущей.
Для расследования инцидентов замедления работы разработчики используют разные инструменты; в основном используется Dynatrace AJAX Edition производства компании DynaTrace. Проводится запись логов выполнения проблемной операции на предыдущей и на новой сборке, затем логи анализируются. При этом время выполнения единичных операций (в миллисекундах) может не быть решающим фактором – в браузере периодически запускаются служебные процессы типа уборки мусора, они могут наложиться на время выполнения функций и исказить картину. Более релевантными параметрами в этом случае будет количество выполненных инструкций JavaScript, количество атомарных операций над DOM и т.п. Если количество инструкций/операций в одном и том же сценарии в новой версии увеличилось – это почти всегда означает падение быстродействия, которое нужно исправлять.
Также одной из причин падения производительности может быть то, что Google Closure Compiler по какой-то причине не смог сделать inline-подстановку функции (например, потому что функция рекурсивная или виртуальная). В этом случае мы стараемся исправить ситуацию, переписав исходный код.
Расширения браузеров
В случае, когда прикладному решению нужна функциональность, которой нет в JavaScript, мы используем расширения браузеров:
При работе в Safari наши расширения используют NPAPI, при работе в Internet Explorer — технологию ActiveX. Microsoft Edge пока не поддерживает расширения, поэтому веб-клиент в нем работает с ограничениями.
Дальнейшее развитие
Одна из групп задач для команды разработки веб-клиента – это дальнейшее развитие функциональности. Функциональность веб-клиента должна быть идентична функциональности тонкого клиента, вся новая функциональность реализуется одновременно и в тонком, и в веб-клиенте.
Другие задачи — развитие архитектуры, рефакторинг, повышение производительности и надежности. Например, одно из направлений – дальнейшее движение в сторону асинхронной модели работы. Часть функциональности веб-клиента на настоящий момент построена на синхронной модели взаимодействия с сервером. Асинхронная модель сейчас становится в браузерах (и не только в браузерах) более актуальной, и это заставляет нас модифицировать веб-клиент путем замены синхронных вызовов на асинхронные (и соответствующего рефакторинга кода). Постепенный переход к асинхронной модели объясняется необходимостью поддержки выпущенных решений и постепенной их адаптации.