Η μετάβαση από jQuery σε Vue 3 ξεκινά από τις εξαρτήσεις: ποιο event ενεργοποιεί ένα plugin, ποιο callback αλλάζει το DOM και ποια global μεταβλητή χρειάζεται η επόμενη λειτουργία. Καταγράφω αυτή την αλυσίδα και μεταφέρω όσα κομμάτια μπορούν να απομονωθούν χωρίς να αλλάξει όλη η σελίδα.
Ξεκινώ από τον κώδικα που ήδη τρέχει. Ελέγχω selectors, event handlers, callbacks των plugins και κοινά objects. Καταγράφω ποια λειτουργία μπορεί να μεταφερθεί μόνη της και ποια εξαρτάται από HTML που παράγει ο server ή από άλλο plugin.
Στο jQuery, λειτουργίες που φαίνονται άσχετες μπορεί να συνδέονται μέσω του DOM. Καταγράφω τη σημερινή συμπεριφορά και προσθέτω tests πριν την αλλάξω, ώστε να ελέγξω ότι το νέο component κάνει την ίδια δουλειά.
Προσθέτω τη νέα αρχιτεκτονική μία λειτουργία τη φορά. Ό,τι δεν έχει μεταφερθεί παραμένει ως έχει. Το backend αλλάζει μόνο αν το απαιτεί η συγκεκριμένη λειτουργία.
Τι παραδίδω με τη μετάβαση
- Tests για συμπεριφορά που πριν κρυβόταν σε handlers και αλληλεπιδράσεις μεταξύ plugins
- Components που διαχειρίζονται τα δικά τους δεδομένα, με Vite και δυνατότητα σταδιακής προσθήκης TypeScript
- Οι σελίδες που δεν έχουν μεταφερθεί παραμένουν στο υπάρχον stack και αλλάζουν σε επόμενο βήμα
- Τεκμηρίωση για όσα παραμένουν σε jQuery και τεχνική εγγύηση για 30 ημέρες μετά τη θέση σε λειτουργία
Γίνεται η μετάβαση χωρίς να ξαναγραφτούν όλα μαζί;
Ναι. Η νέα αρχιτεκτονική μπορεί να προστεθεί σε μία σελίδα που παράγεται στον server, χωρίς να μεταφερθεί ταυτόχρονα όλο το jQuery. Αντικαθιστώ μία αλυσίδα εξαρτήσεων κάθε φορά.
Ο κώδικάς μας σε jQuery δεν έχει tests ούτε τεκμηρίωση. Είναι πρόβλημα;
Όχι, αλλά ο έλεγχος ξεκινά διαφορετικά. Γράφω tests που αποτυπώνουν τη σημερινή συμπεριφορά μέσα από handlers, plugins και αλλαγές στο DOM. Έτσι ελέγχω αν το νέο component συμπεριφέρεται όπως η υπάρχουσα λειτουργία.
Πόσο διαρκεί η μετάβαση;
Εξαρτάται από τον αριθμό των οθονών και από το πόσο στενά συνδέονται handlers και plugins μέσω του DOM. Μετά τον τεχνικό έλεγχο στέλνω συγκεκριμένη τιμή και χρονοδιάγραμμα για τις λειτουργίες που συμφωνήσαμε να μεταφερθούν.
Έχουμε ένα παλιό PHP backend. Πρέπει να αλλάξει και αυτό;
Όχι. Η νέα αρχιτεκτονική μπορεί να χρησιμοποιεί τα υπάρχοντα AJAX endpoints του PHP backend. Προτείνω αλλαγή στο backend μόνο όταν τη χρειάζεται η λειτουργία που μεταφέρεται.
Άλλες υπηρεσίες
Επικοινωνία
Αθήνα, συνεργασία εξ αποστάσεως με ομάδες σε Ευρώπη & ΗΠΑ
info@offline-web.com