Обновление 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 дерева, которые использовались при каждом запросе.
• Компоненты подписываются только на те части, которые они читают, стандартная модель селектора, так что голосование по одному комментарию затрагивает только один комментарий.

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

Redesign на основе токенов

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

Это означает, что повторное стилизование — это один пропс:

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

Темная тема — это всего лишь один набор токенов:

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

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

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

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

Мы добавили FastCommentsLiveChat, предустановленный чат на том же движке, который отражает вид чата нашего Android SDK: хронологические сообщения с новыми внизу, composer ниже списка, живая верхняя полоса с индикатором подключения и количеством пользователей, авто-прокрутка, которая приостанавливается, пока вы читаете старые сообщения, и бесконечная история при прокрутке вверх. Каждый предустановленный вариант можно переопределить через 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, и каждый виджет, работающий вживую, в браузере компонентов. Сообщите нам ниже, если вы столкнетесь с чем-либо.

Удачи!