Πώς μετέφερα το flaming.codes από Next.js σε Qwik

Το δίνοδικό μου ταξίδι μεταφέροντας το flaming.codes από Next.js σε Qwik και Qwik City

Πάμε πρώτα στο τέλος: πώς όλα κατέληξαν

Αν θέλετε να παραλείψετε ολόκληρη την ιστορία και να δείτε απλά το αποτέλεσμα, να έχετε:

  • Το flaming.codes έχει γραφτεί από την αρχή (και πλέον θα αναφέρεται ως v2) και χρησιμοποιεί το Qwik και Qwik City ως το κάτωθι πλαίσιο, ενώ προηγουμένως χρησιμοποιούσε το Next.js
  • Αφαίρεσα όλες τις εξαρτήσεις που σχετίζονταν με το τρίτων πλευρών CMS και το επίπεδο προσωρινής μνήμης κι έγινα αυτο-υποδοχής όλου του περιεχομένου στο αποθετήριο του Github αυτής της PWA (Progressive Web App)
  • Αυτό έγινε καθώς διαπίστωσα ότι η συντήρηση ολόκληρης της στοίβας της v1 του flaming.codes ήταν πολύ δουλειά - η τελευταία σταγόνα ήταν όταν έπρεπε να ενημερώσω το CMS (Sanity) και θα έπρεπε να ξαναγράψω κάποια πράγματα έτσι κι αλλιώς
  • Το συστατικό της μετάφρασης της v1, που περιελάμβανε έναν προσαρμοσμένο αναλυτή εγγράφων και τη μετάφραση μέσω Google Translate, αντικαταστάθηκε από καθαρό περιεχόμενο markdown και αντίστοιχα από το GPT-4 της OpenAI
  • Ακόμη δεν έχω υλοποιήσει τη δυνατότητα TTS (Text-to-Speech), αλλά θα το κάνω στο εγγύς μέλλον χρησιμοποιώντας το μοντέλο Whisper της OpenAI
  • Το flaming.codes φιλοξενείται ακόμη στο Vercel, αλλά πλέον χρησιμοποιεί Edge Functions για την παροχή του ιστοτόπου, αντί του Build Output API, καθώς προς το παρόν δεν παρέχεται κανένας προσαρμογέας ανάπτυξης από το Qwik City
  • Το σχέδιο ανανεώθηκε επίσης και τώρα υποστηρίζει τόσο το φωτεινό όσο και το σκοτεινό θέμα χρησιμοποιώντας τα Windy Radix Colors για να έχουμε Radix Colors διαθέσιμα ως Tailwind κλάσεις

σελίδα εκκίνησης της έκδοσης 2 του flaming.codes

Το CMS έφυγε, ζήτω το CMS

Ο κύριος λόγος που έγραψα την v2 του flaming.codes ήταν να μειώσω τις εξαρτήσεις από υπηρεσίες:

  • να αφαιρέσω το CMS (και το CDN του) και να διαχειριστώ καθώς και να φιλοξενήσω όλο το περιεχόμενο (άρθρα, κατηγορίες, πόρους κτλ.) απευθείας στο αποθετήριο, το οποίο θα είναι επίσης open source
  • ως μέρος αυτής της μετάβασης, να καταργήσω το επίπεδο προσωρινής μνήμης για το περιεχόμενο του CMS, καθώς δεν χρειάζεται πια
  • να αντικαταστήσω τη χρήση του Google Translate καθώς και του Microsoft Text-to-Speech με API από το OpenAI

Η μετάβαση από ένα ισχυρό CMS όπως το Sanity και το δυναμικό του builder ερωτημάτων έρχεται με το κόστος της ανάγκης για υλοποίηση κάποιας (ελαφριάς) διαχείρισης περιεχομένου μόνος μου. Δεν θέλω να ανησυχώ για το να πρέπει να ενημερώνω και να συντηρώ ένα τόσο κεντρικό κομμάτι του έργου. Ο στόχος μου είναι να έχω αυτή τη λύση να λειτουργεί ακόμα κι αν δεν γράψω ένα άρθρο για ένα χρόνο, γιατί η μόνη απαίτηση θα πρέπει να είναι να ανοίξω το αποθετήριο, να γράψω ένα άρθρο και στη συνέχεια απλά να ανεβάσω αλλαγές στο main για να πυροδοτήσω μια νέα ανάπτυξη.

Μπορείτε να ελέγξετε τον κατάλογο /cms στη ρίζα του έργου στο GitHub για να δείτε τον πηγαίο κώδικα με τα μάτια σας. Λειτουργεί αρκετά καλά, είναι απλό και εντελώς αυτόνομο, δεν απαιτείται επιπλέον λογαριασμός και σύνδεση για ένα CMS. Η εμπειρία εξόδου είναι τώρα πραγματικά πιο ισχυρή από πριν, καθώς μπορώ τώρα να χρησιμοποιώ Markdown για όλο το περιεχόμενο, το οποίο είναι πολύ πιο εύκολο στη συγγραφή και συντήρηση από τον προσαρμοσμένο επεξεργαστή του Sanity. Πρόσθεσα μια επιλογή ζωντανής επαναφόρτωσης για την εκτέλεση του σεναρίου του επεξεργαστή, έτσι ώστε να μπορώ να δω τις αλλαγές σε πραγματικό χρόνο - αν θέλω ακόμη και για πολλές γλώσσες με μια φορά.

Θα εμβαθύνω περισσότερο στο CMS σε ξεχωριστή ανάρτηση.

Γιατί επέλεξα το Qwik και Qwik City αντί του Next.js

Το Qwik και το Πλήρες Στοίβα Πλαίσιο του που ονομάζεται «Qwik City» ακούγονταν πολύ ενδιαφέροντα για μένα από την αρχή: αυτόματη τεμπελιά φόρτωσης οποιουδήποτε JS μέχρι να χρειαστεί πραγματικά χωρίς καμία ενυδάτωση. Στο πλαίσιο του flaming.codes, τα κέρδη από αυτή την αρχιτεκτονική είναι μειωμένα, καθώς ο ιστότοπός μου είναι στην καρδιά του ένα ιστολόγιο. Όσο περισσότερα συστατικά και αλληλεπιδράσεις έχει μια εφαρμογή ιστού, τόσο μεγαλύτερες είναι οι βελτιώσεις που προέρχονται από τη χρήση του Qwik. Παρόλα αυτά, ήμουν περίεργος και ήθελα να αποκτήσω κάποια πρώτη εμπειρία με αυτό.

i18n στο Qwik σε σύγκριση με το Next.js

Το flaming.codes έχει μεταφραστεί σε 14 γλώσσες, συμπεριλαμβανομένων κάποιων από δεξιά προς τα αριστερά. Όταν πρώτα πήρα μια ματιά στο Qwik στις αρχές του 2023 (περίπου 10 μήνες πριν κάνω την πραγματική επαναγράψιμο της v2), νόμιζα ότι δεν υπήρχε πραγματική λύση για i18n, και οι προσπάθειές μου πέραν κάποιων αρχικών δοκιμών ξεθώριασαν.

Όταν το είδα ξανά τον Δεκέμβριο, το [qwik-speak](https://github.com/robisim74/qwik-s

Προτάσεις

Σχετικά

Προσάρτημα

Γλώσσες