первоначально опубликовано в Eikos Partners

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

В прошлом вам, возможно, приходилось звонить/иметь мгновенные сообщения/электронные письма своим коллегам и говорить: «Хорошо, перейдите на страницу Stock Performance, выберите TCKR, отфильтруйте по объему продаж по четвергам в 2016 году — кнопка для этого находится внизу левый угол — нет Левой стороны. Может быть, это покрыто вашими стикерами. Забудьте об этом, давайте сделаем скриншот».

Теперь есть более простой способ. Мы внедрили систему, в которой одним нажатием кнопки вы можете поделиться всем своим реактивным представлением с кем-либо еще, использующим приложение. Это работает в браузерах, операционных системах, средах выполнения и сетях. Пока обе стороны подключены к Интернету, вы можете отправлять или получать всю страницу, контент и контекст. Двумя ключевыми технологиями в этом процессе являются динамические компоненты Vue и WebSockets.

Ниже видео-демонстрация. При просмотре видео вы можете увидеть, как страница из Chrome на Mac появляется в двух разных средах выполнения Windows (Chrome и OpenFin).

Я знал, что хочу использовать WebSockets для этой функциональности, потому что мы не хотели, чтобы принимающий пользователь должен был что-либо делать (кроме того, чтобы приемник был открыт). В более распространенном протоколе HTTP клиент/получатель должен инициировать всю связь, что отлично подходит для многих ситуаций; вы бы не хотели, чтобы серверы New York Times просто передавали новости по воздуху к вам без того, чтобы вы или ваше телефонное приложение искали информацию. Но для чего-то подобного или мессенджера лучше всегда оставлять пути связи открытыми. Затем, поскольку он всегда слушает, он может начать действовать, как только услышит соответствующее ключевое слово.

Наш Вью

Если вы читали наш блог (или шумиху вокруг интерфейсных фреймворков в Интернете), вы знакомы с Vue; если нет, я подожду, пока вы разберетесь с нашими архивами.

Функция динамического компонента может варьироваться от базовой до сверхмощной, особенно в сочетании с импортом асинхронного компонента. Ключевой прорыв для этого проекта произошел, когда я наткнулся на эту публикацию в блоге Алекса Скотта, из которой я узнал, что асинхронные компоненты можно определить как вычисляемые свойства.

Как только вы объедините параметры из сообщения WebSocket с этими гибкими вычисляемыми асинхронными компонентами, воссоздать представление Vue будет удивительно просто. Получающая страница совершенно наивна в отношении того, что она может отображать, пока не услышит сообщение. Он просто знает, что готов отрисовать некоторое количество динамических компонентов, специфика которых совершенно не определена.

Хотя это описание упрощено, под капотом проделан значительный объем работы по сбору деталей реализации каждого компонента — в дополнение к стилям страниц и темам приложений. Трудно идти дальше, не принимая во внимание такие вещи, как структура репозитория или настройка сервера WebSocket (с соответствующими прослушивателями событий и источниками).

Одна из возможностей, которую мы рассматривали, — это инкапсуляция этой функциональности в плагине Vue, который мы могли бы опубликовать и открыть исходный код. Тем не менее, прежде чем мы сможем двигаться по этому пути, необходимо учесть множество соображений по настройке. Будете ли вы заинтересованы в использовании этого плагина, если мы его сделаем?