Θα μεταφέρω το jQuery ή το παλιό σας React front end σε σύγχρονο React ή Next.js, σελίδα προς σελίδα

Ορισμένα προϊόντα λειτουργούν και αποφέρουν χρήματα, αλλά το front end τους έχει γίνει δύσκολο να αλλάξει: jQuery διασκορπισμένο σε πρότυπα, React class components από χρόνια πριν, ή μια εφαρμογή Next.js ακόμα στον Pages Router. Μια πλήρης επανεγγραφή παγώνει το προϊόν για μήνες. Εγώ κάνω το άλλο: ο παλιός και ο νέος κώδικας τρέχουν παράλληλα, και οι σελίδες μετακινούνται μία προς μία, οπότε δεν υπάρχει ποτέ μια μεγάλη ημέρα μετάβασης για τους χρήστες σας.

Έκανα ακριβώς αυτό σε ένα προηγούμενο έργο υπό NDA: ένα jQuery front end μεταφέρθηκε σε React σελίδα προς σελίδα ενώ το προϊόν παρέμεινε ζωντανό.

Το Starter σας δίνει το σχέδιο: διαβάζω το παλιό front end, χαρτογραφώ τις σελίδες του και τα κοινόχρηστα κομμάτια, καταγράφω τους κινδύνους και μεταφέρω μια μικρή σελίδα ως λειτουργικό δείγμα της προσέγγισης. Το Standard μετακινεί έως τρεις σελίδες ή οθόνες. Το Advanced μετακινεί έως οκτώ, δημιουργεί τα κοινόχρηστα στοιχεία που χρειάζονται και τα καλύπτει με τύπους TypeScript για τα δεδομένα τους και δοκιμές για τις κύριες ροές.

Τι παραμένει: το backend σας, οι διευθύνσεις URL σας και η συμπεριφορά που γνωρίζουν οι χρήστες. Τι αλλάζει: ο τρόπος οργάνωσης του κώδικα, ώστε η επόμενη λειτουργία να γραφτεί μία φορά, σε ένα μέρος. Για 14 ημέρες μετά την παράδοση, διορθώνω οτιδήποτε δεν λειτουργεί όπως συμφωνήσαμε, δωρεάν.

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

Βήματα για την ολοκλήρωση του έργου σας
1. Χαρτογράφηση του παλιού front end - Εξετάζω τα πρότυπα, τα σενάρια και τα στοιχεία, και καταγράφω τις σελίδες, τα κοινόχρηστα μέρη και οτιδήποτε επικίνδυνο, όπως η καθολική κατάσταση ή τα ενσωματωμένα σενάρια.
2. Συμφωνία της σειράς - Λαμβάνετε ένα γραπτό σχέδιο: ποια σελίδα πηγαίνει πρώτη, τι μετακινείται μαζί της και πώς ο παλιός και ο νέος κώδικας μοιράζονται το προϊόν όσο και οι δύο υπάρχουν.
3. Γέφυρα - Ο νέος κώδικας React ή Next.js ρυθμίζεται δίπλα στον παλιό κώδικα, με δρομολόγηση που στέλνει κάθε σελίδα σε όποια πλευρά την κατέχει.
4. Μετακίνηση σελίδων μία προς μία - Κάθε σελίδα ανακατασκευάζεται, συγκρίνεται με την παλιά έκδοση και αλλάζει μόνη της, έτσι ένα πρόβλημα επηρεάζει μία σελίδα, όχι το προϊόν.
5. Παράδοση - Οι μεταφερμένες σελίδες, το ενημερωμένο σχέδιο για ό,τι έχει απομείνει και μια σύντομη σημείωση για τα μοτίβα που πρέπει να ακολουθηθούν για τις επόμενες σελίδες.