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

Auto-Animate ತನ್ನ ಮೊದಲ ಅಧಿಕೃತ Marko 6 ಅಡಾಪ್ಟರ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳು ಯಾವುದೇ ಹೆಚ್ಚುವರಿ JavaScript ಇಲ್ಲದೆ ಕೇವಲ ಒಂದು ಟ್ಯಾಗ್ ಮೂಲಕ ಲಿಸ್ಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. Marko ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಮೊಶನ್ (motion) ಅನ್ನು ಒಂದು ವಿಶೇಷ ಪ್ರಯತ್ನದಂತೆ ಕಾಣುವಂತೆ ಮಾಡಿದ್ದ ಬಾಯ್ಲರ್-ಪ್ಲೇಟ್ (boiler-plate) ಕೋಡ್ ಅನ್ನು ಇದು ತೆಗೆದುಹಾಕುವುದರಿಂದ ಈ ಕ್ರಮವು ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ.

Marko ನ ರೆಂಡರಿಂಗ್ ಮಾಡೆಲ್, React ಅಥವಾ Vue ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಅವಲಂಬಿಸಿರುವ ಕ್ಲೈಂಟ್-ಸೈಡ್ "hydration" ಹಂತವನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ. ಸರ್ವರ್ HTML ಅನ್ನು ಕಳುಹಿಸಿದ ನಂತರ, Marko ಕೇವಲ ಆ ಮಾರ್ಕಪ್ ಅನ್ನು ಅಲ್ಲೇ ಮುಂದುವರಿಸುತ್ತದೆ, ಇದು ಬಂಡಲ್‌ಗಳನ್ನು ಅತ್ಯಂತ ಚಿಕ್ಕದಾಗಿರಿಸುತ್ತದೆ—ರನ್‌ಟೈಮ್‌ಗಾಗಿ ಅಂದಾಜು 7 KB gzipped ಗಾತ್ರವಿರುತ್ತದೆ. ಆದರೆ, ಇದೇ ಶಾರ್ಟ್‌ಕಟ್ ಅನೇಕ ಅನಿಮೇಷನ್ ಲೈಬ್ರರಿಗಳಿಗೆ ಅಡ್ಡಿಯಾಗುತ್ತದೆ, ಏಕೆಂದರೆ ಅವು ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೊದಲು ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ಕಾಯುತ್ತವೆ. ಈಗಾಗಲೇ ಇರುವ DOM ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಹೂಕ್ ಇಲ್ಲದೆ, ಡೆವಲಪರ್‌ಗಳು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಪ್ರತಿ ಲಿಸ್ಟ್ ಅಪ್‌ಡೇಟ್‌ಗೂ ಕಸ್ಟಮ್ ಕೋಡ್ ಬರೆಯಬೇಕಾಗುತ್ತಿತ್ತು.

ಹೊಸ ಅಡಾಪ್ಟರ್ Marko ನ onMount ಲೈಫ್‌ಸೈಕಲ್‌ಗೆ ಹೂಕ್ ಮಾಡುವ ಮೂಲಕ ಆ ಮಿತಿಯನ್ನು ತಪ್ಪಿಸುತ್ತದೆ. ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ, ಅಡಾಪ್ಟರ್ ಲಿಸ್ಟ್‌ನ ಪೇರೆಂಟ್ ನೋಡ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಲು MutationObserver ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಐಟಂಗಳನ್ನು ಪಷ್ (push), ಫಿಲ್ಟರ್ ಅಥವಾ ಶಫಲ್ ಮಾಡಿದಾಗ, ಈ ಅಬ್ಸರ್ವರ್ ಆಟೋ-ಅನಿಮೇಟ್‌ನ ಬಿಲ್ಟ್-ಇನ್ ಟ್ರಾನ್ಸಿಶನ್ ಇಂಜಿನ್ ಅನ್ನು ಟ್ರಿಗ್ಗರ್ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಎಂಟ್ರಿ, ಎಕ್ಸಿಟ್ ಮತ್ತು ರೀ ಆರ್ಡರ್ ಅನಿಮೇಷನ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸುಗಮವಾಗಿ ನಡೆಯುತ್ತವೆ. ಇದೆಲ್ಲವೂ ಕೇವಲ ಒಂದು <auto-animate> ಟ್ಯಾಗ್ ಮೂಲಕ ಸಂಭವಿಸುತ್ತದೆ.

ಈ ಟ್ಯಾಗ್ ಮೂರು ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:

• parent – ಲಿಸ್ಟ್ ಕಂಟೇನರ್ ಅನ್ನು ಸೂಚಿಸುವ Marko ಟ್ಯಾಗ್ ವೇರಿಯೇಬಲ್.
• options – ಡ್ಯುರೇಶನ್, ಈಸಿಂಗ್ ಮತ್ತು ಇತರ ಟೈಮಿಂಗ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಗಾಗಿ ಒಂದು ಆಬ್ಜೆಕ್ಟ್.
• enabled – ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಆನ್ ಅಥವಾ ಆಫ್ ಮಾಡಬಹುದಾದ ರಿಯಾಕ್ಟಿವ್ ಬೂಲಿಯನ್ (reactive boolean).

enabled ರಿಯಾಕ್ಟಿವ್ ಆಗಿರುವುದರಿಂದ, ಡೆವಲಪರ್‌ಗಳು ಯಾವುದೇ DOM ಅನ್ನು ಮುಟ್ಟದೆ ಅಥವಾ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಮರುಬರೆಯದೆ ಅದನ್ನು ಯಾವುದೇ ಸ್ಟೇಟ್ ವ್ಯಾಲ್ಯೂಗೆ ಬೈಂಡ್ ಮಾಡಬಹುದು ಮತ್ತು ಮೊಶನ್ ಅನ್ನು ಟೋಗಲ್ ಮಾಡಬಹುದು. ಆದ್ದರಿಂದ, ಈ ಅಡಾಪ್ಟರ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ‌ನ ಉಳಿದ ಭಾಗಗಳಿಗೆ ಅದೃಶ್ಯವಾಗಿರುವಾಗಲೂ, ಸ್ಟ್ಯಾಟಿಕ್ ಡೈರೆಕ್ಟಿವ್‌ಗಿಂತ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು (flexibility) ನೀಡುತ್ತದೆ.

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 ಇಲ್ಲ, ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಬಂಡಲ್ ತೂಕವಿಲ್ಲ ಮತ್ತು ಆಟೋ-ಅನಿಮೇಟ್ ಇತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಗೆ ನೀಡುವಂತೆಯೇ ಸುಗಮವಾದ ಮೊಶನ್ ಸಿಗುತ್ತದೆ.

ಯಾರು ಗೆಲ್ಲುತ್ತಾರೆ, ಯಾರು ಗಮನಿಸುತ್ತಾರೆ

ಈಗಾಗಲೇ Marko ಅನ್ನು ಅಳವಡಿಸಿಕೊಂಡಿರುವ ಫ್ರಂಟ್-ಎಂಡ್ ತಂಡಗಳಿಗೆ, ಡೈನಾಮಿಕ್ ಲಿಸ್ಟ್‌ಗಳಂತಹ ಸಾಮಾನ್ಯ UI ಪ್ಯಾಟರ್ನ್‌ಗೆ ಸಿದ್ಧವಾದ ಪರಿಹಾರ ಸಿಗುತ್ತದೆ. ಅಡಾಪ್ಟರ್‌ನ ಲೈಟ್‌ವೈಟ್ ಸ್ವಭಾವವು Marko ನ ಪ್ರಮುಖ ಲಕ್ಷಣವಾದ ಚಿಕ್ಕ ಬಂಡಲ್‌ಗಳನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಇದು ಪರ್ಫಾರ್ಮೆನ್ಸ್-ಕ್ರಿಟಿಕಲ್ ಸೈಟ್‌ಗಳಿಗೆ ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. ಇನ್ನೊಂದೆಡೆ, ಅಡಾಪ್ಟರ್ ಪ್ರಸ್ತುತ ಲಿಸ್ಟ್ ಮ್ಯುಟೇಶನ್‌ಗಳ ಮೇಲೆ ಗಮನ ಕೇಂದ್ರೀಕರಿಸಿದೆ; ಕಸ್ಟಮ್ ಟೈಮ್‌ಲೈನ್ ಕಂಟ್ರೋಲ್ ಅಥವಾ ಸಂಕೀರ್ಣ ಚೋರಿಯೋಗ್ರಫಿ ಅಗತ್ಯವಿರುವ ಡೆವಲಪರ್‌ಗಳು ಇನ್ನೂ ಕಸ್ಟಮ್ ಕೋಡ್ ಅಥವಾ ಇನ್ನೊಂದು ಲೈಬ್ರರಿಯನ್ನು ಅವಲಂಬಿಸಬೇಕಾಗುತ್ತದೆ.

ಮುಂದೆ ಏನನ್ನು ಗಮನಿಸಬೇಕು

ಈ ಅಡಾಪ್ಟರ್ ಓಪನ್-ಸೋರ್ಸ್ ಆಗಿದೆ ಮತ್ತು ರಿಲೀಸ್ ನೋಟ್ಸ್‌ನಿಂದ ಲಿಂಕ್ ಮಾಡಲಾದ ಡೆಮೊ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್ ಈಗಾಗಲೇ ಲಭ್ಯವಿದೆ. ಸಮುದಾಯದ ಪ್ರತಿಕ್ರಿಯೆಯು ಗ್ರಿಡ್ ರಿಫ್ಲೋಗಳು ಅಥವಾ Marko ನ ಮುಂಬರುವ ಕಾಂಪೊನೆಂಟ್-ಲೆವೆಲ್ ಟ್ರಾನ್ಸಿಶನ್‌ಗಳ ಬೆಂಬಲದಂತಹ ಭವಿಷ್ಯದ ವಿಸ್ತರಣೆಗಳನ್ನು ರೂಪಿಸಲು ಸಹಾಯ ಮಾಡಬಹುದು. ಒಂದು ವೇಳೆ ಇದರ ಅಳವಡಿಕೆಯ ವೇಗವು React ಮತ್ತು Vue ನಲ್ಲಿ ಆಟೋ-ಅನಿಮೇಟ್‌ನ ವೇಗದ ಬೆಳವಣಿಗೆಯನ್ನು ಹೋಲಿಸಿದರೆ, ನಾವು ಇಡೀ JavaScript UI ಪರಿಸರದಲ್ಲಿ "zero-code" ಮೊಶನ್‌ಗಾಗಿ ಹೆಚ್ಚಿನ ಒತ್ತಡವನ್ನು ನೋಡಬಹುದು.

Takeaway: Auto-Animate ನ Marko 6 ಅಡಾಪ್ಟರ್, ಐತಿಹಾಸಿಕವಾಗಿ ಕಷ್ಟಕರವಾದ ಕೆಲಸವಾದ—ಸರ್ವರ್-ರೆಂಡರ್ ಮಾಡಲಾದ ಲಿಸ್ಟ್‌ಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದನ್ನು—ಒಂದೇ ಡಿಕ್ಲರೇಟಿವ್ ಟ್ಯಾಗ್ ಆಗಿ ಬದಲಾಯಿಸುತ್ತದೆ, ಇದು Marko ನ ಕನಿಷ್ಠ ಬಂಡಲ್ ಗಾತ್ರವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವುದರ ಜೊತೆಗೆ ಡೆವಲಪರ್‌ಗಳಿಗೆ ತಕ್ಷಣವೇ ಬಳಸಬಹುದಾದ ಮೊಶನ್ ಲೇಯರ್ ಅನ್ನು ನೀಡುತ್ತದೆ.