കഴിഞ്ഞ കുറച്ചു വർഷങ്ങളായി വിവിധ meta-frameworks ഉപയോഗിച്ച് പരീക്ഷണങ്ങൾ നടത്തിക്കൊണ്ടിരിക്കുകയാണെങ്കിൽ, SvelteKit 2 നിങ്ങൾക്ക് ആശ്വാസവും സംശയവും കലർന്ന ഒരു അനുഭവം നൽകും. ആശ്വാസം, കാരണം ഇത് സങ്കീർണ്ണതകൾ കൂട്ടുന്നതിന് പകരം അവ കുറയ്ക്കുന്നു. സംശയം, കാരണം എന്തെങ്കിലും പ്രശ്നം സംഭവിക്കുമെന്ന് നിങ്ങൾ കാത്തിരിക്കുന്നുണ്ടാകും. എന്നാൽ അങ്ങനെയൊന്നും സംഭവിക്കില്ല. Svelte 5-മായി ചേരുമ്പോൾ, 2026-ൽ ഒരു full-stack application നിർമ്മിക്കാനുള്ള ഏറ്റവും ഉൽപ്പാദനക്ഷമമായ വഴികളിലൊന്നാണ് ഈ സ്റ്റാക്ക്. ഡെവലപ്പർ എക്സ്പീരിയൻസിനെ സംബന്ധിച്ച കണക്കുകളും ഇത് ശരിവെക്കുന്നു. Svelte 4-നെ അപേക്ഷിച്ച് ബണ്ടിലുകൾ (Bundles) ഏകദേശം 35% ചെറുതാണ്. റൂട്ടിംഗ് (Routing), സെർവർ ഫംഗ്ഷനുകൾ, ഓതന്റിക്കേഷൻ പാറ്റേണുകൾ എന്നിവയെല്ലാം ഇതിൽ മികച്ച രീതിയിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്, അവ വെറുതെ കൂട്ടിച്ചേർത്ത പ്ലഗിനുകളല്ല.

റൂണുകൾ (Runes) റിയാക്റ്റിവിറ്റിയെ വ്യക്തമാക്കുന്നു

Svelte 5-ലെ റൂണുകൾ കൊണ്ടുവരുന്ന മാറ്റമാണ് ഏറ്റവും വലിയ മാനസികമായ മാറ്റം. മുൻപത്തെ Svelte പതിപ്പുകളിൽ ഡിപെൻഡൻസികൾ ട്രാക്ക് ചെയ്യാൻ $: ലേബലും കംപൈലർ മാജിക്കും ഉപയോഗിച്ചിരുന്നു. അത് പ്രവർത്തിച്ചിരുന്നുവെങ്കിലും, എന്തെങ്കിലും തകരാർ സംഭവിച്ചാൽ അത് കണ്ടെത്തുക പ്രയാസമായിരുന്നു. റൂണുകൾ ആ മാജിക് മാറ്റി പകരം വ്യക്തമായ ഫംഗ്ഷനുകൾ നൽകുന്നു. എന്തിനെയാണ് ട്രാക്ക് ചെയ്യേണ്ടതെന്ന് നിങ്ങൾ കംപൈലറിനോട് കൃത്യമായി പറയുന്നു, അത് കൃത്യമായി പ്രവർത്തിക്കുകയും ചെയ്യുന്നു.

നിങ്ങൾ അറിഞ്ഞിരിക്കേണ്ട കാര്യങ്ങൾ ഇതാ:

  • $state റിയാക്റ്റീവ് വേരിയബിളുകളെ കൈകാര്യം ചെയ്യുന്നു. ഏതൊരു വാല്യൂവിനെയും $state() ഉപയോഗിച്ച് പൊതിയുന്നതിലൂടെ കംപൈലർ അത് നിരീക്ഷിക്കുന്നു.
  • $derived മറ്റ് സ്റ്റേറ്റുകളിൽ നിന്ന് വാല്യൂസ് കണക്കാക്കുന്നു. ഒരു ഫിൽട്ടർ ചെയ്ത ലിസ്റ്റ് അല്ലെങ്കിൽ ഫോർമാറ്റ് ചെയ്ത ടോട്ടൽ ആവശ്യമുണ്ടോ? എങ്കിൽ $derived ഉപയോഗിക്കുക. $effect-ൽ നിന്നുള്ള പ്രധാന വ്യത്യാസം $derived വാല്യൂകൾക്ക് വേണ്ടിയുള്ളതാണ്, ആക്ഷനുകൾക്ക് വേണ്ടിയല്ല എന്നതാണ്.
  • $effect സൈഡ് ഇഫക്റ്റുകൾ (side effects) പ്രവർത്തിപ്പിക്കുന്നു. ഡോക്യുമെന്റ് ടൈറ്റിൽ അപ്ഡേറ്റുകൾ, മാനുവൽ DOM മെഷർമെന്റുകൾ അല്ലെങ്കിൽ ക്ലീനപ്പ് ആവശ്യമുള്ള ടൈമറുകൾ എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു. ഇത് DOM കമ്മിറ്റ് ചെയ്തതിന് ശേഷം പ്രവർത്തിക്കുന്നു.
  • $props കംപോണന്റുകളിൽ ഡാറ്റ സ്വീകരിക്കുന്നതിനായി പഴയ export let പാറ്റേണിന് പകരമായി ഇത് ഉപയോഗിക്കുന്നു. ഇത് കൂടുതൽ വ്യക്തമാണ്, കൂടാതെ TypeScript-മായി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.

പ്രായോഗികമായി ഈ മോഡൽ വലിയ ഗുണം നൽകുന്നു. നിങ്ങൾ മാർക്ക് ചെയ്യുന്ന കാര്യങ്ങൾ മാത്രമേ കംപൈലർ ട്രാക്ക് ചെയ്യുകയുള്ളൂ എന്നതിനാൽ, ഉപയോഗശൂന്യമായ കോഡുകൾ (dead code) ഒഴിവാക്കപ്പെടുന്നു. ഒരു വേരിയബിൾ എന്തിനാണ് അപ്ഡേറ്റ് ചെയ്തതെന്ന് നിങ്ങൾ പിന്നീട് ആലോചിക്കേണ്ടി വരില്ല, പകരം നിങ്ങളുടെ നിർദ്ദേശങ്ങളിൽ നിങ്ങൾക്ക് വിശ്വാസം വരുന്നു.

കോൺഫിഗറേഷൻ വഴിയല്ല, ഫോൾഡറുകൾ വഴിയാണ് റൂട്ടിംഗ്

റൂട്ടിംഗിനായി SvelteKit നിങ്ങളുടെ ഫയൽ സിസ്റ്റം ഉപയോഗിക്കുന്നു. പ്രത്യേകം റൂട്ടർ ഫയലുകൾ സൂക്ഷിക്കേണ്ടതില്ല. ഒരു ഡയറക്ടറിയിൽ +page.svelte ഫയൽ ഇട്ടാൽ ആ ഡയറക്ടറി ഒരു ലൈവ് റൂട്ടായി മാറും.

+layout.svelte വഴി ഷെയർഡ് UI റൂട്ടുകളെ ഉൾക്കൊള്ളുന്നു. റൂട്ട് ഡയറക്ടറിയിൽ ഇത് നൽകിയാൽ എല്ലാ ചൈൽഡ് റൂട്ടുകൾക്കും ഇത് ലഭിക്കും. ഡയറക്ടറി ട്രീയിൽ കുറച്ചുകൂടി താഴെ ഇത് നൽകിയാൽ ആ സെക്ഷന് മാത്രം ഇത് ലഭിക്കും.

സെർവർ സൈഡ് ലോജിക് +page.server.ts-ൽ ആണ് വരുന്നത്. പേജ് റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് ഇത് പ്രവർത്തിക്കുന്നു, അതിനാൽ ഡാറ്റാബേസ് ക്വറി ചെയ്യാനോ, കുക്കി പരിശോധിക്കാനോ, ഓതന്റിക്കേഷൻ ഇല്ലാത്ത ഉപയോക്താക്കളെ തടയാനോ ഇത് ഉപയോഗിക്കാം. നിങ്ങളുടെ load ഫംഗ്ഷനിൽ നിന്നുള്ള ടൈപ്പുകൾ ഓട്ടോമാറ്റിക്കായി പേജ് കംപോണന്റിലേക്ക് ലഭിക്കുന്നു, ഇതിനർത്ഥം മാനുവൽ ഇന്റർഫേസുകൾ എഴുതാതെ തന്നെ നിങ്ങളുടെ ഡാറ്റ ടൈപ്പ് ചെയ്യപ്പെടുന്നു എന്നാണ്.

നേരിട്ടുള്ള API എൻഡ് പോയിന്റുകൾ +server.ts ഫയലുകളിൽ നൽകാം. ഇവ സ്റ്റാൻഡേർഡ് HTTP ഹാൻഡ്‌ലറുകൾ—GET, POST, PUT, DELETE—എക്‌സ്‌പോർട്ട് ചെയ്യുന്നു, അതിനാൽ നിങ്ങളുടെ പേജുകൾക്കൊപ്പം ഒരു REST ബാക്ക് എൻഡ് നിർമ്മിക്കുന്നത് വളരെ സ്വാഭാവികമായി തോന്നും.

ശ്രദ്ധിക്കപ്പെടാതെ പോകുന്ന ഒരു ഫീച്ചർ: ഗ്രൂപ്പ് റൂട്ടുകൾ (group routes). ഒരു ഫോൾഡർ പേരിന് ചുറ്റും ബ്രാക്കറ്റുകൾ ഉപയോഗിച്ചാൽ, ഉദാഹരണത്തിന് (auth), URL-ൽ മാറ്റം വരുത്താതെ തന്നെ ഒരു ഷെയർഡ് ലേഔട്ട് നിർമ്മിക്കാം. /login, /signup തുടങ്ങിയ പേജുകൾക്ക് ഇത് വളരെ അനുയോജ്യമാണ്.

ഡാറ്റ, സുരക്ഷ, പ്രോഗ്രസീവ് എൻഹാൻസ്‌മെന്റ്

ആധുനിക ഫ്രെയിംവർക്കുകൾ ഫുൾസ്റ്റാക്കിനെക്കുറിച്ച് സംസാരിക്കുമെങ്കിലും, ഓതന്റിക്കേഷൻ ചെക്കുകൾ എവിടെ നൽകണം എന്ന കാര്യത്തിൽ പലപ്പോഴും അവ വ്യക്തത നൽകുന്നില്ല. SvelteKit ഇതിനായി വ്യക്തമായ വഴികൾ നൽകുന്നു.

ഡാറ്റാ ഫെച്ചിംഗിനായി +page.server.ts ഉപയോഗിക്കുക. ഇതിലെ load ഫംഗ്ഷൻ സെർവറിൽ മാത്രം പ്രവർത്തിക്കുന്നതിനാൽ നിങ്ങളുടെ ഡാറ്റാബേസ് ക്രെഡൻഷ്യലുകൾ ഒരിക്കലും ബ്രൗസറിലേക്ക് ചോർന്നുപോകില്ല. SvelteKit നിങ്ങളുടെ load റിട്ടേൺ വാല്യൂസിൽ നിന്ന് ടൈപ്പുകൾ നിർമ്മിക്കുന്നു, അതിനാൽ നിങ്ങളുടെ ഫ്രണ്ട് എൻഡ് കൃത്യമായി നിലനിൽക്കുന്നു.

ആപ്ലിക്കേഷൻ മുഴുവനായും നിയന്ത്രിക്കാൻ hooks.server.ts ഉപയോഗിക്കാം. ഇത് ഓരോ റിക്വസ്റ്റ് വരുമ്പോഴും പ്രവർത്തിക്കുന്നു, അതിനാൽ സെഷനുകൾ പരിശോധിക്കാനും, JWT എക്സ്പയറി പരിശോധിക്കാനും, ഇൻകമിംഗ് ഇവന്റുകളിലേക്ക് യൂസർ കോൺടെക്സ്റ്റ് ചേർക്കാനും ഇത് അനുയോജ്യമാണ്.

ഡാറ്റ മാറ്റങ്ങൾ വരുത്താൻ (mutations) ഫോം ആക്ഷനുകൾ ഉപയോഗിക്കുക. ഒരു പ്രത്യേക API എൻഡ് പോയിന്റ് ഉണ്ടാക്കി JSON കൈകാര്യം ചെയ്യുന്നതിന് പകരം, +page.server.ts-ൽ ഒരു ആക്ഷൻ നിർവചിക്കാം. ഇതിന്റെ ഏറ്റവും വലിയ ഗുണം പ്രോഗ്രസീവ് എൻഹാൻസ്‌മെന്റ് (progressive enhancement) ആണ്. ജാവാസ്ക്രിപ്റ്റ് ലോഡ് ആയില്ലെങ്കിൽ പോലും—അല്ലെങ്കിൽ ഉപയോക്താവ് അത് ഡിസേബിൾ ചെയ്തിട്ടുണ്ടെങ്കിൽ പോലും—ഫോം സെർവർ ആക്ഷനിലേക്ക് സബ്മിറ്റ് ചെയ്യപ്പെടും, പേജ് റിസൾട്ടുമായി റീ-റെൻഡർ ചെയ്യപ്പെടും. ജാവാസ്ക്രിപ്റ്റ് ലഭ്യമാണെങ്കിൽ, പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ SvelteKit അനുഭവം മെച്ചപ്പെടുത്തുന്നു. ഒരേ കോഡിൽ നിന്ന് തന്നെ നിങ്ങൾക്ക് മികച്ച പ്രതിരോധശേഷിയും മിനുസവും ലഭിക്കുന്നു.

ഒരു കാര്യം പ്രത്യേകം ശ്രദ്ധിക്കുക: കണക്കുകൂട്ടലുകൾ $derived-ൽ ചെയ്യുക, $effect-ൽ ചെയ്യരുത്. $effect ഉപയോഗിച്ച് വാല്യൂസ് കണക്കാക്കുന്നത് ട്രാക്ക് ചെയ്യാൻ പ്രയാസമുള്ള അപ്ഡേറ്റ് ലൂപ്പുകൾ ഉണ്ടാക്കിയേക്കാം. യഥാർത്ഥ സൈഡ് ഇഫക്റ്റുകൾക്കായി $effect ഉപയോഗിക്കുക, കമ്പ്യൂട്ടഡ് സ്റ്റേറ്റിനായി $derived ഉപയോഗിക്കുക.

SvelteKit വേഴ്സസ് Next.js

രണ്ട് ഫ്രെയിംവർക്കുകളും പ്രൊഡക്ഷൻ ആപ്ലിക്കേഷനുകൾ വിതരണം ചെയ്യാൻ പ്രാപ്തമാണ്, എന്നാൽ അവ തമ്മിൽ പ്രായോഗികമായ ചില വിട്ടുവീഴ്ചകൾ (trade-offs) ഉണ്ട്.

ബണ്ടിൽ സൈസിൻ്റെ (Bundle size) കാര്യത്തിൽ SvelteKit മുൻപന്തിയിലാണ്. Svelte കമ്പോണന്റുകളെ വാനില JavaScript-ലേക്ക് കംപൈൽ ചെയ്യുന്നതിനാലും Virtual DOM പൂർണ്ണമായും ഒഴിവാക്കുന്നതിനാലും റൺടൈം ഫൂട്ട്പ്രിന്റ് (runtime footprint) വളരെ കുറവായിരിക്കും. എന്നാൽ Next.js കൂടെ React-ന്റെ റീകൺസിലിയേഷൻ എഞ്ചിനും (reconciliation engine) ഉൾക്കൊള്ളുന്നു.

റിയാക്റ്റിവിറ്റിയിലും (Reactivity) വ്യത്യാസമുണ്ട്. SvelteKit കംപൈൽ സമയത്ത് തന്നെ runes പരിഹരിക്കുന്നു. അതിനാൽ ബ്രൗസറിന് ലളിതമായ അപ്‌ഡേറ്റുകൾ മാത്രമാണ് ലഭിക്കുന്നത്. എന്നാൽ Next.js React-ന്റെ റൺടൈം ഹുക്കുകളെയും (runtime hooks) റീകൺസിലിയേഷനെയും ആശ്രയിക്കുന്നു, ഇതിനർത്ഥം ക്ലയന്റ് സൈഡിൽ കൂടുതൽ പ്രക്രിയകൾ നടക്കുന്നു എന്നാണ്.

SvelteKit ഉപയോഗിച്ച് പഠിച്ചെടുക്കുന്നത് (Onboarding) കൂടുതൽ എളുപ്പമാണ്. ഇതിന്റെ മെന്റൽ മോഡൽ (mental model) ലളിതമാണ്. റീ-റെൻഡറുകൾ (re-renders) ഒഴിവാക്കാൻ useEffect ഡിപെൻഡൻസി അറേകളോ (dependency arrays) മെമ്മോയിസേഷൻ പസിലുകളോ (memoization puzzles) കൈകാര്യം ചെയ്യേണ്ടി വരുന്നില്ല. TypeScript ഇന്റഗ്രേഷനും പ്രത്യേകം പരാമർശിക്കേണ്ടതാണ്. രണ്ട് ഫ്രെയിംവർക്കുകളും