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

ഇതിന്റെ പ്രധാന കാരണം സാധാരണയായി ഒരു onClick ഹാൻഡ്‌ലർ ഉള്ള ഒരു div ആണ്.

Div-കൾ ലിങ്കുകളായി ഉപയോഗിക്കുന്നത് നിർത്തുക

ഒരു div-ന് സെമാന്റിക് അർത്ഥമില്ല (semantic meaning). അതൊരു ബോക്സ് മാത്രമാണ്. നിങ്ങൾ അതിലേക്ക് ഒരു ക്ലിക്ക് ഹാൻഡ്‌ലർ ഘടിപ്പിക്കുകയും ഉപയോക്താക്കളെ പുതിയൊരു വ്യൂവിലേക്ക് എത്തിക്കാൻ അത് ഉപയോഗിക്കുകയും ചെയ്യുമ്പോൾ, ഒരു കാർഡ്ബോർഡ് ബോക്സിനെ ഒരു വാതിലായി പരിഗണിക്കണമെന്ന് നിങ്ങൾ ബ്രൗസറിനോട് ആവശ്യപ്പെടുകയാണ് ചെയ്യുന്നത്. ബ്രൗസർ അത് നിരസിക്കുന്നു. ബ്രൗസറിന് ചുറ്റും നിർമ്മിച്ചിട്ടുള്ള മറ്റെല്ലാ ടൂളുകളും അത് നിരസിക്കുന്നു.

സ്ക്രീൻ റീഡറുകൾ ഒരു div-നെ ലിങ്കായോ ബട്ടണായോ അറിയിക്കില്ല. അവ അതിനെ ഒഴിവാക്കുകയോ അല്ലെങ്കിൽ വെറും ടെക്സ്റ്റ് ആയി വായിക്കുകയോ ചെയ്യുന്നു. ശബ്ദത്തിലൂടെ നാവിഗേറ്റ് ചെയ്യുന്ന ഒരു ഉപയോക്താവിന് അതിനെ ലക്ഷ്യം വെക്കാൻ കഴിയില്ല. നിങ്ങളുടെ പേജിലെ URL-കൾക്കായി തിരയുന്ന ഒരു സെർച്ച് എഞ്ചിൻ ക്രോളർക്ക് പിന്തുടരാൻ ഒന്നും കാണാൻ കഴിയില്ല. നിങ്ങളുടെ റൂട്ട് നിലവിലില്ല എന്ന് തന്നെ കരുതാം.

ഇതിലും മോശമായ കാര്യം, ഉപയോക്താക്കൾക്ക് നേരത്തെ അറിയാവുന്ന പെരുമാറ്റരീതികൾ (behaviors) നിങ്ങൾക്ക് നഷ്ടപ്പെടുന്നു എന്നതാണ്. ഒരു യഥാർത്ഥ ലിങ്ക് ഉപയോഗിച്ച് പുതിയൊരു ടാബിൽ തുറക്കാനോ, ഡെസ്റ്റിനേഷൻ ബുക്ക്മാർക്ക് ചെയ്യാനോ, അല്ലെങ്കിൽ അഡ്രസ് കോപ്പി ചെയ്ത് ഷെയർ ചെയ്യാനോ സാധിക്കും. കീബോർഡ് ഉപയോഗിക്കുന്നവർ Tab കീ ഉപയോഗിച്ച് അതിലേക്ക് എത്താനും Enter കീ ഉപയോഗിച്ച് അത് തുറക്കാനും പ്രതീക്ഷിക്കുന്നു. ഒരു div-ൽ ഇവയൊന്നും ലഭ്യമല്ല. നിങ്ങൾ tabIndex, role="link", കീബോർഡ് ലിസണറുകൾ എന്നിവ കൂട്ടിച്ചേർത്താൽ പോലും, ബ്രൗസർ സൗജന്യമായി നൽകുന്ന കാര്യങ്ങൾ നിങ്ങൾ മോശമായ രീതിയിൽ വീണ്ടും നിർമ്മിക്കുകയാണ് ചെയ്യുന്നത്. കൂടാതെ, നിങ്ങൾ ഏതെങ്കിലും ഒരു എഡ്ജ് കേസ് (edge case) മറന്നുപോകാനും സാധ്യതയുണ്ട്. നിങ്ങൾ എപ്പോഴും അങ്ങനെയാണ് ചെയ്യാറുള്ളത്.

ഡെസ്റ്റിനേഷനുകൾക്കായി ആങ്കറുകളും (Anchors) ആക്ഷനുകൾക്കായി ബട്ടണുകളും (Buttons) ഉപയോഗിക്കുക

HTML ഇതിനകം തന്നെ ഇതിന് പരിഹാരം കണ്ടെത്തിയിട്ടുണ്ട്. രണ്ട് എലമെന്റുകളും ക്ലിക്ക് ചെയ്യാവുന്നവയായി തോന്നുന്നതുകൊണ്ടാണ് ആശയക്കുഴപ്പം ഉണ്ടാകുന്നത്, അതിനാൽ ഡെവലപ്പർമാർ അവ രണ്ടും പരസ്പരം മാറ്റിവെച്ച് ഉപയോഗിക്കുന്നു. എന്നാൽ അവ രണ്ടും ഒന്നല്ല.

ഉപയോക്താവിനെ ഒരു പുതിയ URL-ലേക്ക് മാറ്റണമെന്നുണ്ടെങ്കിൽ <a ടാഗ് ഉപയോഗിക്കുക. ഒരു സിമുലേറ്റഡ് വ്യൂ സ്വാപ്പ് അല്ല, സ്റ്റേറ്റ് ചേഞ്ച് അല്ല, മറിച്ച് ഒരു യഥാർത്ഥ ലൊക്കേഷൻ ആയിരിക്കണം അത്. href അറ്റ്രിബ്യൂട്ടിൽ ഒരു യഥാർത്ഥ അഡ്രസ് ഉണ്ടായിരിക്കണം:

<a href="/docs">Documentation</a>

അത്രമാത്രം. ഉപയോക്താവ് എവിടെയെങ്കിലും പോകാനാണ് ഉദ്ദേശിക്കുന്നതെങ്കിൽ ഒരു ലിങ്ക് ഉപയോഗിക്കുക.

നിലവിലെ പേജിൽ എന്തെങ്കിലും സംഭവിക്കുമ്പോഴാണ് <button> ഉപയോഗിക്കേണ്ടത്. ബട്ടണുകൾ താഴെ പറയുന്ന ആക്ഷനുകൾക്കായി ഉപയോഗിക്കാം:

  • ഒരു modal തുറക്കാൻ
  • ഒരു form സബ്മിറ്റ് ചെയ്യാൻ
  • settings സേവ് ചെയ്യാൻ
  • ഒരു menu ടോഗിൾ ചെയ്യാൻ

ലിങ്കുകൾ ഡെസ്റ്റിനേഷനുകൾക്ക് വേണ്ടിയുള്ളതാണ്. ബട്ടണുകൾ ആക്ഷനുകൾക്ക് വേണ്ടിയുള്ളതാണ്. ഇവ രണ്ടും കൂട്ടിക്കലർത്തുന്നത് നിങ്ങളുടെ ഇന്റർഫേസിനെ കുഴപ്പത്തിലാക്കുകയും ഉപയോക്താക്കളുടെ പ്രതീക്ഷകളെ തകർക്കുകയും ചെയ്യും.

ബ്രൗസിനെ അതിന്റെ ജോലി ചെയ്യാൻ അനുവദിക്കുക

പതിറ്റാണ്ടുകളായുള്ള പരിണാമത്തിന്റെയും സ്റ്റാൻഡേർഡൈസേഷന്റെയും ഫലമാണ് ആധുനിക ബ്രൗസറുകൾ. നിങ്ങൾ സ്വന്തമായി എഴുതുന്ന JavaScript-നേക്കാൾ മികച്ച രീതിയിൽ അവ സെക്യൂരിറ്റി, ഹിസ്റ്ററി, പ്രീഫെച്ചിംഗ് (prefetching), അക്സസിബിലിറ്റി എന്നിവ കൈകാര്യം ചെയ്യുന്നു.

ഒരു യഥാർത്ഥ ആങ്കർ ടാഗ് ബ്രൗസർ ഹിസ്റ്ററി സ്റ്റാക്കിലേക്ക് (history stack) സ്വയമേവ വിവരങ്ങൾ നൽകുന്നു. ഇത് നാറ്റീവ് കോൺടെക്സ്റ്റ് മെനുവിനോടൊപ്പം പ്രവർത്തിക്കുന്നു. ഉപയോക്താവ് അതിന് മുകളിൽ മൗസ് വെക്കുമ്പോഴോ (hover) ഫോക്കസ് ചെയ്യുമ്പോഴോ ബ്രൗസറിലെ ഇൻബിൽറ്റ് പ്രീഫെച്ചിംഗ് അൽഗോരിതങ്ങളിൽ ഇത് പങ്കുചേരുന്നു, ഇത് ഒരു വരി കോഡ് പോലും എഴുതാതെ തന്നെ നിങ്ങളുടെ ആപ്പിന്റെ വേഗത വർദ്ധിപ്പിക്കുന്നു. ലിങ്കുകൾ തുറക്കുന്നതിനായുള്ള ഉപയോക്താവിന്റെ മുൻഗണനകളെ ഇത് മാനിക്കുന്നു. പാസ്‌വേഡ് മാനേജറുകൾ, ട്രാൻസ്‌ലേഷൻ ടൂളുകൾ, റീഡർ മോഡുകൾ എന്നിവയുമായി ഇത് സഹകരിക്കുന്നു.

നിങ്ങൾ ഇതിന് പകരം ഒരു JavaScript നാവിഗേഷൻ ഫംഗ്ഷൻ ഉപയോഗിക്കുമ്പോൾ, ഈ സൗകര്യങ്ങളെല്ലാം നിങ്ങൾ ഉപേക്ഷിക്കുകയാണ് ചെയ്യുന്നത്. നിങ്ങൾ വെറും ഫീച്ചറുകൾ മാത്രമല്ല നഷ്ടപ്പെടുത്തുന്നത്; ഇന്റർനെറ്റിലെ മറ്റെല്ലാ സൈറ്റുകളിലും ഉപയോക്താക്കൾ വളർത്തിയെടുത്ത ശീലങ്ങൾ ഉപേക്ഷിക്കാൻ നിങ്ങൾ അവരെ നിർബന്ധിക്കുകയാണ്. ഇതൊരു സാങ്കേതികമായ തീരുമാനമല്ല. ഇതൊരു മോശം യൂസർ എക്സ്പീരിയൻസ് ആണ്.

നിങ്ങളുടെ ഫ്രെയിംവർക്ക് യഥാർത്ഥത്തിൽ എന്താണ് റെൻഡർ ചെയ്യുന്നത് എന്ന് പരിശോധിക്കുക

React Router, Vue Router, Next.js Link components, SvelteKit. ഈ ടൂളുകൾ ക്ലയന്റ് സൈഡ് റൂട്ടിംഗ് (client-side routing) വളരെ എളുപ്പമാക്കുന്നു. എന്നാൽ അബ്‌സ്‌ട്രാക്ഷൻ (abstraction) തെറ്റുകൾക്ക് കാരണമാകും.

നിങ്ങളുടെ DOM പരിശോധിക്കുക. ബ്രൗസറിലെ ഡെവലപ്പർ ടൂളുകൾ തുറന്ന് നിങ്ങളുടെ ഫ്രെയിംവർക്ക് പുറത്തുവിടുന്ന എലമെന്റുകൾ നോക്കുക. ഒരു <Link> കമ്പോണന്റ് ഫൈനൽ HTML-ൽ ശരിയായ href അറ്റ്രിബ്യൂട്ടോടു കൂടിയ ഒരു യഥാർത്ഥ <a ടാഗായിരിക്കണം റെൻഡർ ചെയ്യേണ്ടത്. അത് ഒരു span, div, അല്ലെങ്കിൽ ശരിയായ href ഇല്ലാത്ത മറ്റെന്തെങ്കിലും ആയിട്ടാണ് റെൻഡർ ചെയ്യുന്നതെങ്കിൽ, നിങ്ങളുടെ അബ്‌സ്‌ട്രാക്ഷൻ പരാജയപ്പെട്ടിരിക്കുന്നു. കമ്പോണന്റ് ശരിയാക്കുക. ഡിഫോൾട്ട് രീതി മാറ്റുക (override). passHref പ്രോപ്പ് അല്ലെങ്കിൽ ഫ്രെയിംവർക്കിന് അനുയോജ്യമായ മറ്റെന്തെങ്കിലും ഉപയോഗിക്കുക. പരിശോധിക്കാതെ ഫ്രെയിംവർക്ക് എല്ലാം ശരിയാക്കുമെന്ന് വിശ്വസിക്കരുത്.

ഇത് ഹൈഡ്രേഷൻ മിസ്മാച്ച് (hydration mismatches) സംബന്ധിച്ച പ്രശ്നങ്ങൾക്കും ബാധകമാണ്. സെർവർ ഒരു ലിങ്ക് റെൻഡർ ചെയ്യുകയും ക്ലയന്റ് അത് ഒരു ലിങ്ക് അല്ലാത്ത ഒന്നായി ഹൈഡ്രേറ്റ് ചെയ്യുകയും ചെയ്താൽ, അത് കണ്ടെത്താൻ പ്രയാസമുള്ള അക്സസിബിലിറ്റി ബഗുകൾ നിങ്ങൾ സൃഷ്ടിക്കുന്നു. കാരണം നിങ്ങളുടെ സോഴ്സ് കോഡിൽ HTML ശരിയായി കാണപ്പെടുമെങ്കിലും ലൈവ് DOM-ൽ അത് തെറ്റായിരിക്കും.

വ്യാജ ഡെസ്റ്റിനേഷനുകൾ ഒഴിവാക്കുക

ഒരിക്കലും മാറാത്ത ഒരു രീതിയുണ്ട്: href="javascript:void(0)". ഒരു ലിങ്ക് പോലെ തോന്നുകയും എന്നാൽ ബട്ടൺ പോലെ പ്രവർത്തിക്കുകയും ചെയ്യുന്ന ഒന്ന് വേണമെന്നുണ്ടെങ്കിൽ ഡെവലപ്പർമാർ ഇത് ഉപയോഗിക്കുന്നു. സാധാരണയായി ഒരു ബട്ടൺ സ്റ്റൈൽ ചെയ്യാൻ താല്പര്യമില്ലാത്തതുകൊണ്ടോ അല്ലെങ്കിൽ പഴയ കോഡ്ബേസ് ആവശ്യപ്പെടുന്നതുകൊണ്ടോ ആണ് ഇങ്ങനെ ചെയ്യുന്നത്.

നിർത്തുക. ഇതൊരു URL അല്ല. ഇത് ബ്രൗസറിന് ഒരു ലക്ഷ്യസ്ഥാനവും നൽകുന്നില്ല. ഇത് ഉപയോഗശൂന്യമായ അവസ്ഥകളിലൂടെ ഹിസ്റ്ററി സ്റ്റാക്കിനെ (history stack) മലിനമാക്കുന്നു. ഇത് ബ്രൗസർ ഹിസ്റ്ററിയെയും ആക്സസിബിലിറ്റിയെയും (accessibility) തകരാറിലാക്കുന്നു. ഇതൊരു കെണിയാണ്. നാവിഗേഷൻ ഇല്ലാതെ ഒരു ക്ലിക്ക് ബിഹേവിയർ (click behavior) ആണ് നിങ്ങൾ ആഗ്രഹിക്കുന്നതെങ്കിൽ, നിങ്ങൾക്ക് ഒരു <button> ആവശ്യമാണ്. നിങ്ങൾക്ക് ഇഷ്ടമുള്ള രീതിയിൽ അതിനെ സ്റ്റൈൽ ചെയ്യാം. ആ എലമെന്റ് ഒരു ബട്ടൺ ആണോ അതോ ലിങ്ക് ആണോ എന്നതിനെക്കുറിച്ച് CSS-ന് ആശങ്കയില്ല. എന്നാൽ നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് അത് പ്രധാനമാണ്.

ഉപയോക്താവ് എവിടേക്കാണ് പോകുന്നത് എന്ന് വിശദീകരിക്കുന്ന ടെക്സ്റ്റ് എഴുതുക

നിങ്ങളുടെ ലിങ്കിനുള്ളിലെ വാക്കുകൾ പ്രധാനമാണ്. സ്ക്രീൻ റീഡർ (Screen reader) ഉപയോഗിക്കുന്നവർ പേജിലെ എല്ലാ ലിങ്കുകളും വേഗത്തിൽ പരിശോധിക്കുന്നതിനായി പലപ്പോഴും അവയുടെ ഒരു ലിസ്റ്റ് എടുക്കാറുണ്ട്. നിങ്ങളുടെ എല്ലാ ലിങ്കുകളും "Read more" അല്ലെങ്കിൽ "Click here" എന്നാണെങ്കിൽ, ആ ലിസ്റ്റ് ഉപയോഗശൂന്യമായ ശബ്ദകോലാഹലമായി മാറും.

കൃത്യത പാലിക്കുക. ഇവ താരതമ്യം ചെയ്യുക:

  • മോശം: <a href="/security/api-guide">Read more</a>
  • നല്ലത്: <a href="/security/api-guide">Read the API security guide</a>

രണ്ടാമത്തേത് ഉപയോക്താവിന് അവർക്ക് എന്താണ് ലഭിക്കുക എന്ന് കൃത്യമായി പറഞ്ഞുതരുന്നു. ഇത് ലക്ഷ്യസ്ഥാനത്തെ പേജിനെക്കുറിച്ച് സെർച്ച് എഞ്ചിനുകൾക്ക് സന്ദർഭം (context) നൽകുന്നു. ഇത് നിങ്ങളുടെ ലിങ്ക് ലിസ്റ്റ് നാവിഗേറ്റ് ചെയ്യാൻ എളുപ്പമാക്കുന്നു. വിവരണാത്മകമായ ലിങ്ക് ടെക്സ്റ്റ് (Descriptive link text) എന്നത് ആക്സസിബിലിറ്റിയിൽ നിങ്ങൾക്ക് എളുപ്പത്തിൽ നേടിയെടുക്കാവുന്ന വലിയൊരു നേട്ടമാണ്.

ഗൗരവമായി പരിശോധിക്കുക

നിങ്ങൾ അത് പരിശോധിക്കുന്നില്ലെങ്കിൽ ആർക്കിടെക്ചറിന് (Architecture) ഒരു അർത്ഥവുമില്ല.

ഒന്നാമതായി, നിങ്ങളുടെ കീബോർഡ് ഫ്ലോ (keyboard flow) പരിശോധിക്കുക. മൗസ് മാറ്റി വെക്കുക. നിങ്ങളുടെ സൈറ്റിലെ ഓരോ ഇന്ററാക്ടീവ് എലമെന്റിലൂടെയും (interactive element) Tab കീ ഉപയോഗിച്ച് കടന്നുപോവുക. ഓരോ യഥാർത്ഥ ലിങ്കും ഒരു വ്യക്തമായ ഫോക്കസ് ഔട്ട്‌ലൈൻ (focus outline) കാണിക്കേണ്ടതുണ്ട്; അത് പശ്ചാത്തലത്തിൽ അലിഞ്ഞുപോകുന്ന നേരിയ തിളക്കമല്ല, മറിച്ച് തളർന്ന കണ്ണുകൾക്ക് പോലും പെട്ടെന്ന് തിരിച്ചറിയാൻ കഴിയുന്ന ഒരു വ്യക്തമായ വളയമായിരിക്കണം. Enter അമർത്തുക. അത് ലിങ്ക് ആക്ടിവേറ്റ് ചെയ്യണം. Tab ഒരു എലമെന്റിനെ ഒഴിവാക്കുകയോ അല്ലെങ്കിൽ Enter ഒന്നും ചെയ്യാതിരിക്കുകയോ ചെയ്താൽ, അവിടെ ഒരു ബഗ് (bug) ഉണ്ട് എന്നാണ് അർത്ഥം.

രണ്ടാമതായി, നിങ്ങളുടെ റൂട്ടുകൾ (routes) സെർവർ തലത്തിൽ പരിശോധിക്കുക. ക്ലയന്റ് സൈഡ് റൂട്ടിംഗ് (Client-side routing) എന്നത് ഒരു ഉപരിപ്ലവമായ കാര്യമാണ്. ഒരു ഉപയോക്താവ് /dashboard/reports ബുക്ക്മാർക്ക് ചെയ്യുകയും അടുത്ത ദിവസം തിരികെ വരികയോ അല്ലെങ്കിൽ പേജ് റിഫ്രഷ് ചെയ്യുകയോ ചെയ്താൽ, ആ പേജ് എങ്ങനെ നൽകണമെന്ന് നിങ്ങളുടെ സെർവർക്ക് അറിയണം. അറിയപ്പെടാത്ത പാത്തുകൾക്കായി (unknown paths) നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ഷെല്ലിലേക്ക് (application shell) മാറാനോ അല്ലെങ്കിൽ ശരിയായ HTML നേരിട്ട് നൽകാനോ നിങ്ങളുടെ റിവേഴ്സ് പ്രോക്സി (reverse proxy) അല്ലെങ്കിൽ സെർവർ ഫ്രെയിംവർക്ക് ക്രമീകരിക്കുക. റിഫ്രഷ് ചെയ്യുമ്പോൾ കാണുന്ന ഒരു 404 എറർ ചെറിയൊരു ബഗ്ഗല്ല. അത് നൽകിയ വാഗ്ദാനത്തിലെ വീഴ്ചയാണ്.

JavaScript ഒരു ശക്തമായ പാളിയാണ് (layer)