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

Auto-Animate imetoa adapter yake ya kwanza rasmi kwa Marko 6, ikiruhusu watengenezaji kuendesha mabadiliko ya orodha kwa kutumia tag moja tu na bila JavaScript ya ziada. Hatua hii ni muhimu kwa sababu inaondoa kodi zisizo na lazima (boiler-plate) ambazo kwa muda mrefu zimefanya mwendo (motion) katika miradi ya Marko uhisi kama kazi inayohitaji juhudi maalum.

Mfumo wa uwasilishaji (rendering model) wa Marko unaruka hatua ya “hydration” upande wa mteja (client-side) ambayo mifumo kama React au Vue hutegemea. Baada ya seva kutuma HTML, Marko huendelea tu na alama (markup) hiyo mahali pale, jambo ambalo huweka ukubwa wa bundles kuwa mdogo—takriban 7 KB gzipped kwa runtime. Hata hivyo, njia hiyo hiyo huzuia maktaba nyingi za animation ambazo husubiri uwasilishaji wa upande wa mteja kabla ya kuweza kuunganisha madoido (effects). Bila kiunganishi (hook) kwenye DOM iliyopo tayari, watengenezaji kwa kawaida wamekuwa wakilazimika kuandika kodi maalum kwa kila mabadiliko ya orodha.

Adapter mpya hii inakwepa kikwazo hicho kwa kuunganishwa na mzunguko wa maisha (lifecycle) wa onMount wa Marko. Wakati sehemu (component) inapowekwa (mounts), adapter hutengeneza MutationObserver inayofuatilia node mama ya orodha kwa mabadiliko. Wakati vitu vinapoongezwa, kuchujwa, au kupangwa upya, mwangalizi (observer) huchochea injini ya mpito (transition engine) ya auto-animate iliyojengwa ndani, ikitoa animation za kuingia, kutoka, na kupanga upya kwa ulaini moja kwa moja. Hicho chote hutokea nyuma ya tag moja ya <auto-animate>.

Tag hiyo inakubali sifa (attributes) tatu:

• parent – kigezo cha tag ya Marko kinachoelekeza kwenye kundi la orodha (list container).
• options – kitu (object) kwa ajili ya muda (duration), easing, na mipangilio mingine ya muda.
• enabled – boolean inayobadilika (reactive) inayoweza kuwasha au kuzima animation wakati wa utendaji (runtime).

Kwa sababu enabled ni reactive, watengenezaji wanaweza kuifunga kwenye thamani yoyote ya hali (state value) na kubadilisha mwendo bila kugusa DOM au kuandika upya mishikamano (handlers). Kwa hivyo, adapter hii inatoa urahisi zaidi kuliko maelekezo ya kudumu (static directive) huku ikiendelea kutokuonekana kwa sehemu nyingine za mti wa component.

Kwa timu zinazotumia Vite, kifurushi kinaweza kusababisha onyo la “unresolved import”. Kuongeza yafuatayo kwenye vite.config.ts kutatatua tatizo hilo:

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

Hii inaiambia Vite kuruhusu plugin ya Marko ishughulikie import badala ya kujaribu kuifunga (pre-bundle) mapema.

Matokeo ya kivitendo ni ya haraka. Orodha ya kawaida ya Marko ambayo hapo awali ilihitaji hook ya useEffect, ubadilishaji wa class wa hali ya juu, na mistari michache ya kodi ya animation sasa inaweza kuandikwa kama:

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

Bila JavaScript ya ziada, bila kuongeza uzito wa bundle, na mwendo ule ule wa ulaini ambao auto-animate hutoa kwa mifumo mingine.

Nani anayefaidika, nani anayechunguza

Timu za front-end ambazo tayari zimeanza kutumia Marko zinapata suluhisho lililo tayari kwa mfumo wa UI unaojirudia mara kwa mara—orodha zinazobadilika (dynamic lists). Asili ya adapter hii nyepesi inahifadhi sifa kuu ya Marko ya kuwa na bundles ndogo, jambo ambalo ni muhimu kwa tovuti zinazohitaji utendaji wa haraka. Kwa upande mwingine, kwa sasa adapter hii inajikita kwenye mabadiliko ya orodha; watengenezaji wanaohitaji udhibiti maalum wa timeline au mpangilio tata (complex choreography) watabidi bado watumie kodi maalum au maktaba nyingine.

Nini cha kufuatilia baadaye

Adapter hii ni ya chanzo huru (open-source) na tayari ina sandbox ya demo iliyounganishwa kutoka kwenye maelezo ya toleo. Maoni ya jamii huenda yakachangia upanuzi wa baadaye, kama vile uunganishaji wa grid reflows au kuunganishwa na transitions za kiwango cha component zinazokuja za Marko. Ikiwa kasi ya upokeaji itafanana na upokeaji wa haraka wa auto-animate katika React na Vue, tunaweza kuona msukumo mpana wa mwendo wa “zero-code” katika mfumo mzima wa UI wa JavaScript.

Muhtasari: Adapter ya Auto-Animate kwa Marko 6 inageuza kazi ambayo kihistoria ilikuwa ngumu—kuendesha orodha zinazotolewa na seva (server-rendered lists)—kuwa tag moja ya kueleza (declarative tag), ikihifadhi ukubwa mdogo wa bundle wa Marko huku ikiwapa watengenezaji tabaka la mwendo la papo hapo linaloweza kuwashwa au kuzimwa.