ನೀವು ಕಳೆದ ಕೆಲವು ವರ್ಷಗಳನ್ನು ವಿವಿಧ meta-frameworkಗಳ ನಡುವೆ ಅಲೆಯುತ್ತಾ ಕಳೆದಿದ್ದರೆ, SvelteKit 2 ನಿಮಗೆ ನೆಮ್ಮದಿ ಮತ್ತು ಅನುಮಾನದ ವಿಚಿತ್ರ ಮಿಶ್ರಣದಂತೆ ಕಾಣಿಸಬಹುದು. ನೆಮ್ಮದಿ, ಏಕೆಂದರೆ ಇದು ಸಂಕೀರ್ಣತೆಯನ್ನು ಹೆಚ್ಚಿಸುವ ಬದಲು ಅದನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಅನುಮಾನ, ಏಕೆಂದರೆ ಏನಾದರೂ ತೊಂದರೆ ಆಗಬಹುದು ಎಂದು ನೀವು ಕಾಯುತ್ತಿರುತ್ತೀರಿ. ಆದರೆ ಹಾಗಾಗುವುದಿಲ್ಲ. Svelte 5 ಜೊತೆಗೆ, ಈ stack 2026 ರಲ್ಲಿ ಒಂದು full-stack ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು ಅತ್ಯಂತ ಉತ್ಪಾದಕ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಮತ್ತು ಅಂಕಿಅಂಶಗಳು ડેವಲಪರ್ ಅನುಭವವನ್ನು (developer experience) ಸಮರ್ಥಿಸುತ್ತವೆ. Svelte 4 ಉತ್ಪಾದಿಸಿದ್ದಕ್ಕಿಂತ Bundlesಗಳು ಸುಮಾರು 35% ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ. Routing, server functions, ಮತ್ತು authentication patterns ಎಲ್ಲವೂ ಮೊದಲ ದರ್ಜೆಯ ಸೌಲಭ್ಯಗಳಾಗಿವೆ, ಅವುಗಳನ್ನು ಕೇವಲ ಪ್ಲಗಿನ್‌ಗಳ ಮೂಲಕ ಅಂಟಿಸಿ ಜೋಡಿಸಬೇಕಾಗಿಲ್ಲ.

runes ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು (reactivity) ಸ್ಪಷ್ಟಪಡಿಸುತ್ತವೆ

ದೊಡ್ಡ ಮಾನಸಿಕ ಬದಲಾವಣೆಯು Svelte 5 ರ runes ನಿಂದ ಬರುತ್ತದೆ. Svelte ನ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳು dependencies ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು $: label ಮತ್ತು ಹೆಚ್ಚಿನ compiler magic ಅನ್ನು ಬಳಸುತ್ತಿದ್ದವು. ಅದು ಕೆಲಸ ಮಾಡುತ್ತಿತ್ತು, ಆದರೆ ಏನಾದರೂ ಕೆಟ್ಟಾಗ, ನೀವು ಕಾಣದ ವೈರ್‌ಗಳನ್ನು (invisible wires) ಹುಡುಕುತ್ತಾ (debugging) ಕಷ್ಟಪಡಬೇಕಾಗುತ್ತಿತ್ತು. Runes ಆ ಮ್ಯಾಜಿಕ್ ಅನ್ನು ಸ್ಪಷ್ಟವಾದ ಫಂಕ್ಷನ್‌ಗಳಿಂದ ಬದಲಾಯಿಸುತ್ತವೆ. ನೀವು compiler ಗೆ ಏನನ್ನು ಪತ್ತೆಹಚ್ಚಬೇಕು ಎಂದು ನಿಖರವಾಗಿ ತಿಳಿಸುತ್ತೀರಿ, ಮತ್ತು ಅದು ಅದನ್ನು ಗಮನಿಸುತ್ತದೆ.

ನಿಮಗೆ ತಿಳಿಯಬೇಕಾದ ವಿಷಯಗಳು ಇಲ್ಲಿವೆ.

  • $state reactive variables ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು $state() ನಲ್ಲಿ ಸುತ್ತುವರಿಯಿರಿ ಮತ್ತು compiler ಅದನ್ನು ಗಮನಿಸುತ್ತದೆ.
  • $derived ಇತರ state ನಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಹಾಕುತ್ತದೆ. ನಿಮಗೆ filter ಮಾಡಿದ ಪಟ್ಟಿ ಅಥವಾ format ಮಾಡಿದ ಒಟ್ಟು ಮೊತ್ತ ಬೇಕೇ? $derived ಬಳಸಿ. $effect ನಿಂದ ಇದರ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವೆಂದರೆ, $derived ಎಂಬುದು ಮೌಲ್ಯಗಳಿಗಾಗಿ (values), ಕ್ರಿಯೆಗಳಿಗಾಗಿ (actions) ಅಲ್ಲ.
  • $effect side effects ಗಳನ್ನು ರನ್ ಮಾಡುತ್ತದೆ. ಡಾಕ್ಯುಮೆಂಟ್ ಟೈಟಲ್ ಅಪ್‌ಡೇಟ್‌ಗಳು, ಮ್ಯಾನುಯಲ್ DOM ಅಳತೆಗಳು ಅಥವಾ cleanup ಅಗತ್ಯವಿರುವ تایಮರ್‌ಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಿ. ಇದು DOM ಕಮಿಟ್ ಆದ ನಂತರ ರನ್ ಆಗುತ್ತದೆ, ಇದು lifecycle hook ನಂತೆಯೇ ಇರುತ್ತದೆ ಆದರೆ ನಿರ್ದಿಷ್ಟ reactive dependencies ಗೆ ಸಂಬಂಧಿಸಿರುತ್ತದೆ.
  • $props ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಡೇಟಾ ಸ್ವೀಕರಿಸಲು ಹಳೆಯ export let ಮಾದರಿಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ಹೆಚ್ಚು ಸ್ಪಷ್ಟವಾಗಿದೆ ಮತ್ತು TypeScript ನೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಈ ಮಾದರಿಯು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ. ಏಕೆಂದರೆ compiler ನೀವು ಗುರುತಿಸಿದಿದ್ದನ್ನು ಮಾತ್ರ ಪತ್ತೆಹಚ್ಚುತ್ತದೆ, ಆದ್ದರಿಂದ dead code ಅನ್ನು ಹಾಗೆಯೇ ಇಡುತ್ತದೆ. ಒಂದು variable ಏಕೆ update ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡಿತು ಎಂದು ನೀವು ಯೋಚಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತೀರಿ ಮತ್ತು ನಿಮ್ಮ ಸ್ವಂತ ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳನ್ನು ನಂಬಲು ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ.

ಕಾನ್ಫಿಗರೇಶನ್ ಮೂಲಕ ಅಲ್ಲ, ಫೋಲ್ಡರ್‌ಗಳ ಮೂಲಕ ರೂಟಿಂಗ್

SvelteKit ರೂಟಿಂಗ್‌ಗಾಗಿ ನಿಮ್ಮ ಫೈಲ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಿರ್ವಹಿಸಲು ಪ್ರತ್ಯೇಕ ರೂಟರ್ ಫೈಲ್ ಇಲ್ಲ. ಒಂದು ಡೈರೆಕ್ಟರಿಯೊಳಗೆ +page.svelte ಫೈಲ್ ಅನ್ನು ಹಾಕಿದರೆ, ಆ ಡೈರೆಕ್ಟರಿಯು ಲೈವ್ ರೂಟ್ ಆಗುತ್ತದೆ.

Shared UI ಎಂಬುದು +layout.svelte ಮೂಲಕ ಆ ರೂಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯುತ್ತದೆ. ಇದನ್ನು ನಿಮ್ಮ root ನಲ್ಲಿ ಇರಿಸಿ, ಆಗ ಪ್ರತಿಯೊಂದು child route ಅದನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ. ಇದನ್ನು ಮರದಲ್ಲಿ

ಎರಡೂ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಬಲ್ಲವು, ಆದರೆ ಅವುಗಳ ನಡುವೆ ಗಮನಾರ್ಹವಾದ ಹೊಂದಾಣಿಕೆಗಳ (trade-offs) ಸವಾಲುಗಳಿವೆ.

ಬಂಡಲ್ ಗಾತ್ರದ ವಿಷಯದಲ್ಲಿ SvelteKit ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿದೆ. ಏಕೆಂದರೆ Svelte ತನ್ನ ಘಟಕಗಳನ್ನು (components) ವ್ಯಾನಿಲಾ JavaScript ಗೆ ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ Virtual DOM ಅನ್ನು ಬಳಸದೆ ಬಿಟ್ಟುಬಿಡುತ್ತದೆ, ಇದರಿಂದ ರನ್‌ಟೈಮ್ ಫುಟ್‌ಪ್ರಿಂಟ್ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ. Next.js ತನ್ನೊಂದಿಗೆ React ನ reconciliation engine ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ರಿಯಾಕ್ಟಿವಿಟಿ ಕೂಡ ಭಿನ್ನವಾಗಿದೆ. SvelteKit ತನ್ನ runes ಅನ್ನು ಕಂಪೈಲ್ ಸಮಯದಲ್ಲಿಯೇ (compile time) ನಿರ್ಧರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಸರಳ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಪಡೆಯುತ್ತದೆ. Next.js, React ನ runtime hooks ಮತ್ತು reconciliation ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ, ಅಂದರೆ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ (client) ಹೆಚ್ಚಿನ ಕೆಲಸ ನಡೆಯುತ್ತದೆ ಎಂದರ್ಥ.

SvelteKit ನೊಂದಿಗೆ ಕಲಿಕೆ (onboarding) ಸುಲಭವಾಗಿದೆ. ಇದರ ಮಾನಸಿಕ ಮಾದರಿ (mental model) ಸರಳವಾಗಿದೆ. re-renders ತಪ್ಪಿಸಲು ನೀವು useEffect dependency arrays ಅಥವಾ memoization ಒಗಟುಗಳನ್ನು (puzzles) ನಿರ್ವಹಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. TypeScript ಏಕೀಕರಣದ (integration) ಬಗ್ಗೆಯೂ ಪ್ರಸ್ತಾಪಿಸಬೇಕಾಗುತ್ತದೆ. ಎರಡೂ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು