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

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

Τι είναι Νέο

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

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

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

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

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

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

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

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

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

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

Το κέρδος:

• Οι ζωντανές εκδηλώσεις (ένα νέο σχόλιο, μια ψήφος, μια επεξεργασία) έγιναν O(1) μετατροπές αντί για επεξεργασία και cloning ενός δέντρου.
• Αφήσαμε δύο πλήρη JSON deep-clones που χρησιμοποιούνταν σε κάθε 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, μια προεπιλογή συνομιλίας πάνω στον ίδιο κινητήρα που ανταγωνίζεται την προβολή συνομιλίας του Android SDK μας: χρονολογικά μηνύματα με τα πιο πρόσφατα στο κάτω μέρος, τον συνθέτη κάτω από τη λίστα, μια ζωντανή λωρίδα κεφαλίδας με τουλάχιστον έναν δείκτη σύνδεσης και αριθμό χρηστών, αυτόματη κύλιση που σταματάει ενώ διαβάζετε παλαιότερα μηνύματα και απεριόριστη ιστορία ενώ κύλιση προς τα πάνω. Κάθε προεπιλογή είναι αναθεωρήσιμη μέσω του config.

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

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

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

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

Διατήρηση Επικαιρότητας με το React Native

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

Συμπέρασμα

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

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

Χαιρετισμοί!