مكونات لا صفحات

النهج الكلاسيكي القائم على الصفحات

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

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

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

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

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

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

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

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

الآن عند حدوث تغيير في التصميم، أو إذا طلب العميل تعديل ما على التصميم سوف تتكرر هذه العملية.

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

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

الآن، كانت هذه القوالب رائعة، وكان عامل توفير الوقت من أكبر مزاياها. لكن ماذا عن الاحتمالات المقدمة عن هذه القوالب. كيف يمكنك استخدام قالب تلو الآخر دون أن تشعر بالملل عند استخدام أي تقنية لقطع ملفات الإرتباط "cookie-cutting technique " ؟ هل فكرت ماذا يحدث إذا أردت إنشاء صفحة مميزة لفكرة مختلفة طرأت على بالك للتو؛ لكنك لم تتمكن من العثور على القالب المناسب الذي يتماشى مع مواصفات صفحتك؟! هل ستقوم ببنائها بنفسك من البداية وتضعها وسط تلك الصفحات المتشابهة التي استخدمتها من قبل بناءً على القالب الذي اخترته؟ أم أنك ستأخذ الوقت الكافي لمحاولة جعلها أقرب ما يمكن إلى الصفحات الأخرى.

كل ما سبق يجعلنا نستنتج أن استخدام القوالب في تصميم المواقع يبدو شيئًا موفرًا للوقت ويزيد من الكفاءة لكنه في ذات الوقت شيء محدود للغاية.

التفكير من خلال المكونات

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

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

للتغلب على هذه المشكلة، كان لابد من التوصل إلى حل يحقق التوازن للحفاظ على الكفاءة ويزيد التفرد. بناء مواقع متناسقة لا تبدو مملة، والحفاظ على الكفاءة وتوفير الوقت هو هدف يسعى إليه الجميع.

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

المكونات هنا هي أساس بناء صفحات الموقع. قد يكون المكون عبارة عن زر" Button" أو حقل إدخال "input field"، أو قد يكون مكون أكثر تعقيدًا مثل شريط التنقل" Navigation bar" الذي يتكون من مكونات أخرى أصغر.

تم تأسيس هذه الطريقة في التفكير من حيث المكونات النمطية بواسطة براد فورست " Brad Frost" في كتابه " Atomic Design". في هذا الكتاب اقترح تقسيم الصفحات والقوالب إلى أصغر عناصرها، والتي عند تجميعها تشكل عناصر أكبر.

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

لذلك النهج القائم على المكونات يتضمن أن يشترك الفريق في تحديد عدد من المكونات التي تعالج جميع الوظائف التي يجب أن تكون موجودة في المواقع أو المنتجات، ويقوم المصممون بإنشاء نماذج من هذه المكونات.

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

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

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

تُشكل هذه المكونات والإرشادات، بالإضافة إلى العناصر الأخرى التي سوف نتناولها في الفصول القادمة، ما يسمى نظام التصميم.

لكن ما الذي يمنح المكونات الأفضلية؟!

بالتفكير في مشكلة الكفاءة والتفرد، نجد أن هذه المكونات لها بعض الخصائص التي تساعدها أن تكون الحل الأمثل لهذه المواقف، ومن هذه الخصائص:

۱.المكونات قابلة لإعادة الاستخدام

هذا يعالج مشكلة الوقت المهدر في إنشاء صفحات من البداية في كل مرة. بدلًا من ذلك، يمكنك البدء في بناء وتجميع جميع المكونات المحتملة التي قد تحتاجها في تصميم الموقع الإلكتروني الخاص بك.

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

۲.المكونات توفر النمطية

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

۳. المكونات تكون فريدة في نطاقها الخاص

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

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