أريدك أن تنظر إلى لقطة الشاشة هذه للحظة من تطبيق GitHub Copilot. إنها صغيرة، وبها الكثير من الأيقونات، وتحكي أروع قصة أنا متحمس لها حقًا.
هذه الصورة عبارة عن مجموعة من الجلسات المكدسة. إنها عبارة عن سلسلة من المهام في نفس المستودع، حيث تعتمد كل جلسة على بعضها البعض!
المزيد عن تلك أدناه، ولكن أولاً، لماذا تعتبر لقطة الشاشة هذه سحرية جدًا؟ علينا أن نعود أكثر من عقد من الزمن لنبدأ. لدي هذا الريبو القديم جدًا الخاص بي لتطبيق شخصي. لقد صنعتها أولاً الأعمار منذ (نهاية عام 2014)، وقد تم تنفيذ ما أريد أن أفعله (يشبه لوحة معلومات “الحياة” الشخصية للتقويمات والأجهزة الذكية في منزلي وإدارة المهام) طوال تلك السنوات. أقوم أحيانًا ببعض التحديثات، لكن الجدل حولها أصبح أكثر صعوبة.
لقد حصلت تبعياتي قديم. قديمة بشكل محرج. كنت أستخدم React 15 (الذي تم إصداره في عام 2016)، وLess للمعالجة المسبقة لـ CSS، ونسخة من React-bootstrap من ذلك الوقت تقريبًا. نعم، لقد قرأت ذلك بشكل صحيح. بوتستراب. كان هذا قديما.
إن محاولة حل هذه الفوضى المطلقة قبل أن يستغرق الذكاء الاصطناعي أسابيع. لقد حاولت واستسلمت من قبل. إنه ليس أكبر تطبيق في العالم، لكنه كذلك com.juuuust كان حجمه كبيرًا بما يكفي ليكون مؤلمًا، ولم يكن العصير يستحق عصره.
…ولكننا يفعل احصل على الذكاء الاصطناعي الآن، ولذلك قمت بتشغيل تطبيق GitHub Copilot، وأضفت الريبو، وبدأت.
الخطوة الأولى: هل يمكنني تصوير هذا مرة واحدة؟
لا.
حاولت رغم ذلك! هذه هي المطالبة التي استخدمتها في وضع الخطة:
I want to modernize the frontend for this project. I first wrote a lot of this code more than 10 years ago and it should be cleaned up a lot. I'm thinking we start either using Tailwind or just vanilla CSS (please vet everything to help me decide), we remove all Less (etc), and clean everything up accessibility-wise and responsiveness-wise. Right now I really want to just focus on styles, and then slowly but surely organize and consolidate the React functionality. It might be worth modernizing dependencies, too. Let's come up with a plan around this before diving in.
1. Nothing is sacred, it's okay if we have to completely start over some parts
2. Links should change colors and add underlines on hover/focus
3. Input boxes should have a smaller border radius in general, and their labels should be cleaner
4. There should be good wrapping and a max-width on containers so that an input box doesn't span an entire wide monitor.لقد قمت بتمرير هذا إلى Claude Opus 4.8 وحصلت على مراجعة المطاط من GPT-5.5، وكان علي القيام بالكثير من التحرك ذهابًا وإيابًا لاتخاذ القرارات. بمجرد وصولي إلى المكان الذي كنت سعيدًا به، قمت بالضغط على “اذهب” واترك التطبيق يذهب إلى المدينة في مشروعي لمعرفة ما إذا كان سيعمل!
… لم يحدث ذلك، وكان خطأي.
الخطوة الثانية: إدراك أنني جربت ذلك من قبل
لذا، تذكر عندما قلت إنني “حاولت واستسلمت من قبل؟” اتضح أنه كان لدي بالفعل شخص قديم devلقد قمت بالفعل بتحديث بعض الأجزاء، ولم أدرك مشكلات التوافق التي واجهتها.
لكن هذا كان شيئًا جيدًا!
عندما قمت بتشغيل الإصدار الجديد من هذه الجلسة، أدركت أنني كنت أتفرع main، ولكن النشر الحالي الذي كنت أستخدمه بانتظام كان يستخدم الإصدار المحدث جزئيًا dev. لذلك، كان من الضروري تضمين بعض الميزات التي أردت صنعها بنفسي في هذه المجموعة من التغييرات. لكن التغييرات كانت فقط كبيرة بما يكفي لدرجة أنني اضطررت بالفعل إلى تطبيق هذه التغييرات على ملف devفرع لإنقاذ عقلي قليلا، بدلا من سحب devالتغييرات ل main.
ما قبل الذكاء الاصطناعي… في الحقيقة، كان هذا سيجعلني أسحب شعري من الإحباط. من المسلم به أنني شعرت بالإحباط هنا أيضًا. لقد أمضيت وقتًا ورموزًا في محاولة تنفيذ هذا الأمر باستخدام ما اعتقدت أنها خطة جيدة. لكن! لقد تمكنت من تبديل التروس (والجلسات) من خلال سؤال بسيط، والذي كان أكثر روعة مما توقعت:
لم يضيع كل شيء! أجرى Copilot جلسة جديدة لي، وأغلق طلب السحب الذي حاولته، وقام بتحويل قرارات التصميم الخاصة بي إلى التغييرات التي كان يتم تطبيقها على فرع التطوير.
الخطوة الثالثة: النتائج بعد الاختبار
يا للعجب، حسنًا، لقد كان لدي فرع جيد، وطلب سحب كنت سعيدًا به تمامًا. عندما بدأت الاختبار، لم أستطع إلا أن ألاحظ بعض التحذيرات القديمة في وحدة التحكم الخاصة بي.
امتلأ قلبي بالخوف عندما رأيت إشارات قديمة إليه findDOMNodeو componentWillReceiveProps، وظائف لم أتطرق إليها شخصيًا منذ سنوات وسنوات. اه.
لم تعد هذه المراجع موجودة في قاعدة التعليمات البرمجية الخاصة بي بعد الآن، ولكنها كانت في رد الفعل التمهيدي. لقد فتحت وضع الخطة مرة أخرى، لأنني كنت بحاجة لمعرفة ما إذا كانت الترقية ستنجح، أو إذا كان يجب علي إزالة المكتبة بالكامل:
Do you think we should remove react-bootstrap entirely (and replace with a modern alternative), or just upgrade/migrate existing components?لقد أعطاني تشغيل هذا خطة جيدة، وتحدثت عن الخيارات، وأوصت باستبدال المكتبة بالكامل.
الخطوة الرابعة: تكديس الجلسة فوق الأخرى
كنت بحاجة للتأكد من أن التغييرات التي قمت بها آمنة من العمل الحالي، ولكن استبدال رد فعل التمهيد بدا وكأنه كثير من زحف النطاق لما كنت أفعله حاليًا.
لقد وجدت أنه في الكثير من أعمالي الهندسية “الوكيلية”، من الصعب بشكل خاص تجنب هذا النوع من الزحف في النطاق. نظرًا لأنني لست مضطرًا إلى كتابة كل التعليمات البرمجية بنفسي، فمن المغري جدًا تقديم 10000 طلب سحب سطر يعتني بكل الأشياء التي أريد القيام بها! وهو في الحقيقة مجرد شكل جديد من أشكال المماطلة، ها.
لذا، بدلاً من تقديم طلب السحب الضخم هذا بنفسي للاختبار، قمت بتقسيمه بجلسة جديدة، وطلبت:
Let's make a pull request for the existing work, and then start a new session for this react-bootstrap replacement work that will branch off this existing work here, and be a separate pull request to merge into dev after this one. هذا هو الجزء الذي بدا سحريًا بما يكفي ليجعلني أرغب في كتابة مشاركة المدونة هذه. تطبيق GitHub Copilot:
- تم تقديم طلب سحب لجميع التغييرات الحالية
dev - تم إنشاء “جلسة مكدسة” لإزالة رد فعل التمهيد (استغرق الأمر السياق السابق، وعمل جلسة للتشغيل بعد الجلسة الحالية، وأنشأ خطة، وطلب مني الموافقة على الخطة، وتم تشغيلها)
- قدمت طلب سحب مكدسًا بعد عملي الحالي
كان هذا رائعًا جدًا. جلسات مكدسة و طلبات السحب مكدسة؟ هل هذا هو المستقبل؟
نعم.
في حالة عدم فهمك لما يعنيه ذلك بالاسم: المكدس عبارة عن سلسلة من طلبات السحب في نفس المستودع حيث يستهدف كل طلب سحب فرع طلب السحب الموجود أسفله، مما يشكل سلسلة مرتبة تصل في النهاية إلى فرعك الرئيسي.
في حالتي، لم تتبع الجلسات بعضها البعض فحسب، بل اتبعت التغييرات أيضًا!
الخطوة الخامسة: الإبحار نحو غروب الشمس مع طلبات السحب المكدسة
أعلم أنني أتصرف بوقاحة إلى حد ما مع حماستي، لكن سعادتي صادقة. كانت سهولة إرسال هذه التغييرات تجربة ممتعة بعد إهمال قاعدة التعليمات البرمجية القديمة الخاصة بي على مر العصور.
دعونا نلقي نظرة على لقطة الشاشة الأولى هذه مرة أخرى: سأرشدك عبرها.
- في الجزء العلوي، يمكنك رؤية الريبو الذي قمت بسحبه.
- التالي “تحديث الواجهة الأمامية” هو اسم الجلسة الأولية.
- الطبقة التالية المتداخلة هي المحاولة الأولى لطلب السحب، والتي لم نشحنها في النهاية (وبالتالي الرمز الأحمر).
- الطبقة التالية المتداخلة على نفس المستوى هي حيث حصلنا على طلب سحب عملي لـ
devفرع. - الجلسة المتداخلة أدناه هي مسودة طلب السحب قيد التقدم، مع تغييرات رد الفعل التمهيدي.
لم يكن تطوير البرمجيات سلسًا أبدًا. ولكن تم إنشاء هذا المشروع أ أسهل بكثير بهذه الأدوات الحديثة.
إذا كنت تتطلع إلى تحديث قواعد التعليمات البرمجية الخاصة بك، فجرّب ذلك!
تحقق من مكدسات طلب السحب في أي مكان تلتزم فيه بالتعليمات البرمجية على GitHub، والجلسات المكدسة في تطبيق GitHub Copilot >
كتب بواسطة
