WeWeb · React · Low-code · الواجهة الأمامية
WeWeb أم React: بأيهما يجب أن تبدأ؟
متوفر أيضاً بـ: English · Français
بنيت واجهة التطبيق نفسه بـ WeWeb أولاً، ثم بـ React. إذا لم تبرمج من قبل، سأبدأ بـ WeWeb. وإذا كانت عندك أساسيات، فـ React.
لم تكتب كوداً من قبل؟
WeWebعندك أساسيات في البرمجة؟
React + TypeScriptيُطرح عليّ هذا السؤال كثيراً، لذلك سأجيب من خلال ما فعلته فعلاً.
في نظام ATS/CRM للتوظيف الذي عملت عليه، بُنيت الواجهة الأمامية أولاً بـ WeWeb. بعدها أعدنا بناء الواجهة كاملة بـ React 19 + TypeScript، وأغلب هذا العمل كان مع Claude Code. يعني أنني استخدمت الاثنين على المنتج نفسه، مع مستخدمين حقيقيين.
جوابي بسيط: إذا لم تبرمج من قبل، ابدأ بـ WeWeb. وإذا كانت عندك بعض المفاهيم في البرمجة، ابدأ بـ React.
لماذا WeWeb إذا لم تبرمج من قبل
WeWeb سهل التعلّم. تضع العناصر على الصفحة، وتربطها ببياناتك، وتضيف workflows تشتغل عندما يضغط أحدهم على زر أو يرسل نموذجاً.
ما يعجبني أنه يعلّمك كيف تعمل الواجهة الأمامية وأنت تبني:
ما تتعلمه في WeWeb
- كيف تجلب الصفحة البيانات من API
- أين تُحفظ هذه البيانات ما دامت الصفحة مفتوحة
- الـ workflows: عندما يحدث هذا، افعل هذا ثم ذاك
- المتغيرات والشروط
- ماذا تفعل عندما يفشل الطلب
ستفعل الأشياء نفسها في React لاحقاً. في WeWeb تفعلها بشكل مرئي أولاً فقط.
وهو خيار جيد أيضاً إذا كنت لا تريد أن تبني كل شيء بالـ vibe coding مع الذكاء الاصطناعي. تبني كل جزء بنفسك، فتفهم ما صنعته. (كتبت أكثر عن هذا في low-code أم vibe coding.)
لماذا أصبح البدء بـ React أسهل الآن
قبل بضع سنوات كان البدء بـ React أصعب. كان عليك تجهيز المشروع وتعلّم الأدوات وكتابة كل شيء بيدك قبل أن يشتغل أي شيء.
مع Claude Code الأمر مختلف. تصف الصفحة، فيكتب المكوّنات، ثم تراجع ما كتبه وتصلحه. تستطيع أن تبني أكثر بكثير في وقت أقل بكثير.
هكذا قمنا بالانتقال. أضفنا صفحات React واحدة تلو الأخرى بينما تطبيق WeWeb ما زال يعمل، حتى أصبح React هو الواجهة كلها. استخدمنا TanStack Query وReact Hook Form وZod وReact Router.
- تطبيق WeWeb في الإنتاج
- إضافة صفحات React واحدة تلو الأخرى
- النظامان يعملان معاً أثناء الانتقال
- React يصبح الواجهة كلها
لتطبيق كبير يستمر في النمو، سأختار React اليوم لأن عندك تحكماً كاملاً في الكود. (المزيد عن عملي على React بالإنجليزية.)
تصحيح الأخطاء في React أصعب
في WeWeb، عندما يتعطل شيء، تفتح الـ workflow وتتحقق من كل خطوة. ترى ما أرجعته الـ API وأي متغير فارغ.
في React قد تكون المشكلة في مكوّن، أو hook، أو الحالة (state)، أو الـ cache، أو طلب، أو نوع بيانات. تنظر في الـ console وتبويب الشبكة، وتتبع البيانات عبر عدة ملفات.
إذا كتب الذكاء الاصطناعي جزءاً كبيراً من الكود، سيجد المبتدئ صعوبة هنا، لأنه يصحح كوداً لم يكتبه ولا يفهمه جيداً بعد. وهنا أرى أغلب الناس يعلقون.
WeWeb
- ترى كل خطوة في الـ workflow
- ترى ما أرجعته الـ API
- أماكن أقل يختبئ فيها الخلل
- حرية أقل عندما يكبر التطبيق
React
- تحكم كامل في الكود
- الذكاء الاصطناعي يكتبه أسرع بكثير
- الأخطاء قد تكون موزعة على عدة ملفات
- تحتاج أن تقرأ الكود لتصلحه
بأيهما تبدأ
ابدأ بـ WeWeb إذا
- لم تكتب كوداً من قبل
- تريد أن ترى كيف تعمل البيانات والـ workflows
- تريد أن تبني شيئاً حقيقياً قريباً
- لا تريد أن يفعل الذكاء الاصطناعي كل شيء
ابدأ بـ React إذا
- تعرف القليل من البرمجة
- درست البرمجة أو جرّبتها من قبل
- تريد أن تتعلم التفاصيل
- تخطط لبناء تطبيقات أكبر
البدء بـ WeWeb لا يحبسك فيه. عندما تنتقل إلى React لاحقاً، ستكون تعرف كيف تُجلب البيانات وما هي الحالة (state) وكيف يعمل الـ workflow، ويبقى عليك أساساً أن تتعلم كتابتها ككود.
إذا كانت عندك أساسيات، فلن أقضي أشهراً في أداة مرئية. اذهب إلى React، واستخدم الذكاء الاصطناعي لتسرع، واقرأ ما يكتبه.
لواجهة كبيرة سأستخدم React اليوم. لكن WeWeb أوصلنا بعيداً بسرعة، وما زلت أنصح به من لم يبرمج من قبل. (للصورة الكاملة، اقرأ low-code أم full-code.)