نريد اليوم مشاركة المزيد من المعلومات عن رحلة Chrome وAstro باستخدام View Transitions API. يشمل ذلك كيفية تبنّي منتدى Astro وتجربته مع واجهة برمجة التطبيقات في مرحلة مبكرة، ما يسلّط الضوء على الإمكانيات المتاحة للمنتدى الأوسع نطاقًا. نحن متحمسون أيضًا لمشاركة المزيد حول الدعم المدمج الجديد لـ "عمليات نقل العرض" في Astro 3.0.
الخلفية
لطالما كان تأثير الانتقالات السلسة بين الحالات المختلفة للصفحة، والمعروف باسم تأثيرات انتقال الحالة، جانبًا معقّدًا في تقديم تجارب سلسة تتضمّن صورًا متحركة على الويب. وعلى الرغم من توفّر أدوات مثل انتقالات CSS والرسوم المتحركة في CSS وWeb Animation API، إلا أنّ إنشاء انتقالات الحالة ظلّ مهمة شاقة. يتمثل أحد التحديات في التعامل مع التفاعل على العناصر الصادرة، مما قد يجعل الانتقالات أكثر تعقيدًا.
بالإضافة إلى ذلك، من الصعب الحفاظ على موضع القراءة والتركيز على الأجهزة المساعدة. كما أن التعامل مع الاختلافات في مواضع التمرير يجعل انتقالات الحالة عملية مرهقة. تساهم كل هذه العوامل في تعقيد تنفيذ انتقالات سلسة بين العناصر المختلفة على صفحة الويب
وظهرت View Transitions API كحل للمتصفّح لمواجهة هذه التحديات. توفر واجهة برمجة التطبيقات الجديدة هذه طريقة أسهل لتغيير DOM في خطوة واحدة أثناء إنشاء انتقال متحرك بين حالتين.
شكّل إطلاق واجهة برمجة التطبيقات View Transitions API في Chrome 111 بداية رؤية أوسع نطاقًا لإتاحة النقل لجميع المواقع الإلكترونية، وليس فقط لتطبيقات الويب المستندة إلى JavaScript. سيتم أيضًا تطبيق التحسينات المستقبلية. وقد يستكشف Chrome إضافات رائعة مثل الانتقالات بين المستندات والرسوم المتحركة التي تعتمد على المكوّنات والانتقالات ذات النطاق المحدد ومجموعات الانتقال المُدمجة في المستقبل.
انتقِل إلى العرض التوضيحي: مباشر، المصدر
الاستكشافات المبكرة التي تتضمن انتقالات بين طرق العرض
لم تكن رحلة Chrome مع View Transitions API تجربة واحدة. على مدار سنوات عدّة، لعبت الملاحظات والآراء والتعاون الذي قدّمه المطوّرون ومؤلفو أُطر العمل ومجموعة عمل CSS دورًا مهمًا في تشكيل الميزة.
لعبت تجارب المطوّرين دورًا مهمًا في وقت مبكر. لم تكن الإصدارات الأولى من واجهة برمجة التطبيقات متوافقة مع الصور المتحركة في CSS، وتم تقييد الانتقالات إلى بعض الإعدادات المسبقة المقيدة. أوضحت الملاحظات المبكّرة أنّ المطوّرين أرادوا أن تكون الانتقالات قابلة للتخصيص بشكل كامل ومعبّرة. من خلال هذا التعاون المتبادل، تأكّدنا من أنّه تم تصميم واجهة برمجة التطبيقات بتوازن بين الإعدادات التلقائية الجيدة وقابلية التوسّع والتخصيص.
كان Astro أحد تلك الأطر التي اعتمدت على انتقالات العرض مبكرًا. الجزء المتبقي من هذه المقالة هو من وجهة نظر فريق Astro، ويشارك خبرته في العثور على التحولات واعتمادها وجعلها في محور تركيز تجربة تطوير الويب.
سبب المراهنة على انتقالات المشاهدة
كان أسترو يبحث عن شيء مثل عرض الانتقالات منذ فترة طويلة. Astro هو إطار عمل ويب بلغة JavaScript يعرض الخادم مكوّنات واجهة المستخدم بتنسيق HTML خفيف لأداء تحميل الصفحات بشكل أسرع. ينقل Astro عن قصد أكبر قدر ممكن من العمل خارج جهاز العميل قدر الإمكان. تستخدم مواقع Astro الإلكترونية التنقل في الصفحة الأصلية عبر المتصفح، حيث قد تستغل أطر عمل الويب الأخرى التنقل في المتصفح باستخدام التوجيه من جهة العميل في JavaScript بدلاً من ذلك.
وقد شكلت هذه المقايضة تحديًا لفريق Astro: كيف يمكن لـ Astro إنشاء تأثيرات حركية انتقالية في الصفحات وتوفير ثبات في واجهة المستخدم شبيهة بالتطبيق على مستوى الصفحات بدون استخدام التوجيه من جهة العميل؟
الحل الأمثل هو "عرض الانتقالات". وباستخدام "عمليات النقل في العرض"، يمكن لشركة Astro توفير ميزات التوجيه نفسها التي توفّرها إطارات عمل الويب SPA المليئة بJavaScript، ولكن بدون الأداء والتعقيد في التوجيه من جهة العميل. تعاملت أطر عمل أخرى مع "انتقالات العرض" كتفاصيل تنفيذ اختيارية، ولكن بالنسبة إلى 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 API البسيطة التي يمكن أن تتطابق مع واجهات برمجة تطبيقات المتصفّح بأكبر قدر ممكن. بدلاً من رؤية انتقالات العرض على أنها تفاصيل تنفيذ غير مرئية مخفية داخل 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 دعم "عمليات نقل العرض" التجريبية في Astro 2.9. وكانت الاستجابة إيجابية على الفور. بدأ المطوّرون في مشاركة عروض توضيحية رائعة للعديد من حالات الاستخدام المختلفة، وفي بعض الحالات، حتى شحنها كلها إلى مرحلة الإنتاج.
انتقِل إلى العرض التوضيحي: مباشر، المصدر
يتم وضع اللمسات الأخيرة على الدعم من خلال Astro 3.0 وإزالة العلامة عن واجهة 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 الجديد لأي عنصر مواصلة التنقّل في الصفحة الكاملة. يشغِّل ذلك عناصر طويلة الأمد مثل مشغّلات الصوت والفيديو المستمرة، وهو إجراء لم يكن متاحًا في السابق إلا في تطبيقات 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 الديناميكي. ويصعب تنفيذ كلتا الميزتين باستخدام واجهات برمجة التطبيقات (API) ذات المستوى الأدنى فقط، ولكنها سهلة الاستخدام عمليًا في Astro.
تتوفر هذه الميزات في Astro في الوقت الحالي فقط، ولكن فريق Astro يأمل في إعادة إرسال تجربته إلى مؤلفي المواصفات ومجموعات العمل من أجل إجراء تحسينات محتملة على المتصفح في المستقبل. على سبيل المثال، من خلال المراقبة الوثيقة لاقتراح لتسهيل مشاركة الصور المتحركة في CSS.
ما الخطوات التالية؟
مستقبل واعد لـ "انتقالات العرض" على الويب: وقد شحنت كل من Astro وNuxt وHTMX درجة من الدعم، وأعرب الكثيرون عن اهتمامهم.
يشعر فريق Chrome بسعادة غامرة تجاه دعم View Transitions الأصلي من Astro. إنّها خطوة كبيرة لتطوير الويب، ما يوفّر تجارب أكثر سلاسة وديناميكية للمستخدمين. ننصح المطوِّرين بالتعمق في عرض عمليات النقل في Astro 3.0. وسواء كنت تنشئ صفحات مقصودة جديدة أو تعمل على ترقية المواقع الحالية، فهذه التحسينات هي نقطة تحوّل. اطّلِع على عمليات الانتقال التي ساعدت في سد فجوة بين ما يمكن تحقيقه من خلال تطبيقات الخدمة الشاملة (SPA) والشركات المتعددة العملاء (MPA). يودّ فريق Chrome معرفة ما إذا كانت هناك ثغرات إضافية في الدعم لكلٍّ من SPA و/أو MPA. يُرجى عدم التردّد في إضافة تعليق على عرض Transitions WICG GitHub لمناقشة هذا الموضوع بشكل أكبر.
لقد استوحينا الأفكار بالفعل من العروض التوضيحية والتطبيقات المبتكرة التي رأيناها، ونحن متحمسون لرؤية المزيد. عملك باستخدام "الانتقالات في طريقة العرض" يُشكّل مستقبل الويب. يمكنك تجربة ميزة "تحولات View" في Astro، ومشاركة عملك، ودعنا نواصل هذه الرحلة معًا.