Αναβάθμιση SDK Συστήματος Σχολίων React Native

! Αυτό το Άρθρο Περιέχει Τεχνική Ορολογία

Τι Νέο

Ανακοινώσαμε την έκδοση 5.1 του fastcomments-react-native-sdk, της βιβλιοθήκης μας για React Native που απεικονίζει σχόλια και συνομιλία με πραγματικά εγγενή στοιχεία αντί για WebView.

Ανασχεδιάσαμε τα εσωτερικά, ανανεώσαμε την συνολική εμφάνιση, προσθέσαμε ένα widget ζωντανής συνομιλίας, φέραμε το SDK στον ιστό και το αναβαθμίσαμε στην τελευταία έκδοση του React Native και του React.

Γιατί Δύο Βιβλιοθήκες React Native;

Ένα γρήγορο σημείωμα, γιατί συχνά μπαίνει αυτή η ερώτηση. Παρέχουμε δύο επιλογές:

• Το fastcomments-react-native είναι ένα λεπτό περιτύλιγμα γύρω από το widget μας που τρέχει σε WebView. Είναι ο ταχύτερος τρόπος για να αποκτήσετε άμεσα κάθε δυνατότητα και επωφελείται αυτόματα από διορθώσεις του ιστού.
• Το fastcomments-react-native-sdk (αυτό) απεικονίζει το UI με εγγενή στοιχεία React Native χωρίς WebView. Είναι πιο ευέλικτο, πλήρως θεματοποιήσιμο και αισθάνεται εγγενές επειδή είναι εγγενές.

Για την καλύτερη εμπειρία, προτείνουμε το SDK. Το υπόλοιπο της ανάρτησης αφορά τι άλλαξε στην 5.0.

Νέα Διαχείριση Κατάστασης

Ο κύριος λόγος για αυτή την αλλαγή είναι να διασφαλιστεί ότι η βιβλιοθήκη μας παραμένει πιστή στο όνομά της και παραμένει Γρήγορη. Είχαμε αρκετούς πελάτες που παραπονέθηκαν για την απόδοσή της, οπότε αυτό έχει διορθωθεί τώρα.

Αρχικά, το SDK διατηρούσε το δέντρο σχολίων του σε Hookstate. Λειτουργούσε, αλλά καθώς οι νήματα και οι ζωντανές ενημερώσεις αυξάνονταν, τα πράγματα άρχισαν να επιβραδύνονται.

Αντικαταστήσαμε το Hookstate με το Zustand και ένα επίπεδο, ευρετηριασμένο κατάστημα. Τα σχόλια τώρα ζουν σε έναν χάρτη byId παράλληλα με τις ευρετήρια childrenByParent, rootOrder, και pinnedIds, αντί για ένα δέντρο φωλιασμένο μέσα στην κατάσταση.

Η ανταμοιβή:

• Οι ζωντανές εκδηλώσεις (ένα νέο σχόλιο, μια ψήφος, μια επεξεργασία) έγιναν μεταβολές O(1) αντί να περπατούν και να κλωνοποιούν ένα δέντρο.
• Καταργήσαμε δύο πλήρεις JSON βαθιούς κλώνους δέντρου που χρησιμοποιούνταν σε κάθε fetch.
• Τα στοιχεία συνδρομής ακριβώς στα κομμάτια που διαβάζουν, το τυπικό μοντέλο επιλεγμένου, έτσι μια ψήφος σε ένα σχόλιο αγγίζει ένα σχόλιο.

Αυτό το τελευταίο σημείο έχει μεγαλύτερη σημασία από ό,τι ακούγεται. Με συνδρομές βασισμένες σε επιλογείς, μια γραμμή ανανεώνεται μόνο όταν αλλάζουν τα δικά της δεδομένα.

Μια Ανασχεδίαση Βασισμένη σε Tokens

Η παλιά εμφάνιση ήταν μια σωρός στυλ που ήταν σκληρό κωδικοποιημένα. Η νέα προεπιλογή δημιουργείται από ένα σύνολο σημασιολογικών σχεδιαστικών tokens (FastCommentsTheme): χρώματα, κενά, ακτίνες, μεγέθη γραμματοσειρών, βάρη γραμματοσειρών, και μεγέθη avatar. Ολόκληρο το δέντρο στυλ προέρχεται από αυτά τα tokens.

Αυτό σημαίνει ότι η ανανέωση στυλ είναι μία ιδιότητα:

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

Η σκοτεινή λειτουργία είναι μόλις ένα σύνολο tokens μακριά:

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

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

Η ανασχεδίαση αυτή καθαυτή έχει πιο καθαρή, σύγχρονη-ουδέτερη εμφάνιση: λεπτές διαχωριστικές γραμμές, κουμπιά και chips ψήφου σε μορφή χαπιού, γεμάτα κύρια κουμπιά, στρογγυλεμένα avatars και μια συνεπή κλίμακα τυπογραφίας. Η ιδιότητα styles είναι ακόμα εκεί για χειρουργικές παρακάμψεις, έτσι οι υπάρχουσες ενσωματώσεις συνεχίζουν να λειτουργούν.

Ένα Ειδικό Widget Ζωντανής Συνομιλίας

Προσθέσαμε το FastCommentsLiveChat, μια προεπιλογή συνομιλίας πάνω στην ίδια μηχανή που αντικατοπτρίζει την προβολή συνομιλίας του SDK Android μας: χρονολογημένα μηνύματα με τα πιο πρόσφατα στο κάτω μέρος, τον συντάκτη κάτω από τη λίστα, μια ζωντανή κεφαλίδα με ένα σημείο σύνδεσης και αριθμό χρηστών, αυτόματη κύλιση που σταματά ενώ διαβάζετε παλαιότερα μηνύματα και απεριόριστη ιστορία καθώς κύλιζετε προς τα επάνω. Κάθε προεπιλογή είναι παρακάμπτη μέσω config.

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

Τώρα και στον Ιστό

Το ίδιο SDK τρέχει τώρα στον ιστό μέσω του react-native-web. Ο πλούσιος συντάκτης κειμένου (ο οποίος υποστηρίζεται από το react-native-enriched) απεικονίζεται με τον ίδιο τρόπο σε iOS, Android και τον περιηγητή, έτσι η εμπειρία επεξεργασίας είναι συνεπής παντού με μία μόνο υλοποίηση. Τα overlays που αλλιώς θα έκοβαν τη λίστα σχολίων (μενού, επιλέκτης GIF, λίστα ειδοποιήσεων) είναι προσκολλημένα κάτω από τις ενεργοποιήσεις τους στην εκδοχή ιστού.

Μπορείτε να δοκιμάσετε κάθε widget μόνοι σας στον ζωντανό προβολέα στοιχείων, ο οποίος είναι αυτό το SDK που τρέχει στον περιηγητή μέσω του react-native-web.

Διατηρώντας Την Επικαιρότητα με το React Native

Η 5.0 έχει κατασκευαστεί και δοκιμαστεί κατά της React Native 0.81 και React 19, και στοχεύει στη Νέα Αρχιτεκτονική (Fabric), την οποία απαιτεί ο εγγενής επεξεργαστής πλούσιου κειμένου. Η διατήρηση της επικαιρότητας εδώ δεν είναι απλώς δουλειά χωρίς λόγο: ο επεξεργαστής, η διαχείριση χειρονομιών και η απεικόνιση γίνονται όλες πιο γρήγορες και πιο σωστές καθώς το React Native προχωρά, και θα προτιμούσαμε να προχωρήσουμε σταδιακά αυτές τις αναβαθμίσεις παρά να μείνουμε πίσω για χρόνια.

Συμπέρασμα

Αυτή η ανασυγκρότηση είχε να κάνει με το να δώσουμε στο React Native SDK την ίδια προνομιακή θέση όπως και οι άλλες βιβλιοθήκες μας: ένα γρήγορο και προβλέψιμο μοντέλο δεδομένων, μια εμφάνιση που μπορείτε να θεματοποιήσετε σε μία ιδιότητα, ένα widget συνομιλίας, και υποστήριξη για τον ιστό, όλα πάνω σε μια σύγχρονη βάση React Native.

Μπορείτε να βρείτε το SDK στο NPM, το πηγή του, με παραδείγματα, στο GitHub, και κάθε widget να τρέχει ζωντανά στον προβολέα στοιχείων. Ενημερώστε μας παρακάτω αν αντιμετωπίσετε οτιδήποτε.

Cheers!