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

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

في هذه الحلقة نتحدث عن شقرا UI. ما هو وكيف يمكن أن يساعد في مشاريع React الخاصة بك؟ يتحدث درو ماكليلان مع الخبير مايك كافاليير لمعرفة الإجابة.

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

• شقرا UI
• مايك على تويتر
• موقع مايك الشخصي
• قص في كتاب Jamstack

تحديث اسبوعي

• التصميم باستخدام الكود: نهج حديث للتصميم
  كتبه ميكولاج دوبروكي
• أتمتة اختبار قارئ الشاشة على macOS باستخدام Auto VO
  كتبه كاميرون كونديف
• ظهور التفكير التصميمي كاستراتيجية لحل المشكلات
  كتبه جوش سينجر
• كيفية تشغيل مراجعة UX لمنصة تكنولوجيا التعليم الرئيسية
  كتبه مارك لانكميلير
• إنشاء مدونة متعددة المؤلفين باستخدام Next.js
  كتبه دوم هابرساك

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

درو ماكليلان: هو مهندس برمجيات أول في وكالة تدعى Echobind. لقد كان يكتب التعليمات البرمجية منذ عقدين ، ويستخدم JavaScript طوال الوقت. إنه يحب Jamstack ، ويعلم كتابه الجديد Cut Into The Jamstack للقارئ كيفية إنشاء برنامج كتطبيق خدمة من البداية. نحن نعلم أنه يعرف طريقه حول Jamstack ، لكن هل تعلم أنه ضاع مرة واحدة في ممر زبدة الفول السوداني؟ أصدقائي المحطمون ، يرجى الترحيب بمايك كافاليير. اهلا مايك. كيف حالك؟

مايك كافاليير: أنا محطمة للغاية اليوم.

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

مايك: Chakra UI عبارة عن إطار عمل لواجهة المستخدم لـ React أو مجموعة أدوات واجهة المستخدم ، أعتقد أنهم يصيغونها كـ. في أي حزمة تطبيقات ، في الوقت الحاضر لا تريد اختراع واجهة مستخدم من البداية. تريد الحصول على بعض الأدوات. كان هذا هو الحال لفترة من الوقت.

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

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

مايك: ليس من غير المألوف بالنسبة لي أن أقوم بتجميع شيء ما باستخدام Chakra UI والحصول على درجة جيدة جدًا في Lighthouse. في الواقع ، كنت أتحقق للتو من موقع Cut Into The Jamstack الإلكتروني اليوم ، وكانت درجة إمكانية الوصول عالية جدًا. إنها أيضًا قابلة للتحدث بشكل كامل. يمكنك ضبط تكوين السمة من البداية. هناك فقط قائمة طويلة من الامتيازات لها.

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

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

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

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

مايك: لن أكون الخبير في ذلك. لقد كنت أقول شقرة فقط بسبب اليوغا. لكن علينا أن نطلب من المؤسسين التحقق مرة أخرى.

درو: إنه نظام تصميم جاهز يمكنك تركه لبناء واجهة المستخدم لمشروعك.

مايك: أجل.

درو: إنه مخصص لمشروعات React.

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

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

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

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

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

درو: صحيح. نعم.

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

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

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

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

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

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

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

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

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

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

مايك: لقد رأيت بعض الأشياء اللطيفة به. لكن يمكنك فعل أي شيء به. لقد قمت بعمل مواقع ثابتة. يتم إجراء قص في صفحة Jamstack الرئيسية معها. فقط كمثال واحد. لقد استخدمناه في Echobind الكثير. لا أتذكر ما إذا كنا قد استخدمنا ذلك لموقع echobind.com. لكن بالتأكيد العديد من مواقع عملائنا. ثم التطبيق الذي كنت أقوم ببنائه ، JamShots ، إنه تطبيق. ليس لديها صفحات تسويق حتى الآن. ولكن الأمر كله مجرد واجهة مستخدم وكل ما تم تصميمه باستخدام Chakra.

مايك: هناك شيء آخر أثناء امتداح شقرا وهو أن هناك موقعًا إلكترونيًا آخر كنت أستخدمه كثيرًا مؤخرًا ، وأنا أستخدمه في ... سأقوم بتقديمه في الكتاب أيضًا. Chakratemplates.net. شقرا-templates.net. من أنماط التصميم الشائعة أن كل من يساهم في إيجاد وحدة رئيسية أو وحدة تسعير. عليهم فقط نسخ كود شقرا ولصقه.

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

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

مايك: نعم. إطلاقا.

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

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

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

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

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

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

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

مايك: أوه ، أجل. تماما.

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

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

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

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

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

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

مايك: نعم.

درو: بالتأكيد في المعلومات الترويجية. هل ولد ذلك في الكود نفسه؟ هل يمارسون ما يكرزون به؟ هل يوجد به بالفعل إمكانية وصول جيدة مدمجة؟

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

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

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

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

مايك: بالنسبة لـ React ، توفر Chakra موفر واجهة برمجة تطبيقات للسياق. مزود سمة بحيث عندما ... في تطبيقات Next.js الخاصة بي على سبيل المثال ، يكون لديك ... يحتوي Next.js على تطبيق JS أو ملف TS بشرطة سفلية يلتف فقط كل صفحة في التطبيق. ما عليك سوى توصيل موفر السمات هناك وتقوم Chakra ببقية العمل ويصبح متاحًا في كل مكان. لا توجد عقبات أمام الإضافة إلى Next.js بالتأكيد. لكني لا أتخيل شقرا أيضًا.

درو: هل تستخدم شقرا TypeScript؟ أعتقد أنه يفعل ، أليس كذلك؟

مايك: إنه يدعمها. نعم.

درو: يدعمها. هذه إضافة كبيرة للأشخاص الذين يستخدمون TypeScript بالفعل في مشاريعهم. هل هناك أي سلبيات لذلك إذا كان الأشخاص لا يستخدمون TypeScript بالفعل؟

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

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

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

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

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

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

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

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

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

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

درو: الشيء الوحيد الذي لم يعجبني في المستندات من إلقاء نظرة خاطفة على عدد الإعلانات عليها. في كل صفحة لعرضها التجاري لـ Chakra UI Pro.

مايك: لم أرهم. مثير للانتباه. لقد رأيت ذلك. لقد رأيت ذلك بالتأكيد. لكني لا أراها الآن. آه أجل. تمام. هناك شقرا UI Pro. أعتقد أنني قمت بتصفية الأمر عقليًا. انا اسمعك. على الأقل ليس كبيرًا جدًا وفي وجهك.

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

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

درو: نعم. يبدو أن هناك نظامًا بيئيًا مبنيًا حوله. هل تعرف كم من الوقت استمر المشروع وماذا بعد؟ هل هو منتشر على نطاق واسع في مجتمع React؟

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

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

مايك: أجل.

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

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

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

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

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

درو: نعم. هذا دائمًا اعتبار مهم ، أليس كذلك؟

مايك: نعم.

درو: هل هناك أي شيء آخر يجب أن نعرفه عن Chakra UI قبل أن نتعمق فيه ونستخدمه في مشروع؟

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

درو: نعم. هذا عظيم. لديك كتاب يسمى Cut Into The Jamstack ، وهو إصدار معاينة. إصدار بيتا في الوقت الحالي. أنت تنشر ذلك بنفسك. هل هذا صحيح؟

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

درو: الكتاب يرشد القارئ حرفياً من خلال بناء برنامج كتطبيق خدمة.

مايك: نعم.

درو: كل شيء على Jamstack. لماذا قررت أن تكتب هذا الآن وأن تتبع هذا النهج في الكتاب؟

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

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

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

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

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

مايك: Next.js و Jamstack و Vercel و Chakra UI ، كلهم ​​ينتجون أشياء تبسط الكثير من الأشياء لك. Next.js ، فهو يبسط الكثير من المشكلات المتعلقة بالسرعة والقضايا المتعلقة بإمكانية الوصول. تركيب. هذا كل شيء ، يتم التوجيه من أجلك. لا داعي للقلق بشأن جانب العميل أو التوجيه من جانب الخدمة. إنه تلقائي. تقوم Chakra UI بذلك من خلال إمكانية الوصول والسمات. هذه الأدوات مجتمعة ، هي فقط ... تجربة المطور تصبح رائعة حقًا وكل شيء فقط ... إنها تمنحك الحرية في إنشاء البرامج حقًا.

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

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

مايك: أجل.

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

مايك: نعم.

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

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

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

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

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

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

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. نعم. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

درو: رائع.

Mike: I've got another one coming up in probably a couple of weeks. نعم. نعم. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. هذا هو.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. هل لديك اي كلمات فراق؟

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.