Ажурирање 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 компоненти без вебвиев-а. Он је флексибилнији, потпуно темељив, и осећа се нативно јер је нативан.

За најбоље искуство препоручујемо 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, и сваки виџет који ради живо у прегледачу компоненти. Јавите нам у коментару ако наиђете на било шта.

Поздрав!