СРАВНИТЕЛЬНЫЙ
АНАЛИЗ СПОСОБОВ СОЗДАНИЯ ВСТРАИВАЕМЫХ ВЕБ-ПРИЛОЖЕНИЙ
Богомолов
Дмитрий Юрьевич
Магистрант кафедры «Программирования и информационных
технологий»,
ФГБОУ ВО «Воронежский государственный университет»,
Россия, г. Воронеж
Аннотация. Иногда
разработка веб-приложения с возможностью встраивания в другое является
единственным способом избежать повторной реализации уже готовой
функциональности или наиболее быстрым и удобным способом добавить новые
функции. В таких ситуациях велик риск выбора неподходящего для ситуации метода
встраивания, что может повлечь за собой большие затраты ресурсов на переделку
приложения в будущем. Поэтому необходимо четко понимать преимущества и
недостатки подходов и распознавать типичные ситуации, когда тот или иной способ
встраивания работает лучше остальных. В рамках данной статьи проведен
сравнительный анализ трех наиболее распространенных подходов для создания
встраиваемых веб-приложений: iframe,
распространяемая JavaScript-библиотека,
Web
Components.
Ключевые слова: встраиваемые
веб-приложения, iframe,
Web Components, JavaScript,
Shadow DOM.
Введение. Первым
из рассматриваемых способов создания встраиваемых веб-приложений является Inline frame (iframe). Он представляет собой вложенный
контекст браузера, встраивающий полностью какую-либо HTML-страницу в родительскую. Контекст
браузера, связанный с элементом iframe,
имеет свою собственную HTML-разметку
и историю просмотренных страниц [3], то есть по своей сути iframe является вложенным в родительскую
страницу окном браузера с отображаемой там другой страницей, поэтому в фрейм
можно встроить любое веб-приложение без какой-либо существенной предварительной
подготовки.
Следующим
рассматриваемым способом является создание распространяемой JavaScript-библиотеки. Он
заключается в создании веб-приложения и опубликовании его в хранилище пакетного
менеджера NPM,
в CDN или
просто на веб-сервере. Встраивание такого веб-приложения осуществляется
импортированием исходного кода и его дальнейшим использованием в
хост-приложении.
Также
существует способ с использованием стандарта Web Components. Данный стандарт
является набором спецификаций, которые описывают возможность создания
встраиваемых веб-приложений, изолированных от документа, в который они
встраиваются [5]. Встраивание может осуществляться как через JavaScript API, так и просто добавлением компонента
в HTML-разметку.
В
данной статье будут рассмотрены различия всех трех названных способов по восьми
различным критериям.
Независимость от
технологий хост-приложения. Как уже было сказано выше, iframe представляет из себя отдельное окно
браузера, встроенное в хост страницу. Данный факт позволяет не задумываться о
совместимости технологий родительского приложения и встраиваемого. С другой
стороны, при встраивании веб-приложения с использованием распространяемой JavaScript-библиотеки возникает
необходимость следовать технологиям родительской страницы, так как исходный код
библиотеки импортируется в хост-приложение. Это означает, что если
хост-приложение написано, например, на фреймворке React, а встраиваемое на Angular, то данный способ
работать не будет. Стандарт Web
Components
явно указывает, что является независимым от каких-либо библиотек и фреймворков
и использует только встроенную в браузеры функциональность HTML, CSS, JavaScript, поэтому, как и в случае
с iframe,
задумываться о совместимости технологий не надо.
Простое взаимное общение
с хост-приложением. Передача параметров в загружаемую
страницу в iframe
осуществляется через URL
в атрибуте src.
Это накладывает ограничения на структуру передаваемых данных и их длину. Прямой
доступ к методам и полям из хост-страницы во фрейм и обратно доступен только
если они имеют общий протокол, порт и домен в силу соблюдения норм безопасности
приложений согласно политике Same
Origin.
Это означает, что в случае невыполнения политики, для взаимного общения
необходимо использовать кросс-оконные сообщения с помощью API window.postMessage() и добавлять
обработчики сообщений к окнам. Помимо рисков безопасности при неправильном
использовании [4] такой подход также является довольно хрупким из-за отсутствия
явного контракта по типу и структуре событий между хост-страницей и фреймом, а
также плохо масштабируемым из-за привязки только одной функции-обработчика
сообщений. Подход с распространяемой библиотекой обеспечивает максимально
простое и удобное взаимодействие между хост-приложением и встраиваемой
библиотекой, так как они находятся в пределах одного контекста браузера и
хост-приложение использует только те поля и методы, которые были открыты
разработчиками библиотеки. Стандарт Web Components также подразумевает простое общение с
хост-приложением, как и в подходе с библиотекой. Добавив поля и методы к классу
веб-компонента, они будут доступны для вызова из JavaScript API элемента. Кроме того, стандарт Web Components также предоставляет
методы жизненного цикла веб-компонентов и механизм отслеживания изменения
атрибутов HTML-элемента
веб-компонента хост-страницей. Вызовы родительской страницы из веб-компонента
также осуществляются напрямую из-за нахождения в общем контексте браузера.
Возможность стилизации
встраиваемого веб-приложения. В случае с фреймом и
выполненной политикой Same
Origin
есть возможность добавлять CSS-файлы
к фрейму или менять inline-стили
через JavaScript
API,
в случае, когда Same
Origin
не выполняется - осуществить какую-либо стилизацию из хост-страницы невозможно.
В подходе с распространяемой библиотекой нет каких-либо трудностей, так как
работа с разметкой библиотечного компонента осуществляется точно также, как и с
разметкой хост-приложения. Стандарт Web Components предоставляет два способа
отображения внутренностей встраиваемых веб-приложений: Light DOM и
Shadow DOM. При использовании Light DOM стилизация осуществляется как в
случае с распространяемой библиотекой, в то время как при использовании Shadow DOM HTML-код веб-компонента инкапсулируется и
становится недоступен для стилизации извне стандартными CSS-свойствами. Спецификация Shadow DOM стандарта Web Components позволяет разработчику
веб-компонента самостоятельно определять места в стилях, которые могут быть
изменены хост-страницей, с помощью пользовательских свойств [2]. Кроме того,
стили самого контейнера веб-компонента могут быть беспрепятственно
переопределены из хост-приложения.
Защита от конфликтов в CSS и JavaScript хост-приложения и встраиваемого.
При использовании iframe
нет никакого риска конфликтов, так как встраиваемая страница находится в
отдельном контексте браузера с отдельным DOM деревом. Распространяемая JavaScript-библиотека несет в себе
большие риски [1], так как библиотека может:
·
переопределить стандартные JavaScript-функции, используемые
хост-приложением;
·
пропустить обработку возникшей в ней
ошибки, приведя к поломке родительской страницы;
·
перезаписать слушателей событий на
каком-либо из элементов в DOM
вместо добавления нового;
·
определить CSS-правила с слишком общими
селекторами, изменив тем самым внешний вид хост-страницы;
Все
описанные выше пункты скорее являются ошибками разработчиков библиотеки, но это
не избавляет от рисков их существования. Web Components, благодаря спецификации Shadow DOM избавлены от риска конфликтов в CSS-правилах, что улучшает ситуацию по
сравнению со встраиваемой библиотекой.
Дополнительные
затраты на обеспечение возможности встраивания приложения. Способ с
использованием iframe
почти не требует дополнительных усилий для превращения обычной страницы во
встраиваемую. Необходимо опубликовать страницу в общем доступе и проследить,
что HTTP-заголовок
X-Frame-Options позволяет осуществлять
встраивание во фрейм. Разработка распространяемой JavaScript-библиотеки может
потребовать значительных дополнительных затрат в силу обеспечения совместимости
с технологиями хост-приложения. Web
Components
не зависят от технологий хост-страницы, но все же требуют дополнительных усилий
по упаковке веб-приложения в веб-компонент, однако затраченные в этом случае
усилия несравнимы с таковыми в подходе с JavaScript-библиотекой.
Заключение. В
рамках данной был проведен сравнительный анализ фреймов, распространяемых JavaScript-библиотек и Web Components в качестве способов создания
встраиваемых веб-приложений. Из приведенного выше анализа следуют следующие
выводы для каждого из методов:
·
Iframe
лучше
подходит для случаев, когда необходимо реализовать встраиваемое веб-приложение
с минимальными затратами и допустимо отсутствие возможностей для кастомизации.
·
Распространяемая JavaScript-библиотека лучше
подходит для случаев, когда разработчикам встраиваемого веб-приложения хорошо
известны технологии их клиентов, необходима кастомизация приложения и широкое
взаимодействие с хост-приложением.
·
Web
Components.
Объединяет в себе достоинства двух предыдущих способов и обеспечивает
сравнительную легкость создания встраиваемого веб-приложения с возможностью
кастомизации и простым взаимодействием с хост-страницей.
Список
использованной литературы:
1.
Best
practices
for building embeddable widgets [Электронный ресурс]. –
Режим доступа: https://codeutopia.net/blog/2012/05/26/best-practices-for-building-embeddable-widgets/ (дата обращения:
17.05.2019)
2.
Shadow
DOM v1: Self-Contained Web Components [Электронный ресурс]. –
Режим доступа: https://developers.google.com/web/fundamentals/web-components/shadowdom (дата обращения:
15.05.2019)
3.
The
iframe element [Электронный ресурс]. –
Режим доступа: https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html (дата обращения: 12.05.2019)
4.
The
pitfalls
of postmessage [Электронный ресурс]. –
Режим доступа: https://labs.detectify.com/2016/12/08/the-pitfalls-of-postmessage/ (дата обращения:
15.05.2019)
5.
Web
Components
[Электронный ресурс]. – Режим доступа: https://developer.mozilla.org/en-US/docs/Web/Web_Components (дата обращения:
12.05.2019)
COMPARATIVE ANALYSIS OF WAYS TO CREATE EMBEDDED WEB
APPLICATIONS
Bogomolov D.Y.
Abstract. Sometimes
embedded web applications is the only option to avoid code duplication or to
add new features in the fastest and most convenient way. In such situations, it
is very important to understand advantages and disadvantages of different
methods of embedded web applications creation in order to avoid spending
additional resources on reimplementation of embedded functionality in future.
In this article iframe, JavaScript library and Web Components considered as ways
to create embedded web applications and compared with each other using five
different criterion.
Keywords:
Embedded web
applications, iframe, Web Components, JavaScript, Shadow DOM.
References:
1.
Best
practices for building embeddable widgets [Electronic resource]. – URL: https://codeutopia.net/blog/2012/05/26/best-practices-for-building-embeddable-widgets/
(access date: 17.05.2019)
2.
Shadow
DOM v1: Self-Contained Web Components [Electronic resource]. – URL:
https://developers.google.com/web/fundamentals/web-components/shadowdom (access
date: 15.05.2019)
3.
The
iframe element [Electronic resource]. – URL:
https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html (access
date: 12.05.2019)
4.
The
pitfalls of postmessage [Electronic resource]. – URL: https://labs.detectify.com/2016/12/08/the-pitfalls-of-postmessage/
(access date: 15.05.2019)
5.
Web
Components [Electronic resource]. – URL:
https://developer.mozilla.org/en-US/docs/Web/Web_Components (access date:
12.05.2019)