السـلام عليكم و رحمة الله تعالى و بركاته
مع نمو JAMstack ومجتمعها ، أصبحت مولدات المواقع الساكنة أكثر شيوعًا. في هذه المقالة سنتكلم عن إحداها , ألا و هي Gridsome .
طبعا هنالك العديد من مولدات المواقع الساكنة و كلها تتعلق بتقنيات برمجية مختلفة . و بما أنني من مناصري و محبي إطار العمل Vuejs فأنا أستخدم Gridsome .
لو دخلنا على الموقع الرسمي له من خلال هذا الرابط : Modern Site Generator for Vue.js - Gridsome
أول ما يشد إنتباهنا هو التالي :
فهو يعتمد على فلسفة الـ Jamstack , بالإضافة إلى أنه يٌنشىء لنا مواقع سريعة بشكل إفتراضي (fast by default). مٌثير أليس كذلك ؟ حسنا ليس هذا كل شيىء . دعني أعرفك عليه بشكل أعمق .
-
الـ gridsome عبارة عن مولد مواقع ساكنة (Static Sites Generator) و أحيانا تجد هذا الإسم المختصر SSG . مدعوم ويعتمد على إطار العمل Vuejs.
-
المواقع الساكنة فعليا تعاملنا معها سابقا عندما بدأنا في تعلم مجال الويب حين كنا نلعب مع الـ HTML , CSS و بعض الجافاسكربت و كنا حينها نسمي الموقع ساكن (Static), فلم يكن هنالك تفاعل ما بين الموقع و المستخدم له . قد يتبادر إلى ذهنك لما علي إنشاء موقع ساكن بإستخدام Gridsome . اذا كنت أستطيع عمل ذلك بالـ HTML, CSS و الجافاسكربت ؟! . تريث ولا تستبق الأمور … فعليا وصلنا إلى الجزء الممتع من هاته المقالة التي ستجيبك عن هذا السؤال .
-
مولدات المواقع الساكنة تقوم بإنشاء لنا مواقع ساكنة أيضا لكن بطريقة و فلسفة جديدة تجعل من هذا الموقع الساكن سريع جدا , عالي الحماية , قوي و مرن .
-
من مميزات الـ Gridsome :
- يعتمد على إطار العمل Vuejs في ناحية الفرونت آند (frontend) :
فسنستفيد من مميزات الـ vuejs في بناء واجهات إحترافية. - ميزة Hot Reloading Dev :
عندما نقوم بالتغيير في الكود نلاحظ هاته التغييرات في المتصفح مباشرة بدون الحاجة لتحديث الصفحة. - ميزة auto optimized code :
يقوم بتحزيم و تصغير حجم الكود تلقائيا . - تحسين الصور :
جميع الصور يتم تحسينها و ضغطها بشكل آلي يضمن سرعة تحميلها و عرضها في الموقع. - لا وجود لإعادة تحميل الصفحات :
ففي النهاية سيكون لدينا تطبيق أحادي الصفحة (SPA). - جلب و إعداد الموارد مسبقا (pre-fetching) :
فالـ Gridsome بقراءة كل الروابط الموجودة في الصفحة و تحميلها في الكاش إستعدادا لطلبها من قبل المستخدم . فتكون لدينا سرعة كبيرة في إرجاع الطلب و عرض الصفحات. - ميزة GraphQL Data Layer :
يعتمد على الـ GraphQL في الحصول على الـ data من الـ APIs و جلب فقط ما نريد من بيانات . - ميزة data sourcing :
البيانات يُمكن جلبها من APIs , ملفات ماركداون (markdown), من أنظمة إدارة المحتوى كالووردبريس على سبيل المثال . فإذا كانت لديك بيانات موجودة على نظام ووردبريس فبكل سهولة يُمكنك نقلها إلى هذا الموقع المولد من طرف Gridsome . و كمثال حقيقي على عملية النقل هاته يمكنك قراءة هاته المقالة على مدونة توتومينا لهذه الأسباب نقلت مدونة توتومينا من ووردبريس إلى Gatsby.js هو فقط يستخدم رياكت و بالتالي اختار مولد مواقع ساكنة يعتمد على رياكت إسمه Gatsby.js . - درجة عالية للحماية و الأمان :
فهو لا يتوفر على قواعد بيانات, ففي النهاية سيكون لدينا موقع ساكن بسيط (html,css,javascript) . - السرعة :
كما هو معروف المواقع الساكنة تكون أسرع بكثير من المواقع الديناميكية . لأنه لن يكون لدينا http requests (طلبات http) و إنتظار إجابات (responses) و أيضا مواضيع أخرى مثل الـ validation … و هاته كلها تٌبطىء من سرعة الإستجابة .
- يعتمد على إطار العمل Vuejs في ناحية الفرونت آند (frontend) :
هاته المقالة تٌعتبر مدخل بسيط لمولدات المواقع الساكنة بشكل عام و الـ gridsome بشكل خاص . سأحاول من حين لآخر في مقالات قادمة أننا نتعامل بشكل مباشر مع الـ Gridsome و نعمل تطبيق من خلاله .
قمت سابقا بعمل تطبيق بإستخدام gridsome و قمت برفعه كفيديو خاص على قناتي في اليوتيوب فقط لأنني وددت أن أريكم مثال حي . يمكنكم مشاهدته من خلال هذا الرابط : تطبيق بإستخدام مولد مواقع ساكنة (gridsome)
نلتقي في امان الله و السلام عليكم و رحمة الله تعالى و بركاته