مقدمة:
تجنب التكرار:
من أهداف المبرمجين الشائعة كتابة شيفرة تتبع مبدأ DRY، أي «لا تكرر نفسك». وينبع ذلك من قدرة الحاسوب على أتمتة الأعمال المتكررة، فلا داعي لتكرارها برمجيًا. وتُعد الاستفادة من هذه الكفاءة ممارسة جيدة على نطاق واسع.
لكن HTML المكتوب يدويًا لا يلائم المبدأ جيدًا للأسف؛ فهو تصريحي جدًا، يحدد فيه المبرمج كل عناصر الصفحة صراحة لوصف بنيتها كاملة. لذلك لا تخلو الصفحات اليدوية عادة من التكرار، وحتى المتوسطة التعقيد قد تتحول سريعًا إلى مستندات طويلة للغاية.
وهذا يسبب مشكلات عدة: يصعب تصور بنية صفحة تمتد مئات الأسطر؛ وتتعقد أمور بسيطة كالمسافات البادئة مع تداخل العناصر بعمق؛ ويسهل إدخال أخطاء صياغة وتنسيق لا تُلاحظ، خصوصًا دون فحص آلي أو تحقق مدمج[1].
في كليتنا:
عرفنا هذه التحديات في مكتبة كلية كينغزبورو المجتمعية بجامعة مدينة نيويورك. فصفحتنا الرئيسية المبنية على LibGuides CMS تجاوزت خمسمئة سطر، دون جزأي head وfooter. ويعود كثير منها إلى قوائم منسدلة متكررة قائمة على Bootstrap، تتيح الخدمات من الرئيسية. وكانت قوائم الروابط اليدوية مسؤولة عن معظم الطول. وهذه الشيفرة الأصلية لقائمة «الهامبرغر»، التي كانت رغم طولها أقصر القوائم وأبسطها:
<div class="dropdown" id="hamburger-container">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="hamburger">
<i class="fas fa-bars" style="font-size: 2em;"></i>
</button>
<ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
<li>
<a class="searchmenu" aria-label="OneSearch" href="https://library.kbcc.cuny.edu/onesearch">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-search fa-fw bigger-icon" aria-hidden="true"></i>
<strong>OneSearch</strong>
</div>
</a>
<a class="searchmenu" aria-label="Databases A to Z" href="https://library.kbcc.cuny.edu/az.php">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-database fa-fw bigger-icon" aria-hidden="true"></i>
<strong>Databases A-Z</strong>
</div>
</a>
<a class="searchmenu" aria-label="Research Guides" href="https://library.kbcc.cuny.edu/guides">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-telescope fa-fw bigger-icon" aria-hidden="true"></i>
<strong>Research Guides</strong>
</div>
</a>
<a class="searchmenu" aria-label="FAQ" href="https://library.kbcc.cuny.edu/faq">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-question-circle fa-fw bigger-icon" aria-hidden="true"></i>
<strong>FAQ</strong>
</div>
</a>
<a class="searchmenu" aria-label="Hours" href="https://library.kbcc.cuny.edu/calendar">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-clock fa-fw bigger-icon" aria-hidden="true"></i>
<strong>Library Hours</strong>
</div>
</a>
<a class="searchmenu" aria-label="Site Map" href="https://library.kbcc.cuny.edu/sitemap">
<div class="highlight-menu-item bigger-fancy-text">
<i class="fas fa-location-arrow fa-fw bigger-icon" aria-hidden="true"></i>
<strong>Site Map</strong>
</div>
</a>
</li>
</ul>
</div>
وكان تجريد بعض التكرار مكسبًا واضحًا للصيانة؛ إذ يحقق البساطة وقابلية الصيانة، والاتساق مع الممارسات الحديثة لتطوير الويب، وشيفرة أجمل، وتعلم إطار جافاسكريبت حديث واعتماده، ورفع المستوى التقني لما ننجزه. وباختصار، يحسن الموقع ويسهل حياة القائمين عليه.
لكن لم تخل الخطوة من تردد. فلدينا مكتبيون غير تقنيين يعملون يوميًا بـLibGuides، وقد يرغبون في تحرير الصفحة. وخشينا أن تربكهم طبقة التجريد الإضافية، إذ لن يروا نموذج كائنات HTML DOM كاملًا كما يريدون، وقد يصعب فهمه وتعديله. وكان ذلك قلقًا مهمًا.
وفي المقابل، قد يجعل تقليل شيفرة القوائم أجزاء أخرى أوضح لغير المتخصصين، بخفض الضوضاء التي يمرون بها لإنجاز مهمتهم. فالتبسيط يحسن الوصول إلى الشيفرة أيضًا.
قررنا المضي لأن المزايا الإجمالية ترجح العيوب. والمقايضة أن الصيانة تسهل لبعضهم، بينما تكون الفائدة مختلطة لآخرين. وكان المشروع أفضل طريق وجدناه للموازنة ومواصلة التطوير.
اختيار Vue.js واستخدامه:
اخترنا Vue.js، أو Vue اختصارًا. وهو إطار «تدريجي» يسعى إلى التوسع صعودًا ونزولًا. وكان التبسيط مهمًا لأن الحالة غير معقدة، ولا تحتاج إلى كلفة نظم البناء المعقدة الشائعة في الأطر الأخرى. أردنا أداة داخل نظام إدارة المحتوى. وأمكن استيراد Vue مكتبةً باستدعاء بسيط من شبكة توصيل محتوى CDN، مثل Bootstrap أو jQuery. فإضافة عنصر script الذي يشير إلى https://cdn.jsdelivr.net/npm/vue@2.7.8 تتيح تجريدات كثيرة دون أعباء أخرى معقدة.
يوفر Vue نظام قوالب مفيدًا لبناء HTML برمجيًا. وكنا نعرف قوالب Flask في بايثون ومحركها Jinja، المشابه مفهوميًا، فساعدتنا الخبرة. لكننا نرى في Vue وظائف إضافية كالربط ثنائي الاتجاه والتحكم الأوسع في DOM.
ويتيح توجيهات مثل v-for، وهي حلقة لتكوين أجزاء DOM. وبناء قائمة طويلة بها أفضل كثيرًا من كتابة HTML يدويًا. ويمكن حفظ الروابط والنصوص والأيقونات في كائن جافاسكريبت داخل منشئ Vue، وسحبها بتوجيهاته، مع تنظيم HTML بالقالب. ويمنحنا ذلك قوة اللغة والإطار في البناء، بدقة وقدرة أكبر من الكتابة اليدوية الصبورة.
وهذه القائمة نفسها بعد إزالة التكرار باستخدام Vue:
<div class="dropdown" id="hamburger-container">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" aria-label="Hamburger Menu" id="hamburger">
<i class="fas fa-bars" style="font-size: 2em;"></i>
</button>
<ul class="dropdown-menu fade" aria-labelledby="hamburger" id="hamburger-ul">
<li>
<a v-for="item in hamburger" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
<menus-component v-bind:item="item"></menus-component>
</a>
</li>
</ul>
</div>
والمكوّن الموافق الذي يحقق الحلقة:
const menusComponent = {
Template:
`<div class="bigger-fancy-text">
<i v-bind:class="item.icon" aria-hidden="true"></i>
<strong>{{ item.description }}</strong>
</div>`,
props: ['item']
}
ومنشئ Vue:
new Vue({
el: '#app',
components: {
'menus-component': menusComponent
…
},
data() {
return {
hamburger: [
{
Link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
icon: "fas fa-search fa-fw bigger-icon",
description: "OneSearch",
target_blank: "",
id: 1
},
…
رفعنا الشيفرة ملفًا واحدًا إلى قسم Upload Customization Files في إدارة LibGuides. وكانت فعالة، مع عيبين بارزين. أولهما أن القسم مخفي نسبيًا في الواجهة، وفق قرار تصميم من Springshare؛ فقد لا يعرف القادم الجديد أين توجد ملفات الإعداد الأساسية لعرض الصفحة.
وثانيهما ضرورة صحة جافاسكريبت، لأن أخطاءها قد تمنع تحميل البيانات أو عرض أجزاء كاملة. واعتمدنا تذكر التحقق قبل الرفع، باستخدام https://babeljs.io ، حيث نلصق مثلًا المنشئ وكائن البيانات فينبه إلى أخطاء الصياغة. وليست العملية الأكثر أتمتة، لكنها بسيطة وفعالة لنا[2].
تقييم النهج:
لم نُعد كتابة الموقع كله وفق Vue؛ فلم يكن ذلك الهدف، ويتجاوز النطاق كثيرًا. بل اخترنا أجزاء يسهل إزالة التكرار منها، وفي معظمها قوائم الروابط اليدوية التي تنتج القوائم، لأنها السبب الرئيس للطول وصعوبة الإدارة.
اختبرنا الفكرة أولًا بتنفيذ v-for في صفحة المشروعات الشخصية لأمين الويب. ونجحت بسلاسة مفاجئة دون مشكلات تذكر، فمنحتنا ثقة التنفيذ على الرئيسية. وكنا نعلم إمكان الرجوع بإدارة النسخ باستخدام Git وGitHub عند الحاجة.
ومع ذلك، لم يكن الانتقال خاليًا من المشكلات. فقد أضاف نهجنا الأول البسيط عناصر div جديدة، فأفسد CSS القائم. ونسبنا المشكلة خطأ إلى Vue، لكنها نتجت من تغير DOM وعدم تصرف CSS كما توقعنا. وكان ينبغي أن نعرف أن تغيير البنية سيؤثر في الأنماط. والخبر الجيد أن شيفرة Vue نفسها سليمة. وأمكن تعديل HTML المولد، وضبط حلقات v-for لإعادة البنية الأصلية بأمانة، فعمل CSS دون إعادة كتابته.
واكتشفنا إمكان تجريد المستوى الأعلى أيضًا: جعل Vue يمر على قائمة القوائم، أي شريط التنقل كله، لإضافة طبقة أتمتة أخرى. ومع تعدد الحلول، اخترنا مكوّن Vue ثانيًا لمنطق هذا المستوى. وهو تجريد جديد علينا نأمل تحسينه في الأسابيع والأشهر المقبلة.
وسمح الهدف المحدود والنطاق المضبوط بإجراء تغييرات غير مرهقة خلال أسابيع، دون تعطيل العمليات الأخرى. وأنجزناها في مجموعة LibGuides التجريبية sandbox قبل نقلها للإنتاج، لتجنب إفساد الرئيسية الحية ولو مؤقتًا.
ومن النتائج المرضية أن المستخدم لم ير أي تغيير؛ فالموقع ظل مطابقًا من منظوره، بينما زادت قابليته للصيانة دون أثر عليه، وهو مكسب مهم.
وكميًا، انخفض HTML من 501 سطرًا إلى 279 ، أي 44%. ولم تكن الغاية مسابقة لأقصر شيفرة، لكن هذا وحده جعل العمل جديرًا بالجهد. ويقابل الرقمَ بعضُ العبء المعرفي والأسطر الإضافية للمكونات والمنشئ، ومع ذلك أصبحت الصفحة أوجز، ويبني المنطق الجديد كثيرًا من DOM آليًا بفرصة أقل للخطأ البشري.
خاتمة:
نتج مستند أقصر وأسهل إدارة وصيانة. وكان اعتماد Vue لحالتنا المحدودة قرارًا جيدًا. ونأمل استخدام مزاياه المتقدمة لاحقًا؛ والخطوة التالية نقل مزيد من المنطق إلى methods والخصائص المحسوبة.
وقد يقود المشروع في النهاية إلى إعادة كتابة شاملة تتبنى أسلوب Vue أكثر. فجعله إطار التنظيم الرئيس يفتح إمكانات تتجاوز إعداد Bootstrap الحالي، ويزيد الوظائف المتاحة حين يحين التصميم الكامل الجديد. وإزالة التكرار خطوة أولى صغيرة في هذا الاتجاه.
الحواشي:
[1] لا يوفر LibGuides CMS فحص صياغة أو تحققًا مدمجًا.
[2] هنا قد يفيد نظام بناء أكثر تطورًا، بإدراج الفحص والتحقق ضمن عملية البناء؛ وسننظر فيه إذا توسع اعتمادنا للإطار.