Оновлення SDK для коментування в React Native

! Ця стаття містить технічну термінологію

Що нового

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

Ми переписали внутрішню частину, redesign усього вигляду, додали віджет живого чату, перенесли SDK на веб та оновили до останніх версій React Native та React.

Чому два бібліотеки React Native?

Швидка примітка, оскільки ми отримуємо це запитання. Ми пропонуємо дві опції:

• fastcomments-react-native — це легка обгортка навколо нашого веб-віджета, що працює в WebView. Це найшвидший спосіб отримати всі функції миттєво, і він автоматично виграє від веб-виправлень.
• fastcomments-react-native-sdk (цей) рендерить UI з нативними компонентами 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, попереднє налаштування чату на базі того ж механізму, що відображає вигляд чату нашого SDK для Android: хронологічні повідомлення з найновішими внизу, композиційна частина під списком, жива стрічка заголовка з точкою з'єднання та кількістю користувачів, автоматичний прокрутка, що призупиняється, поки ви читаєте старі повідомлення, та безкінечна історія, як тільки ви прокручуєте вгору. Кожен пресет може бути переопределено через 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, і кожен віджет, що працює в живому режимі в компонентному браузері. Дайте знати нижче, якщо ви натрапите на щось.

На здоров'я!