Мы очень быстро привыкли к программному обеспечению для совместной работы в Интернете в реальном времени. Мы можем вместе писать в Google Docs, делать макеты интерфейсов в Figma, редактировать вычислительные блокноты в Observable, а мы можем делиться своими документами, просто скопировав URL.
Мы также привыкли к приложениям, работающим на наших устройствах. Spotify позволяет легко управлять воспроизведением музыки на портативном компьютере с телефона, а Apple's handoff позволяет продолжать работу при переключении между устройствами.
Однако создание программного обеспечения, позволяющего осуществлять совместную работу, совместное использование контента и распространение между устройствами, требует использования сложных структур и способности создавать сопоставления между абстрактной моделью данных и конкретным HTML-кодом страницы.
В нашей исследовательской лаборатории в Орхусском университете мы создали Веб-страницы. Мы используем веб-страницы, чтобы понять, что бы они значили, если бы эти возможности были неотъемлемой частью Интернета и могли бы быть задействованы, используя базовые навыки веб-разработки.
Веб-страницы совместно создают объектную модель документа (DOM) веб-страницы. редактируемый. Что это обозначает? Это означает, что любые изменения, внесенные в документ веб-страницы, будут синхронизироваться с другими клиентами той же страницы и сохраняться при перезагрузках. Мы называем такую веб-страницу веб-страницей (сокращенно от веб-субстрата).
Этот механизм можно использовать для создания сложных веб-приложений, где в основном нет серверной логики, кроме синхронизации и хранения данных. Вот пример инструмента для совместной работы, созданного в нашей лаборатории:
Webstrates синхронизирует изменения, внесенные в HTML, JavaScript или CSS, встроенные в страницу, что позволяет эффективно выполнять совместную веб-разработку. Здесь ошибка стиля исправлена в простом приложении чата путем изменения CSS прямо из инструментов разработчика:
Однако есть пределы удовольствия от разработки программного обеспечения с помощью инструментов разработчика браузеров - по иронии судьбы. Поэтому мы создали инструмент, который позволяет редактировать веб-страницу из вашего любимого настольного редактора:
Но мы также разработали среду, вдохновленную игровыми площадками для кода и вычислительными блокнотами, которая позволяет разрабатывать приложения изнутри под названием Codestrates, даже совместно:
Подробный отчет о Codestrates будет темой другого поста, но стоит пояснить, что codestrate полностью самодостаточен и написан сам по себе.
Это пакет HTML, JavaScript и CSS, который устанавливает среду где он может редактировать себя.
Конечно, есть также такие ресурсы, как двоичные изображения, библиотеки JavaScript и другие вещи, а Webstrates предоставляет простой механизм для загрузки и связывания ресурсов с веб-страницей.
Codestrates позволяет очень легко и быстро создавать совместные веб-приложения , и это сокращает разрыв между использованием и разработкой программного обеспечения.
На самом деле Webstrates не делает технического различия между регулярным использованием и разработкой, поскольку все постоянное состояние - будь то данные пользователя или код приложения - просто хранится в DOM. Мы вернемся к этому через минуту, но сначала я хочу проиллюстрировать, как веб-страницы могут изменить наши представления о совместной работе.
Большинство совместных редакторов предполагают, что пользователи используют один и тот же интерфейс для совместной работы. Однако следует учитывать это последствие использования модели DOM в качестве уровня сохраняемости для совместных приложений.
С помощью iframe вы можете сделать это:
Здесь веб-страница нестилизованного документа редактируется через другую веб-страницу с использованием того, что в терминологии гипермедиа называется включением.
Левая веб-страница открывает правую в iframe и вводит некоторый CSS, чтобы заставить ее придерживаться формата ACM для научные статьи.
Умный читатель может понять, к чему мы идем, потому что теперь двум пользователям не нужно использовать один и тот же редактор для совместной работы. Мы называем это асимметричным сотрудничеством.
Этот механизм также может позволить вам сотрудничать с вами:
Но можно сделать еще один шаг вперед. Затем фигура в документе реализуется как независимая веб-страница, встроенная в iframe в документе, которую можно редактировать с помощью различных инструментов на разных устройствах, обновляя при этом в режиме реального времени, где она используется.
Поскольку бумажный редактор представляет собой веб-страницу, его также можно редактировать - то, что мы называем гибкостью программного обеспечения. В следующем GIF-изображении инструмент для управления цитированием экспортируется из одного редактора и вставляется в другой. Пользователь слева экспортирует фрагмент HTML из своего редактора и вставляет его в другой с помощью панели инструментов. Обратите внимание, как инструмент сразу становится доступным для пользователя справа.
Здесь мы просто сохранили код для инструмента цитирования на его собственном веб-сайте, которым можно поделиться по ссылке и загрузить в скрытый iframe.
Чтобы обеспечить совместную работу в реальном времени, мы используем такие же алгоритмы, например в Google Docs под названием Operational Transformation (OT).
Мы используем фреймворк с открытым исходным кодом ShareDB для хранения и синхронизации веб-страниц. OT полагается на ведение журнала всех изменений в документе (называемых операциями). У этого есть приятный побочный эффект, заключающийся в том, что у нас есть доступ к полной истории версий веб-страницы, вплоть до отдельных нажатий клавиш. Когда программное обеспечение податливо, управление версиями становится одной из основных защит, когда что-то ломается. Подробнее о версиях читайте в документации.
В нашей исследовательской лаборатории мы широко используем веб-страницы для наших исследовательских прототипов и инструментов, которые мы используем ежедневно. Например, совсем недавно Webstrates использовалась для экспериментов с системой автоматического распределения визуализаций данных по доступным устройствам.
Или здесь, где сочетание веб-страниц и кодовых страниц используется для создания интерактивных заданий по программированию для наших студентов первого курса университета.
Вы можете скачать Веб-страницы из нашего репозитория на github, чтобы самостоятельно настроить веб-сервер. Документация здесь, а на webstrates.net вы можете найти исследовательские работы и видео по проекту.
Вы также можете попробовать наш демонстрационный сервер, вы даже можете создать на нем свой собственный код или поиграть с платформой визуализации данных, которую мы создали на его основе.
