نريد اليوم مشاركة المزيد من المعلومات حول رحلة Chrome وAstro مع View Transitions API. ويشمل ذلك كيفية استقبال منتدى Astro لواجهة برمجة التطبيقات وتجربته في وقت مبكر، ما يسلّط الضوء على الفرص المتاحة للمنتدى الأوسع نطاقًا. يسرّنا أيضًا مشاركة المزيد من المعلومات حول ميزة "انتقالات العرض" المضمّنة الجديدة في Astro 3.0.
الخلفية
لطالما كانت عمليات النقل السلسة بين الحالات المختلفة للصفحة، والتي تُعرف باسم عمليات نقل الحالات، جانبًا معقّدًا من إنشاء تجارب متحركة سلسة على الويب. على الرغم من توفّر أدوات مثل عمليات النقل في CSS والرسومات المتحرّكة في CSS وWeb Animation API، ظلّ إنشاء عمليات النقل بين الحالات مهمة شاقّة. ومن بين التحديات التي تواجهك معالجة التفاعل مع العناصر التي تغادر الشاشة، ما قد يجعل عمليات الانتقال أكثر تعقيدًا.
بالإضافة إلى ذلك، من الصعب الحفاظ على موضع القراءة والتركيز على الأجهزة المساعِدة. ويؤدي التعامل مع الاختلافات في موضع التمرير إلى جعل عمليات تغيير الحالة عملية صعبة. تساهم كل هذه العوامل في تعقيد تنفيذ الانتقالات السلسة بين العناصر المختلفة على صفحة الويب.
تم طرح View Transitions API كحلّ للمتصفح لهذه التحديات. توفّر واجهة برمجة التطبيقات الجديدة هذه طريقة أسهل لتغيير نموذج DOM في خطوة واحدة أثناء إنشاء انتقال متحرك بين حالتَين.
شكّل إطلاق View Transitions API في الإصدار 111 من Chrome بداية رؤية أوسع لدعم الانتقالات في جميع المواقع الإلكترونية، وليس فقط تطبيقات الويب المستندة إلى JavaScript. ونحن نعمل أيضًا على إجراء تحسينات مستقبلية. قد يقدّم Chrome في المستقبل إضافات مثيرة للاهتمام، مثل الانتقالات بين المستندات والصور المتحركة المستندة إلى أداة تركيب الصور والانتقالات على مستوى نطاق معيّن ومجموعات الانتقالات المُدمجة.
الانتقال إلى العرض التجريبي: البث المباشر، المصدر
الاستكشافات المبكرة التي تتضمّن انتقالات بين طرق العرض
لم تكن رحلة Chrome مع واجهة برمجة التطبيقات View Transitions API فردية. وقد لعبت الملاحظات والآراء والتعاون من المطوّرين ومؤلفي إطار العمل ومجموعة عمل CSS دورًا مهمًا في تشكيل هذه الميزة على مدار عدة سنوات.
لعبت تجارب المطوّرين دورًا مهمًا في وقت مبكر. لم تكن الإصدارات الأولى من واجهة برمجة التطبيقات تتيح استخدام الرسوم المتحرّكة في CSS، وكانت عمليات النقل مقتصرة على بعض الإعدادات المُسبَقة التقييدية. وقد أوضحت الملاحظات الواردة في وقت مبكر أنّ المطوّرين يريدون أن تكون الانتقالات قابلة للتخصيص بالكامل ومعبّرة. وقد ساعد هذا التعاون المتبادل في تصميم واجهة برمجة التطبيقات مع موازنة الإعدادات التلقائية الجيدة وإمكانية التوسيع والتخصيص.
كان Astro أحد هذه الأطر التي اعتمدت على "عمليات انتقال العرض" في وقت مبكر. تتناول بقية هذه المقالة وجهة نظر فريق Astro، وتشارك تجربته في العثور على "عمليات انتقال العرض" واستخدامها وإبرازها في تجربة تطوير الويب.
لماذا يراهن Astro على الانتقالات بين المشاهد؟
كان Astro يبحث منذ فترة طويلة عن ميزة مثل "انتقالات العرض". Astro هو إطار عمل ويب لبرنامج JavaScript يعرض مكونات واجهة المستخدم على الخادم بتنسيق HTML خفيف الوزن لتحسين أداء تحميل الصفحة. ينقل Astro عمدًا أكبر قدر ممكن من العمل من جهاز العميل. تستخدِم المواقع الإلكترونية في Astro ميزة التنقّل الأصلية في صفحات المتصفّح، حيث قد تتداخل إطارات عمل الويب الأخرى مع ميزة التنقّل في المتصفّح باستخدام ميزة التوجيه من جهة العميل في JavaScript بدلاً من ذلك.
وقد خلق هذا المفاضلة تحديًا لفريق Astro: كيف يمكن أن يضيف Astro تأثيرات متحركة على انتقالات الصفحات ويحافظ على ثبات واجهة المستخدم مثل التطبيقات على جميع الصفحات بدون استخدام التوجيه من جهة العميل؟
وكانت "عمليات النقل" هي الحلّ. باستخدام "عمليات انتقال العرض"، يمكن أن يوفّر Astro ميزات التوجيه نفسها التي تقدّمها إطارات عمل الويب المستندة إلى تطبيقات صفحات ويب مُستخدِمة لغة JavaScript بشكل كبير، ولكن بدون الأداء المنخفض والتعقيد الناتجَين عن التوجيه من جهة العميل. اعتمدت الأطر الأخرى على انتقالات العرض كتفاصيل تنفيذ اختيارية، ولكن بالنسبة إلى Astro، كان ذلك أمرًا أكبر بكثير.
كان السؤال التالي الذي كان على فريق Astro الإجابة عنه هو "كيف؟". لذلك، استعان الفريق بمشاريع مثل Turbo وSwup وLivewire للحصول على الإلهام، وأعدّ حتى نماذج أولية لبعض الأساليب المشابهة في Astro.
إحدى المحاولات الأولى كانت تتضمن "انتقالًا ذكيًا" للصفحة بأكملها، والذي يقارن تلقائيًا كل صفحة جديدة من HTML بصفحة HTML الحالية، ثم يحاول استبدال كل عنصر في آنٍ واحد باستخدام JavaScript. كان هذا الإجراء ذكيًا، ولكنه كان عرضة للخطأ.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
لحسن الحظ، أظهر منتدى Astro أنّ واجهة برمجة التطبيقات View Transitions API كانت فعّالة من قبل بدون أن يُعقّد المنتج الأمور. بعد مشاهدة بعض العروض التوضيحية المبكرة، اقتنع فريق Astro بفكرة إنشاء واجهة برمجة تطبيقات Astro بسيطة يمكن أن تتطابق مع واجهات برمجة تطبيقات المتصفّح قدر الإمكان. بدلاً من عرض "عمليات انتقال العرض" كتفاصيل تنفيذ غير مرئية مخفية داخل Astro، يمكن عرضها للمطوّر مباشرةً. مواءمة Astro مباشرةً مع منصة الويب وتقليل التعقيد العام في الواجهة الأمامية
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
أصبح العمل بسيطًا: توفير واجهة برمجة التطبيقات الجديدة View Transitions API في Astro وتوفير بدائل تلقائية تتوافق مع أكبر عدد ممكن من المواقع الإلكترونية والمتصفّحات من الضروري توفير بديل، لأنّ معظم المتصفّحات (باستثناء Chrome) لم توفّر بعد بديلاً كاملاً لميزة "انتقالات العرض" الأصلية.
إطلاق الدعم الرسمي في Astro
طرحت Astro إصدارًا تجريبيًا من ميزة "انتقالات العرض" في الإصدار 2.9 من Astro. كان الردّ إيجابيًا على الفور. بدأ المطوّرون بمشاركة عروض توضيحية رائعة لعدد كبير من حالات الاستخدام المختلفة، وفي بعض الحالات، تم إرسالها كلها إلى قناة الإصدار العلني.
الانتقال إلى العرض التجريبي: البث المباشر، المصدر
في الإصدار 3.0 من Astro، سيتم إيقاف واجهة برمجة التطبيقات View Transitions API نهائيًا وإلغاء وضع علامة عليها كواجهة غير متوافقة مع الجميع. أصبحت واجهات برمجة التطبيقات الجديدة هذه جاهزة الآن للاستخدام التجريبي أو بشكلٍ كامل.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
من المزايا غير المتوقّعة لمحاذاة Astro مع واجهات برمجة تطبيقات المنصة هي إمكانية تجربة إنشاء ميزات جديدة بالإضافة إلى View Transitions API الأصلية. على سبيل المثال، يتيح توجيه Astro transition:persist الجديد لأي عنصر الاحتفاظ بحالة نفسه أثناء التنقّل في الصفحة بالكامل. ويؤدي ذلك إلى تشغيل العناصر التي تبقى ظاهرة لفترة طويلة، مثل مشغّلات الصوت والفيديو الثابتة، وهو أمر كان لا يمكن تنفيذه إلا في تطبيقات SPA التي تستخدم JavaScript بشكل كبير.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
الانتقال إلى العرض التجريبي: البث المباشر، المصدر
يمكن أيضًا لـ Astro تحسين ميزة "انتقالات العرض" لتكون أكثر ملاءمةً للمطوّر. على سبيل المثال، أضاف الفريق إمكانية استخدام الرسوم المتحرّكة المخصّصة للتقديم/الترجيع والرسوم المتحرّكة لصفحات HTML الديناميكية. من الصعب تنفيذ هاتين الميزتَين باستخدام واجهات برمجة التطبيقات ذات المستوى الأدنى فقط، ولكن يمكن تنفيذهما بسهولة في Astro.
تتوفّر هذه الميزات في Astro فقط في الوقت الحالي، ولكن يأمل فريق Astro مشاركة تجربته مع مؤلفي المواصفات والمجموعات العاملة لتحسين المتصفّح في المستقبل. على سبيل المثال، من خلال مراقبة اقتراح عن كثب لتسهيل مشاركة الصور المتحركة في CSS.
ماذا يأتي بعد ذلك؟
نرى مستقبلًا مشرقًا لميزة "انتقالات العرض" على الويب. وقد وفّرت Astro وNuxt وHTMX جميعًا درجة من الدعم، وأبدى العديد من الآخرين اهتمامهم.
يسرّ فريق Chrome أنّ تطبيق Astro يتيح استخدام ميزة "انتقالات العرض" الأصلية. وهذه خطوة كبيرة في مجال تطوير الويب، إذ تتيح تجارب مستخدمين أكثر سلاسة وديناميكية. ننصح المطوّرين بالاطّلاع على ميزة "انتقالات العرض" في Astro 3.0. سواء كنت تنشئ صفحات مقصودة جديدة أو تُجري ترقية للمواقع الإلكترونية الحالية، ستُحدث هذه التحسينات تغييرًا كبيرًا. ساعدت "عمليات انتقال العرض" في سدّ الفجوة بين ما كان ممكنًا من خلال إعلانات المساحات الإعلانية المتجاوبة وإعلانات المساحات الإعلانية المتجاوبة على شبكة البحث. يهمّ فريق Chrome معرفة ما إذا كانت هناك ثغرات إضافية في دعم التطبيقات المُنشأة باستخدام إطار عمل SPA و/أو MPA. يُرجى عدم التردد في إضافة تعليق على مستودع GitHub الخاص بعرض الانتقالات في WICG لمناقشة هذه المسألة بشكل أكبر.
لقد ألهمتنا العروض التوضيحية والتطبيقات المبتكرة التي شاهدناها، ونتطلّع إلى رؤية المزيد منها. إنّ عملك على "عمليات انتقال العرض" يساهم في تشكيل مستقبل الويب. ننصحك بتجربة ميزة "انتقالات العرض" في Astro ومشاركة أعمالك، ولنواصل هذه الرحلة معًا.