ഫ്രെഷ്: സെർവർ-സൈഡ് റെൻഡർ ചെയ്യുന്ന ഡീനോ വെബ് ഫ്രെയിംവർക്കിനെക്കുറിച്ചുള്ള ഒരു ആഴത്തിലുള്ള പഠനം

വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്ന ഈ ലോകത്ത്, പുതിയ ഫ്രെയിംവർക്കുകളും ടൂളുകളും എപ്പോഴും ഉയർന്നുവരുന്നു, ഓരോന്നും പ്രത്യേക പ്രശ്നങ്ങൾ പരിഹരിക്കാനും ഡെവലപ്പർ അനുഭവം മെച്ചപ്പെടുത്താനും വാഗ്ദാനം ചെയ്യുന്നു. അത്തരത്തിൽ ശ്രദ്ധേയമായ ശ്രദ്ധ നേടിയ ഒരു ഫ്രെയിംവർക്കാണ് ഫ്രെഷ്, ഡീനോയിൽ നിർമ്മിച്ച ഒരു അടുത്ത തലമുറ വെബ് ഫ്രെയിംവർക്ക്. സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR), ഐലൻഡ് ആർക്കിടെക്ചർ, ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റിൻ്റെ ആവശ്യകത കുറയ്ക്കുന്ന ഒരു അതുല്യമായ സമീപനം എന്നിവയിലൂടെ ഫ്രെഷ് വേറിട്ടുനിൽക്കുന്നു, ഇത് അസാധാരണമായ വേഗതയേറിയ പ്രകടനത്തിനും മെച്ചപ്പെട്ട എസ്.ഇ.ഒ-യ്ക്കും കാരണമാകുന്നു.

എന്താണ് ഫ്രെഷ്?

ആധുനികവും ഡൈനാമിക്കുമായ വെബ്സൈറ്റുകളും വെബ് ആപ്ലിക്കേഷനുകളും നിർമ്മിക്കാൻ രൂപകൽപ്പന ചെയ്ത ഒരു ഫുൾ-സ്റ്റാക്ക് വെബ് ഫ്രെയിംവർക്കാണ് ഫ്രെഷ്. ജാവാസ്ക്രിപ്റ്റിനും ടൈപ്പ്സ്ക്രിപ്റ്റിനുമുള്ള സുരക്ഷിതമായ റൺടൈമായ ഡീനോയുടെ ശക്തിയും ലാളിത്യവും ഇത് പ്രയോജനപ്പെടുത്തുന്നു. ഫ്രെഷിൻ്റെ പ്രധാന സവിശേഷതകൾ താഴെ പറയുന്നവയാണ്:

• സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR): ഫ്രെഷ് കമ്പോണന്റുകൾ സെർവറിൽ റെൻഡർ ചെയ്യുകയും, പൂർണ്ണമായി റെൻഡർ ചെയ്ത എച്ച്.ടി.എം.എൽ ക്ലയിൻ്റിലേക്ക് അയയ്ക്കുകയും ചെയ്യുന്നു. ഇത് പ്രാരംഭ പേജ് ലോഡ് സമയം ഗണ്യമായി മെച്ചപ്പെടുത്തുകയും എസ്.ഇ.ഒ-യ്ക്ക് സഹായകമാവുകയും ചെയ്യുന്നു, കാരണം സെർച്ച് എഞ്ചിനുകൾക്ക് ഉള്ളടക്കം എളുപ്പത്തിൽ ക്രോൾ ചെയ്യാനും ഇൻഡെക്സ് ചെയ്യാനും കഴിയും.
• ഐലൻഡ് ആർക്കിടെക്ചർ: ഫ്രെഷ് ഒരു ഐലൻഡ് ആർക്കിടെക്ചർ ഉപയോഗിക്കുന്നു, ഇവിടെ ഒരു പേജിലെ ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകൾ മാത്രം ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഹൈഡ്രേറ്റ് ചെയ്യപ്പെടുന്നു. ഇത് ബ്രൗസർ ഡൗൺലോഡ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യേണ്ട ജാവാസ്ക്രിപ്റ്റിൻ്റെ അളവ് കുറയ്ക്കുന്നു, ഇത് വേഗതയേറിയ പ്രകടനത്തിനും മികച്ച ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുന്നു.
• ഡിഫോൾട്ടായി സീറോ റൺടൈം ജെ.എസ്: ക്ലയിൻ്റിലേക്ക് വലിയ അളവിൽ ജാവാസ്ക്രിപ്റ്റ് അയയ്‌ക്കേണ്ട മറ്റ് പല ഫ്രെയിംവർക്കുകളിൽ നിന്നും വ്യത്യസ്തമായി, ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് കുറയ്ക്കാൻ ഫ്രെഷ് ലക്ഷ്യമിടുന്നു. മിക്ക ആപ്ലിക്കേഷൻ ലോജിക്കും സെർവറിലാണ് പ്രവർത്തിക്കുന്നത്, ഇൻ്ററാക്ടിവിറ്റി കൈകാര്യം ചെയ്യാൻ ആവശ്യമായ ജാവാസ്ക്രിപ്റ്റ് മാത്രമേ ക്ലയിൻ്റിലേക്ക് അയയ്ക്കൂ.
• ബിൽറ്റ്-ഇൻ റൂട്ടിംഗ്: ഫ്രെഷ് ഒരു ബിൽറ്റ്-ഇൻ ഫയൽ-സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ള റൂട്ടിംഗ് സിസ്റ്റം നൽകുന്നു, ഇത് റൂട്ടുകൾ നിർവചിക്കുന്നതും വിവിധ അഭ്യർത്ഥനകൾ കൈകാര്യം ചെയ്യുന്നതും എളുപ്പമാക്കുന്നു.
• ടൈപ്പ്സ്ക്രിപ്റ്റ് പിന്തുണ: ഫ്രെഷ് ടൈപ്പ്സ്ക്രിപ്റ്റിൽ നിർമ്മിച്ചതാണ്, ഇത് ടൈപ്പ് സുരക്ഷയും മെച്ചപ്പെട്ട ഡെവലപ്പർ ഉൽപ്പാദനക്ഷമതയും നൽകുന്നു.
• ഡീനോ ഇൻ്റഗ്രേഷൻ: ഒരു ഡീനോ-ഫസ്റ്റ് ഫ്രെയിംവർക്ക് എന്ന നിലയിൽ, ഡീനോയുടെ സുരക്ഷാ സവിശേഷതകൾ, ഡിപൻഡൻസി മാനേജ്മെൻ്റ്, മൊത്തത്തിലുള്ള പ്രകടനം എന്നിവയിൽ നിന്ന് ഫ്രെഷ് പ്രയോജനം നേടുന്നു.

എന്തുകൊണ്ട് ഫ്രെഷ് തിരഞ്ഞെടുക്കണം?

പരമ്പരാഗത വെബ് ഫ്രെയിംവർക്കുകളേക്കാൾ ആകർഷകമായ നിരവധി ഗുണങ്ങൾ ഫ്രെഷ് വാഗ്ദാനം ചെയ്യുന്നു:

1. പെർഫോമൻസ്

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൽ പെർഫോമൻസ് ഒരു നിർണായക ഘടകമാണ്. വേഗത കുറഞ്ഞ വെബ്സൈറ്റുകൾ ഉപയോക്താക്കളെ നിരാശരാക്കാനും ഉയർന്ന ബൗൺസ് നിരക്കുകൾക്കും താഴ്ന്ന സെർച്ച് എഞ്ചിൻ റാങ്കിംഗുകൾക്കും ഇടയാക്കും. ഫ്രെഷിൻ്റെ SSR, ഐലൻഡ് ആർക്കിടെക്ചർ എന്നിവ ബ്രൗസർ ഡൗൺലോഡ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യേണ്ട ജാവാസ്ക്രിപ്റ്റിൻ്റെ അളവ് കുറച്ചുകൊണ്ട് വെബ്സൈറ്റ് പ്രകടനം ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു. ഇത് വേഗതയേറിയ പ്രാരംഭ പേജ് ലോഡ് സമയത്തിനും കൂടുതൽ പ്രതികരണാത്മകമായ ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുന്നു.

ഉദാഹരണം: ഉൽപ്പന്ന ലിസ്റ്റിംഗുകൾ പ്രദർശിപ്പിക്കുന്ന ഒരു ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റ് പരിഗണിക്കുക. പരമ്പരാഗത ക്ലയിൻ്റ്-സൈഡ് റെൻഡറിംഗിൽ, ഉൽപ്പന്ന ലിസ്റ്റിംഗുകൾ റെൻഡർ ചെയ്യുന്നതിന് ബ്രൗസർ ഒരു വലിയ ജാവാസ്ക്രിപ്റ്റ് ബണ്ടിൽ ഡൗൺലോഡ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും വേണം. ഫ്രെഷിൽ, സെർവർ ഉൽപ്പന്ന ലിസ്റ്റിംഗുകൾ റെൻഡർ ചെയ്യുകയും എച്ച്.ടി.എം.എൽ ക്ലയിൻ്റിലേക്ക് അയയ്ക്കുകയും ചെയ്യുന്നു, ഇത് വളരെ വേഗതയേറിയ പ്രാരംഭ ലോഡ് സമയത്തിന് കാരണമാകുന്നു. "Add to Cart" ബട്ടൺ പോലുള്ള ഇൻ്ററാക്ടീവ് ഘടകങ്ങൾക്ക് മാത്രമേ ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമുള്ളൂ.

2. എസ്.ഇ.ഒ ഒപ്റ്റിമൈസേഷൻ

ഒരു വെബ്സൈറ്റിലേക്ക് ഓർഗാനിക് ട്രാഫിക് എത്തിക്കുന്നതിന് സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷൻ (SEO) അത്യാവശ്യമാണ്. വെബ് പേജുകളിലെ ഉള്ളടക്കം ഇൻഡെക്സ് ചെയ്യുന്നതിന് സെർച്ച് എഞ്ചിനുകൾ ക്രോളറുകളെ ആശ്രയിക്കുന്നു. ക്ലയിൻ്റ്-സൈഡ് റെൻഡർ ചെയ്ത വെബ്സൈറ്റുകൾ സെർച്ച് എഞ്ചിൻ ക്രോളറുകൾക്ക് ഇൻഡെക്സ് ചെയ്യാൻ പ്രയാസമാണ്, കാരണം ഉള്ളടക്കം റെൻഡർ ചെയ്യുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് എക്സിക്യൂട്ട് ചെയ്യേണ്ടതുണ്ട്. ഫ്രെഷിൻ്റെ SSR, സെർച്ച് എഞ്ചിനുകൾക്ക് ഉള്ളടക്കം എളുപ്പത്തിൽ ക്രോൾ ചെയ്യാനും ഇൻഡെക്സ് ചെയ്യാനും കഴിയുമെന്ന് ഉറപ്പാക്കുന്നു, ഇത് മെച്ചപ്പെട്ട സെർച്ച് എഞ്ചിൻ റാങ്കിംഗിലേക്ക് നയിക്കുന്നു.

ഉദാഹരണം: ഫ്രെഷ് ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു വാർത്താ വെബ്സൈറ്റിൻ്റെ ലേഖനങ്ങൾ സെർവറിൽ റെൻഡർ ചെയ്യപ്പെടും, ഇത് സെർച്ച് എഞ്ചിൻ ക്രോളറുകൾക്ക് എളുപ്പത്തിൽ ലഭ്യമാക്കുന്നു. ഇത് പ്രസക്തമായ കീവേഡുകൾക്കായി സെർച്ച് ഫലങ്ങളിൽ ഉയർന്ന റാങ്ക് നേടാനും സൈറ്റിലേക്ക് കൂടുതൽ ഓർഗാനിക് ട്രാഫിക് എത്തിക്കാനും വെബ്സൈറ്റിനെ അനുവദിക്കുന്നു.

3. മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം

വേഗതയേറിയതും പ്രതികരണാത്മകവുമായ ഒരു വെബ്സൈറ്റ് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നു. പ്രകടനത്തിലും കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റിലുമുള്ള ഫ്രെഷിൻ്റെ ശ്രദ്ധ ഉപയോക്താക്കൾക്ക് സുഗമവും ആസ്വാദ്യകരവുമായ ബ്രൗസിംഗ് അനുഭവം നൽകുന്നു. ഇത് വർദ്ധിച്ച ഇടപഴകൽ, കുറഞ്ഞ ബൗൺസ് നിരക്കുകൾ, ഉയർന്ന പരിവർത്തന നിരക്കുകൾ എന്നിവയിലേക്ക് നയിച്ചേക്കാം.

ഉദാഹരണം: ഫ്രെഷ് ഉപയോഗിച്ച് നിർമ്മിച്ച ഒരു ഓൺലൈൻ ലേണിംഗ് പ്ലാറ്റ്ഫോം വിദ്യാർത്ഥികൾക്ക് തടസ്സമില്ലാത്തതും പ്രതികരണാത്മകവുമായ പഠനാനുഭവം നൽകും. വിദ്യാർത്ഥികൾക്ക് കോഴ്‌സ് മെറ്റീരിയലുകൾ വേഗത്തിൽ ആക്‌സസ് ചെയ്യാനും ചർച്ചകളിൽ പങ്കെടുക്കാനും അസൈൻമെൻ്റുകൾ പൂർത്തിയാക്കാനും കഴിയും, നിരാശാജനകമായ കാലതാമസങ്ങളോ പ്രകടന പ്രശ്‌നങ്ങളോ അനുഭവപ്പെടാതെ.

4. ലളിതമായ ഡെവലപ്‌മെൻ്റ്

യോജിച്ചതും അവബോധജന്യവുമായ ഒരു ഡെവലപ്‌മെൻ്റ് അനുഭവം നൽകിക്കൊണ്ട് ഫ്രെഷ് വെബ് ഡെവലപ്‌മെൻ്റ് ലളിതമാക്കുന്നു. ഫ്രെയിംവർക്കിൻ്റെ ബിൽറ്റ്-ഇൻ റൂട്ടിംഗ് സിസ്റ്റം, ടൈപ്പ്സ്ക്രിപ്റ്റ് പിന്തുണ, ഡീനോ ഇൻ്റഗ്രേഷൻ എന്നിവ സങ്കീർണ്ണമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതും പരിപാലിക്കുന്നതും എളുപ്പമാക്കുന്നു.

ഉദാഹരണം: ഫ്രെഷ് ഉപയോഗിച്ച് ഒരു സോഷ്യൽ നെറ്റ്‌വർക്കിംഗ് ആപ്ലിക്കേഷൻ നിർമ്മിക്കുന്ന ഒരു ഡെവലപ്പർക്ക് ഉപയോക്തൃ പ്രൊഫൈലുകൾ, ടൈംലൈനുകൾ, ക്രമീകരണങ്ങൾ തുടങ്ങിയ വിവിധ പേജുകൾക്കായി റൂട്ടുകൾ എളുപ്പത്തിൽ നിർവചിക്കാൻ കഴിയും. ടൈപ്പ്സ്ക്രിപ്റ്റിൻ്റെ ടൈപ്പ് സുരക്ഷ പിശകുകൾ തടയാനും കോഡ് പരിപാലനം മെച്ചപ്പെടുത്താനും സഹായിക്കുന്നു. ഡീനോയുടെ സുരക്ഷാ സവിശേഷതകൾ ആപ്ലിക്കേഷൻ സുരക്ഷിതമാണെന്നും അപകടസാധ്യതകളിൽ നിന്ന് പരിരക്ഷിക്കപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു.

5. ഡീനോ ഇക്കോസിസ്റ്റം

ഫ്രെഷ് നിർമ്മിച്ചിരിക്കുന്നത് ഡീനോയിലാണ്, ഇത് Node.js-നേക്കാൾ മെച്ചപ്പെട്ട സുരക്ഷ, ബിൽറ്റ്-ഇൻ ടൈപ്പ്സ്ക്രിപ്റ്റ് പിന്തുണ, കൂടുതൽ ആധുനികമായ ഡിപൻഡൻസി മാനേജ്മെൻ്റ് സിസ്റ്റം എന്നിവയുൾപ്പെടെ നിരവധി ഗുണങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു. ഡീനോയുടെ വികേന്ദ്രീകൃത മൊഡ്യൂൾ സിസ്റ്റം npm പോലുള്ള ഒരു കേന്ദ്ര പാക്കേജ് ശേഖരണിയുടെ ആവശ്യകത ഇല്ലാതാക്കുന്നു, ഇത് സപ്ലൈ ചെയിൻ ആക്രമണങ്ങളുടെ സാധ്യത കുറയ്ക്കുന്നു.

ഉദാഹരണം: ഡീനോ ഉപയോഗിച്ച്, ഫ്രെഷിന് URL-കളിൽ നിന്ന് നേരിട്ട് ES മൊഡ്യൂളുകൾ ഉപയോഗിക്കാൻ കഴിയും, ഇത് മാറ്റമില്ലായ്മയെ പ്രോത്സാഹിപ്പിക്കുകയും ഡിപൻഡൻസി ആശയക്കുഴപ്പമുണ്ടാക്കുന്ന ആക്രമണങ്ങളെ തടയുകയും ചെയ്യുന്നു. npm പാക്കേജുകളെ ആശ്രയിക്കുന്ന പരമ്പരാഗത Node.js ആപ്ലിക്കേഷനുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഇത് സുരക്ഷ വർദ്ധിപ്പിക്കുന്നു.

ഫ്രെഷ് എങ്ങനെ പ്രവർത്തിക്കുന്നു: ഐലൻഡ് ആർക്കിടെക്ചർ വിശദമായി

ഫ്രെഷിൻ്റെ പ്രകടന നേട്ടങ്ങൾക്ക് പിന്നിലെ പ്രധാന ആശയമാണ് ഐലൻഡ് ആർക്കിടെക്ചർ. മുഴുവൻ പേജും ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഹൈഡ്രേറ്റ് ചെയ്യുന്നതിനുപകരം, "ഐലൻഡുകൾ" എന്ന് വിളിക്കപ്പെടുന്ന നിർദ്ദിഷ്ട ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകൾ മാത്രം ഹൈഡ്രേറ്റ് ചെയ്യപ്പെടുന്നു. പേജിൻ്റെ ബാക്കി ഭാഗം സ്റ്റാറ്റിക് എച്ച്.ടി.എം.എൽ ആയി തുടരുന്നു. ഈ തിരഞ്ഞെടുക്കപ്പെട്ട ഹൈഡ്രേഷൻ ഡൗൺലോഡ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യേണ്ട ജാവാസ്ക്രിപ്റ്റിൻ്റെ അളവ് കുറയ്ക്കുകയും വേഗതയേറിയ പേജ് ലോഡ് സമയത്തിലേക്കും മെച്ചപ്പെട്ട പ്രകടനത്തിലേക്കും നയിക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം: ഒരു കമൻ്റ് സെക്ഷനുള്ള ഒരു ബ്ലോഗ് പോസ്റ്റ് സങ്കൽപ്പിക്കുക. ബ്ലോഗ് പോസ്റ്റ് തന്നെ സ്റ്റാറ്റിക് ഉള്ളടക്കമാണ്, ഇതിന് ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമില്ല. എന്നിരുന്നാലും, കമൻ്റ് സെക്ഷൻ ഇൻ്ററാക്ടീവ് ആണ്, ഉപയോക്തൃ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുന്നതിനും കമൻ്റുകൾ പ്രദർശിപ്പിക്കുന്നതിനും പുതിയ കമൻ്റുകൾ സമർപ്പിക്കുന്നതിനും ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമാണ്. ഫ്രെഷിൽ, ബ്ലോഗ് പോസ്റ്റ് സെർവറിൽ റെൻഡർ ചെയ്യുകയും സ്റ്റാറ്റിക് എച്ച്.ടി.എം.എൽ ആയി ക്ലയിൻ്റിലേക്ക് അയയ്ക്കുകയും ചെയ്യും. കമൻ്റ് സെക്ഷൻ മാത്രം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഹൈഡ്രേറ്റ് ചെയ്യപ്പെടും, ഇത് പേജിലെ ഇൻ്ററാക്ടിവിറ്റിയുടെ ഒരു "ഐലൻഡ്" ആയി മാറുന്നു.

ഈ പ്രക്രിയയെ താഴെ പറയുന്ന രീതിയിൽ സംഗ്രഹിക്കാം:

1. സെർവർ-സൈഡ് റെൻഡറിംഗ്: സെർവർ സ്റ്റാറ്റിക് ഉള്ളടക്കവും ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകളും ഉൾപ്പെടെ മുഴുവൻ പേജും റെൻഡർ ചെയ്യുന്നു.
2. ഭാഗികമായ ഹൈഡ്രേഷൻ: ഫ്രെഷ് പേജിലെ ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകളെ (ഐലൻഡുകൾ) തിരിച്ചറിയുന്നു.
3. ക്ലയിൻ്റ്-സൈഡ് ഹൈഡ്രേഷൻ: ബ്രൗസർ ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകൾ മാത്രം ഹൈഡ്രേറ്റ് ചെയ്യാൻ ആവശ്യമായ ജാവാസ്ക്രിപ്റ്റ് കോഡ് ഡൗൺലോഡ് ചെയ്യുകയും എക്സിക്യൂട്ട് ചെയ്യുകയും ചെയ്യുന്നു.
4. ഇൻ്ററാക്ടീവ് അനുഭവം: ഇൻ്ററാക്ടീവ് കമ്പോണന്റുകൾ പൂർണ്ണമായി പ്രവർത്തനക്ഷമമാകുന്നു, അതേസമയം പേജിൻ്റെ ബാക്കി ഭാഗം സ്റ്റാറ്റിക് എച്ച്.ടി.എം.എൽ ആയി തുടരുന്നു.

ഫ്രെഷ് ഉപയോഗിച്ച് തുടങ്ങാം

ഫ്രെഷ് ഉപയോഗിച്ച് തുടങ്ങുന്നത് വളരെ എളുപ്പമാണ്. നിങ്ങളുടെ സിസ്റ്റത്തിൽ ഡീനോ ഇൻസ്റ്റാൾ ചെയ്തിരിക്കണം. ഔദ്യോഗിക ഡീനോ വെബ്സൈറ്റിലെ നിർദ്ദേശങ്ങൾ പാലിച്ച് നിങ്ങൾക്ക് ഡീനോ ഇൻസ്റ്റാൾ ചെയ്യാം: https://deno.land/

ഡീനോ ഇൻസ്റ്റാൾ ചെയ്ത ശേഷം, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു പുതിയ ഫ്രെഷ് പ്രോജക്റ്റ് സൃഷ്ടിക്കാൻ കഴിയും:

            deno run -A npm:create-fresh@latest
            

              
                Copy
              
            
          

ഒരു പുതിയ ഫ്രെഷ് പ്രോജക്റ്റ് സൃഷ്ടിക്കുന്ന പ്രക്രിയയിലൂടെ ഈ കമാൻഡ് നിങ്ങളെ നയിക്കും. ഒരു പ്രോജക്റ്റ് പേര് തിരഞ്ഞെടുക്കാനും ഒരു ടെംപ്ലേറ്റ് തിരഞ്ഞെടുക്കാനും നിങ്ങളോട് ആവശ്യപ്പെടും. ഫ്രെഷ് അടിസ്ഥാന ടെംപ്ലേറ്റ്, ബ്ലോഗ് ടെംപ്ലേറ്റ്, ഇ-കൊമേഴ്‌സ് ടെംപ്ലേറ്റ് എന്നിവയുൾപ്പെടെ നിരവധി ടെംപ്ലേറ്റുകൾ നൽകുന്നു.

പ്രോജക്റ്റ് സൃഷ്ടിച്ച ശേഷം, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഡെവലപ്‌മെൻ്റ് സെർവർ ആരംഭിക്കാൻ കഴിയും:

            deno task start
            

              
                Copy
              
            
          

ഇത് പോർട്ട് 8000-ൽ ഡെവലപ്‌മെൻ്റ് സെർവർ ആരംഭിക്കും. തുടർന്ന് നിങ്ങളുടെ ബ്രൗസറിൽ http://localhost:8000 എന്ന വിലാസത്തിൽ ആപ്ലിക്കേഷൻ ആക്സസ് ചെയ്യാൻ കഴിയും.

ഉദാഹരണം: ഒരു ലളിതമായ കൗണ്ടർ കമ്പോണൻ്റ് നിർമ്മിക്കാം

ഫ്രെഷ് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് വ്യക്തമാക്കുന്നതിന് നമുക്ക് ഒരു ലളിതമായ കൗണ്ടർ കമ്പോണൻ്റ് നിർമ്മിക്കാം. `routes/counter.tsx` എന്ന പേരിൽ ഒരു പുതിയ ഫയൽ ഉണ്ടാക്കി താഴെ പറയുന്ന കോഡ് ചേർക്കുക:

            import { useState } from "preact/hooks";
import { Head } from "$fresh/runtime.ts";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Head>
        <title>Counter</title>
      </Head>
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    <>
  );
}

            

              
                Copy
              
            
          

ഈ കമ്പോണൻ്റ് കൗണ്ടർ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ Preact-ൽ നിന്നുള്ള `useState` ഹുക്ക് ഉപയോഗിക്കുന്നു. കമ്പോണൻ്റ് നിലവിലെ എണ്ണം പ്രദർശിപ്പിക്കുന്ന ഒരു പാരഗ്രാഫും ക്ലിക്ക് ചെയ്യുമ്പോൾ എണ്ണം വർദ്ധിപ്പിക്കുന്ന ഒരു ബട്ടണും റെൻഡർ ചെയ്യുന്നു. പേജിൻ്റെ തലക്കെട്ട് സജ്ജീകരിക്കാൻ `Head` കമ്പോണൻ്റ് ഉപയോഗിക്കുന്നു.

ഇനി, `routes/index.tsx` എന്ന പേരിൽ ഒരു പുതിയ ഫയൽ ഉണ്ടാക്കി താഴെ പറയുന്ന കോഡ് ചേർക്കുക:

            import Counter from "./counter.tsx";

export default function Home() {
  return (
    <>
      <h1>Welcome to Fresh!</h1>
      <Counter />
    <>
  );
}

            

              
                Copy
              
            
          

ഈ കമ്പോണൻ്റ് ഒരു തലക്കെട്ടും `Counter` കമ്പോണൻ്റും റെൻഡർ ചെയ്യുന്നു. നിങ്ങളുടെ ബ്രൗസറിൽ ആപ്ലിക്കേഷൻ ആക്സസ് ചെയ്യുമ്പോൾ, നിങ്ങൾക്ക് തലക്കെട്ടും കൗണ്ടർ കമ്പോണൻ്റും കാണാൻ കഴിയും. ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നത് കൗണ്ട് വർദ്ധിപ്പിക്കും, ഇത് കമ്പോണൻ്റിൻ്റെ ഇൻ്ററാക്ടിവിറ്റി പ്രകടമാക്കുന്നു.

അഡ്വാൻസ്ഡ് ഫീച്ചറുകളും ആശയങ്ങളും

സങ്കീർണ്ണവും ആധുനികവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന വിപുലമായ ഫീച്ചറുകളും ആശയങ്ങളും ഫ്രെഷ് വാഗ്ദാനം ചെയ്യുന്നു.

1. മിഡിൽവെയർ

അഭ്യർത്ഥനകളും പ്രതികരണങ്ങളും തടസ്സപ്പെടുത്താനും പരിഷ്കരിക്കാനും മിഡിൽവെയർ നിങ്ങളെ അനുവദിക്കുന്നു. ഓതൻ്റിക്കേഷൻ, ഓതറൈസേഷൻ, ലോഗിംഗ്, അഭ്യർത്ഥന പരിഷ്ക്കരണം തുടങ്ങിയ ജോലികൾക്ക് ഇത് ഉപയോഗപ്രദമാകും. റൂട്ട് ഹാൻഡ്‌ലറുകൾക്ക് മുമ്പോ ശേഷമോ എക്സിക്യൂട്ട് ചെയ്യുന്ന മിഡിൽവെയർ ഫംഗ്ഷനുകൾ നിർവചിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ലളിതവും വഴക്കമുള്ളതുമായ ഒരു മിഡിൽവെയർ സിസ്റ്റം ഫ്രെഷ് നൽകുന്നു.

2. പ്ലഗിനുകൾ

പുതിയ ഫീച്ചറുകൾ, ഇൻ്റഗ്രേഷനുകൾ, കസ്റ്റമൈസേഷനുകൾ എന്നിവ ചേർത്തുകൊണ്ട് ഫ്രെഷിൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കാൻ പ്ലഗിനുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ മെച്ചപ്പെടുത്തുന്നതിന് പ്ലഗിനുകൾ സൃഷ്ടിക്കാനും ഉപയോഗിക്കാനും നിങ്ങളെ അനുവദിക്കുന്ന ഒരു പ്ലഗിൻ സിസ്റ്റം ഫ്രെഷ് നൽകുന്നു.

3. ഡാറ്റാ ഫെച്ചിംഗ്

API-കളിൽ നിന്നും ഡാറ്റാബേസുകളിൽ നിന്നും മറ്റ് ഡാറ്റാ ഉറവിടങ്ങളിൽ നിന്നും ഡാറ്റ ലഭ്യമാക്കുന്നത് ഉൾപ്പെടെ, ഡാറ്റാ ഫെച്ചിംഗിനായി ഫ്രെഷ് നിരവധി ഓപ്ഷനുകൾ നൽകുന്നു. ഡാറ്റ ലഭ്യമാക്കാനും നിങ്ങളുടെ കമ്പോണന്റുകളിൽ റെൻഡർ ചെയ്യാനും നിങ്ങൾക്ക് `fetch` API അല്ലെങ്കിൽ മറ്റ് ലൈബ്രറികൾ ഉപയോഗിക്കാം.

4. സ്റ്റേറ്റ് മാനേജ്മെൻ്റ്

കൂടുതൽ സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്കായി, നിങ്ങൾക്ക് കൂടുതൽ ആധുനികമായ ഒരു സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് സൊല്യൂഷൻ ആവശ്യമായി വന്നേക്കാം. Redux, Zustand പോലുള്ള ജനപ്രിയ സ്റ്റേറ്റ് മാനേജ്മെൻ്റ് ലൈബ്രറികളുമായി ഫ്രെഷ് നന്നായി യോജിക്കുന്നു.

ഫ്രെഷ് മറ്റ് ഫ്രെയിംവർക്കുകളുമായി താരതമ്യം ചെയ്യുമ്പോൾ

സെർവർ-സൈഡ് റെൻഡറിംഗും ഐലൻഡ് ആർക്കിടെക്ചറും വാഗ്ദാനം ചെയ്യുന്ന ഒരേയൊരു വെബ് ഫ്രെയിംവർക്ക് ഫ്രെഷ് മാത്രമല്ല. Next.js, Remix പോലുള്ള മറ്റ് ജനപ്രിയ ഫ്രെയിംവർക്കുകളും ഈ സവിശേഷതകൾ നൽകുന്നു. എന്നിരുന്നാലും, ക്ലയിൻ്റ്-സൈഡ് ജാവാസ്ക്രിപ്റ്റ് കുറയ്ക്കുന്നതിലുള്ള ശ്രദ്ധയും ഡീനോയുമായുള്ള ഇൻ്റഗ്രേഷനും ഫ്രെഷിനെ വേറിട്ടുനിർത്തുന്നു.

Next.js: സെർവർ-സൈഡ് റെൻഡറിംഗ്, സ്റ്റാറ്റിക് സൈറ്റ് ജനറേഷൻ, പ്ലഗിനുകളുടെയും ടൂളുകളുടെയും ഒരു സമ്പന്നമായ ഇക്കോസിസ്റ്റം എന്നിവ വാഗ്ദാനം ചെയ്യുന്ന ഒരു ജനപ്രിയ റിയാക്റ്റ്-അധിഷ്ഠിത ഫ്രെയിംവർക്ക്. ഉയർന്ന തോതിലുള്ള കസ്റ്റമൈസേഷൻ ആവശ്യമുള്ള സങ്കീർണ്ണമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് Next.js ഒരു നല്ല തിരഞ്ഞെടുപ്പാണ്.

Remix: വെബ് മാനദണ്ഡങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുകയും തടസ്സമില്ലാത്ത ഡെവലപ്‌മെൻ്റ് അനുഭവം നൽകുകയും ചെയ്യുന്ന ഒരു ഫുൾ-സ്റ്റാക്ക് വെബ് ഫ്രെയിംവർക്ക്. പ്രകടനത്തിനും ഉപയോക്തൃ അനുഭവത്തിനും മുൻഗണന നൽകുന്ന വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് Remix ഒരു നല്ല തിരഞ്ഞെടുപ്പാണ്.

Astro: ഐലൻഡ് ആർക്കിടെക്ചർ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റാറ്റിക് സൈറ്റ് ജനറേറ്റർ. ബ്ലോഗുകൾ അല്ലെങ്കിൽ ഡോക്യുമെൻ്റേഷൻ സൈറ്റുകൾ പോലുള്ള ഉള്ളടക്ക പ്രാധാന്യമുള്ള വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിന് Astro മികച്ചതാണ്.

ഫ്രെയിംവർക്കിൻ്റെ തിരഞ്ഞെടുപ്പ് നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ പ്രത്യേക ആവശ്യകതകളെ ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങൾ പ്രകടനത്തിനും, കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റിനും, ഡീനോ-അധിഷ്ഠിത പരിസ്ഥിതിക്കും മുൻഗണന നൽകുന്നുവെങ്കിൽ, ഫ്രെഷ് ഒരു മികച്ച തിരഞ്ഞെടുപ്പാണ്. നിങ്ങൾക്ക് കൂടുതൽ പക്വമായ ഇക്കോസിസ്റ്റം ആവശ്യമുണ്ടെങ്കിൽ അല്ലെങ്കിൽ റിയാക്റ്റ് ആണ് ഇഷ്ടപ്പെടുന്നതെങ്കിൽ, Next.js ഒരു മികച്ച ഓപ്ഷനായിരിക്കാം. Remix മികച്ച പ്രകടനവും വെബ് മാനദണ്ഡങ്ങളിൽ ശ്രദ്ധയും വാഗ്ദാനം ചെയ്യുന്നു.

ഫ്രെഷിൻ്റെ ഉപയോഗങ്ങൾ

വിവിധങ്ങളായ ഉപയോഗങ്ങൾക്ക് ഫ്രെഷ് അനുയോജ്യമാണ്, അവയിൽ ചിലത് താഴെ പറയുന്നവയാണ്:

• ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റുകൾ: ഫ്രെഷിൻ്റെ പ്രകടനവും എസ്.ഇ.ഒ നേട്ടങ്ങളും വേഗത്തിൽ ലോഡ് ചെയ്യേണ്ടതും സെർച്ച് ഫലങ്ങളിൽ ഉയർന്ന റാങ്ക് നേടേണ്ടതുമായ ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിന് അനുയോജ്യമായ ഒരു തിരഞ്ഞെടുപ്പായി ഇതിനെ മാറ്റുന്നു.
• ബ്ലോഗുകളും ഉള്ളടക്ക വെബ്സൈറ്റുകളും: ഫ്രെഷിൻ്റെ സെർവർ-സൈഡ് റെൻഡറിംഗും ഐലൻഡ് ആർക്കിടെക്ചറും വേഗതയേറിയതും എസ്.ഇ.ഒ-സൗഹൃദപരവുമായ ബ്ലോഗുകളും ഉള്ളടക്ക വെബ്സൈറ്റുകളും നിർമ്മിക്കുന്നത് എളുപ്പമാക്കുന്നു.
• വെബ് ആപ്ലിക്കേഷനുകൾ: ഫ്രെഷിൻ്റെ ടൈപ്പ്സ്ക്രിപ്റ്റ് പിന്തുണ, ബിൽറ്റ്-ഇൻ റൂട്ടിംഗ് സിസ്റ്റം, ഡീനോ ഇൻ്റഗ്രേഷൻ എന്നിവ സങ്കീർണ്ണമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു നല്ല തിരഞ്ഞെടുപ്പായി ഇതിനെ മാറ്റുന്നു.
• ലാൻഡിംഗ് പേജുകൾ: പരിവർത്തനത്തിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന ഉയർന്ന പ്രകടനമുള്ള ലാൻഡിംഗ് പേജുകൾ സൃഷ്ടിക്കുന്നതിന് ഫ്രെഷ് മികച്ചതാണ്.

ഫ്രെഷിൻ്റെ ഭാവി

ഫ്രെഷ് താരതമ്യേന ഒരു പുതിയ ഫ്രെയിംവർക്കാണ്, എന്നാൽ ഇത് ഇതിനകം തന്നെ വെബ് ഡെവലപ്‌മെൻ്റ് കമ്മ്യൂണിറ്റിയിൽ കാര്യമായ ശ്രദ്ധ നേടിയിട്ടുണ്ട്. പ്രകടനം, എസ്.ഇ.ഒ, ഡെവലപ്പർ അനുഭവം എന്നിവയിലുള്ള ഫ്രെയിംവർക്കിൻ്റെ ശ്രദ്ധ ഇതിനെ ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു പ്രതീക്ഷ നൽകുന്ന ഓപ്ഷനായി മാറ്റുന്നു. ഫ്രെയിംവർക്ക് പക്വത പ്രാപിക്കുകയും ഡീനോ ഇക്കോസിസ്റ്റം വളരുകയും ചെയ്യുന്നതിനനുസരിച്ച്, ഫ്രെഷ് വെബ് ഡെവലപ്പർമാർക്ക് കൂടുതൽ ജനപ്രിയമായ ഒരു തിരഞ്ഞെടുപ്പായി മാറാൻ സാധ്യതയുണ്ട്.

ഫ്രെഷ് ടീം ഫ്രെയിംവർക്ക് മെച്ചപ്പെടുത്തുന്നതിനും പുതിയ ഫീച്ചറുകൾ ചേർക്കുന്നതിനും സജീവമായി പ്രവർത്തിക്കുന്നു. ആസൂത്രണം ചെയ്ത ചില ഫീച്ചറുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• മെച്ചപ്പെട്ട ടൂളിംഗ്: ഡീബഗ്ഗർ, കോഡ് എഡിറ്റർ ഇൻ്റഗ്രേഷൻ പോലുള്ള ഡെവലപ്പർ ടൂളിംഗ് മെച്ചപ്പെടുത്തുന്നതിൽ ഫ്രെഷ് ടീം പ്രവർത്തിക്കുന്നു.
• കൂടുതൽ പ്ലഗിനുകൾ: ഫ്രെയിംവർക്കിൻ്റെ പ്രവർത്തനം വിപുലീകരിക്കുന്നതിന് കൂടുതൽ പ്ലഗിനുകൾ സൃഷ്ടിക്കാൻ ഫ്രെഷ് ടീം കമ്മ്യൂണിറ്റിയെ പ്രോത്സാഹിപ്പിക്കുന്നു.
• മെച്ചപ്പെട്ട ഡോക്യുമെൻ്റേഷൻ: ഡെവലപ്പർമാർക്ക് ഫ്രെയിംവർക്ക് പഠിക്കാനും ഉപയോഗിക്കാനും എളുപ്പമാക്കുന്നതിന് ഡോക്യുമെൻ്റേഷൻ മെച്ചപ്പെടുത്തുന്നതിൽ ഫ്രെഷ് ടീം പ്രവർത്തിക്കുന്നു.

ഉപസംഹാരം

ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ഒരു അതുല്യമായ സമീപനം വാഗ്ദാനം ചെയ്യുന്ന ഒരു പ്രതീക്ഷ നൽകുന്ന വെബ് ഫ്രെയിംവർക്കാണ് ഫ്രെഷ്. സെർവർ-സൈഡ് റെൻഡറിംഗ്, ഐലൻഡ് ആർക്കിടെക്ചർ, കുറഞ്ഞ ജാവാസ്ക്രിപ്റ്റ് എന്നിവയിലുള്ള ഇതിൻ്റെ ശ്രദ്ധ അസാധാരണമാംവിധം വേഗതയേറിയ പ്രകടനം, മെച്ചപ്പെട്ട എസ്.ഇ.ഒ, മികച്ച ഉപയോക്തൃ അനുഭവം എന്നിവയ്ക്ക് കാരണമാകുന്നു. നിങ്ങൾ ഒരു ആധുനികവും, പ്രകടനക്ഷമവും, എസ്.ഇ.ഒ-സൗഹൃദപരവുമായ വെബ് ഫ്രെയിംവർക്കിനായി തിരയുകയാണെങ്കിൽ, ഫ്രെഷ് തീർച്ചയായും പരിഗണിക്കേണ്ട ഒന്നാണ്. വേഗതയേറിയതും കാര്യക്ഷമവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ വെബ്സൈറ്റുകളും ആപ്ലിക്കേഷനുകളും സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു ശക്തമായ ഉപകരണമാണിത്. ഡീനോ ഇക്കോസിസ്റ്റം വളരുന്നതിനനുസരിച്ച്, വെബ് ഡെവലപ്‌മെൻ്റിൽ ഒരു മുൻനിര ശക്തിയായി മാറാൻ ഫ്രെഷ് ഒരുങ്ങിയിരിക്കുന്നു.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: ഫ്രെഷിൻ്റെ ഡോക്യുമെൻ്റേഷൻ പരിശോധിക്കുകയും ഫ്രെയിംവർക്കിൻ്റെ ആശയങ്ങളും നേട്ടങ്ങളും നേരിട്ട് മനസ്സിലാക്കുന്നതിനായി ഒരു ചെറിയ പ്രോജക്റ്റ് നിർമ്മിച്ച് പരീക്ഷിക്കുകയും ചെയ്യുക. പ്രകടനവും എസ്.ഇ.ഒ-യും നിർണായക ആവശ്യകതകളാണെങ്കിൽ നിങ്ങളുടെ അടുത്ത വെബ് ഡെവലപ്‌മെൻ്റ് പ്രോജക്റ്റിനായി ഫ്രെഷ് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.