Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>11 авг 2022</li>

3 <li>0</li>

4 </ul>Какие разработки нужны, когда проводишь конференции для самих разработчиков?

5 Журналист, редактор. Фанат виртуальности во всех её видах - потому о ней и пишет.

6 Руководитель разработки JUG Ru Group. Ранее работал в "Альфа-Банке" и телекоммуникационной компании LaNetroZed. Фулстэк-разработчик на .NET и JavaScript. Ментейнер проекта Flurl. Придерживается принципов разработки TDD и BDD.

7 Компания<a>JUG Ru Group</a>проводит конференции уже девять лет: сначала в офлайне, потом, из-за пандемии, в онлайне, а теперь совмещает оба формата. Их организаторы не только дают программистам площадку для выступлений, но и сами пишут код.

8 На конференции<a>DotNext</a>руководитель разработки Николай Молчанов рассказал о том, как у них всё устроено:

9 <ul><li>какие этапы проходит доклад от заявки до трансляции на портале;</li>

10 <li>какие части системы за что отвечают;</li>

11 <li>на каких технологиях они описаны;</li>

12 <li>как всё вместе работает.</li>

13 </ul>Три года назад, когда я пришёл в компанию, я думал, что в организации конференций нет ничего сложного - берёшь Microsoft Excel, указываешь там доклады и проводишь:

14 Скриншот: личный архив Николая МолчановаНа самом деле всё куда сложнее. Вот схема, которая упрощённо описывает процесс создания конференции:

15 Изображение: личный архив Николая МолчановаМы кратко поговорим о блоках, которые соединяются, чтобы доклад стал трансляцией или выступлением в офлайне.

16 Вот как выглядит весь процесс:

17 <ul><li>спикер подаёт заявку;</li>

18 <li>она попадает в специальную SRM‑систему (Speaker Relationship Management);</li>

19 <li>её оценивает программный комитет конференции;</li>

20 <li>спикер тренируется;</li>

21 <li>описание доклада попадает на сайт конференции;</li>

22 <li>из докладов формируется программа конференции;</li>

23 <li>спикер выступает с докладом.</li>

24 </ul>Рассмотрим все этапы поочерёдно.

25 Раньше на сайте каждой нашей конференции был свой CFP (call for papers, приём заявок). Теперь мы стараемся унифицировать интерфейсы, чтобы у всех был единый опыт. Подача заявки выглядит так:

26 Скриншот: личный архив Николая МолчановаТак как мы поддерживаем систему авторизации SSO (single sign‑on), то часть полей можем заполнить за спикера.

27 После подачи заявка попадает в систему SRM. Там у спикера есть личный кабинет (ЛК), где он видит все свои текущие и прошлые заявки. Это выглядит так (на моём примере):

28 Скриншот: личный архив Николая МолчановаВ феврале мы столкнулись с вынужденным импортозамещением: пришлось мигрировать с CMS Contentful на внутреннюю систему. Мы импортировали туда контент по 145 конференциям, 3605 активностям и 2207 участникам.

29 Личный кабинет спикера - это ERP‑система, где он может править свою биографию, описания докладов, подгружать презентации, менять фото. Программный комитет конференции, координаторы и редакторы также могут корректировать эту информацию и публиковать её на сайте.

30 Для наших "онлайново-офлайновых" времён очень важны формат выступления (офлайн, онлайн удалённо или из нашей студии), поездки, локации для эфирной команды и прочее.

31 Скриншот: личный архив Николая МолчановаЕсли спикер обновляет свою биографию, правки вносятся только на сайтах конференции текущего сезона, а на сайтах прошедших сезонов остаётся соответствующая им версия (их можно править отдельно).

32 После того как спикер внёс информацию, редактор проверяет данные по заявкам и спикерам и публикует доклады на сайте.

33 Скриншот: личный архив Николая МолчановаНа изображении выше видно, что у записей есть статус: "Ожидает ревью" или "Опубликован". После редактирования доклад попадает на сайт.

34 Ниже представлена схема публикации:

35 Изображение: личный архив Николая МолчановаСпикер создаёт биографию в SRM (или использует готовую, если ранее уже выступал у нас). Команда проверяет и редактирует её. При помощи специального фасадного сервиса Core API, который объединяет все наши сервисы и бэкенды под одним API, контент публикуется в виде блоков.

36 Теперь о наших конференционных сайтах. У нас есть целый<a>ряд конференций</a>, и у каждой - свой сайт со всей информацией о ней. А ещё есть единый сайт<a>live.jugru.org</a>("Лайв"), на котором проходят все онлайн-трансляции.

37 Раньше эти сайты жили собственной жизнью: создавались в разное время, разными людьми, совершенно на разных технологиях. Их правка, а тем более внесение изменений в одинаковые блоки либо добавление одинакового логотипа на все сайты были большой болью.

38 Мы ушли от этого и сделали conference site engine:

39 Скриншот: личный архив Николая МолчановаЭто единый движок для наших сайтов, своеобразный монорепозиторий, собранный на Next.js, с кэшем на Node.js. Все конференционные сайты занимают 42 контейнера на среду. Так мы поддерживаем их все одновременно.

40 Вот схема сборки сайта для конференции JUG Ru Group:

41 Изображение: личный архив Николая МолчановаЕсть Core API как фасадная система. При помощи специальных build jobs код из Git‑репозитория соединяется с кэшем, и собирается определённый инстанс. После этого он публикуется в трёх средах. Внесение изменений в кодовую базу порождает изменения на всех сайтах одновременно.

42 Именно поэтому все сайты выглядят примерно одинаково: есть стандартная авторизация и однотипные блоки. При условии готовности маркетинговых материалов мы можем выгрузить сайт новой конференции за полдня.

43 Мы придерживаемся следующих принципов:

44 <ul><li>единство терминологии;</li>

45 <li>единый опыт участников конференции и команды;</li>

46 <li>SSO на всех сайтах;</li>

47 <li>похожая визуализация однотипных блоков;</li>

48 <li>доступ участников к трансляции в два действия.</li>

49 </ul>Интерфейсы наших сайтов очень похожи. Везде поддерживаются светлая и тёмная темы и однотипные блоки. Карточки докладов тоже выглядят одинаково на сайте конференции и на "Лайве":

50 Скриншот: личный архив Николая МолчановаСкриншот: личный архив Николая МолчановаЧтобы карточки появились на сайтах, нужно сформировать расписание. Чаще всего это делают с помощью редактора:

51 Скриншот: личный архив Николая МолчановаОн формирует программу по трекам простым перетаскиванием. Этим инструментом пользуются координатор и программный комитет. Здесь довольно много метаинформации для редактирования сущностей, проставления тегов, сложности, языка активности и так далее. Также здесь можно прописать спикеров и зал, в котором пройдёт конференция.

52 Итак, программа опубликована - пора проводить конференцию. Давайте подключим спикеров. Они присоединяются на время доклада через Speaker Room - наш собственный инструмент для подключения спикеров. Это WebRTC‑решение, в прошлом работавшее на основе решения Voximplant, а теперь - на движке "VK Звонков". Оно позволяет демонстрировать экран с презентацией и подключать экран удалённых спикеров.

53 У нас есть студии в Санкт‑Петербурге. При желании участник может прийти в студию и выйти оттуда в эфир:

54 Фото: личный архив Николая МолчановаЕсть ПТС - передвижные телевизионные станции, которые монтируют видео и отгружают его в транскодер. Видео воспроизводится в плеере - мы написали его сами поверх HLS.js.

55 Изображение: личный архив Николая МолчановаСверху на схеме - Speaker Room, где подключаются удалённые спикеры. Внизу - студии, куда приходят участники. Видео через WebRTC или сырой видеосигнал поступает в ПТС, там монтируется и проходит дальше по пайплайну. ПТС представляют собой большие комнаты с кучей компьютеров с мощными видеокартами, там и происходит рендеринг и монтаж видео.

56 Изображение: личный архив Николая МолчановаСтудия может дать изображение из эфира или изображение продюсера эфира. ПТС при помощи специального веб-клиента подключаются к тому же самому Speaker Room через специальные receive-only-клиенты, которые не показывают видео, а только забирают его. После этого видео попадает в ПТС, при помощи которого можно переключать шаблоны веб-страниц и что-то добавлять в видео. Можно также настраивать звук, микшировать его и устранять огрехи.

57 После того как видео обработано в ПТС, сжато и готово к продакшену, оно отправляется через протокол SRT в сервисе Amazon MediaConnect.

58 Изображение: личный архив Николая МолчановаВ Amazon видео транскодируется в 4K-разрешение. Затем пакуется в контейнер HLS и отправляется сначала в S3, а затем в CloudFront для распространения по всему миру - чтобы участники быстро получали доступ к видео в любой точке планеты. С помощью стрим-сервиса и "Лайва" клиентский плеер получает специальные плейлисты, которые генерируются на лету, чтобы клиентская часть знала, какой чанк нужно подгружать.

59 Когда пользователь пытается скачать видео, в игру вступают HTTP Cookies. В них мы заранее записываем подписанный объект, содержащий информацию о правах доступа пользователя. Благодаря подписи, на CloudFront можно проверить права и авторизовать доступ к конкретному контенту.

60 Если пользователь сменил конференцию или права на билет были изменены, то он будет приходить на CloudFront с новым значением Cookie.

61 Изображение: личный архив Николая МолчановаПлеер общается с бэкендом - Java-сервисом на основе Hazelcast. Каждые пять секунд плеер отправляет информацию о том, какой пользователь какой кусочек видео смотрит в определённый момент. Это нужно для статистики, аналитики, графиков просмотра и прочей информации, собираемой в реальном времени. Таким образом бэкенд пересчитывает количество пользователей на докладах, статистику по пользователям, оценки доклада и дискуссии.

62 Раньше у нас был один большой стрим, разбитый на несколько участков: "Доклад 1", "Доклад 2" и так далее. Всё было привязано к конкретному времени. С этого лета все доклады "плавающие" - нет жёсткого расписания, согласно которому доклад должен закончиться в определённое время, чтобы уступить место следующему. То же самое с дискуссиями - были случаи, когда они продолжались по четыре часа.

63 У эфирной команды есть свой инструмент с управляющими элементами, которые позволяют остановить доклад, выключить его и так далее. Данные из онлайн‑бэкенда попадают в аналитическое хранилище, где много данных из разных систем соединяются и при помощи джобов материализуются во много разных представлений. Они помогают нам составить статистическую картину.

64 Теперь мы можем увидеть на графиках количество посещений каждой конференции, узнать, какие оценки зрители поставили докладам и какие из них добавили в избранное. Можно отправить фидбэк спикерам и сделать наши следующие конференции и доклады интереснее.

65 Авторизация в JUG Ru Group работает по принципу single sign-on. Это значит, что пользователю достаточно зайти в одну из наших систем, чтобы авторизоваться во всех остальных.

66 Изображение: личный архив Николая МолчановаЕсть два личных кабинета: кабинет, где пользователь получает билет и авторизуется на сервере, и кабинет для хранения коротких кодов доступа к видео. Мы ещё не использовали их в продакшене, но планируем в будущем, чтобы упростить пользователю доступ и авторизовывать по одной ссылке.

67 В центре - фронтенд-бэкенд-сервис, который соединяет авторизацию OIDC (OpenID Connect) и личный кабинет со всеми сайтами конференций, Speaker Room, SRM, внутренними инструментами и "Лайвом". Пользователь может авторизоваться через сервисы Google, "Яндекса" или Apple, если ему неудобно авторизоваться с помощью почты.

68 У нас был выбор: делать собственный инструмент или использовать готовые сервисы вроде<a>Okta</a>или OAuth. Мы решили сделать своё. И не прогадали: в апреле 2022 года оба сервиса перестали работать в России.

69 Изображение: личный архив Николая МолчановаМы многопрофильная компания, поэтому используем много всего.

70 "Лайв" и личный кабинет написаны на Java, а сервисы вокруг них содержат компоненты на .NET. Те же сервисы, что поближе к Speaker Room, написаны на Node.js.

71 Для хранения данных во фронтенде используем MobX, а от Redux по разным причинам отказались. В веб-сокетах применяем Socket.IO. И в DevOps всё достаточно обычно. С облаками работали практически со всеми, с лета 2020 года - в основном с Yandex Cloud.

72 Этой весной мы опробовали режим, когда первые дни конференции проходят в онлайне, а в последний участники могут собраться вместе на офлайновой площадке. Так что теперь мы сочетаем и описанную выше онлайн-специфику (чтобы у всех всё хорошо запускалось в видеоплеере), и офлайновую (чтобы с реальной физической сцены для зрителей в зале всё тоже хорошо звучало).

73 Осенью планируем снова провести подобное, но уже с другим набором конференций - полный календарь можно будет увидеть на <a>jugru.org</a>.

74 <a>Научитесь: Как зарабатывать на презентациях Узнать больше</a>