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

في هذه الحلقة من Smashing Podcast ، نتحدث عن تعلم React. ما الذي ترغب React في العمل معه ، وكيف يمكن للمطورين ذوي الخبرة البدء؟ لقد تحدثت إلى مينا ماركهام لمعرفة ذلك.

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

• مينا ماركهام على تويتر
• موقع مينا الشخصي

تحديث اسبوعي

• من المواقع الثابتة إلى تطبيقات JAMstack للمستخدم النهائي مع FaunaDB بقلم براين روبنسون
• موقع الويب الخاص بك هو إجهاد الزوار؟ بواسطة سوزانا سكاكا
• الغوص العميق في Mirage JS: فهم التوقيت والاستجابة والعبور (الجزء 3) بواسطة كيلفن أومريشون
• بناء تطبيق ويب للتعرف على الوجوه باستخدام React بواسطة Adeneye David Abiodun
• التدويل في Vue مع البرنامج المساعد Vue I18n بواسطة Timi Omoyeni

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

درو ماكليلان: هي مهندسة معمارية الواجهة الأمامية ، ومتحدثة في المؤتمر ومنظم ، ومحبّة لأنظمة التصميم. شكل عملها في مكتبة براءات الاختراع Pantsuit لحملة هيلاري كلينتون الرئاسية هيلاري لأمريكا نقطة تحول لأنظمة التصميم داخل الصناعة وظهرت في المنشورات ، مثل Wired و Fast Company و Communication Arts. مثل الكثيرين منا ، تكتب رمزًا لقمة العيش ، وتعمل حاليًا كمهندسة أولى في Slack. لذلك نحن نعلم أنها مطورة تفكير موهوبة ومتقدمة ، لكن هل تعلم أنها كانت مخطئة في يوم من الأيام لباتريك سويزي؟ أصدقائي المحطمون ، يرجى الترحيب بمينا ماركهام. مرحبا مينا. كيف حالك؟

مينا ماركهام: أنا محطمة.

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

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

درو: وبهذا النوع من العمل مع Vanilla JavaScript ، لأنني فعلت الكثير من ذلك بنفسي أيضًا. لقد عملت مع أطر مختلفة. لقد فعلت الكثير مع jQuery مرة أخرى في اليوم. عملت مع YUI ، مكتبة واجهة مستخدم Yahoo. هل شعرت بالعديد من نقاط الألم التي يحاول شيء مثل هندسة React معالجتها؟

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

درو: بشكل عام ، ما نوع طبيعة المشاريع التي استخدمتها مع React حتى الآن؟

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

درو: طبعًا.

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

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

مينا: أوه ، أنا أحب فريق البنية التحتية في Slack the data. فريق البنية التحتية للواجهة الأمامية في Slack ، تعاملوا مع كل ذلك. لم يكن علي التفكير في الأمر. كان عظيما. لأنني حاولت تعلم React من قبل في الماضي. عادةً ما تكون أفضل طريقة للتعلم هي العمل والتنفيذ الفعلي للأشياء. ونستخدم React لبناء الكثير من hillaryclinton.com مرة أخرى في عام 2016. لذا فليس الأمر كما لو أنني لم أعمل أبدًا مع الأشخاص الذين يستخدمونها. إنه عملي فقط لم يحتاجني بشكل مباشر للمشاركة. لكن قاعدة الشفرة هذه كانت معقدة للغاية ومتطورة للغاية ، وكان هناك الكثير من الأحداث لدرجة أن هناك عائقًا أمام الدخول لمحاولة تعلم أي شيء هناك إذا لم تكن تعرف بالفعل كيفية عمل React و Redux وكل ذلك ، وهو ما لم يفعل. لذلك لم أكن فعالًا حقًا في التعلم في تلك البيئة.

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

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

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

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

درو: من الواضح ، أن أحد الأشياء مع React التي أتى إليها أنا ومثلك ، يمكن أن تشعر ببعض التنافر مثل هذا الأمر برمته مع JSX. هل تستخدم JSX في مشروعك؟

مينا: نحن. أنا أستخدم JSX.

درو: هل عقدت السلام مع ذلك؟

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

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

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

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

مينا: أجل.

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

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

درو: هل تستخدم نظامًا مثل BEM أو شيئًا ما لتحويل مساحة الاسم؟

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

درو: وهل يبدو أن هذا يعمل بنجاح من أجلك؟

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

درو: بالتأكيد. هذه معركة مستمرة ، أليس كذلك ، كيف تخرج أسماء الأشياء؟

مينا: أجل.

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

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

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

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

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

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

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

مينا: أجل.

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

مينا: لا لا.

درو: لكن اتضح أنني أعتقد بالفعل أنه يحل الكثير من المشاكل. لقد تأثرت كثيرا.

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

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

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

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

درو: هل يمكنك القول إن هناك بالتأكيد بعض فئات المشاريع التي تناسب حلًا مثل React وبعضها لا ينبغي استخدامه حقًا ويجب عليك استخدام المزيد من الأساليب التقليدية؟

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

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

مينا: أجل.

درو: إنها ليست برمجيات.

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

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

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

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

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

درو: في الواقع ، كانت React موجودة بالفعل طوال الوقت الذي كنت تعمل فيه مطور ويب.

مينا: ربما لدي روح قديمة. لا أدري، لا أعرف.

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

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

درو: نعم. أعتقد أننا كنا جميعًا هناك.

مينا: أجل. ذهبت في الطريق. كنت مثل ، "أوه ، هذا مظلم ومخيف. دعنا نعكس. دعنا نعكس. "

درو: ابتعد عن الكود.

مينا: نعم.

درو: لقد كنت دبلوماسيًا ومهذبًا للغاية بشأن React حتى الآن. أشعر أن هناك بعض التوتر تحت السطح قليلاً. تعال. أخبرنا بما تشعر به حقًا.

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

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

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

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

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

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

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

مينا: واو. لا أحد لديه آراء حول الترميز ، في الواقع.

درو: لا.

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

درو: لذلك قد تقول إن رحلتك حتى الآن مع React لا تزال مجرد ، "إنها أداة. هل تقوم بعملها؟ "

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

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

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

درو: أعتقد أن هذا مكان جيد لك. لقد تعلمت كل شيء عن React مؤخرًا كما تعلمته في الوظيفة اليومية. هل هناك أي شيء آخر كنت تتعلم عنه مؤخرًا؟

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

درو: أجد أنه كلما فهمت أكثر عن المجموعة الكاملة حول العناصر الخلفية في عناصر الواجهة الأمامية ، يساعد كل واحد معرفتي بالآخر. أجد أنني أكتب كودًا أماميًا أفضل من خلال كتابة التعليمات البرمجية الخلفية وفهم-

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

Drew: If you, dear listener, would like to hear more from Mina, you can follow her on Twitter where she's @MinaMarkham and find her personal site at mina.codes. Thanks for joining us today, Mina. Do you have any parting words?

Mina: Have a smashing night?

Drew: Great.