Обновление SDK системы комментирования React Native

! Эта статья содержит технические термины

Что нового

Мы только что выпустили версию 5.1 fastcomments-react-native-sdk, нашей библиотеки React Native, которая отображает комментарии и чат с использованием настоящих нативных компонентов вместо WebView.

Мы переписали внутренности, переработали весь внешний вид, добавили виджет чата в реальном времени, перенесли SDK на веб и обновили его до последней версии React Native и React.

Почему две библиотеки React Native?

Быстрое замечание, так как мы получаем этот вопрос. Мы предлагаем два варианта:

• fastcomments-react-native - это тонкая обертка вокруг нашего веб-виджета, работающего в WebView. Это самый быстрый способ получить каждую функцию мгновенно, и он автоматически получает исправления для веба.
• fastcomments-react-native-sdk (это) отображает интерфейс с нативными компонентами React Native без использования webview. Это более гибко, полностью настраиваемо и ощущается нативно, потому что оно нативное.

Для лучшего опыта мы рекомендуем использовать SDK. Остальная часть этого поста касается того, что изменилось в 5.0.

Новое управление состоянием

Основной причиной этого изменения является то, чтобы убедиться, что наша библиотека остаётся верной нашему имени и остаётся быстрой. У нас было несколько клиентов, которые пожаловались на её производительность, и теперь это исправлено.

Изначально SDK хранил своё дерево комментариев в Hookstate. Это работало, но по мере увеличения потоков и живых обновлений всё начало замедляться.

Мы заменили Hookstate на Zustand и плоское индексированное хранилище. Теперь комментарии хранятся в карте byId наряду с индексами childrenByParent, rootOrder и pinnedIds, а не в дереве, вложенном внутри состояния.

Результаты:

• Живые события (новый комментарий, голосование, редактирование) стали O(1) мутациями вместо обхода и клонирования дерева.
• Мы избавились от двух полных JSON глубоких клонов, которые работали при каждом запросе.
• Компоненты подписываются только на те срезы, которые они читают, стандартная модель селекторов, так что голосование за один комментарий касается только одного комментария.

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

Редизайн на основе токенов

Старый вид был скоплением закодированных стилей. Новый по умолчанию генерируется из набора семантических дизайн-токенов (FastCommentsTheme): цвета, отступы, радиусы, размеры шрифтов, веса шрифтов и размеры аватаров. Вся стилистическая структура происходит от этих токенов.

Это означает, что переоформление происходит с помощью одного свойства:

<FastCommentsLiveCommenting config={config} theme={{ colors: { primary: '#FF5500' } }}/>

Темная тема доступна одним набором токенов:

import { getDarkTheme } from 'fastcomments-react-native-sdk';

<FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>

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

Специальный виджет чата в реальном времени

Мы добавили FastCommentsLiveChat, предустановленный чат на том же движке, который повторяет вид чата нашего Android SDK: хронологические сообщения с новыми внизу, составитель ниже списка, полоса заголовка в реальном времени с индикатором подключения и количеством пользователей, авто-прокрутка, которая останавливается, пока вы читаете старые сообщения, и бесконечная история по мере прокрутки вверх. Каждый пресет можно переопределить через config.

<FastCommentsLiveChat config={{ tenantId: 'demo', urlId: 'my-room' }}/>

Теперь и на вебе

Тот же SDK теперь работает в интернете через react-native-web. Составитель богатого текста (основанный на react-native-enriched) отображается одинаково на iOS, Android и в браузере, так что опыт редактирования везде последовательный с одним реализующим решением. Накладки, которые в противном случае обрезали бы список комментариев (меню, выбор GIF, список уведомлений), закреплены под своими триггерами в веб-версии.

Вы можете попробовать каждый виджет самостоятельно в живом броузере компонентов, который является этим SDK, работающим в браузере через react-native-web.

Поддержание актуальности с React Native

5.0 разработан и протестирован с React Native 0.81 и React 19, и он нацелен на Новую Архитектуру (Fabric), которая требуется для нативного редактора богатого текста. Поддержание актуальности здесь не является рутинной работой: редактор, обработка жестов и рендеринг становятся быстрее и более корректными по мере развития React Native, и мы предпочли бы получать эти обновления постепенно, а не отставать на годы.

В заключение

Этот переписывание касалось того, чтобы дать SDK React Native такой же первоклассный статус, как и нашим другим библиотекам: быструю и предсказуемую модель данных, внешний вид, который можно настроить с помощью одного свойства, виджет чата и поддержку веба, всё это на современном основании React Native.

Вы можете найти SDK на NPM, исходный код с примерами на GitHub, и каждый виджет работает в живом режиме в броузере компонентов. Дайте нам знать ниже, если у вас возникнут какие-либо вопросы.

Удачи!