تصميم واجهات مستخدم تعتمد على البث المباشر

تعتمد واجهات المستخدم الحديثة غالبًا على البيانات والحسابات التي تُنجز بسرعات متفاوتة. إذا تعاملنا مع الشاشة بأكملها كوحدة واحدة "جاهزة أو غير جاهزة"، سينتهي الأمر بالمستخدمين بالانتظار حتى الجزء الأبطأ، حتى عندما يكون معظم واجهة المستخدم جاهزًا للاستخدام. عمليًا، يبدو الأمر كحلقة تحميل تملأ الشاشة وتحجب التنقل والسياق، وحالات فارغة تحل محل التخطيطات المعروفة، وواجهة مستخدم تظهر فجأة بعد توقف غير مريح، مما يُجبر المستخدمين غالبًا على إعادة توجيه أنفسهم ويجعل التطبيق يبدو أبطأ مما هو عليه في الواقع. يؤدي هذا إلى انطباعات أولية متأخرة، وإفراط في استخدام شاشات التحميل العامة، ومنطق تنسيق مشتت وهش بين المكونات.

React 19streaming يحوّل التركيز من "كيف نحمّل بشكل أسرع؟" إلى "كيف نكشف واجهة المستخدم بأمان على مراحل؟" يتم تصميم واجهة المستخدم التي تعتمد على البث أولاً بحيث يكون الاستعداد الجزئي متوقعًا ومقصودًا، مع التحكم في التقدم بواسطة العارض بدلاً من تنسيقه يدويًا في كود التطبيق.

تصميم واجهات مستخدم تعتمد على البث المباشر أولاً معSuspense

تبدأ واجهة المستخدم التي تعتمد على البث المباشر بفكرة أن أجزاء الشاشة ليست متساوية في الأهمية أو السرعة. توفر بعض المناطق التوجيه والتحكم، بينما تضيف مناطق أخرى تفاصيل أو معلومات ثانوية. يمكن React أن...commit واجهة المستخدم بشكل تدريجي، ولكن فقط إذا كانت شجرة المكونات توضح هذه الفروقات بشكل صريح.

في React، يتم تشكيل البث بواسطةSuspense الحدود. أي شيء خارجهاSuspense يجب أن يكون الحد الفاصل جاهزًا للتنفيذ الفوري. يمكن تأجيل أي شيء بداخله حتى تصبح بياناته أو تبعياته جاهزة. تصميم واجهات المستخدم التي تعتمد على التدفق يعني تحديد الأجزاء التي يجب أن تظهر معًا والأجزاء التي يمكن أن تظهر بشكل مستقل.

يستبدل تصميم "البث أولاً" منطق تحميل المكونات بنطاقات الالتزام التي يتحكم بها المُعرِض. أنت من يحدد مكان ظهور واجهة المستخدم، وليس وقت تحميل البيانات. كل نطاق هو وحدة ذات معنى يمكن أن تظهر بشكل مستقل. عادةً ما يكون "الغلاف" هو النطاق الخارجي، ويشمل التنقل، والعناوين، والإجراءات الأساسية التي تُبقي المستخدم مُوجَّهاً. أما النطاقات الداخلية فتمثل مناطق أكثر تكلفة أو أقل أهمية.

لا يهدف تصميم "التدفق أولاً" إلى تقسيم واجهة المستخدم إلى أكبر عدد ممكن من الأجزاء. فكثرة الحدود قد تُخلّ بالتناسق البصري: إذ تظهر أجزاء صغيرة من واجهة المستخدم بشكل منفصل، وتتغير التخطيطات باستمرار، ويُجبر المستخدمون على إعادة تجميع الصفحة ذهنياً مع وصول الأجزاء. بدلاً من ذلك، يجب مواءمة الحدود مع كيفية فهم المستخدمين للشاشة؛ فإذا كان لا بد من فهم منطقتين معاً، فاجعلهما خلف نفس الحد. وإذا كانت إحدى المنطقتين مفيدة دون الأخرى، فاجعلها تعمل بشكل مستقل.

عندما يتم تنظيم واجهة المستخدم بهذه الطريقة، يمكن لخاصية التزامن والجدولة في React أن تكشف عن بنية مستقرة في وقت مبكر وتملأ المناطق الأبطأ لاحقًا، دون حظر الصفحة بأكملها.

يُظهر الرسم التخطيطي أعلاه صفحةً مُقسّمة إلى ثلاث طبقات. في الأعلى، توجد طبقة أساسية تحتوي على رأس الصفحة وقائمة التنقل، ويتم عرضها وتثبيتها فورًا. أسفلها، توجد طبقة المحتوى الرئيسية مُغلّفة بحدود مؤقتة؛ تُحلّ هذه الطبقة بسرعة وتُضاف بعد الطبقة الأساسية بفترة وجيزة. في الأسفل، توجد طبقة تحليلات مُكثّفة، تقع خلف حدود منفصلة؛ وتستغرق فترة تعليق أطول وتُضاف لاحقًا. تُثبّت كل طبقة بشكل مستقل دون إخفاء أو إعادة عرض الطبقات التي تعلوها.

لا تتراجع الصفحة في أي مرحلة. يبقى الهيكل تفاعليًا، ويظهر المحتوى الأساسي تاليًا، وتُضاف التحليلات لاحقًا؛ كل خطوة هي حالة واجهة مستخدم مستقرة يمكن للمستخدم التفاعل معها.

مثال: تصميم يعتمد على البث أولاً مع نطاقات التزام متعددة الطبقات

يوضح هذا المثال أن تصميم واجهة المستخدم الذي يعتمد على البث المباشر يتمحور أساسًا حول تحديد حدودها. يقوم الكود عمدًا بإنشاء ثلاث مناطق يتم حلها بسرعات مختلفة، مما يسمح لنا بمراقبة قيام React بتثبيتها تدريجيًا دون التأثير على التغييرات السابقة.

• يتم تنفيذ نطاق Shell على الفور (الاتجاه + عناصر التحكم). ...