تحطيم بودكاست الحلقة 22 مع كريس كويير: ما هو خادم؟

نشرت: 2022-03-10
ملخص سريع ↬ نحن نتحدث عن معماريات Serverless. ماذا يعني ذلك ، وكيف يختلف عن الطريقة التي قد نبني بها المواقع حاليًا؟ درو ماكليلان يتحدث إلى كريس كويير لمعرفة الجواب.

اليوم ، نحن نتحدث عن معماريات Serverless. ماذا يعني ذلك ، وكيف يختلف عن الطريقة التي قد نبني بها المواقع حاليًا؟ لقد تحدثت إلى كريس كويير لمعرفة ذلك.

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

  • موقع كريس المصغَّر: قوة بدون خادم لمطوري الواجهة الأمامية
  • كريس على تويتر
  • ShopTalk Show بودكاست

تحديث اسبوعي

  • "إعداد Redux للاستخدام في تطبيق حقيقي ،"
    بواسطة جيري نافي
  • "هل يمكنك تصميم موقع على شبكة الإنترنت للحواس الخمس؟"
    بواسطة سوزان سكاكا
  • "إنشاء مدونة ثابتة باستخدام Sapper و Strapi"
    بقلم دانيال ماداليتسو فيري
  • "دليل عملي لجولات المنتج في React Apps ،"
    بواسطة نعمة كروفيغا
  • "How To Create A Porsche 911 With Sketch،"
    بواسطة نيكولا لازاريفيتش

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

صورة كريس كويير درو ماكليلان: إنه مصمم ويب ومطور قد تعرفه من CSS-Tricks ، وهو موقع ويب بدأه منذ أكثر من 10 سنوات ولا يزال مصدرًا تعليميًا رائعًا لمن يبنون مواقع الويب. إنه المؤسس المشارك لـ CodePen ، ملعب ومجتمع الترميز المستند إلى المتصفح الذي يستخدمه رواد الواجهة في جميع أنحاء العالم لمشاركة ما يصنعونه والعثور على الإلهام من أولئك الذين يتابعونهم. إلى جانب Dave Rupert هو المضيف المشارك لبرنامج ShopTalk Show ، وهو بودكاست يدور حول إنشاء مواقع الويب. لذلك نحن نعلم أنه يعرف الكثير عن تطوير الويب ، لكن هل تعلم أنه فاز ذات مرة في مسابقة أكل هوت دوج باستخدام سحره فقط؟ أصدقائي المحطمون ، يرجى الترحيب بكريس كويير. مرحبا كريس كيف حالك

كريس كويير: مرحبًا ، أنا محطم.

درو: أردت أن أتحدث إليكم اليوم ليس عن CodePen ، ولا أريد بالضرورة أن أتحدث إليكم عن CSS-Tricks ، التي تعد واحدة من تلك الموارد الرائعة التي أنا متأكد من أن الجميع يعرف أنها تظهر في الجزء العلوي من Google نتائج البحث عند البحث عن إجابات حول أي سؤال مطور على الويب. ينبثق وجهك ويوجد منشور مدونة مفيد مكتوب بواسطتك أو أحد المساهمين الضيوف.

كريس: أوه ، لقد اعتدت فعل ذلك بالفعل. كان هناك… لا أعرف ، ربما كان ذلك خلال الوقت الذي كان لدى Google تلك الشبكة الاجتماعية الغريبة. ماذا كان هذا؟ جوجل بلس؟

درو: أوه ، بالإضافة إلى ذلك ، نعم.

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

درو: أعتقد ذلك ، أجل-

كريس: أجل.

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

كريس: مم (إيجابي).

درو: هذا شيء كنت تتعلم عنه نوعًا ما أكثر لفترة قصيرة. هل هذا صحيح؟

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

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

كريس: أجل ، أجل. هذا هو.

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

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

كريس: لكنني أعتقد أنه من المثير للاهتمام ... لقد بدأ الأمر ، ربما لا توجد خوادم معنية في بعض الأحيان. أعتقد أن أحد الأشياء التي تم قفلها بدون خادم كمفهوم هو AWS Lambda. كانوا نوعًا من الأوائل في المشهد. تشبه lambda الوظيفة التي تمنحها لـ AWS وتضعها في السماء السحرية ثم ... لها عنوان URL ، ويمكنك الضغط عليها وستقوم بتشغيل هذه الوظيفة وإرجاع شيء ما إذا كنت تريد ذلك. أنت تعرف؟ هذا مجرد HTTP أو أيا كان. هذه هي الطريقة التي تعمل ... والتي ... في المرة الأولى التي تسمع فيها ذلك ، فأنت تحب ، "لماذا؟ أنا لا أهتم. " ولكن بعد ذلك ، هناك بعض الأشياء الواضحة لها. يمكنه معرفة مفاتيح API الخاصة بي والتي لا يستطيع أي شخص آخر الوصول إليها. هذا هو سبب تشغيلك للخلفية لتبدأ ، هو أنها تعرف أشياء سرية لا يجب أن تكون في JavaScript من جانب العميل. لذلك إذا احتاج إلى التحدث إلى قاعدة بيانات ، يمكنه فعل ذلك. يمكنه القيام بذلك بأمان دون الحاجة إلى كشف مفاتيح API في مكان آخر. أو حتى أين توجد هذه البيانات أو كيف تحصل عليها ، فهي ...

كريس: هذا رائع جدًا. يمكنني كتابة وظيفة تتحدث إلى قاعدة بيانات ، والحصول على بعض البيانات ، وإرجاع ذلك. بارد. إذن ، Lambda هي كذلك ، لكن AWS تعمل. عليك أن تختار منطقة. أنت مثل ، "لا أعرف. أين يجب أن تكون يا فرجينيا؟ أوريغون؟ هل يجب أن أختار أستراليا؟ لا أدري، لا أعرف." لديهم 20 ، 30. أنا لا أعرف حتى كم لديهم هذه الأيام ، ولكن حتى حيوانات لامدا لديها مناطق. أعتقد أن لديهم هذه الأيام Lambda @ Edge ، مما يعني أنها جميع المناطق ، وهذا أمر رائع نوعًا ما. لكنهم كانوا أولًا ، والآن كل شخص لديه شيء مثل لامدا. جميع الخدمات السحابية. يريدون نوعا من الخدمة في هذا العالم. واحد منهم هو CloudFlare. CloudFlare لديها عمال. لديهم مواقع أكثر بكثير من AWS ، لكنهم نفذوها نوعًا ما في وقت مختلف أيضًا ... بالطريقة التي يعمل بها عامل CloudFlare ... إنها تشبه lambda من حيث أنه يمكنك تشغيل Node. يمكنك تشغيل JavaScript. يمكنك تشغيل عدد من اللغات الأخرى أيضًا ، لكن ... أفكر في هذه الأشياء إلى حد كبير ، اللغة الأكثر إثارة للاهتمام هي JavaScript ، فقط بسبب انتشارها.

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

درو: يبدو الأمر كما لو ، نعم ، قد يكون CDN خادمًا ، لكنه أكثر إصدار من الحد الأدنى من الخادم. إنه مثل خادم رفيع ، إذا أردت.

كريس: أجل. بالتأكيد.

درو: حسنًا. لقد سمعت أنه قال ... لا أتذكر المصدر للائتمان ، لسوء الحظ ، لكنني سمعت أن وصف الخادم بدون خادم هو "مثل استخدام خدمة مشاركة الركوب مثل Uber أو Lyft" أو أي شيء آخر. يمكنك أن تكون بلا مبالاة ولا تمتلك سيارة ، لكن هذا لا يعني أنك لا تستخدم سيارة أبدًا.

كريس: نعم ، هذا لا يعني أن السيارات غير موجودة. مم ، هذا لطيف.

درو: أنت فقط تستدعي واحدًا عندما تحتاجه ، لكن في نفس الوقت ، لا تدفع تكلفة الشراء مقدمًا للسيارة. أنت لا تدفع تكاليف الصيانة أو الوقود أو-

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

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

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

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

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

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

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

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

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

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

درو: مم (إيجابي).

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

درو: بالطبع ، يتعامل الكثير من الأشخاص مع الأنظمة القديمة التي…

كريس: أجل.

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

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

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

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

درو: هذا مثير جدًا للاهتمام. ما نوع المهام التي تضعها بدون خادم على CodePen؟

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

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

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

كريس: هذا مثال. كل قلم على CodePen لديه لقطة شاشة. هذا رائع نوعًا ما ، أليس كذلك؟ لذلك ، يصنع الناس شيئًا ما ، ثم نحتاج إلى PNG أو JPEG ، أو شيء من هذا ، حتى نتمكن من ... بهذه الطريقة عندما تغرد عليه ، تحصل على معاينة صغيرة له. إذا قمت بمشاركتها في Slack ، فستحصل على معاينة صغيرة لها. نحن نستخدمه على موقع الويب نفسه لتقديم… بدلاً من iframe ، إذا تمكنا من اكتشاف أن القلم ليس متحركًا ، لأن صورة iframe أفتح كثيرًا ، فلماذا لا تستخدم الصورة؟ إنه ليس متحركًا على أي حال. مجرد أداء مكاسب من هذا القبيل. لذلك كل من هذه اللقطات لها عنوان URL لها ، من الواضح. وقد قمنا بتصميمه بحيث يكون عنوان URL هذا في الواقع وظيفة بدون خادم. إنه عامل. وبالتالي ، إذا تم الوصول إلى عنوان URL هذا ، فيمكننا التحقق بسرعة مما إذا كنا قد أخذنا لقطة الشاشة هذه بالفعل أم لا.

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

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

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

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

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

كريس: مم (إيجابي).

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

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

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

كريس: إنه لطيف.

درو: … نوع من الفكرة. ولكن هناك شيء واحد نعرفه عن الويب ، وهو أنه مصمم ليكون مرنًا لأن الشبكة هشة.

كريس: مم (إيجابي).

درو: ما مدى قوة هذا النوع من النهج بدون خادم؟ ماذا يحدث إذا حدث شيء ما… إذا اختفت إحدى هذه القطع الصغيرة؟

كريس: سيكون ذلك سيئا للغاية. أنت تعرف؟ سيكون كارثة. سوف ينخفض ​​موقعك تمامًا مثل أي خادم آخر ، إذا حدث ذلك ، على ما أعتقد.

درو: هل توجد طرق للتخفيف من ذلك ، خاصة -

كريس: لا أعرف.

درو: ... مناسب لهذا النوع من النهج ، الذي صادفته؟

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

كريس: أنا في الواقع لا أعرف. ربما تعرف بعض الاستراتيجيات التي لا أعرفها ، بشأن مرونة عدم وجود خادم.

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

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

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

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

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

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

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

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

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

درو: نعم ، لأنني أعتقد أن هذا جزء كبير من سير العمل ، أليس كذلك؟ إذا كنت قد كتبت وظيفة JavaScript الخاصة بك ، وقمت باختبارها محليًا ، فأنت تعلم أنها ستقوم بالمهمة. How do you actually pick which provider it's going to go into and how do you get it onto that service? Now, I mean, that's a minefield, isn't it?

كريس: أجل. I mean, if you want to use no tooling at all, I think they have a really… like AWS, specifically, has a really rudimentary GUI for the thing. You can paste the code in there and hit save and be like, “Okay, I guess it's live now.” That's not the best dev story, but I think you could do it that way. I know CloudFlare workers have this thing called Wrangler that you install locally. You spin it up and it spins up a fake browser on the top and then dev tools below. Then you can visit the URL and it somehow intercepts that and runs your local cloud function against it. Because one of the interesting things about workers is… you know how I described how it… you don't hit a URL and then it returns stuff. It just automatically runs when you… when it intercepts the URL, like CDN style.

Chris: So, one of the things it can do is manipulate the HTML on the way through. The worker, it has access to the complete HTML document. They have a jQuery-esque thing that's like, “Look for this selector. Get the content from it. Replace it with this content. And then continue the request.” So you can mess with code on the way through it. To test that locally, you're using their little Wrangler tool thing to do that. Also, I think the way we did it was… it's also a little dangerous. The second you put it live, it's affecting all your web traffic. It's kind of a big deal. You don't want to screw up a worker. أنت تعرف؟ You can spin up a dev worker that's at a fake subdomain, and because it's CloudFlare, you can… CloudFlare can just make a subdomain anyway. لا أدري، لا أعرف. It's just kind of a nice way to do a… as you're only affecting sub-domain traffic, not your main traffic yet. But the subdomain's just a mirror of a production anyway, so that's kind of a… that's a testing story there.

Chris: It brings up an interesting thing, though, to me. It's like… imagine you have two websites. One of them is… for us it's like a Ruby on Rails app. ما من أي وقت مضى. It's a thing. But we don't have a CMS for that. That's just like… it's not a CMS, really. I think there's probably Ruby CMSs, but there's not any renowned ones. أنت تعرف؟ It seems like all the good CMSs are PHP, for some reason. So, you want a quality CMS. Drew, you've lived in the CMS market for a long time -

Drew: Absolutely.

Chris: … so you know how this goes. Let's say you want to manage your sites in Perch or whatever, because it's a good CMS and that's the proper thing to use to build the kind of pages you want to build. But you don't want to run them on the same server. Unless you want to manage the pages on one site, but show them on another site. Well, I don't know, there's any number of ways to do that. But one JavaScript way could be, “Okay, load the page. There's an empty div there. Run some JavaScript. Ask the other site for the content of that page and then plunk it out on the new page.” That's fine, I guess, but now you're in a client side rendered page. It's going to be slow. It's going to have bad SEO, because… Google will see it eventually, but it takes 10 days or something. It's just a bad story for SEO. It's not very resilient, because who knows what's going to happen in the network. It's not the greatest way to do this kind of “content elsewhere, content on site B, show page of site A”, situation.

Chris: You could also do it on the server side, though. Let's say you had… Ruby is capable of granting a network request too, but that's even scarier because then if something fails on the network, the whole page could die or something. It's like a nervous thing. I don't love doing that either. But we did this just recently with a worker, in that we… because the worker's JavaScript, it can make a fetch request. So, it fetches site A, it finds this div on the page, and then it goes and asks site B for the content. Gets the content. Plugs it into that div, and serves the page before it gets anything. So it looks like a server rendered page, but it wasn't. It all happened at the… on the edge, at the worker level, at the serverless level.

Chris: So it's kind of cool. I think you can imagine a fetch request on the browser probably takes, I don't know, a second and a half or something. It probably takes a minute to do it. But because these are… site B is hosted on some nice hosting and Cloudflare has some… who knows what kind of super computers they use to do it. إنهم يفعلون. Those are just two servers talking to each other, and that fetch request happens just so super duper, duper fast. It's not limited to the internet connection speed of the user, so that little request takes like two milliseconds to get that data. So it's kind of this cool way to stitch together a site from multiple sources and have it feel like, and behave like, a server rendered page. I think there's a cool future to that.

Drew: Are there any sort of conventions that are sort of springing up around serverless stuff. I'm sort of thinking about how to architect things. Say I've got something where I want to do two sort of requests to different APIs. I want to take in a postal address and geocode it against one, and then take those coordinates and send that to a florist who's going to flower bomb my front yard or something. How would you build that? Would you do two separate things? Or would you turn that into one function and just make the request once from the browser?

Chris: Mm (affirmative). That's a fascinating question. I'd probably have an architect function or something. One function would be the one that's in charge of orchestrating the rest of them. It doesn't have to be, your website is the hub and it only communicates to this array of single sources. Serverless functions can talk to other serverless functions. So I think that's somewhat common to have kind of an orchestrator function that makes the different calls and stitches them together, and returns them as one. I think that is probably smart and faster, because you want servers talking to servers, not the client talking to a whole bunch of servers. If it can make one request and get everything that it needs, I think that's probably generally a good idea-

Drew: Yeah, that sounds smart. نعم.

Chris: But I think that's the ultimate thing. You get a bunch of server nerds talking, they'll talk about the different approaches to that exact idea in 10 different ways.

درو: نعم. No, that sounds pretty smart. I mean, you mentioned as well that this approach is ideal if you're using APIs where you've got secret information. You've got API keys or something that you don't want to live in the client. Because I don't know, maybe this florist API charges you $100 dollars every time flower bomb someone.

Chris: Easily.

Drew: You can basically use those functions to almost proxy the request and add in the secret information as it goes, and keep it secret. That's a viable way to work?

Chris: Yeah, yeah. أعتقد ذلك. I mean, secrets are, I don't know, they're interesting. They're a form of buy in I think to whatever provider you go with, because… I think largely because of source control. It's kind of like, you could just put your API key right in the serverless function, because it's just going to a server, right? You don't even have to abstract it, really. The client will never see that code that executes, but in order for it to get there, there's probably a source control along the way. It's probably like you commit to master, and then master… then some kind of deployment happens that makes that thing go to the serverless function. Then you can't put your API key in there, because then it's in the repo, and you don't put your API keys in repos. That's good advice. Now there's stuff. We've just done… at CodePen recently, we started using this git-crypt thing, which is an interesting way to put keys safely into your repos, because it's encrypted by the time anybody's looking at that file.

Chris: But only locally they're decrypted, so they're useful. So it's just kind of an interesting idea. I don't know if that helps in this case, but usually, cloud providers of these things have a web interface that's, “Put your API keys here, and we'll make them available at runtime of that function.” Then it kind of locks… it doesn't lock you in forever but it kind of is… it's not as easy to move, because all your keys are… you put in some input field and some admin interface somewhere.

Drew: Yeah, I think that's the way that Netlify manage it.

Chris: They all do, you know?

درو: نعم. You have the secret environment variables that you can set from the web interface. That seems to work quite nicely.

Chris: Yeah, right. But then you got to leave… I don't know, it's not that big of a deal. I'm not saying they're doing anything nefarious or anything. How do you deal with those secrets? Well, it's a hard problem. So they kind of booted it to, I don't know, “Just put them in this input field and we'll take care of it for you, don't worry about it.”

Drew: Is there anything that you've seen that stands out as an obvious case for things that you can do with serverless, that you just couldn't do with a traditional kind of serverfull approach? Or is it just taking that code and sort of almost deploying it in a different way?

Chris: It's probably mostly that. I don't know that it unlocks any possibility that you just absolutely couldn't run it any other way. Yeah, I think that's a fair answer, but it does kind of commoditize it in an interesting way. Like, if somebody writes a really nice serverless function… I don't know that this exists quite yet, but there could kind of a marketplace, almost, for these functions. Like, I want a really good serverless function that can take a screenshot. That could be an open source project that lots of eyeballs around, that does a tremendously good job of doing it and solves all these weird edge cases. That's the one I want to use. I think that's kind of cool. أنت تعرف؟ That you can kind of benefit from other people's experience in that way. I think that will happen more and more.

Drew: I guess it's the benefit that we talked about, right at the top, of enabling people who write JavaScript and may have written JavaScript only for the front-end, to expand and use those skills on the back-end as well.

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

درو: نعم.

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

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

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

درو: إنه رائع للغاية. لقد جمعت نوعًا من المواقع الصغيرة الصغيرة التي تدور حول كل هذه الأفكار ، أليس كذلك؟

كريس: أجل. كنت مبكرا قليلا للعبة. كنت أعمل عليه اليوم ، لأنه ... يتلقى طلبات سحب. الفكرة ... حسنًا ، موجودة على serverless.css-tricks.com و ... بالمناسبة ، هناك شرطة في CSS-Tricks. لذلك فهو نطاق فرعي لـ CSS-Tricks ، وقد قمت ببنائه بدون خادم أيضًا ، لذلك هذا ... CSS-Tricks يشبه موقع WordPress ، لكن هذا موقع مولد موقع ثابت. كل محتوياته موجودة في GitHub repo ، وهو مفتوح المصدر. لذلك إذا كنت ترغب في تغيير محتوى الموقع ، يمكنك فقط إرسال طلب اقتراع ، وهو أمر رائع لأنه كان هناك مئات أو نحو ذلك من هؤلاء بمرور الوقت. لكنني أنشأت كل المحتوى الأصلي.

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

كريس: هذا كل ما في الأمر ، إلى حد كبير ، قوائم للتكنولوجيا. نعم.

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

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

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

درو: نعم ، إنه مورد مفيد للغاية. أود حقا أن أوصي الجميع للتحقق من ذلك. إنه serverless.css-tricks.com. لذلك ، كنت أتعلم كل شيء عن عدم وجود خادم. ما الذي كنت تتعلم عنه مؤخرًا يا كريس؟

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

درو: حتى الفواتير بالثانية. نعم.

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

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

درو: حقاً؟

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

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

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

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

درو: هذا رائع-

كريس: رائع جدا.

درو: نعم. إذا كنت ، عزيزي المستمع ، ترغب في سماع المزيد من كريس ، يمكنك العثور عليه على Twitter ، حيث هوchriscoyier. بالطبع ، يمكن العثور على CSS-Tricks على css-tricks.com و CodePen على codepen.io. ولكن الأهم من ذلك كله ، أنصحك بالاشتراك في البودكاست ShopTalk Show إذا لم تكن قد فعلت ذلك بالفعل ، في shoptalkshow.com. شكرا لانضمامك إلينا اليوم ، كريس. هل عندك كلمات فراق؟

كريس: Smashingpodcast.com. آمل أن يكون هذا هو عنوان URL الحقيقي.