Auto-Animate اولین آداپتور رسمی خود را برای Marko 6 منتشر کرد که به توسعه‌دهندگان اجازه می‌دهد تغییرات لیست را تنها با یک تگ و بدون نیاز به جاوااسکریپت اضافی متحرک‌سازی کنند. این اقدام از آن جهت اهمیت دارد که کدهای تکراری (boiler-plate) را حذف می‌کند؛ کدهایی که مدت‌ها باعث شده بود ایجاد حرکت (motion) در پروژه‌های Marko مانند یک کار دشوار و استثنایی به نظر برسد.

مدل رندرینگ Marko مرحله «hydration» در سمت کلاینت را که فریم‌ورک‌هایی مانند React یا Vue به آن متکی هستند، نادیده می‌گیرد. پس از اینکه سرور HTML را ارسال کرد، Marko به‌سادگی همان مارک‌آپ را در جای خود از سر می‌گیرد، که باعث می‌شود حجم باندل‌ها بسیار کم باقی بماند (تقریباً ۷ کیلوبایت برای runtime در حالت gzipped). با این حال، همین میان‌بر مانع از عملکرد بسیاری از کتابخانه‌های انیمیشن می‌شود که منتظر رندر شدن در سمت کلاینت می‌مانند تا بتوانند افکت‌ها را اعمال کنند. بدون دسترسی به DOM موجود، توسعه‌دهندگان به‌طور سنتی مجبور بودند برای هر به‌روزرسانی لیست، کدهای سفارشی بنویسند.

آداپتور جدید با اتصال به چرخه حیات (lifecycle) onMount در Marko، از این محدودیت عبور می‌کند. هنگامی که یک کامپوننت نصب (mount) می‌شود، آداپتور یک MutationObserver ایجاد می‌کند که گره والد (parent node) لیست را برای تغییرات زیر نظر می‌گیرد. با اضافه شدن، فیلتر شدن یا جابه‌جا شدن آیتم‌ها، این ناظر موتور انتقال (transition engine) داخلی auto-animate را فعال کرده و انیمیشن‌های ورود، خروج و تغییر ترتیب را به‌طور خودکار و روان ارائه می‌دهد. تمام این اتفاقات تنها با یک تگ <auto-animate> رخ می‌دهد.

این تگ سه ویژگی (attribute) را می‌پذیرد:

  • parent – یک متغیر تگ Marko که به کانتینر لیست اشاره می‌کند.
  • options – یک شیء (object) برای تنظیمات مدت‌زمان (duration)، easing و سایر تنظیمات زمان‌بندی.
  • enabled – یک مقدار بولین واکنش‌گرا (reactive boolean) که می‌تواند انیمیشن‌ها را در زمان اجرا روشن یا خاموش کند.

از آنجایی که enabled واکنش‌گرا است، توسعه‌دهندگان می‌توانند آن را به هر مقدار وضعیت (state) متصل کرده و بدون دستکاری DOM یا بازنویسی هندلرها، حرکت را تغییر دهند. بنابراین، این آداپتور در حالی که برای بقیه درخت کامپوننت‌ها نامرئی باقی می‌ماند، انعطاف‌پذیری بیشتری نسبت به یک دستور (directive) ایستا ارائه می‌دهد.

برای تیم‌هایی که از Vite استفاده می‌کنند، این بسته ممکن است باعث ایجاد هشدار “unresolved import” شود. افزودن عبارت زیر به vite.config.ts این مشکل را حل می‌کند:

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

این کار به Vite می‌گوید که اجازه دهد پلاگین Marko وارد کردن (import) را مدیریت کند، به جای اینکه سعی کند آن را پیش‌بسته‌بندی (pre-bundle) کند.

نتیجه عملی آن بلافاصله مشخص است. یک لیست معمولی در Marko که قبلاً به هوک useEffect ، تغییر دستی کلاس‌ها و چند خط کد انیمیشن نیاز داشت، اکنون می‌تواند به این صورت نوشته شود:

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

بدون جاوااسکریپت اضافی، بدون افزایش حجم باندل، و با همان حرکت روانی که auto-animate برای سایر فریم‌ورک‌ها فراهم می‌کند.

چه کسی برنده می‌شود و چه کسی نظاره‌گر است

تیم‌های فرانت‌اند که پیش از این Marko را پذیرفته‌اند، اکنون راهکاری آماده برای یک الگوی رایج در رابط کاربری (UI) یعنی لیست‌های پویا در اختیار دارند. ماهیت سبک این آداپتور، ویژگی بارز Marko یعنی باندل‌های بسیار کوچک را حفظ می‌کند که برای سایت‌های حساس به عملکرد (performance-critical) حیاتی است. از سوی دیگر، این آداپتور در حال حاضر بر تغییرات لیست (list mutations) تمرکز دارد؛ توسعه‌دهندگانی که به کنترل دقیق خط زمانی (timeline) یا هماهنگی‌های پیچیده (complex choreography) نیاز دارند، همچنان باید به کدهای سفارشی یا کتابخانه‌های دیگر متوسل شوند.

در آینده چه چیزی را باید دنبال کرد

این آداپتور متن‌باز (open-source) است و در حال حاضر یک دموی Sandbox نیز در یادداشت‌های انتشار (release notes) به آن لینک شده است. بازخوردهای جامعه احتمالاً باعث شکل‌گیری افزونه‌های آینده، مانند پشتیبانی از بازآرایی شبکه‌ای (grid reflows) یا ادغام با انتقال‌های سطح کامپوننت (component-level transitions) آتیِ Marko خواهد شد. اگر منحنی پذیرش آن مشابه پذیرش سریع auto-animate در React و Vue باشد، ممکن است شاهد فشار گسترده‌تری برای حرکت‌های «بدون کد» (zero-code) در سراسر اکوسیستم رابط کاربری جاوااسکریپت باشیم.

نکته کلیدی: آداپتور Marko 6 در Auto-Animate، کاری را که از نظر تاریخی دشوار بود — یعنی متحرک‌سازی لیست‌های رندر شده در سمت سرور — به یک تگ دکلاراتیو واحد تبدیل می‌کند و ضمن حفظ اندازه حداقلی باندل Marko، یک لایه حرکت فوری و قابل تغییر (toggle-able) را در اختیار توسعه‌دهندگان قرار می‌دهد.