💂🏼 👨🏾‍🤝‍👨🏻 🌎 سلطة المياه الفلسطينية سهلة. مرحبا جملة 🏒 🚢 🚵🏾

الاستمرار في دراسة تطبيقات الويب التقدمية. بعد الجزء الأول النظري ومثال عملي بسيط عن Hello Habr ، الجزء الثاني ، سنحاول نقل موقع PWA إلى CMS Joomla.

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

للبدء ، قم بتنزيل وتثبيت جملة. أثناء التثبيت ، نشير إلى أنه من الضروري ملء الموقع ببيانات تجريبية - حدد الخيار "مدونة". نحصل هنا على مثل هذا الموقع - https://tetta.nut.cc/habr/hello-joomla/original/ . ثم انسخ جميع ملفات الموقع إلى الدليل https://tetta.nut.cc/habr/hello-joomla/ - لدينا الآن حالتان عمليتان من موقع جملة على نفس قاعدة البيانات. سنترك الأول كما هو ، والثاني سوف ننتقل إلى إصدار PWA.

يمكن الاطلاع على شفرة المصدر لمثال من هذه المقالة على GitHub-e

قليلا عن هيكل جملة

يحتوي Joomla على مفهوم القالب - مجموعة من موارد الويب المسؤولة عن مستوى العرض التقديمي. توجد النماذج في الدليل / templates ، ويطلق على معيارنا "خارج الصندوق" protostar.

في الحالة العامة ، بعد تلقي طلب المتصفح ، يقوم جوملا بتشغيل المحرك ، ويقوم بعمله الخاص ، ثم ينقل تنفيذ الطلب إلى /templates/protostar/index.php ، الذي يقوم بالفعل بإنشاء HTML للعميل. هذا الملف عبارة عن ملف PHP بسيط ، حيث يمكن أيضًا استخدام أمرين:
<jdoc:include type="component" /> <jdoc:include type="modules" name="position-id" style="..." /> 
الأول يدخل بدلا من ذلك المادة الرئيسية المقابلة لعنوان URL (المكون) المطلوب ، والثاني - الوحدات التي يحددها المسؤول للموضع المحدد. تتكون أي صفحة في جملة من مكون ووحدات.

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

تتميز جملة بخصوصية - إذا كان هناك معلمة tmpl في طلب GET المستلم بقيمة somePage ، فإن جوملا لا ترسل تنفيذ الطلب إلى index.php إلى ملف القالب ، ولكن إلى somePage.php ، إن وجدت. نستخدمه أدناه.

قذيفة التطبيق

الآن نحن بحاجة إلى العزل من shell app site - غلاف التطبيق الذي يتم إنشاؤه. عند تطوير موقع PWA من البداية ، يمكن أن تكون هناك استراتيجيات مختلفة لذلك ، ولكن في موقع نهائي ، من الملائم استخدام التقسيم إلى أجزائه الثابتة والديناميكية.

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

في نفس الوقت ، المحتوى نفسه ، وكذلك الوحدات الموجودة في الموضع 7 ووحدة Breadcrumbs في الموضع 2 ، والتي توضح مكان وجود المستخدم حاليًا على الموقع ، ديناميكية. يجب تحميلها على متصفح العميل.

1. التغييرات على الخادم

استبدل جميع الكتل الديناميكية بالعنصر النائب. في ملف index.php للقالب ، قم بتغيير التوجيهات:

 <jdoc:include type="component" />  <div id="main-content"></div> <jdoc:include type="modules" name="position-id" style="..." />  <div id="module-id"></div>

نقوم أيضًا بتوصيل ملف جافا سكريبت الخاص بنا hello-joomla.js في index.php بالإضافة إلى البرامج النصية للنماذج.

قم بإنشاء ملف main-content.php بالمحتويات التالية:

 <jdoc:include type="component" />

ملف الوحدة النمطية 2.php:

 <jdoc:include type="modules" name="position-2" style="none" />

وملف الوحدة 7.php:

 <jdoc:include type="modules" name="position-7" style="well" />

معنى ما تم القيام به هو أنه عندما نطلب https://tetta.nut.cc/habr/hello-joomla/index.php/5-your-modules؟tmpl=module-7 ، سنحصل فقط على كود الوحدات الموجودة في postion- 7. نفس الشيء مع المحتوى.

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

2. جانب العميل

في hello-joomla.js ، نحتاج إلى تنفيذ تحميل ديناميكي للمحتوى والوحدات النمطية. بالإضافة إلى ذلك ، تحتاج إلى تغيير سلوك جميع علامات <A> بحيث يؤدي النقر على الرابط إلى بدء التحميل الديناميكي لبيانات الصفحة. سيتم تحميل وحدات الأعمدة اليمنى مرة واحدة عند فتح الموقع في المتصفح ، وسيتم تحميل مسارات التنقل والمحتوى في كل مرة تنقر فيها على الرابط الداخلي.
هذا أيضًا سهل:

مرحباً- joomla.js

 //   url  HTML  el function loadData(el, url){ url.indexOf("?") >= 0 ? url += "&" : url += "?"; url = url + 'mode=nocache&tmpl=' + el; fetch(url) .then( function(response) { if (response.status == 200) { response.text().then(function(data) { document.getElementById(el).innerHTML = data; }); } }) .catch(); return false; } //    <a>    function handleLinks() { var links = document.querySelectorAll('a'); for (var i = 0; i < links.length; ++i) { links[i].removeEventListener("click", handleLink); links[i].addEventListener("click", handleLink); } } //   function handleLink(e) { e.preventDefault(); loadData("main-content", this.href); loadData("module-2", this.href); handleLinks(); return false; } //      function DOMLoaded() { loadData("main-content", location.pathname); loadData("module-2", location.pathname); loadData("module-7", location.pathname); handleLinks(); } document.addEventListener('DOMContentLoaded', DOMLoaded, true);

في الوقت الحالي ، قمنا بإعادة تشكيل موقعنا في تطبيق SPA كامل - تطبيق صفحة واحدة - تطبيق. هناك تلميع متبقي - الرابط "العودة إلى الأعلى" ، أنماط القائمة العلوية ، نموذج البحث ، أداة التحميل المسبق المتحركة ، إلخ.
تتوفر نسخة من الموقع في وضع SPA على https://tetta.nut.cc/habr/hello-joomla/spa/ .

3. SPA -> سلطة المياه الفلسطينية

نربط البيان و sw.js من المثال السابق في index.php. لمنع عامل الخدمة من تخزين الطلبات الديناميكية مؤقتًا ، أضف "mode = nocache" إلى عنوان url في hello-joomla.js في وظيفة loadData.

هذا كل شيء. يمكن إصلاحه على الشاشة الرئيسية.

الاستنتاجات

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

في المقالة التالية ، في شكل نصائح مفيدة ، سنضع الموقع وظيفياً إلى مستوى الإصدار في الإنتاج. هناك تحسينات SPA قياسية متبقية - عنوان الصفحة في المتصفح ، تحليلات Google ، تحقق من عدم وجود أي شيء ذي قيمة لمحركات البحث. سنعمل على إدارة التخزين المؤقت المناسب لـ Service Worker-a لتحديث عناصر هيكل التطبيق بسرعة. بالإضافة إلى ذلك ، يرغب محررو الموقع والمعلقون في أن يتمكنوا من إدراج صور من الإنترنت في مواد الموقع ، بما في ذلك عبر بروتوكول http.

واحدة من الميزات العظيمة لمفهوم PWA هي أنه يجلب إلى الحياة نموذج MVC المفقود منذ فترة طويلة في العديد من أطر الخادم والمتصفح. يعيش "العرض" الآن على العميل ، ويدخل المتصفح إلى الخادم للبيانات ، وليس للعرض التقديمي .

وخلافا لـ SPAs التقليدية ، فإن PWA تبني هذا "العرض" ليس بإطارات جافا سكريبت الثقيلة ، ولكن مع html + css القديم السريع والواضح.

سلطة المياه الفلسطينية سهلة. مرحبا جملة

قذيفة التطبيق

1. التغييرات على الخادم

2. جانب العميل

3. SPA -> سلطة المياه الفلسطينية

الاستنتاجات

More articles: