Создание видеочата на базе React

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

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

Мы увидим, насколько это просто, взяв за основу Twilio Video Quickstart и заменив часть приложения, отвечающую за беседу, на компонент React. Если вы хотите сразу перейти к конечному результату, вы можете скачать готовый код с GitHub.

Прежде чем начать, нам нужно установить и подготовить следующее:

— Node.js для запуска приложения.

— Аккаунт Twilio (зарегистрируйтесь для бесплатной учетной записи здесь).

Я также предполагаю, что у вас есть базовое понимание работы React. Если вы только начинаете изучать React, рекомендую ознакомиться с отличной вводной статьей моего друга Сэма.

Начнем с клонирования и настройки Twilio Video Node.js Quickstart, который предоставит нам пример приложения Twilio Video, созданного с использованием jQuery. Мы будем использовать это как отправную точку. Пройдите инструкции в README.md, это займет около 5 минут, чтобы запустить приложение. Откройте две вкладки браузера и начните беседу, вставив сгенерированный идентификатор из одной вкладки в поле другой.

Далее нам нужно установить зависимости для разработки, необходимые для интеграции React. Два основных пакета — это Babel и Webpack. Babel — это инструмент для преобразования нового JavaScript-кода в код, который может выполняться в современных браузерах, а Webpack — это сборщик модулей, который объединит весь наш JavaScript в один файл и пропустит код через Babel. У Сэма также есть отличная статья о том, что делают эти пакеты, если вам нужно более подробное объяснение.

Список довольно длинный, так что приготовьтесь.

Из директории Quickstart выполните:

Давайте создадим файл, который нам понадобится для настройки Webpack и Babel. Это очень базовая конфигурация, которую можно использовать повторно для большинства проектов.

Создайте файл с именем `webpack.config.js` в корне проекта:

Затем замените `public/index.html` следующим содержимым.

Мы добавили новый CSS-файл и изменили тег `script`, чтобы он указывал на JavaScript-бандл, который генерирует Webpack. Мы также удалили `div` с `remote-media` и переименовали `div` с `local-media` в `local-conversation`. Именно здесь будет монтироваться наш компонент React.

Теперь нам нужно изменить сервер для использования Webpack. Откройте `index.js`, импортируйте Webpack, Webpack Dev-Middleware и конфигурацию Webpack, которую мы написали. Затем скажите Express использовать webpack middleware для компиляции и обслуживания клиентского JavaScript-бандла.

Запустите сервер и проверьте вывод Webpack для проверки работоспособности.

Пришло время создать наш компонент React, который мы назовем ConversationContainer. Наша цель — перенести как можно больше логики Twilio Conversation в наш компонент.

Начнем с подключения библиотек React и нашего будущего файла. Откройте `public/quickstart.js` и внесите следующие изменения:

Внутри функции `conversationStarted` мы будем инициировать монтирование и размонтирование компонента. Замените всю функцию следующим кодом. Обратите внимание, что мы удалили логику `conversation`; мы перенесем её внутрь компонента.

Теперь мы готовы создать наш компонент React ConversationContainer. Создайте новый файл в папке `public` с именем `conversationContainer.jsx`:

Этот компонент довольно простой. Он ожидает экземпляр Twilio Conversation, переданный в качестве пропса (способ передачи данных от родительского компонента к дочернему). Метод `render` возвращает два `div`, к которым подключается медиа участников. Обратите внимание на атрибут `ref=` у этих `div` — это значительно упрощает поиск этих элементов внутри нашего компонента.

Методы `componentDidMount` и `componentWillUnmount` теперь обрабатывают логику беседы, которая была ранее. Жизненные циклы компонентов React очень гибкие и решают множество проблем с состоянием за вас.

Наконец, добавим немного простого CSS, чтобы всё выглядело отлично. Создайте `public/style.css` со следующим содержимым:

Теперь мы готовы запустить приложение и протестировать наши изменения. Запустите сервер, выполнив следующую команду.

Как и раньше, откройте http://localhost:3000 в двух вкладках браузера и начните звонок.

React сразу же подключается и добавляет новый блестящий компонент в DOM. Закройте одну вкладку и посмотрите, как в другой беседа волшебным образом размонтируется и будет готова к повторному использованию.

Изменения, которые мы внесли, могут показаться незначительными. На самом деле, вот diff-файл для `public/quickstart.js`.

Эта краткость впечатляет, учитывая, что мы только что внедрили новый фреймворк в наше приложение.

Постепенная замена частей вашего приложения небольшими компонентами, подобными этому, — отличный способ начать работу с React. Настоящая мощь проявится, когда будет добавлено больше компонентов и управление состоянием окажется под одной крышей.

— Замените ещё одну часть приложения на компонент React. Попробуйте сделать это с блоком приглашения.

— Добавьте новую функцию в `ConversationContainer`, например, CSS-фильтры для видео.

— Дайте знать мне в Twitter или в комментариях ниже, что вы создали!

— Общайтесь со мной в Twitch Creative.