Auto-Animate ने लाँच केला Marko 6 अडॅप्टर, एका टॅगद्वारे लिस्ट्स अ‍ॅनिमेट करा

Auto-Animate ने Marko 6 साठी आपला पहिला अधिकृत अडॅप्टर लाँच केला आहे, ज्यामुळे डेव्हलपर्स आता अतिरिक्त JavaScript न वापरता केवळ एका टॅगद्वारे लिस्टमधील बदल अ‍ॅनिमेट करू शकतील. ही हालचाल महत्त्वाची आहे कारण यामुळे तो 'बॉयलरप्लेट' (boiler-plate) कोड काढून टाकला जातो, ज्यामुळे Marko प्रोजेक्ट्समध्ये मोशन (motion) आणणे आतापर्यंत एक विशेष प्रयत्न किंवा कठीण काम वाटत असे.

Marko चे रेंडरिंग मॉडेल React किंवा Vue सारख्या फ्रेमवर्क्सवर अवलंबून असलेल्या क्लायंट-साइड "hydration" स्टेपला वगळते. सर्व्हरकडून HTML पाठवल्यानंतर, Marko केवळ त्या मार्कअपला (markup) तिथेच पुढे सुरू ठेवते, ज्यामुळे बंडलचा आकार अत्यंत कमी राहतो—runtime साठी गझिप्ड (gzipped) स्वरूपात साधारण ७ KB. मात्र, हीच पद्धत अनेक अ‍ॅनिमेशन लायब्ररीजना अडवते, कारण त्या इफेक्ट्स जोडण्यापूर्वी क्लायंट-साइड रेंडरची वाट पाहतात. आधीच्या DOM मध्ये थेट प्रवेश (hook) नसल्यामुळे, डेव्हलपर्सना प्रत्येक लिस्ट अपडेटसाठी पारंपारिकपणे कस्टम कोड लिहावा लागत असे.

नवीन अडॅप्टर Marko च्या onMount लाइफसायकलमध्ये (lifecycle) हुक होऊन ही मर्यादा दूर करतो. जेव्हा एखादा कंपोनंट माउंट होतो, तेव्हा हा अडॅप्टर एक MutationObserver तयार करतो जो लिस्टच्या पेरेंट नोडमधील (parent node) बदलांवर लक्ष ठेवतो. जसे आयटम्स पुश (push), फिल्टर किंवा शफल (shuffle) केले जातात, तसा ऑब्झर्व्हर auto-animate च्या इन-बिल्ट ट्रान्झिशन इंजिनला ट्रिगर करतो, ज्यामुळे एन्ट्री, एक्झिट आणि रीऑर्डर अ‍ॅनिमेशन्स आपोआप आणि स्मूथपणे मिळतात. हे सर्व केवळ एका <auto-animate> टॅगच्या मदतीने घडते.

हा टॅग तीन अ‍ॅट्रिब्युट्स स्वीकारतो:

• parent – एक Marko टॅग व्हेरिएबल जो लिस्ट कंटेनरकडे निर्देश करतो.
• options – duration, easing आणि इतर टाइमिंग सेटिंग्जसाठी एक ऑब्जेक्ट.
• enabled – एक रिअॅक्टिव्ह (reactive) बुलियन, ज्याद्वारे रनटाइममध्ये अ‍ॅनिमेशन्स चालू किंवा बंद करता येतात.

enabled रिअॅक्टिव्ह असल्यामुळे, डेव्हलपर्स ते कोणत्याही स्टेट व्हॅल्यूला (state value) बाइंड करू शकतात आणि DOM मध्ये बदल न करता किंवा हँडलर्स पुन्हा न लिहिता मोशन टॉगल करू शकतात. त्यामुळे, हा अडॅप्टर उर्वरित कंपोनंट ट्रीसाठी अदृश्य राहूनही, स्टॅटिक डायरेक्टिव्हपेक्षा अधिक लवचिकता प्रदान करतो.

Vite वापरणाऱ्या टीम्ससाठी, या पॅकेजमुळे “unresolved import” चे वॉर्निंग येऊ शकते. vite.config.ts मध्ये खालील कोड जोडल्यास ही समस्या सुटते:

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

यामुळे Vite ला हे सांगता येते की, या इम्पोर्टला प्री-बंडल (pre-bundle) करण्याचा प्रयत्न करण्याऐवजी Marko च्या प्लगइनला हाताळू द्यावे.

याचा प्रत्यक्ष फायदा लगेच दिसून येतो. पूर्वी ज्या Marko लिस्टसाठी useEffect हुक, मॅन्युअल क्लास टॉगल्स आणि अ‍ॅनिमेशन कोडच्या काही ओळींची आवश्यकता होती, ती आता खालीलप्रमाणे लिहिता येईल:

<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 पॅटर्नसाठी एक तयार उपाय मिळाला आहे. या अडॅप्टरचे हलके स्वरूप (lightweight nature) Marko च्या लहान बंडलच्या वैशिष्ट्याला जपते, जे परफॉर्मन्स-क्रिटिकल साइट्ससाठी अत्यंत महत्त्वाचे आहे. दुसरीकडे, हा अडॅप्टर सध्या केवळ लिस्ट म्यूटेशन्सवर लक्ष केंद्रित करतो; ज्या डेव्हलपर्सना सानुकूल (bespoke) टाइमलाइन कंट्रोल किंवा जटिल कोरिओग्राफी (complex choreography) हवी आहे, त्यांना अजूनही कस्टम कोड किंवा दुसऱ्या लायब्ररीचा आधार घ्यावा लागेल.

पुढे काय पाहावे

हा अडॅप्टर ओपन-सोर्स आहे आणि रिलीज नोट्समध्ये त्याचा डेमो सँडबॉक्स (demo sandbox) लिंक देखील उपलब्ध आहे. कम्युनिटी फीडबॅकमुळे भविष्यातील विस्तार शक्य होतील, जसे की ग्रिड रिफ्लोस (grid reflows) साठी सपोर्ट किंवा Marko च्या आगामी कंपोनंट-लेव्हल ट्रान्झिशन्ससोबतचे एकत्रीकरण. जर याचा स्वीकार (adoption) React आणि Vue मधील auto-animate च्या वेगाप्रमाणे झाला, तर आपण संपूर्ण JavaScript UI इकोसिस्टममध्ये "zero-code" मोशनसाठी मोठी लाट पाहू शकतो.

थोडक्यात सांगायचे तर: Auto-Animate चा Marko 6 अडॅप्टर सर्व्हर-रेंडर केलेल्या लिस्ट्स अ‍ॅनिमेट करणे, हे ऐतिहासिकदृष्ट्या कठीण काम, एका सिंगल डिक्लेरेटिव्ह टॅगमध्ये रूपांतरित करतो. यामुळे Marko चा मिनिमल बंडल साईज कायम राहतो आणि डेव्हलपर्सना त्वरित, टॉगल-योग्य मोशन लेयर देखील मिळतो.