Актуализация на 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 (този) рендерира 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, предварително зададен чат върху същия двигател, който повтаря изгледа на чата на нашия 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 напредва, и предпочитаме да вземем тези актуализации стабилно, отколкото да изостанем с години.

В заключение

Тази пренаписка беше за даване на React Native SDK същата първокласна основа като нашите други библиотеки: бърз и предвидим модел на данни, вид, който можете да темирате с един пропс, виджет за чат и поддръжка на уеб, всичко на съвременна основа на React Native.

Можете да намерите SDK на NPM, източника, с примери, на GitHub, и всеки виджет работещ жив в браузъра на компоненти. Кажете ни по-долу, ако се сблъскате с нещо.

Наздраве!