Auto-animate, Marko 6-க்கான அதிகாரப்பூர்வ அடாப்டரை வெளியிட்டுள்ளது, இது டெவலப்பர்கள் எந்தவொரு தனிப்பயன் குறியீடும் (custom code) இன்றி, ஒரு ஒற்றை டேக் (tag) மூலம் பட்டியல் மாற்றங்களை அனிமேட் செய்ய அனுமதிக்கிறது. இந்த பேக்கேஜை npm மூலம் நிறுவலாம், AutoAnimate என இறக்குமதி செய்யலாம் மற்றும் சேர்க்கைகள் (additions), நீக்கங்கள் (removals) மற்றும் மறுவரிசைப்படுத்துதல்களுக்கு (reorders) உடனடியாகப் பயன்படுத்தலாம்.

Marko-விற்கு இது ஏன் தேவைப்பட்டது

Marko-வின் ரெண்டரிங் மாடல் (rendering model) வழக்கமான ஹைட்ரேஷன் (hydration) படிநிலையைத் தவிர்க்கிறது. சர்வர் HTML-ஐ ஸ்ட்ரீம் செய்கிறது, கிளையண்ட் சர்வர் விட்ட இடத்திலிருந்து சரியாக அங்கிருந்து தொடர்கிறது (resumes), மேலும் எந்த இரண்டாவது ரெண்டரிங்கும் காம்போனென்ட் மரத்தை (component tree) மீண்டும் உருவாக்காது. இந்த ஃபிரேம்வொர்க் (framework) மிகக் குறைந்த அளவே ஜாவாஸ்கிரிப்ட்டைக் கொண்டுள்ளதால், அதிகப்படியான ரன்டைமை (runtime) சேர்க்கும் எந்தவொரு கூடுதல் லைப்ரரியும் (library) அந்தச் சிறப்பம்சத்தை அழித்துவிடும்.

புதிய அடாப்டர், Marko ஏற்கனவே வழங்கும் உண்மையான DOM நோட்களுடன் (nodes) நேரடியாக இணைகிறது. இது ஒரு MutationObserver-ஐ உருவாக்குகிறது—இது DOM மாற்றங்களைக் கண்காணிக்கும் ஒரு பிரவுசர் API ஆகும்—பட்டியலின் அடிப்படைத் தரவு மாறும்போது (mutate) இது auto-animate-ன் டிரான்சிஷன் லாஜிக்கைத் (transition logic) தூண்டுகிறது. நடைமுறையில், டெவலப்பர்கள் தங்கள் தரவை மாற்றினால் போதுமானது; DOM தானாகவே புதுப்பிக்கப்பட்டு அனிமேட் ஆகும்.

தொடங்குவது எப்படி

  1. கோர் பேக்கேஜை (core package) நிறுவவும் 

    npm install @formkit/auto-animate

  2. Marko-விற்கான பிரத்யேக அடாப்டரை இறக்குமதி செய்யவும் 

    import AutoAnimate from "@formkit/auto-animate/marko"

  3. பட்டியலின் பெற்றோர் உறுப்பை (parent element) <AutoAnimate> கொண்டுச் சுற்றவும் (wrap).

அவ்வளவுதான். எந்த ஹூக்ஸும் (hooks), கூடுதல் டைரக்டிவ்களும் (directives), அல்லது மேனுவல் லைஃப்சைக்கிள் மேனேஜ்மென்ட்டும் (manual lifecycle management) தேவையில்லை.

Vite குறிப்பு

புதிய Vite திட்டங்கள் சில நேரங்களில் அடாப்டர் தொடர்பாக இறக்குமதி பிழையை (import error) ஏற்படுத்தும். vite.config.ts-இல் பின்வருவனவற்றைச் சேர்ப்பதன் மூலம் இதைத் தீர்க்கலாம்:

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

இந்த விலக்கு (exclusion), Vite-ன் ஆப்டிமைசருக்குப் (optimizer) பதிலாக Marko-வின் சொந்த பிளகின் (plugin) இந்த பேக்கேஜைக் கையாள அனுமதிக்கிறது.

டெவலப்பர்கள் பெறும் நன்மைகள்

  • குறைந்த பயன்பாடு (Tiny footprint) – DOM மாற்றங்களைக் கண்காணிக்கத் தேவையான குறியீட்டை மட்டுமே இந்த அடாப்டர் சேர்க்கிறது; இது ஏற்கனவே மெலிதாக இருக்கும் Marko-வின் பண்டிலை (bundle) அதிகரிக்காது.
  • ரியாக்டிவ் டoglிக் (Reactive toggling) – ஒரு எளிய ரியாக்டிவ் அட்ரிபியூட் (reactive attribute) மூலம் ரன்டைமில் அனிமேஷன்களை ஆன் அல்லது ஆஃப் செய்யலாம்.
  • எந்த கூடுதல் அமைப்பும் தேவையில்லை (Zero ceremony) – ஒவ்வொரு ஐட்டத்திற்கும் அனிமேஷன் லாஜிக்கை எழுதவோ அல்லது மவுண்ட்/அன்மவுண்ட் (mount/unmount) ஹூக்ஸ்களை நிர்வகிக்கவோ தேவையில்லை.
  • தானியங்கி சுத்தம் செய்தல் (Automatic cleanup) – காம்போனென்ட் அன்மவுண்ட் ஆகும்போது, இந்த டேக் அதன் அப்சர்வரை (observer) நீக்கிவிடும், இதனால் மெமரி லீக் (memory leaks) தவிர்க்கப்படுகிறது.

ஒரு நேரடி டெமோ (live demo) முழு API-யையும் காட்டுகிறது, இதில் பவுன்ஸ் (bounce) மற்றும் ஸ்பிரிங்-ஸ்டைல் (spring-style) விளைவுகளுக்கான விருப்பத் துணைப் பிளகின்களும் (optional plugins) அடங்கும். சாண்ட்பாக்ஸ் (sandbox) இணைப்பு அசல் அறிவிப்பில் வழங்கப்பட்டுள்ளது.

சாத்தியமான குறைபாடுகள்

இந்த அடாப்டர் பட்டியல் அனிமேஷன்களில் மட்டுமே கவனம் செலுத்துகிறது; சிக்கலான ஒருங்கிணைப்புகளுக்கு (உதாரணமாக, தொடர்பில்லாத உறுப்புகளின் வரிசைமுறை நுழைவு - staggered entrance) இன்னும் தனிப்பயன் குறியீடு அல்லது வேறு ஒரு லைப்ரரி தேவைப்படும். Vite பயன்படுத்தும் டெவலப்பர்கள் இந்த கான்ஃபிக் (config) மாற்றத்தை நினைவில் கொள்ள வேண்டும், இல்லையெனில் இறக்குமதி பிழை ஏற்படும். இறுதியாக, இந்த மெக்கானிசம் MutationObserver-ஐச் சார்ந்து இருப்பதால், முழுமையான DOM இல்லாத சூழல்களில் (சர்வர்-சைடு ரெண்டரிங் டெஸ்ட்கள் போன்றவை) அனிமேஷன்கள் தெரியாது, இருப்பினும் அவை UI-ஐப் பாதிக்காது.

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

Marko-வின் “resume-from-HTML” தத்துவத்தைப் பகிர்ந்து கொள்ளும் பிற ஃபிரேம்வொர்க்குகளுக்கான கூடுதல் அடாப்டர்களை உருவாக்கப் போவதாக Auto-animate பராமரிப்பாளர்கள் (maintainers) கோடிட்டுக் காட்டியுள்ளனர். Marko பிளகின் பிரபலமடைந்தால், அடுத்தடுத்த மாதங்களில் டிராக்-அண்ட்-டிராப் (drag-and-drop) ஆதரவு அல்லது ஸ்டேட்-மேனேஜ்மென்ட் (state-management) லைப்ரரிகளுடன் ஒருங்கிணைப்பு போன்ற சமூகப் பங்களிப்பு விரிவாக்கங்களை (community-contributed extensions) நாம் காணலாம்.

முக்கியக் கருத்து (Takeaway): Auto-animate-ன் டெக்லரேட்டிவ் டிரான்சிஷன் இன்ஜினை (declarative transition engine) Marko-வின் குறைந்தபட்ச ரன்டைம் அணுகுமுறையுடன் இணைப்பதன் மூலம், இந்த புதிய அடாப்டர் பண்டல் அளவில் (bundle size) கிட்டத்தட்ட எதையும் செலவிடாமல் மற்றும் கூடுதல் குறியீடு தேவையில்லாமல் பட்டியல் அனிமேஷன்களை வழங்குகிறது. இது டெவலப்பர் அனுபவத்தை (developer experience) அந்த ஃபிரேம்வொர்க்கைப் போலவே எளிமையாகவும் தடையின்றியும் வைக்கிறது.