Auto-Animate Launches Marko 6 Adapter, Animates Lists with One Tag

Auto-Animate അതിന്റെ ആദ്യ ഔദ്യോഗിക അഡാപ്റ്റർ Marko 6-നായി പുറത്തിറക്കി. ഇത് ഡെവലപ്പർമാരെ ഒരു സിംഗിൾ ടാഗ് ഉപയോഗിച്ച്, അധികം JavaScript ഇല്ലാതെ തന്നെ ലിസ്റ്റിലെ മാറ്റങ്ങൾ അനിമേറ്റ് ചെയ്യാൻ സഹായിക്കുന്നു. Marko പ്രോജക്റ്റുകളിൽ മോഷൻ (motion) നൽകുന്നത് ഒരു പ്രത്യേക പ്രയത്നം ആവശ്യമായ കാര്യമായി മാറ്റിയിരുന്ന ബോയിലർപ്ലേറ്റ് (boiler-plate) കോഡുകൾ ഒഴിവാക്കാൻ ഈ നീക്കം സഹായിക്കുന്നു.

React അല്ലെങ്കിൽ Vue പോലുള്ള ഫ്രെയിംവർക്കുകൾ ആശ്രയിക്കുന്ന ക്ലയന്റ്-സൈഡ് "hydration" ഘട്ടം Marko-യുടെ റെൻഡറിംഗ് മോഡൽ ഒഴിവാക്കുന്നു. സെർവർ HTML അയച്ചു കഴിഞ്ഞാൽ, Marko ആ മാർക്കപ്പ് അതേപടി തുടരുന്നു. ഇത് ബണ്ടിൽ സൈസ് വളരെ കുറവായി നിലനിർത്താൻ സഹായിക്കുന്നു—റൺടൈമിന് ഏകദേശം 7 KB gzipped മാത്രം. എന്നാൽ, ഇതേ രീതി പല അനിമേഷൻ ലൈബ്രറികളെയും തടസ്സപ്പെടുത്തുന്നു; കാരണം ഇവയ്ക്ക് ഇഫക്റ്റുകൾ ചേർക്കുന്നതിന് മുൻപ് ക്ലയന്റ്-സൈഡ് റെൻഡറിംഗിനായി കാത്തിരിക്കേണ്ടി വരുന്നു. നിലവിലുള്ള DOM-ലേക്ക് ഒരു ഹുക്ക് (hook) ഇല്ലാത്തതിനാൽ, ലിസ്റ്റ് അപ്‌ഡേറ്റ് ചെയ്യുമ്പോഴെല്ലാം ഡെവലപ്പർമാർക്ക് കസ്റ്റം കോഡ് എഴുതേണ്ടി വന്നിരുന്നു.

പുതിയ അഡാപ്റ്റർ Marko-യുടെ onMount ലൈഫ്സൈക്കിളിലേക്ക് ഹുക്ക് ചെയ്തുകൊണ്ട് ഈ പരിമിതി മറികടക്കുന്നു. ഒരു കോംപോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ, അഡാപ്റ്റർ ലിസ്റ്റിന്റെ പാരന്റ് നോഡിലെ മാറ്റങ്ങൾ നിരീക്ഷിക്കുന്നതിനായി ഒരു MutationObserver നിർമ്മിക്കുന്നു. ഐറ്റങ്ങൾ ചേർക്കുമ്പോഴോ (pushed), ഫിൽറ്റർ ചെയ്യുമ്പോഴോ അല്ലെങ്കിൽ ക്രമം മാറ്റുമ്പോഴോ (shuffled), ഈ ഒബ്സർവർ auto-animate-ന്റെ ഇൻബിൽറ്റ് ട്രാൻസിഷൻ എൻജിനെ പ്രവർത്തിപ്പിക്കുകയും സ്മൂത്ത് ആയ എൻട്രി, എക്സിറ്റ്, റീഓർഡർ അനിമേഷനുകൾ സ്വയമേവ നൽകുകയും ചെയ്യുന്നു. ഇതെല്ലാം ഒരു <auto-animate> ടാഗിലൂടെ മാത്രം നടക്കുന്നു.

ഈ ടാഗ് മൂന്ന് അറ്റാരിബ്യൂട്ടുകൾ സ്വീകരിക്കുന്നു:

• parent – ലിസ്റ്റ് കണ്ടെയ്നറിനെ സൂചിപ്പിക്കുന്ന ഒരു Marko ടാഗ് വേരിയബിൾ.
• options – ഡ്യൂറേഷൻ (duration), ഈസിംഗ് (easing), മറ്റ് ടൈമിംഗ് സെറ്റിംഗുകൾ എന്നിവയ്ക്കായുള്ള ഒരു ഒബ്‌ജക്റ്റ്.
• enabled – റൺടൈമിൽ അനിമേഷനുകൾ ഓൺ ചെയ്യാനോ ഓഫ് ചെയ്യാനോ കഴിയുന്ന ഒരു റിയാക്ടീവ് ബൂളിയൻ (reactive boolean).

enabled എന്നത് റിയാക്ടീവ് ആയതുകൊണ്ട്, ഡെവലപ്പർമാർക്ക് DOM മാറ്റുകയോ ഹാൻഡ്‌ലറുകൾ വീണ്ടും എഴുതുകയോ ചെയ്യാതെ തന്നെ ഏതൊരു സ്റ്റേറ്റ് വാല്യൂവിനോട് (state value) ഇത് ബന്ധിപ്പിക്കാനും മോഷൻ ടോഗിൾ ചെയ്യാനും കഴിയും. അതിനാൽ, ഈ അഡാപ്റ്റർ കോംപോണന്റ് ട്രീയുടെ മറ്റ് ഭാഗങ്ങളെ ബാധിക്കാതെ തന്നെ ഒരു സ്റ്റാറ്റിക് ഡയറക്റ്റീവിനേക്കാൾ കൂടുതൽ ഫ്ലെക്സിബിലിറ്റി നൽകുന്നു.

Vite ഉപയോഗിക്കുന്ന ടീമുകൾക്ക്, ഈ പാക്കേജ് "unresolved import" എന്ന മുന്നറിയിപ്പ് നൽകിയേക്കാം. vite.config.ts-ൽ താഴെ പറയുന്നവ ചേർക്കുന്നത് ഈ പ്രശ്നം പരിഹരിക്കും:

optimizeDeps: {
  exclude: ["@formkit/auto-animate"]
}

ഇത്, ഇംപോർട്ട് പ്രീ-ബണ്ടിൽ ചെയ്യാൻ ശ്രമിക്കുന്നതിന് പകരം Marko-യുടെ പ്ലഗിൻ അത് കൈകാര്യം ചെയ്യാൻ Vite-നോട് നിർദ്ദേശിക്കുന്നു.

ഇതിന്റെ പ്രായോഗിക നേട്ടം ഉടനടി ലഭിക്കും. മുമ്പ് ഒരു useEffect ഹുക്ക്, മാനുവൽ ക്ലാസ് ടോഗിളുകൾ, കുറച്ച് അനിമേഷൻ കോഡുകൾ എന്നിവ ആവശ്യമായിരുന്ന ഒരു സാധാരണ Marko ലിസ്റ്റ് ഇപ്പോൾ ഇപ്രകാരം എഴുതാം:

<auto-animate parent=items enabled=showAnimations options={duration: 300}>
  <ul>
    $ for|item| of=items
      <li>${item.name}</li>
    $ end
  </ul>
</auto-animate>

അധിക JavaScript ഇല്ല, അധിക ബണ്ടിൽ വെയ്റ്റ് ഇല്ല, കൂടാതെ മറ്റ് ഫ്രെയിംവർക്കുകൾക്കായി auto-animate നൽകുന്ന അതേ സ്മൂത്ത് മോഷനും ഇതിലുണ്ട്.

ആർക്കാണ് നേട്ടം, ആര് ശ്രദ്ധിക്കണം

ഇതിനകം Marko ഉപയോഗിച്ചു തുടങ്ങുന്ന ഫ്രണ്ട്-എൻഡ് ടീമുകൾക്ക്, ഡൈനാമിക് ലിസ്റ്റുകൾ പോലുള്ള സാധാരണമായ UI പാറ്റേണുകൾക്കായി ഒരു റെഡിമെയ്ഡ് സൊല്യൂഷൻ ഇതിലൂടെ ലഭിക്കുന്നു. അഡാപ്റ്ററിന്റെ ഭാരം കുറഞ്ഞ സ്വഭാവം Marko-യുടെ പ്രധാന സവിശേഷതയായ ചെറിയ ബണ്ടിൽ സൈസ് നിലനിർത്തുന്നു, ഇത് പെർഫോമൻസ് പ്രധാനമായ സൈറ്റുകൾക്ക് വളരെ അത്യാവശ്യമാണ്. മറുവശത്ത്, ഈ അഡാപ്റ്റർ നിലവിൽ ലിസ്റ്റ് മ്യൂട്ടേഷനുകളിൽ (list mutations) മാത്രം ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു; പ്രത്യേകമായ ടൈംലൈൻ കൺട്രോൾ അല്ലെങ്കിൽ സങ്കീർണ്ണമായ കൊറിയോഗ്രാഫി (choreography) ആവശ്യമുള്ള ഡെവലപ്പർമാർക്ക് ഇപ്പോഴും കസ്റ്റം കോഡോ മറ്റൊരു ലൈബ്രറിയോ ഉപയോഗിക്കേണ്ടി വരും.

അടുത്തതായി എന്താണ് ശ്രദ്ധിക്കേണ്ടത്

ഈ അഡാപ്റ്റർ ഓപ്പൺ സോഴ്സ് ആണ്, കൂടാതെ റിലീസ് നോട്ടുകളിൽ ഇതിന്റെ ഡെമോ സാൻഡ്‌ബോക്സ് ലിങ്ക് ചെയ്തിട്ടുണ്ട്. ഗ്രീഡ് റീഫ്ലോകൾ (grid reflows) അല്ലെങ്കിൽ Marko-യുടെ വരാനിരിക്കുന്ന കോംപോണന്റ് ലെവൽ ട്രാൻസിഷനുകൾ എന്നിവയ്ക്കുള്ള പിന്തുണ പോലുള്ള ഭാവി വിപുലീകരണങ്ങൾ കമ്മ്യൂണിറ്റി ഫീഡ്‌ബാക്കിന് അനുസരിച്ച് രൂപപ്പെട്ടേക്കാം. ഇതിന്റെ ഉപയോഗം React, Vue എന്നിവയിലെ auto-animate-ന്റെ വളർച്ച പോലെയാണെങ്കിൽ, JavaScript UI ഇക്കോസിസ്റ്റത്തിൽ "zero-code" മോഷനുകൾക്കായി വലിയൊരു മാറ്റം നമുക്ക് കാണാൻ സാധിക്കും.

ചുരുക്കത്തിൽ: ചരിത്രപരമായി പ്രയാസകരമായ ഒരു കാര്യത്തെ—സെർവർ റെൻഡർ ചെയ്ത ലിസ്റ്റുകൾ അനിമേറ്റ് ചെയ്യുന്നത്—Auto-Animate-ന്റെ Marko 6 അഡാപ്റ്റർ ഒരു സിംഗിൾ ഡിക്ലറേറ്റീവ് ടാഗാക്കി മാറ്റുന്നു. ഇത് Marko-യുടെ മിനിമൽ ബണ്ടിൽ സൈസ് നിലനിർത്തുന്നതോടൊപ്പം ഡെവലപ്പർമാർക്ക് പെട്ടെന്ന് ഉപയോഗിക്കാവുന്ന ഒരു മോഷൻ ലെയറും നൽകുന്നു.