Как встроить приложение React / Angular во всплывающий стиль виджета - PullRequest
0 голосов
/ 07 мая 2020

Так что это больше вопрос о дизайне / инструментарии (кода для показа нет)

Идея:

У меня есть идея веб-приложения, которое я хотел бы реализовать, используя либо React / Angular действительно зависит от результата этого обсуждения. Идея состоит в том, что я хочу собрать свое веб-приложение и встроить его на любой веб-сайт, используя как можно меньше кода. Конечным результатом для веб-сайта, на который он встроен, будет новая кнопка «стиль виджета», парящая в углу, при нажатии на которую открывается мое новое приложение React / Angular во всплывающем окне или окне модального стиля наложения.

Чтобы быть ясным, я хочу, если возможно, предоставить клиентскому веб-сайту как можно меньше кода, например:

<script src="https://myappurl.js"><script>
<some-new-element-in-html-body?> </some-new-element-in-html-body?>

Это оставит их с кнопкой стиля виджета, при нажатии на которую открывается мое приложение как остановка

The How:

Теперь я знаю, что, вероятно, есть несколько способов реализовать это. У меня опыт разработки Angular в качестве разработчика полного стека, поэтому встраивание приложений в веб-сайты было бы для меня новой концепцией. Я предполагаю, что результат, который я хочу получить, аналогичен результату приложения виджета чата на веб-сайте. Я изо всех сил пытаюсь найти в Интернете лучшее решение или набор инструментов для работы.

Веб-компоненты кажутся появилось довольно много. Это привело бы к тому, что мне пришлось бы предоставить веб-сайту тег и новый элемент html, но можно было бы добавить кнопку стиля виджета, которая запускала бы всплывающее окно приложения. Я также читал, что размеры пакетов React / Angular могут быть слишком большими для веб-компонентов даже в небольших приложениях, поэтому может быть предпочтительнее что-то вроде preact? Снова стоит тот же вопрос выше. Это видео на YouTube объясняет веб-компоненты preact / response и задается вопросом, лучший ли это вариант - https://www.youtube.com/watch?v=PUGDzA1uP-Y&t=545s

iFrames определенно вариант, если бы я хотел просто смонтировать приложение с любым другим сайтом. Тем не менее, это не совсем то, что мне нужно, так как, хотя мне нужно приложение, содержащееся в нем, я также хочу иметь возможность добавить эту кнопку настраиваемого стиля виджета на веб-сайт хоста без необходимости напрямую редактировать веб-сайт.

Библиотеки UMD - снова кое-что, что я встречал, но это наиболее неясно, и чем они отличаются или могут принести пользу моему конкретному сценарию c по сравнению с веб-компонентами. Теперь я могу лаять совершенно неправильное дерево, и если бы вы могли, добрые люди, укажите мне правильное направление того, на что я должен смотреть.

Мне также может понадобиться рассмотреть 2 приложения, одно для рендеринга кнопки, которая быстро загружается и затем облегчил наложение всплывающего / модального типа, а затем тот, который загрузил мое приложение с помощью одного из 3 методов, упомянутых выше?

ЗАРАНЕЕ СПАСИБО! :)

...