Auto-Animate தனது Marko 6 அடாப்டரை அறிமுகப்படுத்துகிறது; ஒரே ஒரு டேக் மூலம் பட்டியல்களை அனிமேட் செய்கிறது

Auto-Animate தனது முதல் அதிகாரப்பூர்வ Marko 6 அடாப்டரை (adapter) வெளியிட்டுள்ளது, இது டெவலப்பர்கள் கூடுதல் JavaScript இல்லாமலேயே, ஒரு ஒற்றை டேக் (tag) மூலம் பட்டியலின் மாற்றங்களை அனிமேட் செய்ய அனுமதிக்கிறது. நீண்ட காலமாக Marko திட்டங்களில் அனிமேஷன் என்பது ஒரு தனித்துவமான முயற்சியாகத் தோன்றியதற்குக் காரணமான தேவையற்ற குறியீடுகளை (boiler-plate) இது நீக்குவதால் இந்த நடவடிக்கை முக்கியத்துவம் பெறுகிறது.

Marko-வின் ரெண்டரிங் மாடல் (rendering model), React அல்லது Vue போன்ற கட்டமைப்புகள் நம்பியிருக்கும் கிளையண்ட்-சைடு "hydration" படிநிலையைத் தவிர்க்கிறது. சர்வர் HTML-ஐ அனுப்பிய பிறகு, Marko அந்த மார்க்கப்பையே (markup) அப்படியே தொடர்கிறது, இது பண்டில்களை (bundles) மிகச் சிறியதாக வைத்திருக்க உதவுகிறது—ரன்டைமிற்கு (runtime) சுமார் 7 KB gzipped அளவில் உள்ளது. இருப்பினும், இதே குறுக்குவழி, கிளையண்ட்-சைடு ரெண்டரிங் நடக்கும் வரை காத்திருக்கும் பல அனிமேஷன் லைப்ரரிகளைத் தடுக்கிறது. ஏற்கனவே இருக்கும் DOM-உடன் இணைக்க முடியாததால், டெவலப்பர்கள் பாரம்பரியமாக ஒவ்வொரு பட்டியல் புதுப்பிப்பிற்கும் தனிப்பயன் குறியீடுகளை (custom code) எழுத வேண்டியிருந்தது.

புதிய அடாப்டர், Marko-வின் onMount லைஃப்சைக்கிளுடன் (lifecycle) இணைவதன் மூலம் அந்தத் தடையைத் தவிர்க்கிறது. ஒரு காம்போனென்ட் மவுண்ட் (mount) ஆகும்போது, அடாப்டர் பட்டியலின் பேரண்ட் நோடை (parent node) மாற்றங்களைக் கண்காணிக்க ஒரு MutationObserver-ஐ உருவாக்குகிறது. உருப்படிகள் சேர்க்கப்படும்போது (pushed), வடிகட்டப்படும்போது (filtered) அல்லது வரிசை மாற்றப்படும்போது (shuffled), இந்த ஆப்சர்வர் auto-animate-ன் உள்ளமைக்கப்பட்ட டிரான்சிஷன் என்ஜினைத் (transition engine) தூண்டுகிறது, இதன் மூலம் சீரான என்ட்ரி (entry), எக்சிட் (exit) மற்றும் ரீஆர்டர் (reorder) அனிமேஷன்களைத் தானாகவே வழங்குகிறது. இவை அனைத்தும் ஒரு ஒற்றை <auto-animate> டேக் மூலம் நடைபெறுகின்றன.

இந்த டேக் மூன்று பண்புகளை (attributes) ஏற்கிறது:

• parent – பட்டியலின் கண்டெய்னரைக் (container) குறிக்கும் ஒரு Marko டேக் வேரியபிள்.
• options – கால அளவு (duration), ஈசிங் (easing) மற்றும் பிற டைமிங் அமைப்புகளுக்கான ஒரு ஆப்ஜெக்ட் (object).
• enabled – ரன்டைமில் அனிமேஷன்களை ஆன் அல்லது ஆஃப் செய்யக்கூடிய ஒரு ரியாக்டிவ் பூலியன் (reactive boolean).

enabled என்பது ரியாக்டிவ் என்பதால், டெவலப்பர்கள் DOM-ஐத் தொடாமலோ அல்லது ஹேண்ட்லர்களை (handlers) மீண்டும் எழுதாமலோ, எந்தவொரு ஸ்டேட் (state) மதிப்பிற்கும் இதைக் பிணைத்து (bind) அனிமேஷன்களை மாற்றிக்கொள்ள முடியும். எனவே, இந்த அடாப்டர் மற்ற காம்போனென்ட் ட்ரீயிலிருந்து (component tree) கண்ணுக்குத் தெரியாமல் இருந்துகொண்டே, ஒரு ஸ்டேடிக் டைரக்டிவை (static directive) விட அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது.

Vite பயன்படுத்தும் குழுக்களுக்கு, இந்த பேக்கேஜ் "unresolved import" எச்சரிக்கையை ஏற்படுத்தலாம். vite.config.ts-இல் பின்வருவனவற்றைச் சேர்ப்பது இந்தப் பிரச்சனையைத் தீர்க்கும்:

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

இது, இம்போர்ட்டை (import) ப்ரீ-பண்டில் (pre-bundle) செய்ய முயற்சிப்பதற்குப் பதிலாக, 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-வை ஏற்றுக்கொண்ட பிரண்ட்-எண்ட் (front-end) குழுக்களுக்கு, அடிக்கடி பயன்படுத்தப்படும் ஒரு UI பேட்டர்ன் — அதாவது டைனமிக் பட்டியல்களுக்கான (dynamic lists) ஒரு தயார்நிலைத் தீர்வு கிடைத்துள்ளது. இந்த அடாப்டரின் லேசான தன்மை, மிகச்சிறிய பண்டில்களை வழங்கும் Marko-வின் சிறப்பம்சத்தைப் பாதுகாக்கிறது, இது செயல்திறன் சார்ந்த (performance-critical) தளங்களுக்கு மிகவும் முக்கியமானது. மறுபுறம், இந்த அடாப்டர் தற்போது பட்டியலின் மாற்றங்களில் (list mutations) மட்டுமே கவனம் செலுத்துகிறது; தனிப்பயன் டைம்லைன் கட்டுப்பாடு (bespoke timeline control) அல்லது சிக்கலான குரோரியோகிராபி (complex choreography) தேவைப்படும் டெவலப்பர்கள் இன்னும் தனிப்பயன் குறியீடு அல்லது வேறு லைப்ரரியையே சார்ந்திருக்க வேண்டியிருக்கும்.

அடுத்து என்ன எதிர்பார்க்கலாம்

இந்த அடாப்டர் ஓப்பன் சோர்ஸ் (open-source) ஆகும் மற்றும் இதன் ரிலீஸ் நோட்ஸில் (release notes) ஒரு டெமோ சாண்ட்பாக்ஸ் (demo sandbox) இணைக்கப்பட்டுள்ளது. சமூகத்தின் கருத்துக்கள் (community feedback), கிரிட் ரீஃப்ளோக்கள் (grid reflows) அல்லது Marko-வின் வரவிருக்கும் காம்போனென்ட்-லெவல் டிரான்சிஷன்களுக்கான (component-level transitions) ஆதரவு போன்ற எதிர்கால விரிவாக்கங்களை வடிவமைக்க உதவும். இதன் பயன்பாடு React மற்றும் Vue-இல் auto-animate-ன் வேகமான வளர்ச்சியைப் போலவே இருந்தால், JavaScript UI சூழலில் "zero-code" அனிமேஷனுக்கான ஒரு பெரிய மாற்றத்தை நாம் காணக்கூடும்.

முக்கியக் குறிப்பு: Auto-Animate-ன் Marko 6 அடாப்டர், வரலாற்று ரீதியாக கடினமான ஒரு பணியை — அதாவது சர்வர்-ரெண்டர் செய்யப்பட்ட பட்டியல்களை அனிமேட் செய்வதை — ஒரு ஒற்றை டெக்ளாரேட்டிவ் டேக் (declarative tag) ஆக மாற்றுகிறது. இது டெவலப்பர்களுக்கு உடனடி, மாற்றக்கூடிய (toggle-able) அனிமேஷன் லேயரை வழங்கும் அதே வேளையில், Marko-வின் குறைந்தபட்ச பண்டில் அளவையும் பாதுகாக்கிறது.