مقارنة مفصلة بين غاتسبي وهوجو

في هذه المقالة ، أقارن بين مولدين ثابتين للموقع ، Gatsby و Hugo. أناقش معرفة إطار العمل ، والاستقرار ، والأمن ، والأدوات ، وبناء السرعة ، والأداء والمجتمع المحيط بكليهما. اذا هيا بنا نبدأ.

منذ حوالي عام ، قمت بتغيير موقع الويب الخاص بي من Wordpress إلى Hugo ، وهو منشئ مواقع ثابت مكتوب في Go يستخدم مكتبات قوالب Go للقوالب. لقد أجريت مؤخرًا تقييمًا لجدوى Gatsby ، وهو منشئ موقع ثابت آخر مكتوب في React يستخدم React للقالب.

في هذه المقالة ، أقارن الاختلافات بين Hugo v0.42 و Gatsby v1.93. للمقارنة ، استخدمت موقع Hugo هذا وموقع Gatsby هذا. يمكن العثور على الكود الخاص بكل منها على Github لموقع Hugo وموقع Gatsby.

الإلمام بالإطار

إذا لم تكن معتادًا على React ولا تخطط لتعلم React ، فمن المحتمل أن تختار Hugo. إذا كنت تعرف React وتحبها ، فهل يجب عليك اختيار Gatsby؟ حسنًا ، ليس بالضرورة.

أود أن أزعم أنك بحاجة إلى فهم جيد لـ React (انظر تعلم التفاعل مع هذه الموارد) إذا كنت تريد استخدام Gatsby. ولفهم React ، فأنت بحاجة إلى فهم جيد لـ JavaScript (انظر تعلم JavaScript بهذه الموارد).

على الرغم من أنني كنت أستخدم Hugo لمدة عام تقريبًا ، لم يكن من الضروري بالنسبة لي أن أفهم Go. كان علي أيضًا أن أتعلم القليل عن مكتبات قوالب Go. ومع ذلك ، وجدت أنه كان علي الرجوع إلى الوثائق في كثير من الأحيان مع Hugo بسبب عدم معرفتي. يتطلب Gatsby فهمًا أعمق لـ React مما يتوقعه Hugo من Go. ومع ذلك ، إذا كانت معرفة إطار العمل هي المعيار الوحيد ، فسأختار Gatsby لأنه من الجيد ألا تضطر إلى الرجوع إلى الوثائق أثناء إضافة ميزات جديدة إلى موقع الويب الخاص بي.

المزيد

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

الأمان

يستخدم Gatsby JavaScript ، وتشتهر تطبيقات JavaScript بأنها تتطلب الكثير من وحدات Node لتشغيلها. حتى أن هناك وحدة Node التي ترسل تغريدات Hot Pocket وأخرى تحصد أرقام بطاقات الائتمان: D. تميل المواقع الثابتة إلى أن تكون أكثر أمانًا بطبيعتها ، لكنني ما زلت أعتقد أنه من الجدير بالذكر أن المزيد من التبعيات يؤدي إلى المزيد من التعليمات البرمجية التي قد لا تثق بها.

الأدوات

يتمتع Gatsby بجميع مزايا JavaScript toolchain وجميع عيوب إجهاد JavaScript. علاوة على ذلك ، لدى Gatsby مكتبة إضافية رائعة حقًا. على وجه الخصوص ، أتاح لي برنامج gatsby-plugin-offline إضافة إمكانيات غير متصلة بالإنترنت بسهولة إلى موقع الويب الخاص بي ، وهو ما لم أتوصل إليه بعد مع Hugo.

من ناحية أخرى ، فإن بعض الأشياء التي تتطلب مكونًا إضافيًا مع Gatsby خرجت للتو من الصندوق مع Hugo. على سبيل المثال ، يلزم استخدام خوذة gatsby-plugin-react-helmet لتعديل علامة الرأس ، بينما يمكن القيام بذلك باستخدام HTML بسيط في Hugo. نظرًا لأنني استمتعت باستخدام الأدوات التي تأتي مع Gatsby ، فقد أعطيتها لـ Gatsby.

بناء السرعة

Hugo قادر على بناء موقع الويب الخاص بي دون أي أدوات إضافية في أقل من 100 مللي ثانية. يستطيع Gatsby إنشاء موقع الويب الخاص بي في حوالي 15 ثانية ، ولكن هذا يتضمن الكثير من الأدوات الإضافية. تؤدي إضافة PostCSS و Imagemin إلى Hugo build إلى زيادة وقت الإنشاء حتى 5 ثوانٍ تقريبًا. كانت مراقبة التغييرات أثناء التطوير أسرع أيضًا باستخدام Hugo. أعتقد أن هوغو هو الفائز هنا.

توثيق

يمتلك كل من Gatsby و Hugo وثائق رائعة حقًا. لدى Hugo بداية سريعة ويحتوي Gatsby على قسم Getting Started. يحتوي Gatsby أيضًا على برنامج تعليمي رائع حقًا ، والذي يوحد منحنى التعلم الأكثر حدة. أنا شخصياً وجدت أنه من الأسهل أن أبدأ مع Gatsby ، لكن هذا لأنني فهمت بالفعل React. أعتقد أنه من العدل أن نقول إن لدى كل من Hugo و Gatsby وثائق رائعة.

أداء

باستخدام Lighthouse ، كانت نتيجة الأداء 100 لموقعي في Hugo و 95 لموقعي في Gatsby. كان أول برنامج Contentful Paint لاتصال 3G حوالي ثانية واحدة لموقع Hugo و 1.5 ثانية لموقع Gatsby. استخدام صفحة الويب اختبار وقت التحميل على اتصال 2G كان 8.7 ثانية في Hugo و 11.7 ثانية في Gatsby.

ومع ذلك ، عند إجراء اختبار يدوي بسيط لمعرفة أي موقع يتم تحميله أولاً ، كان Gatsby أسرع بشكل ملحوظ ، لذلك لا أفهم حقًا ما كان Lighthouse أو Web Page Test يقيسه. علاوة على ذلك ، نظرًا لأن Gatsby هو تطبيق صفحة واحدة ، فإن التنقل داخل موقع الويب لا يتطلب طلبًا من الخادم. يتم إعادة عرض الصفحات فقط باستخدام JavaScript. على أي حال ، أستطيع أن أقول على وجه اليقين أن كلا من هوغو وجاتسبي سريعان. سأكون مهتمًا بسماع أفكارك في التعليقات أدناه.

تواصل اجتماعي

تكتسب شعبية Gatsby بسرعة ، والتي تأتي مع مجتمع مزدهر. هذا لا يعني أن مجتمع هوغو ممل. إذا كان هناك أي شيء من نجوم GitHub ، فإن Hugo لديه أكثر من 27 ألفًا ولدى Gatsby أكثر من 23 ألف. على Twitter ، يبدو أن Gatsby أكثر نشاطًا من Hugo.

افكار اخيرة

إذن أي واحد يجب أن تختار؟ يستخدم Gatsby React ، الذي أعرفه أكثر ، ولديه أدوات أفضل ، ولديه مجتمع مزدهر. من ناحية أخرى ، يعد Hugo أكثر استقرارًا ويقضي وقتًا أقل في البناء. بالنسبة إلى المواقع الإلكترونية الكبيرة ، تصبح سرعات الإنشاء أكثر أهمية وقد لا يهتم البعض منكم بـ React على الإطلاق. في حالتي ، كان الاستقرار هو أهم المعايير ، لذلك قررت التمسك بهوجو. أنا متحمس جدًا لرؤية ما يجلبه المستقبل في هذا الفضاء.

قبل أن تذهب ... شكرا لقراءة المقال! أكتب عن تجاربي المهنية والتعليمية كمطور برامج علمي ذاتيًا ، لذا تحقق من مدونتي أو اشترك في رسالتي الإخبارية لمزيد من المحتوى.

قد يعجبك ايضا:

  • كيف أقوم بإصدار تحديثات لموقع الويب الشخصي الخاص بي
  • المواد التعليمية - تطوير البرمجيات (قائمة بمصادر التعلم ، تبدأ بمقدمة في علوم الكمبيوتر)
  • هل تطوير الويب الكامل المكدس يستحق التعلم؟