Vue 2 से Svelte में माइग्रेट करना

• 2 साल तक Vue2 का इस्तेमाल किया, लेकिन अब उसका मेंटेनेंस नहीं हो रहा है, इसलिए माइग्रेट करने का फैसला लिया
• Vue 3 और Svelte के बीच विचार करने के बाद Svelte चुनने की वजहों को संक्षेप में बताया गया है

Svelte और Vue 3 की तुलना

• JS डेवलपर सर्वे में Svelte की retention बेहतर है
• Svelte
  • Type support ज्यादा बेहतरीन है और global access को सीमित करता है
  • (व्यक्तिगत रूप से) syntax ज्यादा elegant और user-friendly है
  • <template> जैसे अतिरिक्त HTML की जरूरत नहीं, सीधे इस्तेमाल किया जा सकता है
  • styles अपने-आप scope हो जाते हैं
  • डेटा अपडेट करने के लिए computed properties की जरूरत नहीं होती। बस => फ़ंक्शन लिखना होता है
  • pure JS plugins जोड़ना ज्यादा आसान है
  • virtual DOM के बिना compile होता है। ज्यादा optimized है और tasks को तेजी से पूरा कर सकता है
  • declared variables के जरिए डेटा अपने-आप अपडेट किया जा सकता है

Svelte की कुछ कमियां भी हैं

• समुदाय अपेक्षाकृत छोटा है (क्योंकि यह 2019 में आया था)

माइग्रेशन कैसे किया गया?

• कब: अगस्त में माइग्रेशन किया गया, जब ऐप का उपयोग करने वाले लोग कम थे
• लगा समय: सभी फाइलों को Vue से Svelte में माइग्रेट करने में 2 हफ्ते लगे
• डेवलपर संख्या: 2 फ्रंटएंड डेवलपर्स ने 2 हफ्ते फुल-टाइम काम किया और एक अन्य व्यक्ति ने 1 हफ्ता फुल-टाइम काम किया, यानी कुल 3 लोग
• workflow: Notion में डेवलपर्स को tickets दिए गए, नए components Storybook में लिखे गए, और हर डेवलपर ने तय किए गए pages को Svelte में फिर से लिखा
• startup होने की वजह से काम करने वाली फाइलें हजारों में नहीं थीं, इसलिए काम अपेक्षाकृत आसान था
  हालांकि, SvelteKit जब अभी भी सक्रिय रूप से विकसित हो रहा था, तब जोखिम उठाकर माइग्रेशन किया गया, इसलिए माइग्रेशन के एक महीने बाद बड़े पैमाने पर बदलाव करने पड़े। लेकिन SvelteKit टीम ने शानदार migration guide दी, इसलिए नए updates के मुताबिक ढलना आसान रहा। सितंबर में SvelteKit टीम ने बताया कि framework आखिरकार RC चरण में पहुंच गया है, इसलिए अब स्थिरता भी सुनिश्चित है
• फाइल और component संरचना: SvelteKit की "folder-based routing" ने काफी मदद की। हर page को subpages में बांटना संभव हुआ, जिससे "loading" और "submit" जैसे standard variable names को फिर से इस्तेमाल किया जा सका। इसके अलावा layout संबंधित routes में एकीकृत हो गया, जिससे access ज्यादा आसान हो गया।

क्या हासिल हुआ?

• ज्यादा बेहतर और स्मूद performance
• बेहतर developer experience
• तेज code execution
• SSR को चालू करना और चलाना
• संक्षिप्त और समझने में आसान code
• type checking errors का समाधान