تحطيم بودكاست الحلقة 20 مع مارسي ساتون: ما هو غاتسبي؟

اليوم نتحدث عن غاتسبي. ما هو وكيف يتناسب مع حزمة تطوير الويب الخاصة بك؟ يتحدث درو ماكليلان إلى الخبير مارسي ساتون لمعرفة ذلك.

وتظهر الملاحظات

• جاتسبي
• مارسي على تويتر
• موقع مارسي الشخصي

تحديث اسبوعي

• "اجعل مواقعك سريعة وسهلة الوصول وآمنة بمساعدة Google"
  بواسطة ديون الماير
• "فهم تطوير البرنامج المساعد في Gatsby"
  بواسطة عليم اسياكا
• "إنشاء تطبيقات سطح مكتب صغيرة باستخدام Tauri و Vue.js"
  بواسطة كيلفن اوميريشون
• "إزالة الذعر من شحن التجارة الإلكترونية وتنبيهات المخزون"
  بواسطة سوزان سكاكا
• "انتقالات CSS في Vuejs و Nuxtjs"
  بواسطة تيمي أومويني

نسخة طبق الأصل

درو ماكليلان: هي المهندسة الرئيسية في فريق علاقات المطورين في جاتسبي. عملت سابقًا في مكتبة اختبار إمكانية الوصول مفتوحة المصدر ax-core ، وعملت أيضًا كمهندسة إمكانية الوصول في Adobe. إنها شغوفة بتحسين الويب للأشخاص ذوي الإعاقة وغالبًا ما تتحدث عن ذلك في المؤتمرات. في عام 2016 ، منحت O'Reilly جائزة منصة الويب لعملها في مجال إمكانية الوصول.

درو: شاركت أيضًا في قيادة لقاءات سياتل و NW Tech Women حول إمكانية الوصول في منطقة محلية. لذلك ، نعلم أنها مهندسة ماهرة وخبيرة في إمكانية الوصول. لكن هل تعلم أنها تريد إرسالها أنجل فولز في برميل؟ أرجو أن ترحب بكم أصدقائي المحطمون مارسي ساتون.

مارسي ساتون: مرحبًا.

درو: مرحبًا. مارسي. كيف حالك؟

مارسي: أنا أحطم. كيف حالك؟

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

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

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

مارسي: حسنًا ، إنها مساحة مثيرة حقًا أن أكون فيها. وأنا أعمل في جانب التعلم مع التوثيق والآن في فريق Devrel ، أركز على جعله جيدًا قدر الإمكان ، ومعرفة تحديات إمكانية الوصول باستخدام JavaScript ومحاولة إصلاحه من الداخل إلى الخارج.

درو: أعتقد أن الكثير منا على دراية بمفهوم مولد الموقع الثابت. ويبدو أن غاتسبي يتناسب بشكل عام مع هذا الدور. لكن بالنسبة لي ، يبدو أنه يذهب إلى أبعد بكثير مما تفعله معظم SSG. ومعظم مولدات المواقع لا تعرف كود الواجهة الأمامية. يبدو أنه مع Gatsby ، ينتهي بك الأمر بتشغيل كود Gatsby كجزء من موقعك. هل هذا تقييم عادل؟ وإذا كان الأمر كذلك ، فما نوع الأشياء التي يفعلها غاتسبي بالفعل في واجهتك الأمامية؟

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

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

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

مارسي: ليس عليك دائمًا استخدام شيء مثل CSS و JS. لكن الأمر يتعلق حقًا بالحصول على قوة طبقة JavaScript الديناميكية هذه ، المتاحة لك أثناء كتابة موقعك على الويب. انها ليست مثل هذه الإضافة في ملف منفصل.

درو: عندما أفكر في كيفية عمل منشئ موقع ثابت عادةً ، أفكر في محتوى ربما في ملفات Markdown. ويعمل المُنشئ عبر هذا المحتوى ويدمجه مع القوالب وينشئ 10 ، ومئات ، وآلاف من ملفات HTML ، وهي صفحات موقع الويب الخاص بك. عندما أفكر في موقع أو تطبيق React ، أفكر أكثر في تجربة الصفحة الواحدة حيث يتم إنشاء الواجهات بواسطة React on the fly. إذن ، أنت تقول أن غاتسبي يفعل كلا الأمرين؟ هل تقوم بإنشاء جميع الصفحات وتحسينها أيضًا باستخدام JavaScript؟

مارسي: نعم. سيستخدم Gatsby Node.js في وقت الإنشاء ، وسيتخطى مكونات React الخاصة بك ويجمعها في ملفات HTML. بصراحة ، في المرة الأولى التي نظرت فيها إلى Gatsby ، لم أوقف تشغيل JavaScript وقلت ، "حسنًا ، هل هناك صفحات أخرى هنا ، ما هذا؟" وكنت سعيدًا جدًا لأن غاتسبي يعمل بهذه الطريقة افتراضيًا. ستنشئ ملفات مبنية من مكونات تفاعلك ، وهو أمر رائع.

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

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

مارسي: لذا حافظ على أحجام الحزم صغيرة ، والتأكد من إجراء المقايضات لما نقوله هو رمز عالي الأداء مع الجلب المسبق. مثل ، هل لدينا البيانات لدعم ذلك؟ هذا هو نوع الشيء الذي أهتم به كمدافع عن المطورين ، هو التأكد من أن ما نقوم بتعبئته وتجميعه على مواقع الويب مطلوب فعلاً وسيصنع حقًا أفضل موقع Gatsby يمكنه صنعه.

درو: لقد ذكرت الأداء هناك ، وهناك تركيز كبير على الأداء. يبدو بالتأكيد من الطريقة التي يقدم بها غاتسبي نفسه. هل هذه ميزة حقيقية لـ Gatsby أم أنها مجرد طبيعة مواقع JAMstack؟

مارسي: أعتقد أنه يمكن أن يكون من طبيعة مواقع JAMstack. في النهاية ، سينخفض ​​الأمر إلى ما تقوم بتجميعه على موقع الويب الخاص بك. لذلك ، بغض النظر عن إطار العمل أو الأداة التي تستخدمها ، لا يزال يتعين علينا التفكير فيما نضعه في هذه الحزم للمستخدمين النهائيين. لكن غاتسبي يهدف حقًا إلى إعطائك افتراضات جيدة. ليس فقط للأداء ، ولكن من أجل الوصول أيضًا.

مارسي: لكن هذا يتطلب دائمًا التقييم ، وعلينا دائمًا التأكد من أنه إذا أضفنا شيئًا ما ، فإنه لا يزال يعمل. لكن نعم ، الحصول على تلك الحمولة الأولية من الملفات الثابتة ، يتم تحميلها بسرعة. أسرع بكثير من موقع WordPress الكلاسيكي الذي اعتدت أن أمتلكه. ولكن بعد ذلك قم بتحسينه باستخدام JavaScript. هناك بعض المقايضات هناك بالتأكيد.

مارسي: لكنها تعمل بشكل جيد حقًا ، كثير من الناس يحبون مواقع جاتسبي الخاصة بهم. لذلك ، كان من الممتع العمل عليها بدوام كامل ، وتعلم خصوصيات وعموميات إطار عمل JavaScript مثل Gatsby.

درو: ما نوع ميزات الأداء التي وضعها غاتسبي للتو لتسريع مواقعك؟

مارسي: حسنًا ، مع الجلب المسبق للروابط ، قال هذا العميل أشياء تتعلق بالتوجيه ، سأقول إنها ربما تكون الأكبر. مما يجعل إنشاء تطبيق ويب تقدمي أمرًا سهلاً حقًا. لذلك ، مع وجود بعض الإمكانات غير المتصلة بالإنترنت ، يمكنك نوعًا من اختيار واختيار ما تريده من حيث الأشياء غير المتصلة بالإنترنت ونوع PWA. لكنهم حقًا يجعلون ذلك جزءًا من التجربة الأولية ، مثل الكثير من مواقع الأمثلة المبدئية التي قد تبدأ منها بها أمثلة على استخدام بيان ، ونوع من صنع هذا الإصدار الحديث من موقع الويب الخاص بك.

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

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

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

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

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

درو: هذا هو الجلب المسبق لشيء يحصل عليه المستخدمون مجانًا في موقعهم. فهل يتعين عليهم القيام بأي عمل لتنفيذه؟

مارسي: يمكنك الحصول عليه مجانًا باستخدام رابط Gatsby. لذلك فهو مكون يأتي مع Gatsby وعندما تستخدمه ، فإنه ينتج علامات الربط. لذا فإن HTML الخاص بك هو HTML حقيقي وقد استفدت من منصة الويب بهذه الطريقة. لكن في مكونات React الخاصة بك ، فأنت تعمل مباشرة مع مكون ارتباط Gatsby. وهذا يحتوي على كل تلك الآليات من أجل ... ينظر إلى ما سيكون HREF المستقبلي الخاص بك ، لذلك الرابط الخاص بالمكان الذي تريد الذهاب إليه وسيأخذ الموارد من هذا الرابط ويقوم بتحميلها مسبقًا.

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

درو: ما مدى قربك من العمل ضمن نظام Gatsby البيئي من حيث ما إذا كنت أرغب في الحصول على مكون الارتباط الخاص بي؟ هل سيكون ذلك جيدًا تمامًا ، فلن أقاتل ضد غاتسبي للقيام بهذا النوع من الأشياء؟

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

مارسي: وأعتقد أن المرونة هي ما يستمتع به الناس حقًا. هناك تحذير من أنه يستخدم وقت تشغيل React. وهكذا ، يجب أن تكون على ما يرام مع استخدام رد فعل أو استخدام هذا المكون الإضافي pre-React. لكن شخصيًا ، أحب التفاعل و JSX للعمل مع إمكانية الوصول والقوالب ، خاصة مع خطافات React. لذا ، فإن القدرة على استخدام الكوخ في موقع Gatsby الخاص بي أمر رائع للغاية. لقد أعجبتنى حقا.

درو: وكيف هي عملية بناء موقع Gatsby الذي يُفترض أنه وحدة عقدة يمكنك فقط تثبيتها وستقوم ببناء كما تفعل مع أي مولد موقع ثابت آخر؟

مارسي: نعم. يوجد CLI تقوم بتثبيته عالميًا. وأعتقد أنه ما إذا كنت تريد تثبيته عالميًا. هذا ما نوصي به ، لأنه بعد ذلك يمكنك تشغيله من أي دليل على جهاز الكمبيوتر الخاص بك ، ولكنه سيسحب كل ما تحتاجه لإنشاء موقع Gatsby. وبعد ذلك يمكنك إضافة ، لنفترض أنك تريد استخدام WordPress كنظام CMS مقطوع الرأس أو مصدر محتوى آخر.

مارسي: يمكنك تثبيت الحزم والمكونات الإضافية لإنجاح ذلك ، ثم دمجها مع موقعك. هناك أيضًا بعض المبتدئين والموضوعات التي يمكنك استخدامها لبدء التشغيل بشكل أسرع. لقد استخدمت هؤلاء إذا كنت أرغب في اختبار شيء ما أو بدء موقع بسرعة من أجل تكامل محدد مثل دروبال أو المنشور أو أي حل CMS أو التجارة الإلكترونية أو أي شيء أريد استخدامه.

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

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

مارسي: خاصةً عندما لا يزال بإمكانك استخدام عمليات الدمج هذه مثل WordPress وما زلت تعمل مع الفرق. لذلك ، نحن متحمسون جدًا لهذه الطريقة الجديدة للعمل حيث يمكنك اختيار جميع التقنيات التي تعجبك ، أو التي تعمل لصالح فريقك.

درو: إحدى الميزات الكبيرة التي يروج لها Gatsby بقوة هي القدرة على سحب البيانات أو المحتوى من مجموعة متنوعة من المصادر المختلفة. لقد ذكرت أشياء مثل WordPress و Drupal وماذا لديك. تقليديًا ، إذا كنت أستخدم شيئًا مثل Jekyll أو Eleventy ، أو شيئًا من هذا القبيل ، فسوف أحتاج إلى توصيل ذلك بنفسي للتفاعل مع API ، وربما سحب المحتوى إلى أسفل وكتابته في ملفات markdown أو ملفات JSON ، ثم عمل المولد بهذه الملفات.

درو: ستكون عملية من خطوتين نوعًا ما ، يمكن استخدام شيء مثل بت المصدر ، والذي قمنا بتغطيته في حلقة سابقة تقوم بهذا النوع من الأشياء؟ هل أفهم حقًا أن غاتسبي لديه هذه القدرة الأصلية على استهلاك مصادر مختلفة بطريقة لا تفعلها مولدات المواقع الثابتة الأخرى؟

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

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

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

درو: وأعتقد أن لديك خيار كتابة المكونات الإضافية الخاصة بك لسحبها من مصدر بيانات مخصص. لنفترض أن لديك نظامًا قديمًا وتريد إنشاء موقع ويب جديد ولطيف في مقدمته. يمكنك كتابة مكون إضافي من شأنه إخراج البيانات بأي تنسيق مطلوب وترجمتها إلى شيء أكبر من العمل به؟

مارسي: يمكنك نعم. وهكذا ، الإضافات تمكن من ذلك. ثم هناك هذا التجريد فوق ذلك ، والذي نسميه ثيمات غاتسبي. وهذه ليست مجرد رمز لواجهة المستخدم ، ولكن يمكن أن تكون استعلامات GraphQL ، تكوينات تقوم بإعداد مكون إضافي ، لذا فهي مثل مكون إضافي مع نوع الاستخدام المجمعة معًا. ويمكنك توزيع هذه الموضوعات على NPM.

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

درو: إذن ، الموضوع في عالم غاتسبي ليس مظهرًا وشعورًا كما لو كان مع CMS مثل WordPress.

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

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

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

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

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

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

درو: هناك القليل من السوق التي تظهر حول غاتسبي.

مارسي: نعم.

درو: هل هناك أي نوع من التدريب عبر الإنترنت وهذه الأنواع من الأشياء إذا أراد شخص ما ... إذا قرر شخص ما أنه سيذهب حقًا إلى Gatsby وكان عليه أن يتعلمها بسرعة؟ هل هناك أماكن تشغيل يمكنهم الذهاب إليها مع توفر هذا النوع من المعلومات؟

مارسي: طن منها؟ نعم. هناك بالتأكيد موقع Gatsby Doc ، وهو gatsbyjs.org/doc's. ولدينا دروس تعليمية ، وأنا أقوم ببث مباشر كل أسبوع تقريبًا لأشياء غاتسبي. هناك الكثير من المعلمين الذين لديهم مواد Gatsby على YouTube ومنصات التعلم المختلفة. على سبيل المثال ، أعتقد أن بعض زملائي في الفريق من Gatsby لديهم مقاطع فيديو رائعة أيضًا.

مارسي: حسنًا ، هناك الكثير من الأشياء هناك. أود أن أقول تحقق من التواريخ الموجودة عليها إذا وجدت شيئًا. نحن دائمًا نقوم بتحديث Gatsby Doc's بنشاط ، وبعض مقاطع الفيديو والأشياء القديمة التابعة لجهات خارجية ، والتي قد تتحقق من التواريخ الموجودة فيها لأننا لا نستطيع مراقبة كل مصدر تعليمي واحد للتحديث. من الصعب مواكبة موظفينا.

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

مارسي: يمكنك نوعًا من انتقاء واختيار المواد التي ستناسبك بناءً على المكان الذي تتواجد فيه. لقد كنت أقوم مؤخرًا بدورة تدريبية من خلال البث المباشر يسمى Gatsby Web Creators ، حيث انتقلنا من HTML و CSS و JavaScript للمبتدئين إلى إنشاء أول موقع Gatsby الخاص بنا. لقد أكملنا ذلك للتو يوم الجمعة. ولذا ، كان من الرائع حقًا العودة إلى البداية.

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

درو: أحد الأسئلة الكبيرة التي ستطرح على أي شخص يفكر في بناء نوع من مواقع مشاريع العميل باستخدام Gatsby ، أحد الأسئلة الكبيرة التي ستطرح حول إدارة المحتوى ووضع الأشياء أمام العميل. لقد ذكرت بالفعل كيف يمكن لـ Gatsby الاتصال بأنظمة إدارة المحتوى المختلفة. هل هذه هي الطريقة الأساسية التي ستطبقها للتعامل مع هذا السؤال؟ أو هل لدى Gatsby أي شيء في نظامه الإيكولوجي من شأنه أن يمكّن الأشخاص من تحرير المحتوى بأي طريقة؟

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

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

مارسي: لكن لدينا هذا ، مثل المصدر المفتوح والنظام الإيكولوجي للمنتج ، يجتمعان معًا حتى يتمكن Gatsby كمنظمة مؤسِّسة ، من جني أموال كافية للحفاظ على إطار عمل مفتوح المصدر ، والحفاظ على صحته ، والحفاظ على مجتمعنا مستمرًا مع ذلك . لذلك ، هذا نوع من حيث يجتمع هذا الجانب التجاري مفتوح المصدر معًا ، ويمكّن حقًا بعض تدفقات العمل التي تحتاجها الفرق.

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

مارسي: نعم ، أود أن أقول إنك بحاجة إلى طريقة ما لمعاينة تغييرات نظام إدارة المحتوى (CMS) لأنها مثل ذلك الإشباع الفوري. أنت لا تريد أن تنتظر لمدة ساعة لبناء لرؤية بعض المحتوى.

درو: هذا مثير للاهتمام. تمنحك خدمة Gatsby السحابية تلك القدرة على استخدام خدمة CMS بدون رأس ، حيث تعمل فقط مع المحتوى ، ولكن ليس لديك تصور لما سيبدو عليه موقعك ، مما يتيح لك الحصول على معاينة لكيفية ذلك سيعمل. هل هذا صحيح؟

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

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

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

درو: إذن ، أعتقد أن سحابة Gatsby هي في جوهرها خدمة استضافة. هل هي CDN لنشر مواقع Gatsby الخاصة بك مع الكثير من وظائف وميزات Gatsby المحددة حولها؟

مارسي: أود أن أسميها أكثر من منتج توصيل مستمر لأنها ليست CDN فعلية. يتكامل مع شبكات CDN مثل Fastly و Netlify. هناك الكثير من مقدمي الخدمات المختلفين الذين يمكنك الاتصال بهم وبعضهم مجاني. يمكنك فعل الكثير مجانًا ، وهو أمر رائع جدًا. لقد فعلت ذلك للتو في آخر يوم في جلسة Gatsby الأخيرة لمنشئي الويب ، نستخدم Gatsby cloud و Netlify لبناء موقعنا.

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

مارسي: لكن بالنسبة إلى غاتسبي ، إذا كان هذا هو كل ما تقوم ببنائه ، وهناك عدد قليل جدًا من الوكالات ، التي تعمل جميعًا في جاتسبي ، وتريد أن تجعلها أسرع ما يمكن. لذلك ، هذا هو المكان الذي يمكن فيه لـ Gatsby cloud إجراء بعض التحسينات على الأداء خصيصًا لـ Gatsby ، لأنه لا داعي للقلق بشأن أي منصات أخرى.

درو: لذا ، فإن Gatsby cloud ستعمل على بنائك ، وبعد ذلك ستنشرها في شيء مثل Netlify أو على الأرجح مجموعة كاملة من الأماكن المختلفة.

مارسي: نعم. نعم ، ستفعل. وبالتالي ، فهي جزء من Netlify الذي ستستخدمه حينها أثناء تحميل هذه الحزم المدمجة. ملفات مبنية. إنها لا تستخدم بنياتها ، لذا فإن الإنشاءات تحدث على البنية التحتية السحابية لـ Gatsby ، وهذا هو المكان الذي يمكن أن يحدث فيه الكثير من الزيادات في السرعة. وبعد ذلك لا تزال هناك خطوة التحميل هذه لإخراجها إلى CDN ، أيهما اخترته.

مارسي: لكن نعم ، يبدو أن الفرق تحب هذه القدرة على الرؤية. أعني ، إنها وظيفة كنت ستفوتها. ولذا ، يعد هذا أمرًا ضروريًا لإضافته مرة أخرى ، وهو أن تكون قادرًا على القيام بهذه المعاينات التعاونية والحصول على موافقات وكل ذلك.

درو: حسنًا ، يتم توفير خدمة Gatsby cloud كخدمة من شركة Gatsby ، وهناك أيضًا مشروع Gatsby مفتوح المصدر. هل هذا نوع من العلاقة المشابهة لـ WordPress والعلاقة التلقائية ، حيث يكون لديك كيان تجاري يقوم بتطوير منتج مفتوح المصدر؟

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

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

مارسي: يضيف ذلك الكثير من حالات الاستخدام المتخصصة. لذلك ، نحاول التوفيق بين ترتيب الأولويات والاستماع حقًا إلى مجتمعنا حول ما يؤلم الآن ، وما هو مؤلم ، وما الذي يجري على ما يرام. وهكذا ، كانت هذه رحلة ممتعة لكي أعود شخصيًا إلى devREL وأن أستمع حقًا إلى المجتمع حول ، كيف يمكننا أن نجعلنا أفضل؟

درو: وهل هناك مجتمع كبير حول غاتسبي كثير والكثير من الناس يستخدمونه؟

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

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

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

درو: لقد ذكرت إمكانية الوصول وبالطبع سيعرفك الناس كخبير في إمكانية الوصول. And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.