مقدمة لـمولد المواقع الساكنة Gridsome

السـلام عليكم و رحمة الله تعالى و بركاته :heart:

مع نمو JAMstack ومجتمعها ، أصبحت مولدات المواقع الساكنة أكثر شيوعًا. في هذه المقالة سنتكلم عن إحداها , ألا و هي Gridsome :heart_eyes: .

طبعا هنالك العديد من مولدات المواقع الساكنة و كلها تتعلق بتقنيات برمجية مختلفة . و بما أنني من مناصري و محبي إطار العمل Vuejs فأنا أستخدم Gridsome :innocent: .

لو دخلنا على الموقع الرسمي له من خلال هذا الرابط : 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 … و هاته كلها تٌبطىء من سرعة الإستجابة .

هاته المقالة تٌعتبر مدخل بسيط لمولدات المواقع الساكنة بشكل عام و الـ gridsome بشكل خاص . سأحاول من حين لآخر في مقالات قادمة أننا نتعامل بشكل مباشر مع الـ Gridsome و نعمل تطبيق من خلاله :muscle: .

قمت سابقا بعمل تطبيق بإستخدام gridsome و قمت برفعه كفيديو خاص على قناتي في اليوتيوب فقط لأنني وددت أن أريكم مثال حي :eyes: . يمكنكم مشاهدته من خلال هذا الرابط : تطبيق بإستخدام مولد مواقع ساكنة (gridsome)

نلتقي في امان الله و السلام عليكم و رحمة الله تعالى و بركاته :smiling_face_with_three_hearts:

5 Likes

العائلة :black_heart:
واخيرا :sweat_smile: يعطيك الصحة

1 Like

تتكلم عن فريمورك الطبقة المخملية لصفحات الويب الساكنة، البساطة والكفاءة كلها مجتمعه في مكان واحد :star_struck: والأجمل هو كون هذا الفريمورك يعتبر SEO-friendly… ببساطة متعة الـ Frontend متمثلة في إطار

المقال شيق ومفيد ألف شكر يا أسامة :star2:

وبالمناسبة التطبيق الذي بنيته رهيب :+1:

1 Like

تطبيق رائع أسامة :star_struck: :star_struck: وينتا نشوفوه في الواقع؟

1 Like

ابداع وافادة أخي أسامة :orange_heart: :smiling_face_with_three_hearts:
هل يجب تعلم vuejs للبدأ في تعلمه

1 Like

العفـو :heart:

من ذوقك :smiling_face_with_three_hearts:

من ذوقكـ :smiling_face_with_three_hearts:

أنوي عمله كتطبيق ثاني في دورة gridsome التي تنتظر التسجيل . اذا سمحت الجهة المعنية أكيد ساعمل علىيه و إلا سيبقى مدفون ههه لأنه تطبيق لجهة معينة لا أدري ما الذي قاموا بعمله معه . هل استخدموه أم لا الله أعلم.

1 Like

نعم تحتاج إلى vue بما أنه مبني عليه .

2 Likes

يعطيك العافية صديقي أسامة، مقدمة تعريفية برفيكيت :ok_hand:t3:

لدي تجربة مع Gridsome وGatsby، أكثر ما أعجبني فيها دعم طبقة بيانات GraphQL ومصادر البيانات المتعددة

لكني حتى الآن ما زلت أعتمد على Nuxt وNext في مشاريعي

تمنيت لو أضفت لهذا الشرح الرائع تعريف بسيط لمفهوم JAMStack :wink:

1 Like

العفــو :heart:
ان شاء الله نخصص له مقالة لوحدها .

1 Like