1. مقدمة إلى إطار العمل VUE.JS

يتوفر إطار العمل PDF الخاص بهذا المستند |HERE|`.

الأمثلة الواردة في هذا المستند متاحة |HERE|.

يُعد هذا المستند جزءًا من سلسلة مكونة من أربعة مقالات:

|[مقدمة إلى لغة PHP7 من خلال الأمثلة|؛

|مقدمة إلى لغة ECMASCRIPT 6 من خلال الأمثلة|؛
|مقدمة إلى إطار العمل VUE.JS من خلال الأمثلة|. وهذا هو المستند الحالي؛
|مقدمة إلى إطار العمل NUXT.JS من خلال الأمثلة|؛

هذه جميعها وثائق مخصصة للمبتدئين. تتبع المقالات تسلسلاً منطقياً ولكنها غير مترابطة بشكل وثيق:

يقدم المستند [1] لغة PHP 7. القارئ الذي يهتم فقط بلغة PHP وليس بلغة جافا سكريبت الواردة في المقالات التالية سيتوقف عند هذا الحد؛
تهدف جميع الوثائق [2-4] إلى إنشاء عميل جافا سكريبت لخادم حساب الضرائب الذي تم تطويره في الوثيقة [1]؛
تتطلب أطر عمل جافا سكريبت [vue.js] و [nuxt.js] الواردة في المقالتين 3 و 4 معرفة لغة جافا سكريبت في أحدث إصدارات ECMASCRIPT، أي تلك الخاصة بالإصدار 6. وبالتالي، فإن الوثيقة [2] موجهة إلى أولئك الذين لا يعرفون هذا الإصدار من JavaScript. ويشير هذا المستند إلى خادم حساب الضريبة الذي تم إنشاؤه في المستند [1]. وقد يحتاج قارئ المستند [2] أحيانًا إلى الرجوع إلى المستند [1]؛
وبمجرد إتقان ECMASCRIPT 6، يمكننا الانتقال إلى إطار العمل VUE.JS الذي يتيح إنشاء عملاء جافا سكريبت يتم تشغيلهم في متصفح في وضع SPA (تطبيق صفحة واحدة). وهذا هو المستند [3]. وهو يشير في الوقت نفسه إلى خادم حساب الضريبة الذي تم إنشاؤه في المستند [1] وإلى كود العميل المستقل JavaScript الذي تم إنشاؤه في [2]. سيحتاج قارئ المستند [3] أحيانًا إلى الرجوع إلى المستندين [1] و[2]؛
وبمجرد إتقان VUE.JS، يمكننا الانتقال إلى إطار العمل NUXT.JS الذي يتيح إنشاء عملاء جافا سكريبت يتم تشغيلهم في المتصفح في وضع SSR (Server Side Rendered). وهو يشير في الوقت نفسه إلى خادم حساب الضريبة المُدمج في المستند [1]، إلى كود عميل جافا سكريبت المستقل الذي تم إنشاؤه في [2]، وكذلك إلى التطبيق [vue.js] الذي تم تطويره في المستند [3]. وقد يحتاج قارئ المستند [4] أحيانًا إلى الرجوع إلى المستندات [1] و[2] و[3]؛

يمكن تحسين أحدث إصدار من خادم حساب الضريبة الذي تم تطويره في المستند [1] (انظر المستند [مقدمة إلى لغة PHP7 من خلال الأمثلة (2019)]) بعدة طرق:

تركز النسخة المكتوبة على الخادم. أما الاتجاه السائد حاليًا (سبتمبر 2019) فهو نموذج العميل/الخادم:

يعمل الخادم كخدمة jSON؛
تشكل الصفحة، سواء كانت ثابتة أم لا، نقطة الدخول إلى تطبيق الويب. تحتوي هذه الصفحة على HTML /CSS وكذلك على JavaScript؛
يتم الحصول على الصفحات الأخرى لتطبيق الويب ديناميكيًا بواسطة JavaScript:
- يمكن الحصول على الصفحة HTML عن طريق تجميع أجزاء ثابتة أو غير ثابتة، مقدمة من نفس الخادم الذي قدم صفحة الدخول، أو مبنية بواسطة جافا سكريبت على جانب العميل؛
- تعرض هذه الصفحات المختلفة البيانات المطلوبة من الخدمة jSON؛

وبذلك يتم توزيع العمل بين العميل والخادم. وبفضل تخفيف العبء عن الخادم، يمكنه خدمة عدد أكبر من المستخدمين.

البنية المطابقة لهذا النموذج هي كما يلي:

JS: JavaScript

المتصفح هو عميل:

لخدمة تتضمن صفحات أو أجزاء ثابتة أو غير ثابتة (غير موضحة أعلاه)؛
خدمة بيانات jSON؛

وبالتالي، فإن الرمز JavaScript هو عميل لـ jSON، وبهذه الصفة يمكن تنظيمه في طبقات [UI, métier, dao] (UI: واجهة المستخدم) تمامًا كما تم تنظيم عملائنا jSON المكتوبين بلغة PHP. في النهاية، لا يقوم المتصفح بتحميل سوى صفحة واحدة، وهي الصفحة الرئيسية. أما جميع الصفحات الأخرى فيتم الحصول عليها وإنشاؤها بواسطة JavaScript. يُطلق على هذا النوع من التطبيقات اسم SPA: تطبيق الصفحة الواحدة أو APU: تطبيق ذو صفحة واحدة.

يندرج هذا النوع من التطبيقات أيضًا ضمن ما يُعرف بـ AJAX: Asynchronous Javascript و XM:

غير متزامن: لأن استدعاءات جافا سكريبت من العميل إلى الخادم jSON غير متزامنة؛
XML: لأن XML كانت التقنية المستخدمة قبل ظهور jSON. ومع ذلك، تم الاحتفاظ بالاختصار AJAX؛

سندرس مثل هذه البنية في هذا المستند. من جانب العميل، سنستخدم إطار عمل جافا سكريبت [Vue.js] [https://vuejs.org/] لكتابة عميل جافا سكريبت الخاص بالخادم jSON PHP الذي كتبناه في الوثيقة [1].

[Vue.js] هو إطار عمل JavaScript. وقد قدمنا لغة جافا سكريبت في المستند [2]. ولن نقوم بدراسة شاملة لإطار العمل [vue.js]. سنكتفي بعرض المفاهيم التي سيتم استخدامها لاحقًا في كتابة عميل [Vue.js] للإصدار jSON من الإصدار 14 لخادم حساب الضرائب (انظر |[مقدمة إلى لغة PHP7 من خلال الأمثلة (2019)]).

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

يمكن اختبار تطبيق الخادم PHP 7 |هنا|.

Serge Tahé، أكتوبر 2019