Transcript
00:00:00في البداية كان لدينا JSX، ثم حصلنا على TSX، ولكننا ظللنا عالقين معهما لسنوات الآن.
00:00:04ألا يمكن تحسينهما؟ حسنًا، ربما عن طريق TSRX.
00:00:08إنه يشبههما نوعًا ما، ولكنه مختلف.
00:00:10ليس لدينا دالة، بل لدينا مكون (component)، ولدينا سلاسل نصية لنصوصنا،
00:00:14هناك عبارة if عادية هنا، كما أنه لا توجد عبارة return.
00:00:17إذن ما هذا، ولماذا، وهل يجب عليك استخدامه؟ دعنا نكتشف ذلك.
00:00:21[موسيقى]
00:00:26الآن قد يكون هناك القليل منكم ممن رأوا كودًا كهذا من قبل،
00:00:29وذلك لأنه مقدم لكم بالفعل من قِبل منشئ Ripple.
00:00:31هذا إطار عمل واجهة أمامية جديد غطاه ريتش على هذه القناة قبل ستة أشهر،
00:00:35لذا اشترك لتواكب كل جديد في هذه الأمور.
00:00:38ما فعلوه هو أنهم استخلصوا الصيغة المستخدمة في Ripple،
00:00:41وجعلوها تعمل مع React و Preact و Solid و Vue وبالتأكيد Ripple،
00:00:45وقد كان الكثير من الناس متحمسين جدًا لهذا.
00:00:47الآن يصف TSRX نفسه بأنه طريقة لكتابة مكونات واجهة المستخدم تظل مقروءة ومتجاورة،
00:00:52بحيث تعيش الهيكلية، والتنسيق، وتدفق التحكم معًا،
00:00:55وتظل النتيجة متوافقة تمامًا بشكل تراجعي مع TypeScript.
00:00:58ولكن ما لم تكن قد استخدمت Ripple من قبل، فربما لا تزال مرتبكًا قليلاً بشأن ما يعنيه ذلك،
00:01:01لذا دعنا نمر على ميزاته.
00:01:03للبدء، أنت تستخدم هذا مع ملفات TSRX، مما يعني أننا بحاجة إلى خطوة ترجمة (compiler)،
00:01:07ولكن من السهل جدًا إعداد ذلك باستخدام إضافة VIT،
00:01:10وهناك أيضًا خيارات أخرى لإطارات العمل وبيئات التشغيل الأخرى.
00:01:13أما بالنسبة للمكونات الفعلية، فبدلاً من كتابة function هنا، نكتب component،
00:01:17وهذه في الغالب مجرد كلمة مفتاحية للمترجم نفسه،
00:01:20ولكنها توضح أيضًا أن هذا سيحتوي على بعض منطق العرض (rendering).
00:01:24قد أعتبره تحسينًا صغيرًا لجودة العمل.
00:01:27ولكن الشيء الذي يجب ملاحظته هو أنه ليس لدينا عبارة return هنا،
00:01:30وذلك لأن TSRX يستخدم JSX القائم على العبارات البرمجية (statement-based JSX)،
00:01:33لذا لا تحتاج إلى إرجاع شجرة مكونات،
00:01:35أنت فقط تكتب وسومك حيثما تريد عرضها.
00:01:37هذا يعني أنه يمكننا بالفعل إسقاط وسم فقرة آخر فوق هذه البطاقة في الجزء العلوي من المكون،
00:01:42وسيتم عرضه في المكان الذي كُتب فيه.
00:01:44لا يزال بإمكانك استخدام return في المكون، ولكن يجب أن تكون مجردة،
00:01:47وتُستخدم فقط للإرجاع المبكر، بحيث يتم تخطي واجهة المستخدم والمنطق بعدها.
00:01:51لقد ساعدني ذلك في التفكير في مكونات TSRX على أنها خطية للغاية،
00:01:54بحيث يكون الترتيب الذي نكتب به التعليمات البرمجية هو ترتيب العرض،
00:01:57ببساطة نقرأ من الأعلى إلى الأسفل،
00:01:59ولكن يمكنني أيضًا أن أرى أن هذا قد يجعل من الصعب رؤية ما يعرضه المكون بسرعة،
00:02:03بينما في شيء مثل React، كنا سنقفز مباشرة إلى عبارة return.
00:02:06فائدة أخرى لـ JSX القائم على العبارات هي أنه يمكننا استخدام جافا سكريبت العادية بشكل أكبر.
00:02:10على سبيل المثال، العرض الشرطي بسيط للغاية.
00:02:13فهو مجرد عبارة if مع else-if و else أيضًا إذا كنت بحاجة إليها.
00:02:17في الشروط، نحتاج ببساطة إلى وضع JSX كعبارة برمجية.
00:02:20نفس هذا الشكل في React غالبًا ما يتحول إلى شروط ثلاثية متداخلة (nested ternaries)،
00:02:23لأنه في JSX، يجب أن يكون كل فرع عبارة عن تعبير (expression)،
00:02:26لذا أجد أن نسخة TSRX يمكن أن تكون أسهل في القراءة أحيانًا،
00:02:29خاصة عندما يكون لدينا عبارة برمجية أكثر تعقيدًا،
00:02:31ولكن بنفس الطريقة، يمكنني أيضًا أن أرى أن هذا قد يضيف المزيد من الإطناب،
00:02:35خاصة عندما تحتاج فقط إلى شرط بسيط.
00:02:37وهي نفس القصة لـ عبارات switch أيضًا.
00:02:39يمكنك فقط استخدام switch جافا سكريبت عادية مع الحالات الخاصة بك
00:02:41و JSX الذي تريد عرضه لكل منها.
00:02:44هذا أبسط قليلاً مما قد تتعامل به مع هذا في React،
00:02:47حيث تحتاج إلى دالة لاستخدام نفس النمط،
00:02:49لذا فإن TSRX أنظف قليلاً هنا،
00:02:51ولكن المجال الذي أفضله شخصيًا بشكل أقل في TSRX هو عرض القوائم.
00:02:55هنا نتخلى عن map. وبدلاً من ذلك نستخدم حلقة for-of،
00:02:58وقد قام TSRX بالفعل بتوسيع هذه الحلقة حتى نتمكن من الحصول على الفهرس (index)
00:03:01بالإضافة إلى معرف ثابت مع المفتاح (key).
00:03:03ثم عندما تريد تخطي عنصر ما، يمكنك ببساطة استخدام continue،
00:03:06لذا مرة أخرى، إنه أقرب قليلاً إلى تدفق جافا سكريبت الخام،
00:03:08ولكن كما قلت، بالنسبة لي، لقد اعتدت كثيرًا على استخدام map. و filter وما إلى ذلك،
00:03:12لذا سألتزم بذلك على الأرجح،
00:03:14ومن الجدير بالذكر أيضًا أنه لا يمكنك استخدام أي أنواع حلقات أخرى
00:03:17مثل for و for-in و while و do-while.
00:03:19إنها تعمل فقط مع حلقات for-of.
00:03:21الآن، ومتابعة لاتجاه استخدام جافا سكريبت العادية،
00:03:23الطريقة التي نتعامل بها مع حدود الأخطاء (error boundaries) في TSRX هي باستخدام كتلة try-catch بسيطة.
00:03:27لا شيء معقد وهي واضحة جدًا.
00:03:30يمكننا بعد ذلك أيضًا استخدام نفس كتلة try-catch إذا احتجنا إلى حدود غير متزامنة (async boundaries)،
00:03:33نحتاج ببساطة إلى إضافة كتلة pending
00:03:35ثم كتابة مكون التحميل الخاص بك هناك.
00:03:38يتولى المترجم بالفعل أخذ هذا الكود
00:03:40وتحويله إلى أي إطار عمل تستخدمه،
00:03:42لذا في React و Preact و Solid، يستخدم هذا في الواقع lazy،
00:03:45وفي Ripple، يستخدم ما يعادلها في Ripple.
00:03:47وبالحديث عن React على وجه التحديد،
00:03:48الميزات التي نظرنا إليها حتى الآن
00:03:50يبدو أنها تسمح لنا بكسر إحدى القواعد الأساسية لـ React،
00:03:53قاعدة الخطافات (rule of hooks).
00:03:54يمكننا الآن وضعها بعد الشروط والإرجاع المبكر،
00:03:57وحتى داخل الحلقات.
00:03:58ستعمل جميعها كالمعتاد.
00:04:00هذا يتيح لنا تحديد موقع الكود الخاص بنا بشكل أفضل حيث توجد حاجة فعلية إليه،
00:04:03والنتيجة النهائية لا تكسر القواعد حتى.
00:04:06يقوم المترجم بهدوء برفع (hoisting) كل خطاف إلى أعلى الدالة الناتجة،
00:04:09لذا لا تزال React تراها بترتيب مستقر،
00:04:11ولكنك ستحصل على كتابتها حيث تنتمي بالفعل.
00:04:14الآن بالنسبة لي، كشخص استخدم React لسنوات،
00:04:16هذه واحدة من الميزات التي أجد صعوبة في الاعتياد عليها،
00:04:18وهي أيضًا ميزة نجعل فيها المترجم
00:04:20يقوم بالكثير من السحر وراء الكواليس،
00:04:22تحديدًا حول إطار العمل،
00:04:24وأعتقد أنه إذا كنت أقوم بتصحيح أخطاء هذا (debugging)،
00:04:26فقد أضيع قليلاً بشأن أي كود موجود في أي مكان.
00:04:28بعد ذلك، لدينا النطاق المعجمي (lexical scoping)،
00:04:30بحيث ينشئ كل عنصر متداخل نطاقه الخاص،
00:04:32لذا نحن قادرون على الإعلان عن const label في ثلاث كتل div مختلفة هنا،
00:04:36ولا تتداخل معًا.
00:04:37هناك حتى واحدة في الجزء العلوي من الدالة هنا لا يقرأها شيء،
00:04:40ومرة أخرى، لا تتعارض.
00:04:41وينطبق الشيء نفسه على كل عبارة if أو for أو switch أو try.
00:04:44كل واحدة لها نطاقاتها الخاصة،
00:04:46لذا فإن المتغيرات التي نعلن عنها، والدوال التي نشغلها،
00:04:48والقيم التي نشتقها، لا تتسرب إلى النطاقات الأخرى.
00:04:51هذه ميزة أخرى من الميزات التي تركز على تجميع كودنا في نفس المكان،
00:04:54ومرة أخرى، تجعل مكوناتنا تُقرأ بطريقة خطية من الأعلى إلى الأسفل.
00:04:57لتغيير الموضوع الآن بعيدًا عن جافا سكريبت، دعنا نتحدث عن التنسيق (styling).
00:05:00في TSRX، لدينا في الواقع تنسيقات محصورة (scoped styles)،
00:05:02لذا يمكنك فقط وضع كتلة style في مكونك،
00:05:04ويكون CSS الذي نكتبه هناك محصورًا فقط في هذا المكون،
00:05:08مع إرفاق بصمة فريدة (unique hash) باسم الفئة عند ترجمته.
00:05:11لذا فإن مكون البطاقة هذا يحتوي على فئة card،
00:05:13ولاحظ هنا، أنه يحاول أيضًا استخدام فئة card تلك،
00:05:16ولكنه لا يحصل على أي من تنسيقات card،
00:05:17لأنه لا يملك كتلة style خاصة به.
00:05:19فهو لا يحصل على التنسيق من أصله (parent)،
00:05:21لأنه لا يملك تلك البصمة الفريدة.
00:05:22ولكن إذا كنت ترغب في مشاركة التنسيقات عبر المكونات،
00:05:24فإن TSRX لديه الكلمة المفتاحية style،
00:05:26بحيث يمرر الأصل اسم التنسيق باستخدام هذه الكلمة المفتاحية
00:05:29إلى مكون يقبل className كخاصية (prop)،
00:05:31وسيتأكد من أن تلك البصمة الفريدة التي ينشئها تذهب معها.
00:05:35لذا لاحظ الآن أنه يمتلك نفس تنسيق الأصل.
00:05:37يمكنك أيضًا من الناحية التقنية استخدام محدد عام (global selector) حول تنسيقاتك
00:05:40للهروب من النطاق المحدد وتطبيق تلك التنسيقات عالميًا،
00:05:42ولكنني أعتقد أن هذا سيصبح فوضويًا بعض الشيء،
00:05:44وستفقد تتبع مصدر تنسيقاتك.
00:05:46شخصيًا، أنا أفضل Tailwind تمامًا،
00:05:48لذا ربما لن أستخدم هذه الميزة كثيرًا،
00:05:50وسألتزم بـ Tailwind،
00:05:51ولكنها ميزة رائعة على أي حال.
00:05:53التالي، ميزة لأولئك منكم الذين كانوا ينتبهون.
00:05:56في كتل الكود التي عرضتها،
00:05:57كان هناك اختلاف بسيط في طريقة معالجة النصوص في هذه العبارات.
00:06:01النص المجرد داخل عنصر ما يجب أن يكون محاطًا بعلامات اقتباس مزدوجة.
00:06:04لا يمكننا كتابته فقط كما نفعل في JSX.
00:06:07لا يزال بإمكانك استخدام القيم الديناميكية،
00:06:08وفي سطر مثل هذا،
00:06:10والذي يقع بين سلسلتين نصيتين محاطتين بعلامات اقتباس مزدوجة،
00:06:12سيقوم TSRX ببساطة بدمج هذا في سلسلة نصية واحدة عند الترجمة.
00:06:16خيار آخر لديك هو ببساطة الالتزام باستخدام الرموز النصية للقوالب (template literal).
00:06:19وستحصل على نفس النتيجة.
00:06:20بالنسبة لي، كان هذا أحد العيوب البسيطة والمزعجة لاستخدام TSRX
00:06:23لأن لدي ذاكرة عضلية قوية لعدم استخدام علامات الاقتباس للنصوص.
00:06:26ولكن ميزة أخرى قائمة على النصوص،
00:06:27هي أن TSRX يمكنه بالفعل التعامل مع السلاسل النصية التي تحتوي على وسوم HTML فعلية،
00:06:31ولديك طريقتان لعرض هذا.
00:06:33الأولى هي ببساطة باستخدام الكلمة المفتاحية text،
00:06:35والتي ستعرض النص الذي تم ترميزه (escaped)،
00:06:38لذا يمكنك رؤية سلسلة HTML الحرفية،
00:06:40كما أنها آمنة من البرمجة عبر المواقع (cross-site scripting).
00:06:42لذا فهذا مفيد عندما تريد ضمان أن شيئًا ما سيكون سلسلة نصية،
00:06:45ويكون مصدر تلك السلسلة غامضًا بعض الشيء،
00:06:48بحيث لا تعرف بالضرورة نوعه عند كتابة هذا الكود.
00:06:51الخيار الثاني هو إذا كنت تريد عرض السلسلة كـ HTML،
00:06:54يمكننا ببساطة استخدام الكلمة المفتاحية HTML،
00:06:56وهذا يحللها كـ HTML حقيقي،
00:06:58ولكن هذه الميزة تعمل فقط في Ripple مع دعم Vue لمجموعة فرعية أضيق منها.
00:07:02ميزة أخرى غير متعلقة بـ React،
00:07:03ولكنها قد تكون مثيرة للاهتمام لأولئك منكم الذين يستخدمون Ripple،
00:07:06Vue أو Solid وهي التفكيك الكسول (lazy destructuring).
00:07:08إذا قمت بتفكيك الخصائص (props) الخاصة بك بشكل طبيعي في أطر العمل هذه،
00:07:10فإنك تلتقط لقطة لكل قيمة في وقت الاستدعاء،
00:07:12وهذا يكسر تفاعلية الوصول لكل عنصر.
00:07:14لذا في TSRX يمكنك ببساطة إضافة رمز & قبل الخصائص،
00:07:18وبينما يبدو الأمر وكأنه تفكيك،
00:07:20إلا أن كل ربط يتم ترجمته في الواقع مرة أخرى إلى بحث عن الخاصية حيث يتم استخدامها.
00:07:23لذا فإن بيئة التشغيل ترى كل وصول بشكل فردي،
00:07:25وبالتالي تظل تحديثات الإشارات (signals) تؤدي إلى إعادة العرض،
00:07:28وهذا يعني أنه يمكنك الحفاظ على سهولة استخدام التفكيك،
00:07:30ويحافظ إطار العمل على تفاعليته.
00:07:32الميزة الأخيرة التي سأعرضها هي ميزة بسيطة ولطيفة لتحسين جودة العمل.
00:07:35هل كان لديك يومًا خاصية (prop) حيث القيمة التي تمررها إليها لها نفس اسم تلك الخاصية،
00:07:40الأكثر شيوعًا في شيء مثل دالة on-change؟
00:07:42حسنًا، مع TSRX يمكنك كتابة هذا كاختصار،
00:07:45على غرار ما يمكننا فعله مع كائنات جافا سكريبت.
00:07:47إنه نظيف وبسيط.
00:07:49لذا بشكل عام، يبدو أن TSRX يحاول دمج تدفق جافا سكريبت العادي مرة أخرى في JSX
00:07:53ويضيف أيضًا القليل من تحسينات جودة العمل،
00:07:55وأنا أحب الكثير من عناصره.
00:07:57أعتقد بصدق أن مشكلتي الرئيسية معه هي أنه متخصص للغاية وجاء متأخرًا جدًا
00:08:01في وقت يكتب فيه الذكاء الاصطناعي معظم التعليمات البرمجية الخاصة بنا،
00:08:03والكود الذي يجيد الذكاء الاصطناعي كتابته يبدو أنه JSX و React.
00:08:07ومع ذلك، فقد جربت بعض الأمثلة على Claude باستخدام TSRX،
00:08:10وقد تمكن من كتابتها بشكل جيد فقط بناءً على ملف LLM.txt الخاص بالموقع،
00:08:14ولكني ما زلت أعتقد أنني سألتزم بـ React العادية بنفسي.
00:08:17الجانب السلبي الآخر هو أنه يبدو، خاصة بالنسبة لـ React،
00:08:19أن هذا يضيف المزيد من سحر المترجم في الأعلى،
00:08:21كما أنه يكسر التدفقات التي قضيت سنوات في تعلمها،
00:08:24لذا فهو ليس لي شخصيًا، ولكن هذا لا يعني أنه سيئ.
00:08:27أعتقد أن الأشخاص القادمين من Svelte قد يعجبهم هذا كثيرًا،
00:08:30وإذا كنت قد استخدمت Ripple بالفعل، فمن المحتمل أنك تحبه بالفعل.
00:08:33لذا أخبروني في التعليقات أدناه إذا كنتم تفعلون ذلك،
00:08:35وأثناء وجودكم هناك اشتركوا، وكالعادة، نلتقي في الفيديو القادم.
00:08:40[موسيقى]
Community Posts
No posts yet. Be the first to write about this video!
Write about this video