00:00:00أهلاً بالجميع! مرحباً بكم في جلسة مجتمع Basel أخرى.
00:00:29أنا مايا أفيندانو، مهندسة تجربة المطورين هنا في Basel.
00:00:32إذا كانت هذه هي المرة الأولى التي تحضرون فيها إحدى جلساتنا ولا تستطيعون رؤية الدردشة،
00:00:35فلا تترددوا في الانضمام إلينا عبر منصة المجتمع على [community.basel.com/live](https://www.google.com/search?q=https://community.basel.com/live).
00:00:41هناك يمكنك استخدام الدردشة وطرح الأسئلة، وهو أمر نشجع عليه بشدة بالمناسبة.
00:00:45أو إذا كنتم تشاهدوننا على منصة X أو أي منصة أخرى، فلا تترددوا في استخدامها أيضاً.
00:00:49أما بالنسبة لجلسة اليوم، فأنا أتطلع إليها حقاً، لأنني - حقيقة ممتعة -
00:00:53كنت مطورة Svelte لعدة سنوات وقمت ببناء العديد من المشاريع الجانبية باستخدامه.
00:00:58لذا أنا معجبة كبيرة به، حتى أنني أملك القميص الخاص به.
00:01:01لذا، لزملائي محبي Svelte والمهتمين بالتعرف عليه،
00:01:06لدينا بعض أعضاء فريق Svelte هنا اليوم. لذا أهلاً بكم.
00:01:12مرحباً. أهلاً بالجميع! هل تودون إخبارنا قليلاً عن أنفسكم؟
00:01:21بالتأكيد، اسمي ريتش.
00:01:24أعمل على Svelte منذ 10 سنوات لأنني بدأت المشروع في عام 2016.
00:01:32في البداية، كان الهدف هو استخدامه في عملي اليومي كصحفي، في مجال الصحافة المرئية،
00:01:38باستخدام JavaScript للمساعدة في سرد الأخبار. ثم منذ أربع سنوات ونيف،
00:01:44انتقلت إلى Basel وأصبح عملي بدوام كامل، وأنا مستمر فيه منذ ذلك الحين.
00:01:53أعتقد أنه لا يوجد أحد آخر يمكنه ادعاء امتلاك سنوات خبرة مثلك.
00:01:57أعتقد أن لدي حوالي خمس سنوات كمطور وصيانة لـ Svelte.
00:02:02اسمي سيمون. أنا أيضاً أعمل في Basel على Svelte
00:02:08وقد تعرفت على Svelte من خلال “هاكاثون” في شركتي السابقة.
00:02:13كنت أرغب في تجربة شيء آخر. في ذلك الوقت، كنت أعمل بشكل أساسي على Angular.
00:02:18استخدمت Svelte في الهاكاثون، ووقعت في حبه فوراً، لكني عرفت أيضاً،
00:02:22“حسناً، لا يمكنني استخدام هذا في عملي اليومي، فكيف يمكنني البقاء على اتصال بـ Svelte؟”
00:02:29أعلم أن هذا يبدو مهووساً جداً بالبرمجة. وهكذا أصبحت مطور صيانة بدوام جزئي.
00:02:34وبعد بضع سنوات، أتيحت لي الفرصة للانضمام إلى Basel للعمل عليه بدوام كامل.
00:02:39ونعم، أنا سعيد بذلك منذ ذلك الحين.
00:02:43أنا إليوت. وكما أحب أن أذكر ريتش بين الحين والآخر،
00:02:46لقد تخرجت من المدرسة الثانوية في العام الذي بدأ فيه ريتش مشروع Svelte.
00:02:49لذا لم أكن موجوداً في مجال التطوير والصيانة لفترة طويلة.
00:02:54لكني بدأت، لا أتذكر إن كان ذلك في أواخر 2021 أم أوائل 2022.
00:02:59في وقت ما خلال النسخة التجريبية لـ SvelteKit، وجدت وانضممت إلى مجتمع Svelte.
00:03:04ثم انتهى بي الأمر بالعمل في Vercel بعد فترة وجيزة من انضمام ريتش، على ما أذكر.
00:03:09كان ذلك في خريف نفس العام، إذا كنت أتذكر بشكل صحيح.
00:03:12لكني عملت على الكثير من الأشياء الأخرى المتعلقة بموقع Vercel الإلكتروني.
00:03:16ثم بشكل مفاجئ الآن، منذ عام وبضعة أشهر - يبدو الوقت أقصر من ذلك بكثير -
00:03:23تمكنت من الانتقال إلى فريق Svelte. لذا أعمل عليه بدوام كامل منذ ذلك الحين.
00:03:27أعتقد أن الشيء الرائع مؤخراً هو أنني تمكنت من كتابة تنفيذ الـ SSR غير المتزامن لـ Svelte.
00:03:36هذا النوع من الأشياء هو مجرد أمور برمجية تقنية معقدة أحبها
00:03:43ولطالما أحببتها في Svelte.
00:03:48مذهل. يسعدنا جداً وجودكم جميعاً هنا.
00:03:51ولمن هم من جمهورنا الذين قد لا يكونون مطلعين، هل يمكنكم شرح Svelte و SvelteKit باختصار؟
00:04:00يمكننا بالتأكيد محاولة ذلك. Svelte هو، حسناً، إنه أشياء كثيرة.
00:04:04إنه مجتمع، وطريقة حياة، ولكنه أيضاً إطار عمل للمكونات التصريحية.
00:04:11إذا كنت قد استخدمت أدوات مثل React و Vue وما شابه، فأنت على دراية بالمفهوم الأساسي
00:04:15وهو أنه بدلاً من كتابة “document.createElement” وتحديد الخصائص وكل ذلك،
00:04:21فإنك تصف تطبيقك من حيث المكونات التصريحية.
00:04:25ثم تقع على عاتق إطار العمل مهمة أخذ ذلك القصد التصريحي وترجمته إلى ما يظهر بالفعل على الشاشة.
00:04:33يختلف Svelte قليلاً عن تلك الأطر في أنه يعتمد على تصميم “المترجم أولاً”.
00:04:40في الأساس، هو لغة يتم تحويلها إلى JavaScript خام عالية الأداء جداً.
00:04:48من حيث الاستخدام، فهو مشابه جداً للكثير من الأطر الأخرى، ولكن بسبب تصميمه،
00:04:53نتمكن من القيام بالأشياء بطريقة ألطف وأكثر إيجازاً بقليل من بعض الأطر الأخرى.
00:04:58وبالإضافة إلى Svelte، الذي يمثل طبقة الأساس إذا جاز التعبير،
00:05:02لدينا إطار العمل هذا الذي يعلو Svelte ويسمى SvelteKit،
00:05:08وهو، إذا كنت مطلعاً على عالم React، يشبه إلى حد ما Next.js الخاص بنا.
00:05:13وهو يضيف كل الأشياء الأخرى: التوجيه، وتصيير جانب الخادم، وتحميل البيانات وأداة البناء
00:05:18وكل الأشياء التي تحتاجها إذا كنت تبني تطبيقاً، ولكنك لا تريد حقاً
00:05:24عناء بنائها بنفسك.
00:05:28رائع، شكراً جزيلاً لكم.
00:05:29وقد كنتم مشغولين بالتحضير لبعض الأمور خلف الكواليس أيضاً.
00:05:32وأود معرفة المزيد عما كنتم تفعلونه خلال الأشهر القليلة الماضية.
00:05:37سمعت أن لديكم بعض العروض التوضيحية أيضاً؟
00:05:41لدينا بعض العروض التوضيحية بالفعل.
00:05:43أعني، هل يجب أن أبدأ أنا؟
00:05:44لأنني أعتقد من حيث التسلسل، سيكون من المنطقي أكثر التحدث عن تطوير Svelte غير المتزامن،
00:05:51ثم يمكننا الانتقال إلى الأشياء التي نبنيها فوق ذلك.
00:05:55يبدو هذا جيداً.
00:05:55حسناً، طوال العام الماضي أو أكثر ربما، لست متأكداً تماماً.
00:06:02كنا نعمل على ما نسميه بشكل فضفاض Svelte غير المتزامن (Async Svelte)، وربما إذا شاركت شاشتي،
00:06:12يمكنني تقديم عرض بسيط لماهية ذلك، ثم ننتقل إلى بعض استخدامات Async Svelte.
00:06:20عليّ فقط أن أتذكر أين يوجد زر مشاركة الشاشة.
00:06:26والمرور عبر كل حوارات الأذونات.
00:06:28تحملوني قليلاً.
00:06:30مشاركة الشاشة بأكملها.
00:06:33هكذا.
00:06:34حسناً، أعتقد أنني أشارك شاشتي الآن.
00:06:35هل أشارك شاشتي، أم أنها لا تزال في الكواليس؟
00:06:38نعم، نحن نراها.
00:06:40حسناً، لغير المطلعين، هذا هو موقع Svelte.dev.
00:06:43هذا هو موقعنا الإلكتروني.
00:06:44وهذه هي “ساحة التجربة” (Playground) حيث يمكنك تجربة Svelte دون الحاجة لتثبيت أي شيء
00:06:49أو العبث بسطر الأوامر.
00:06:51يمكنك فقط كتابة الكود مباشرة هنا.
00:06:53وهذه هي ساحة التجربة الافتراضية التي تظهر لك.
00:06:55ربما سأقوم بتكبيرها قليلاً لكي يتمكن الجميع من الرؤية.
00:06:58هنا لدينا بعض الحالات (state).
00:07:03هذه الأشياء الغريبة، تسمى “Runes”.
00:07:05هذه هي الطريقة التي توضح بها أن شيئاً ما في مكون Svelte سيتغير،
00:07:10وأنه عندما يتغير، سنحتاج إلى إعادة التصيير.
00:07:12لدينا اسم (name)، ولدينا عداد (count).
00:07:15وبعد ذلك نقوم بعرض ذلك الاسم هنا في الأعلى.
00:07:17ثم نربط قيمته بمحتويات هذا العنصر.
00:07:21لذا يمكننا فعل ذلك.
00:07:24ويمكننا النقر على هذا الزر، وسيجعل الأرقام تزداد.
00:07:27كل هذه أمور مباشرة جداً يمكن لأي إطار عمل
00:07:29القيام بها بشكل أو بآخر.
00:07:35ما يضيفه Async Svelte هو القدرة على استخدام الكلمة المفتاحية “Await” مباشرة
00:07:41داخل مكوناتك.
00:07:45لنفترض-- دعونا نتخلص من الاسم وكل هذه الأشياء.
00:07:49ولنحول هذا إلى معرف (ID) ونبدأ من الرقم واحد.
00:07:56وما سأفعله هو جلب بعض بيانات JSON
00:08:01من مصدر خارجي.
00:08:04سأبدأ بإنشاء شيء مشتق من المعرف (ID).
00:08:10لذا سيتم حساب رابط URL هذا كلما تغير ذلك المعرف.
00:08:16ويمكنكم رؤية أنني إذا وضعت URL هنا، فبينما يتغير هذا،
00:08:22يتغير الرابط أيضاً.
00:08:24ثم سأحصل على بعض البيانات باستخدام ذلك الرابط،
00:08:28بياناتي تساوي derived.
00:08:30وبداخل هنا، يمكنني كتابة Await fetch URL.
00:08:36ثم نريد أخذ الاستجابة وتحويلها إلى JSON.
00:08:41أنا متأكد أن الجميع قد رأى هذا النوع من الأشياء
00:08:43مليون مرة إذا كنت تعمل في مجال التطوير.
00:08:47وبعد ذلك هنا في الأسفل، لننشئ اقتباساً (block quote)
00:09:00ونعرض البيانات التي نجلبها من هنا.
00:09:03لذا يمكنكم أن تروا أننا إذا نظرنا فعلياً إلى--
00:09:06هذا معطل.
00:09:13هذا ما سنحصل عليه، ونريد أن نتمكن من عرضه.
00:09:16لذا بداخل هنا، سأكتب data.quote بهذا الشكل.
00:09:21أوه، هناك شيء معطل.
00:09:23سيمون، إليوت، إذا رأيتم ما قمت بتعطيله، فأخبوني.
00:09:28أوه لا، إنه مجرد التأخير.
00:09:30حسناً.
00:09:31وبعد ذلك سنضيف صاحب الاقتباس.
00:09:40وربما سنتخلص من هذا التأخير بينما نعمل عليه.
00:09:44لا أعلم.
00:09:46سيكون من المفيد لو وضعت ذلك بين أقواس معقوفة.
00:09:50والآن إذا نقرت على هذا، فسيختفي،
00:09:55وسيجلب بعض البيانات الجديدة، ويقوم بتصييرها.
00:09:58قد يبدو ذلك بسيطاً جداً وبديهياً،
00:10:01لكن إذا نظرت إلى كيفية القيام بذلك في
00:10:08كل إطارات العمل الأخرى تقريباً، فستجده يصبح معقداً بشكل مخيف.
00:10:10يجب أن يكون لديك حالة محلية، ثم
00:10:13يجب أن يكون لديك تأثير (effect)، والذي قد يكون
00:10:16useEffect أو ما يعادلها في الأطر الأخرى، حيث تقوم بعملية الجلب (fetch).
00:10:20وعندما يكتمل الجلب، تقوم بالتعيين لتلك الحالة المحلية،
00:10:25وعليك معالجة الأخطاء وكل تلك الأمور.
00:10:27ويصبح الأمر معقداً للغاية بالفعل.
00:10:32ولكن مع هذا، فإنه يعمل ببساطة.
00:10:36وإذا كان هناك تأخير--
00:10:43فإنه يستمر في العمل.
00:10:45على الرغم من أنك قد ترى ذلك وتفكر، انتظر لحظة،
00:10:46إذا كنت أنقر على الزر عدة مرات،
00:10:49فأنا أريد فقط الانتقال إلى النتيجة النهائية.
00:10:51لا أريد القيام بكل تلك الأشياء في المنتصف.
00:10:53لذا يمكننا فعل ذلك أيضاً.
00:10:54يمكننا القول بداخل هنا، إذا قمت باستيراد هذه الأداة المساعدة المسمى
00:10:58get abort signal from self، ثم مررت تلك الإشارة إلى عملية الجلب،
00:11:11هذه المرة، عندما أنقر على الزر،
00:11:15سيتجاهل فعلياً كل تلك الطلبات المتوسطة
00:11:19وينتقل مباشرة إلى الطلب الأخير،
00:11:21لأن تلك الطلبات السابقة تكتمل بعد فوات الأوان.
00:11:26وبحلول ذلك الوقت، نكون قد غيرنا المعرف مرة أخرى.
00:11:28لذا نحن نلغي الإشارات الحالية.
00:11:33حسناً، ماذا يمكننا أن نفعل أيضاً؟
00:11:34حسناً، ربما أريد رؤية هذا الزر يتحدث فوراً.
00:11:38لذا يمكننا كتابة state.eager للخروج
00:11:43من حالة الانتظار غير المتزامن.
00:11:47هذا مفيد أيضاً نوعاً ما.
00:11:49ويمكننا إضافة بعض التنسيقات.
00:11:51يمكننا القول أن تحميل البيانات يساوي effect.pending
00:11:58أكبر من 0.
00:11:59وبعد ذلك إذا كنا في حالة تحميل،
00:12:04يمكننا جعلها تتلاشى (fade out) بينما نقوم بتحميل الأشياء.
00:12:11وهذا مرة أخرى، كله أشياء لو كنت
00:12:13تحاول تنسيقها بنفسك
00:12:15لكانت صعبة للغاية.
00:12:17يمكننا الذهاب إلى أبعد من ذلك.
00:12:19لنفترض أنني أريد إضافة صورة لتتماشى مع الاقتباس.
00:12:28قد يبدو الأمر هكذا.
00:12:37إذا قمت بتغييره، فسأحصل على
00:12:41مجموعة من الصور المختلفة.
00:12:42على ما يبدو، كلها لأجهزة كمبيوتر محمولة، لست متأكداً لماذا.
00:12:46حسناً، هذه صورة أجمل.
00:12:48رغم ذلك، ستلاحظون أن هناك
00:12:50تأخيراً بسيطاً هناك.
00:12:52نحصل على بيانات الاقتباس، ثم تظهر الصورة فجأة.
00:12:57لأننا نقوم بتصيير الصورة،
00:12:58ثم نضطر للعودة إلى الشبكة
00:12:59لجلب الصورة، وهذا ليس جيداً.
00:13:02لذا إذا استبدلنا ذلك بأداة تحميل مسبق (preload)
00:13:07بسيطة، سأقوم باستيرادها من وحدة المرافق الخاصة بي،
00:13:17فسنرى هذه المرة أن الصورة والاقتباس
00:13:24كلاهما يظهران في نفس الوقت.
00:13:27لقد كشفت للتو عن خطأ برمجى صغير.
00:13:28سيتعين علينا الذهاب وإصلاحه.
00:13:30لكنكم فهمتم الفكرة.
00:13:31يمكننا استخدام “await” داخل حساباتنا،
00:13:34ويمكننا استخدامه داخل القالب الخاص بنا.
00:13:36وكل هذه الأشياء منسقة تماماً
00:13:40بطريقة تعمل مع مكونات متعددة،
00:13:44كلها تقوم بعملها بشكل مستقل استجابة لنفس الأحداث.
00:13:47إنه يعمل مع تصيير جانب الخادم (SSR).
00:13:49إنه يفعل كل هذه الأشياء التي لو
00:13:52كان عليك فعلها بدون Svelte غير المتزامن
00:13:55لكانت مؤلمة للغاية.
00:13:58ومع هذا الأساس، نحن قادرون على بناء
00:14:02بعض الأشياء الرائعة حقاً، والتي سأترك المهمة
00:14:05للزميلين الآخرين للتحدث عنها.
00:14:09نعم.
00:14:10سأقوم بتقديم عرض سريع للوظائف عن بُعد (remote functions)، والتي
00:14:17والتي سيتم بناؤها فوق هذا الأساس.
00:14:19والآن بعد أن أصبح لدينا ميزة العمل غير المتزامن في Svelte، أصبح الأمر قويًا حقًا.
00:14:24لكن SvelteKit، وهو إطار العمل الفوقي المبني عليه،
00:14:27لا يزال يعمل وفق الأسلوب القديم، إن جاز التعبير.
00:14:30لدينا وظائف التحميل هذه التي تعيش في ملف مختلف.
00:14:34ومع ذلك، لا يمكننا حقًا الاستفادة من كل هذه
00:14:38الأشياء الجديدة والرائعة التي رأيناها للتو.
00:14:41لذا فإن ما نعمل عليه الآن هو الوظائف عن بُعد (Remote Functions).
00:14:45وهي متوفرة بالفعل في SvelteKit.
00:14:48إنها تجريبية، ولكن يمكنك استخدامها بالفعل.
00:14:50وسأعرض الآن أبسط طريقة ممكنة
00:14:55لاستخدام الوظائف عن بُعد هنا، اختصارًا للوقت.
00:14:59لذا سأقوم فقط
00:15:01بإنشاء عداد بسيط جدًا حيث
00:15:04كلما نقرت على الزر، سيتم زيادة العدد،
00:15:08لكن قيمة العداد ستكون موجودة على الخادم.
00:15:10وسأقوم بتنفيذ هذا في ملف counter.remote.ts.
00:15:16سأبدأ بمتغير القيمة (count).
00:15:18ثم سأكتب وظيفة جلب القيمة (get count).
00:15:20وسنستخدم استعلامًا من مسار app/server$.
00:15:26وهذا استعلام عن بُعد.
00:15:29وسنقوم فقط بإرجاع قيمة العداد هنا.
00:15:31وعلى الجانب الآخر، يمكننا الاستفادة من ذلك
00:15:37وقول: انتظر جلب القيمة من الملف الذي استوردناه للتو.
00:15:44عملية الاستيراد هذه تبدو كاستيراد عادي في TypeScript.
00:15:48الفكرة هي أننا نستورد وظيفة،
00:15:52ثم نستدعيها، وهي تعيد لنا "وعدًا" (promise).
00:15:54لذا نستخدم كلمة الانتظار (await).
00:15:56لكن في الحقيقة، هذا يتجاوز الحدود بين العميل والخادم.
00:16:01فوظيفة جلب القيمة هذه تعيش فعليًا على الخادم.
00:16:05ما يحدث حقًا هو أن العميل
00:16:08يرسل طلبًا إلى نقطة نهاية مخفية
00:16:14ويستعيد البيانات من هناك.
00:16:17وبالطبع، يدعم هذا أيضًا التقديم من جانب الخادم (SSR).
00:16:19لذا عند التحميل الأولي، لن يطلب البيانات من الواجهة الخلفية،
00:16:23بل سيفعل ذلك مباشرة.
00:16:25الآن لدينا هذه القيمة، لكن لا يمكننا فعل شيء بها بعد.
00:16:29نريد زيادتها.
00:16:29وهذا سيكون دور وظيفة أخرى عن بُعد.
00:16:31سنقوم بتنفيذها بسرعة كبيرة - بدون مساعد الكود (Copilot).
00:16:34هذا هو الأمر الخاطئ.
00:16:38نريد أمراً برمجياً من مسار app/server$.
00:16:40وهنا، سنقوم فقط بتحديث حالة الخادم.
00:16:45وهذا بحد ذاته لن يساعد بعد،
00:16:49لأننا نحتاج أيضًا لإخباره، بما أنه أمر برمجي،
00:16:52بأن يرسل تحديثًا مع العملية.
00:16:55لذا سنقوم باستدعاء وظيفة جلب القيمة الخاصة بنا،
00:16:58ونستدعي عليها أمر التحديث (refresh).
00:17:03وبهذا، نحن نخبره أساسًا بـ:
00:17:05"قم بإجراء تعديل في رحلة واحدة".
00:17:08عند استدعائك، قم بزيادة العداد بواحد،
00:17:10ثم أرسل المعلومات مرة أخرى إلى العميل
00:17:14بأنه متى ما استُخدمت وظيفة جلب القيمة في هذه الصفحة،
00:17:19يجب أن تزداد الآن بواحد،
00:17:22وأن هناك حالة جديدة متاحة.
00:17:24وإذا أضفت هذا هنا الآن،
00:17:27سأقوم بعمل حدث "عند النقر" لزيادة العداد فقط.
00:17:29هذا كل ما سأفعله.
00:17:37يبدو كاستدعاء وظيفة عادية.
00:17:38ولكن مرة أخرى، هذا يستدعي الخادم فعليًا.
00:17:40والآن عندما أنقر على هذا، أقوم بزيادته.
00:17:43كانت هذه لمحة سريعة ومختصرة جدًا
00:17:49عن الوظائف عن بُعد.
00:17:53يمكنكم بناء الكثير من الأشياء بها.
00:17:55كما أنها تعمل بشكل رائع مع الذكاء الاصطناعي.
00:17:58على سبيل المثال، قبل خمس دقائق من بدء الجلسة،
00:18:01سألت مساعد الكود: "مرحبًا، ابنِ لي
00:18:06مدونة بسيطة بسمة لعبة Portal حيث
00:18:12أريد استعراض بعض الوظائف عن بُعد.
00:18:18ويجب أن تستخدم Svelte 5 مع بروتوكول MCP."
00:18:20سيتحدث إليوت عن ذلك قليلاً بعد قليل.
00:18:25استخدم ذلك واستخدم الوظائف عن بُعد والعمل غير المتزامن.
00:18:29وقد قام بإنجازها من المحاولة الأولى.
00:18:32هذا مقدم مسبقًا (Pre-rendered)؛
00:18:34المدونة مقدمة مسبقًا.
00:18:35ويمكنني الآن الكتابة هنا—
00:18:37سأحفظها هنا.
00:18:42وسيتم تحديثها.
00:18:43وفي الخلفية، يقوم هذا بنفس الشيء تقريبًا.
00:18:49بالنظر سريعًا إلى هذا،
00:18:53نحن نستخدم انتظار جلب المنشورات (get posts).
00:18:56وظيفة جلب المنشورات هي وظيفة تقديم مسبق،
00:18:59مما يعني أنها تُنفذ وقت البناء بدلاً
00:19:01من وقت التشغيل.
00:19:05لدينا قسم للتعليقات بالأسفل هنا
00:19:06حيث نقوم بتحميل التعليقات ونستخدم نموذجاً (form)
00:19:12لإرسال تعليق جديد وهكذا.
00:19:15وكل هذا يستخدم الوظائف عن بُعد، ولا توجد
00:19:19وظائف تحميل (load functions) في أي مكان.
00:19:23والذكاء الاصطناعي أنجز هذا من محاولة واحدة.
00:19:24وسيتحدث إليوت عن ذلك بمزيد من التفصيل
00:19:27الآن على ما أعتقد.
00:19:32أجل، يبدو رائعاً.
00:19:34عليّ أن أقوم بنفس ما فعله ريتش هاريس
00:19:37في البداية بخصوص مشاركة الشاشة.
00:19:41حسناً، ها قد بدأت.
00:19:46سآخذ دقيقة لأحدثكم عن تطويرات
00:19:52الذكاء الاصطناعي التي قمنا بها مؤخرًا.
00:19:57وعندما أقول "نحن"، أريد أن أكون واضحًا أنني لا أقصد نفسي.
00:19:59أقصد غالبًا شخصًا يدعى باولو وبعض
00:20:02المساهمين الآخرين في Svelte.
00:20:06في الواقع، معظم الأشياء المتعلقة بالذكاء الاصطناعي التي قمنا بها مؤخرًا
00:20:09كانت من مجهودهم.
00:20:13لذا شكرًا جزيلاً لهم.
00:20:14لقد قاموا بعمل مذهل.
00:20:15نعم، دعوني أقوم بالتكبير هنا من أجلكم.
00:20:18ها قد فعلنا.
00:20:24يمكنني قضاء وقت طويل في شرح
00:20:27ما بنيناه لنتمكن من القيام بذلك
00:20:28لأن لدينا خادم MCP.
00:20:31ويحتوي على بعض الوظائف الرائعة حقًا.
00:20:32لدينا بعض المهارات التي قمنا بنشرها.
00:20:36ولكن لحسن الحظ، لست مضطرًا حقًا
00:20:38لمعرفة كيفية عمل كل ذلك بالتفصيل
00:20:41لأننا نشرنا أيضًا ملحقات (plugins)
00:20:43لكل من Open Code و Cloud Code.
00:20:47سأقوم بتثبيت ملحق Open Code هنا، والذي
00:20:48يعني ببساطة نسخ هذا الإعداد
00:20:52ثم وضعه في ملف Open Code.json
00:20:55داخل مكتبتك.
00:20:58وسأطلب من Open Code بناء موقع لي باستخدامه.
00:21:00وسنرى كيف ستسير الأمور.
00:21:06سأطلب منه الآتي:
00:21:10لقد وفرت بعض الصور في الأصول (assets).
00:21:11دعوني أكبر هذا لكم أيضًا، لسوء الحظ.
00:21:17للأسف، لا يبدو أنني أستطيع تكبيره لكم.
00:21:28ها قد نجحت.
00:21:34حسناً.
00:21:34[كتابة]
00:22:00وسنرى ماذا سيحدث بعد ذلك.
00:22:06بدون أخطاء.
00:22:09نعم، بالضبط.
00:22:11هذا مهم جداً.
00:22:12إذا لم تضع ذلك في نهاية أوامرك (prompts)،
00:22:13فلن تعمل بنفس الكفاءة.
00:22:15ولكن بينما يحدث هذا، يمكنني إطلاعكم
00:22:18قليلاً على ما كانوا يعملون عليه.
00:22:21إذا دخلت إلى موقع Svelte
00:22:25وانتقلت إلى وثائق الذكاء الاصطناعي، ستحصل على نظرة عامة شاملة.
00:22:28لقد نشرنا MCP، وله أدوات واجهة سطر أوامر خاصة به.
00:22:32ويحتوي على عدد من—
00:22:36أوه، لقد قام بإصلاح هذا خلال الخمس دقائق الماضية.
00:22:40لذا يبدو مختلفًا عما كان عليه قبل خمس دقائق.
00:22:43ولكن لدينا عدة أدوات يفعّلها على جهازك.
00:22:46ومعظمها يتعلق بـ—
00:22:51أو أول أداتين تتعلقان بالحصول على معلومات دقيقة
00:22:53حول Svelte.
00:22:58فهو يعلّم وكيلك البرمجي كيفية قراءة الوثائق
00:22:58وتحديدًا قراءتها بطريقة تمكنه
00:23:03من الحصول على المعلومة المحددة التي
00:23:05يبحث عنها دون الحاجة لتحميل الوثائق بالكامل
00:23:08أو استكشافها وإهدار الوقت
00:23:11وسياق الذاكرة وكل ذلك.
00:23:12وهناك أيضًا أداة الإصلاح التلقائي لـ Svelte المذهلة
00:23:15التي قاموا ببرمجتها والتي تلاحظ الأنماط
00:23:17التي تميل نماذج اللغة لاستخدامها وهي ليست جيدة، فتقوم بإصلاحها.
00:23:21كما أنها توفر تكاملاً مع منطقة التجارب الخاصة بنا (Playground)
00:23:26والتي يمكنك استخدامها هنا مباشرة.
00:23:33والشيء الرائع الآخر لدينا هو
00:23:37أن أحد قراراتنا التصميمية الأساسية
00:23:39عندما ننظر إلى كل أمور الذكاء الاصطناعي هذه
00:23:44هو كيف نجعل هذا مفيدًا للوكلاء البرمجيين والبشر على حد سواء؟
00:23:46لا نريد أن يكون هذا شيئًا غامضًا
00:23:52حيث يعرف وكيلك البرمجي الأشياء بشكل سحري
00:23:55بينما لا تعرفها أنت، ويكون من الصعب فهمها.
00:23:59لذا فكل ما نفعله تقريبًا،
00:24:00نحاول دمجه في الوثائق الرسمية أيضًا.
00:24:01ولهذا فإن المهارات التي نشرناها،
00:24:04والتي تعد جزءًا من ملحقات Open Code أو Cloud Code
00:24:07عند تثبيتها، تقوم في الواقع
00:24:09بنشر كل محتواها في الوثائق أيضًا.
00:24:12لذا يمكنك دائمًا أن تعرف
00:24:15أفضل الممارسات التي نخبر بها نموذج لغتك،
00:24:18حيث يمكنك قراءتها بنفسك.
00:24:20وستكون متوفرة دائمًا على موقعنا بهذا الشكل.
00:24:25لنعد الآن ونرى مدى التقدم
00:24:27الذي أحرزته هذه الأداة.
00:24:31ليس كثيرًا حتى الآن.
00:24:34ربما أحرزت الكثير فعليًا.
00:24:35نعم، نرى الكثير من عمليات التنسيق تجري.
00:24:39أعتقد أنني سأفتح المستضيف المحلي الخاص بي (localhost)
00:24:45لأرى ما الذي أنجزته.
00:24:56لا شيء.
00:25:00حسنًا، لا أريد أن أؤخركم” بينما
00:25:03لا تزال الأداة تفكر في عمليتها بالكامل.
00:25:07قد يستغرق الأمر بعض الوقت.
00:25:10لذا إذا توفر لدينا وقت في النهاية، يمكننا العودة
00:25:12لنرى ما ابتكره نموذج اللغة لمشروعنا
00:25:13المتعلق ببيع مدافع البطاطس اليدوية.
00:25:15ولكن نعم، هذا هو تطوير الذكاء الاصطناعي الذي قمنا به
00:25:19خلال الأشهر القليلة الماضية.
00:25:20رائع.
00:25:25نعم، هذا مهم جدًا في العصر الجديد.
00:25:26أود حقًا أن أعرف ما هي الخطوة التالية.
00:25:32ما الذي تتطلعون إليه يا رفاق؟
00:25:37الإصدار القادم سيكون Svelte Kit 3.
00:25:40نحن نعمل عليه بنشاط في الوقت الحالي.
00:25:46لكنه لن يكون تحديثًا ضخمًا
00:25:51بميزات جديدة كثيرة.
00:25:53هو أساسًا فرصة للتخلص من
00:25:56بميزات جديدة كثيرة.
00:25:57إنها في الأساس فرصة للاستغناء
00:25:59عن الكثير من الأشياء القديمة، وتصفية الأجواء
00:26:02حتى نتمكن من بناء كل الأشياء الجديدة والمثيرة.
00:26:06التغيير الأكبر هو أنها ستستخدم واجهة برمجة تطبيقات البيئة
00:26:09الآن بعد أن تم إصدار V8 قبل ساعتين حرفياً.
00:26:15وسوف تتطلب Svelte 5 كأحدث إصدار." : "وسوف تتطلب Svelte 5 كأحدث إصدار.
00:26:21لذا ستكونون قادرين تماماً على استخدام Svelte 4.
00:26:25وبعد ذلك، سنركز
00:26:29على جعل Svelte غير المتزامنة والوظائف عن بعد مستقرة.
00:26:33يبدو هذا جيداً.
00:26:37وقد سمعت من مصادر غير رسمية أنني
00:26:41سأنقل الكلمة إلى إليوت لأن نموذج اللغة الكبير
00:26:44كان يجهز لشيء ما.
00:26:46هل تريد أن ترينا ما لديك؟
00:26:47وكما تجري الأمور، فقد قرر الانتهاء
00:26:49بعد حوالي ميلي ثانية واحدة من انتقالنا إلى النقطة التالية.
00:26:55لذا لنذهب إلى هنا.
00:26:59نعم، إليكم متجر "مدفع البطاطس الحرفي"
00:27:03الذي حصلنا عليه للتو بنحو دولار واحد من الرموز.
00:27:07وفي الواقع، من خلال نظرة سريعة على الكود،
00:27:13قام بعمل جيد حقاً ولم يفعل أي شيء مجنون
00:27:17واستخدم ما أعتبره أفضل الممارسات لـ Svelte.
00:27:22لذا جربوه.
00:27:25وأخبرونا برأيكم فيه.
00:27:27لقد أعجبت حقاً بالعمل
00:27:29الذي قام به باولو والآخرون في كل ما يخص الذكاء الاصطناعي.
00:27:33ونود الاستمرار في التحسن.
00:27:35لذا زودونا بآرائكم عندما تتوفر لديكم.
00:27:38شكراً.
00:27:40أحببت ذلك، آلهة العروض التجريبية في صفنا اليوم.
00:27:45هل نفتح المجال لبعض الأسئلة؟
00:27:47أعتقد أن لدينا بعض الأسئلة بالفعل في الدردشة.
00:27:51سأبدأ أنا، ما رأيكم؟
00:27:53لدينا سؤال بخصوص الوظائف عن بعد (Remote Functions).
00:27:57هل سنحصل على خاصية البث للوظائف عن بعد؟
00:28:00تجربة المطور مع الوظائف عن بعد رائعة جداً.
00:28:03نريد استخدامها في كل مكان.
00:28:05نعم، أعتقد أن ريتشارد يمكنه الإجابة على هذا
00:28:06لأنك تعمل في هذا المجال.
00:28:10نعم، من المضحك أنك ذكرت ذلك.
00:28:12لأنني أقوم بالفعل ببناء تطبيق في الوقت الحالي
00:28:15يحتاج بشدة إلى هذه الميزة.
00:28:17ونحن - عمل سايمون على طلب سحب (PR) منذ فترة،
00:28:22والذي نفذ أجزاءً منها.
00:28:23لقد كانت لدينا بعض - مثل أفكارنا حول التصميم
00:28:28تطورت قليلاً منذ ذلك الحين.
00:28:31لكنه شيء نحن حريصون جداً على العودة إليه.
00:28:35نعم، ربما لو كنا نفعل هذا بعد أسبوع من الآن،
00:28:40لكنا استطعنا القول: ها هو طلب السحب.
00:28:43لم نصل إلى هناك تماماً بعد.
00:28:44لكن كن مطمئناً، إنها أولوية قصوى جداً.
00:28:47ونحن متحمسون جداً لهذه الميزة.
00:28:49بالنسبة لأولئك الذين ليسوا على دراية، فما نتحدث عنه
00:28:51هو الحصول بشكل أساسي على نسخة في الوقت الفعلي
00:28:55من وظيفة الاستعلام، حيث عندما تطلب
00:28:59البيانات من الخادم، فإنه سيعيد مكرراً غير متزامن (async iterable)،
00:29:04والذي في كل مرة تتوفر فيها بيانات جديدة،
00:29:09سيرسل تلك البيانات مرة أخرى إلى العميل.
00:29:12لذا يمكنك الحصول على بيانات في الوقت الفعلي دون أي نوع من الاقتراع (polling)
00:29:15أو أي شيء من هذا القبيل.
00:29:16وبمجرد أن تتوقف الصفحة عن عرض تلك البيانات،
00:29:21يتوقف الطلب.
00:29:23والمكرر غير المتزامن يقوم بتنظيف نفسه.
00:29:26وهي مجرد طريقة لطيفة حقاً للتفكير
00:29:28في مشاكل الوقت الفعلي هذه.
00:29:31نعم، متحمس جداً لذلك.
00:29:33ولأكون واضحاً تماماً هنا، أريد
00:29:35فقط أن أخبركم أن ما يقصده ريتش بـ "سنصل إليه قريباً"
00:29:38هو أن إليوت يمنعني حالياً
00:29:40من العمل على هذا.
00:29:41وأنا أنتظره لينتهي من شيء ما.
00:29:43لذا بمجرد أن أنتهي مما أعمل عليه الآن،
00:29:45سنباشر العمل عليه.
00:29:46رائع.
00:29:50لدينا سؤال آخر.
00:29:52وهو، لماذا نختار Svelte بدلاً من أطر العمل الأخرى؟
00:29:55من الواضح أننا نعتقد أنه الإطار الأفضل والأكثر قدرة.
00:30:07لكن السبب الحقيقي لاختيار أي إطار عمل
00:30:11في هذا العصر هو لأنك
00:30:13تستمتع به أكثر مما استمتعت بالآخرين، بصراحة.
00:30:18الكثير من الأمر يتعلق بالتفضيل الشخصي
00:30:20أكثر من أي شيء آخر.
00:30:22وخاصة في هذه الأيام، حيث أصبح
00:30:24من السهل حقاً التبديل بين أطر العمل،
00:30:28لديك ساحر سحري تحت تصرفك يمكنه تعليمك كيف—
00:30:32"لقد اعتدت على القيام بذلك بهذه الطريقة في Vue."
00:30:35كيف أفعل ذلك في Angular أو أياً كان؟
00:30:37يمكنهم فعل ذلك.
00:30:38لقد تم تسوية منحنى التعلم بشكل أساسي
00:30:43في هذا العصر.
00:30:45لذا يجب عليك استخدام الأداة التي تكون أكثر إنتاجية معها
00:30:49والتي تكون أكثر سعادة بكونك مستخدماً لها.
00:30:53وجزء من ذلك يتعلق بالمجتمع المحيط بالمشروع.
00:30:57وجزء منه يتعلق بالفلسفة العامة للمشروع.
00:31:02لكن ما لا أعتقد أنك بحاجة لفعله في هذا العصر
00:31:05هو اتخاذ قرار بناءً على أي إطار عمل يمكنه القيام بالمهمة.
00:31:11لأنهم جميعاً يستطيعون القيام بنفس الأشياء،
00:31:13أو أي إطار عمل لديه أكبر نظام بيئي.
00:31:16لأن هذا لم يعد مصدر قلق حقاً.
00:31:18لذا فقط اختر إطار العمل الأكثر متعة.
00:31:21ونحن نعتقد أن هذا الإطار هو بالتأكيد Svelte.
00:31:26إجابة رائعة.
00:31:27أحببتها.
00:31:29بعد ذلك، لدينا شخص يسأل، هل هناك أي شيء جديد يتعلق بالتخزين المؤقت (cache)؟
00:31:35نعم، أعتقد أن هذا يتعلق بالوظائف عن بعد على الأرجح.
00:31:38لذا في سياق الوظائف عن بعد،
00:31:41ليس لدينا أي واجهة برمجة تطبيقات للتخزين المؤقت بعد.
00:31:45هناك مقترح داخلي.
00:31:48إنه قيد العمل حالياً.
00:31:51لقد وُضع جانباً وسط كل الأعمال الأخرى الجارية.
00:31:55لكن سيتم استئنافه قريباً.
00:31:58وبعد ذلك سيكون لدينا واجهة برمجة تطبيقات رائعة حقاً للتخزين المؤقت
00:32:01تتكامل مع الوظائف عن بعد.
00:32:05مذهل.
00:32:06لدينا سؤال خفيف الظل.
00:32:08ما هو الموقع الذي تحلم بإقامة قمة Svelte فيه؟
00:32:10أوه، واو.
00:32:13هل تريدون أن نجيب جميعاً بالدور الآن؟
00:32:16أنت مكتوم الصوت يا إليوت.
00:32:22أعني، إذا كنا نتحدث عن قمم،
00:32:24فلدينا إيفرست، وK2.
00:32:28لا، ولكن بالنسبة لي، الموقع لا يهم كثيراً.
00:32:34لأنني أقضي معظم وقتي
00:32:36مع مطوري Svelte الآخرين.
00:32:38لذا، مهما بدا الأمر مبتذلاً، فإن أي مكان تقريباً سيكون رائعاً.
00:32:43لكن أوروبا رائعة حقاً.
00:32:46لذا أي مكان هناك تقريباً
00:32:48هو مكان لم أزره بعد وأود الذهاب إليه.
00:32:51لذلك يسعدني دائماً وجود عذر للذهاب إلى أي مكان في الخارج.
00:32:56هناك ميل في عالم Svelte
00:33:01لاستخدام البادئة "SV" مع كل شيء.
00:33:04لذا أياً كانت الكلمة التي
00:33:06تحاول بناء مكتبة أو مفاهيم حولها،
00:33:08فأنت تضع SV أمامها فقط.
00:33:11وأعتقد أننا إذا تعمقنا في ذلك حقاً،
00:33:12فسنقوم بعقد مؤتمرنا في سفالبارد (Svalbard).
00:33:15جميل.
00:33:20وهي عبارة عن— أرخبيل نرويجي.
00:33:23هل بحثت عن ذلك في جوجل للتو؟
00:33:27في الواقع وردت في المحادثة في اليوم الآخر.
00:33:31نعم، بشكل عشوائي.
00:33:35نعم.
00:33:38لذا إذا كان بإمكاني الحلم تماماً، أعتقد أن موقع أحلامي
00:33:41سيكون على متن قارب، في الواقع.
00:33:45فقط في عرض البحر.
00:33:47طقس لطيف.
00:33:49وقضاء، لا أعرف، ثلاثة أيام على متن قارب.
00:33:52سيكون ذلك رائعاً.
00:33:55كل ما سبق يبدو جميلاً.
00:33:57وأنا متحمس جداً لموعد قمة Svelte القادمة.
00:34:00وبالحديث عن المجتمع والفعاليات،
00:34:03لدينا سؤال يقول، كيف يمكن للناس
00:34:05المشاركة في Svelte، هل هناك أي فعاليات أو فرص
00:34:07مجتمعية؟
00:34:11هناك فعاليات تقام طوال الوقت.
00:34:13إذا ذهبت إلى sveltesociety.dev، فستتمكن
00:34:15من رؤية تقويم الفعاليات.
00:34:16وهناك أيضاً الكثير من المصادر حول أفضل الطرق
00:34:19للمشاركة، خاصة إذا لم يكن هناك شيء
00:34:22في منطقتك وكنت مهتماً ببدء
00:34:25فرع لجمعية Svelte، فإن sveltesociety.dev
00:34:28هو المكان المناسب للحصول على المعلومات.
00:34:33نعم، وأيضاً، إذا كنت جديداً تماماً، انضم إلى Discord
00:34:36وقل مرحباً في إحدى القنوات المتنوعة.
00:34:41هناك أيضاً قنوات مخصصة لمختلف الفروع
00:34:47أو المواقع المحلية.
00:34:49في الغالب، هي إشارات إلى قنوات Discord أخرى
00:34:55باللغة المعنية.
00:34:57فعلى سبيل المثال، هناك أيضاً قناة Discord لجمعية Svelte الألمانية.
00:35:00قناة.
00:35:01لذا نعم، فقط انضم إلى القناة وقناة Discord،
00:35:06ويمكنك الانطلاق من هناك.
00:35:08وخلاف ذلك، فإن القناة المتعلقة بـ Svelte
00:35:12هي أيضاً مكان جميل لقضاء الوقت.
00:35:16نعم، القائمون على Svelte أشخاص رائعون.
00:35:18لذا نعم، اذهب وتعرف عليهم.
00:35:22لدينا سؤال آخر يتعلق بالذكاء الاصطناعي.
00:35:24أعلم، يا إيليا، أنك تحدثت عن هذا.
00:35:26سأل أحدهم: من الرائع أن نرى أطر العمل تتكيف
00:35:29مع عالم الوكلاء والذكاء الاصطناعي.
00:35:31أنا فضولي لمعرفة ما إذا كان لديكم إحصائيات حول الوكلاء الذين يختارون Svelte بشكل افتراضي.
00:35:36لا، ليس حقاً.
00:35:37قد نتمكن من الحصول على نوع من الإشارات
00:35:44لذلك من خلال شيء مثل v0، حيث
00:35:46نرى قياسات التتبع (telemetry) من هذا القبيل.
00:35:49لكن Svelte بشكل عام لديها—
00:35:53أفترض أنني أقول Svelte— الأشخاص الذين يعملون على Svelte
00:35:57اتخذوا نهجاً سلبياً نسبياً
00:36:01تجاه جمع بيانات التتبع عن الأشياء.
00:36:06لذا، تقريباً، البيانات الوحيدة التي لدينا
00:36:08هي الأشياء المتاحة للجمهور.
00:36:10لذا يمكننا النظر في اتجاهات تنزيل NPM، والتي
00:36:14أعتقد أنها تتزايد بجنون الآن لسبب غريب ما.
00:36:18لذا ربما لا تعتبروها حقيقة مطلقة.
00:36:20نعم، لا تقلق.
00:36:22ولكن نعم، نحن لا نجمع أي بيانات حقاً
00:36:25عن مستخدمينا لأسباب تتعلق بالخصوصية.
00:36:27لا نريد حقاً أن نكون هكذا على أجهزتكم.
00:36:30لذا فإن البيانات التي نحصل عليها هي كل ما هو متاح للجمهور
00:36:35وربما بعض المعلومات المفيدة من خلال بعض قنوات Vercel.
00:36:43من ناحية أخرى، إذا سألت نماذج اللغة الكبيرة (LLMs) عما يجب اختياره،
00:36:46وما هو الأفضل، فغالبًا ما يتم ذكر Svelte.
00:36:51لذا، هذا أمر جيد على الأقل.
00:36:53لكن ما إذا كان ذلك يترجم إلى اختيار Svelte فعليًا،
00:36:56إذا لم تحدد ذلك في طلبك، فهذا سؤال آخر.
00:37:01نعم، إنه أمر مثير للاهتمام حقًا.
00:37:03بمجرد أن تطلب منهم التفكير في الأداة المثالية،
00:37:06فغالبًا ما سيقولون Svelte.
00:37:08لكن إذا لم تقل: "أريدك أن تستخدم هذا الإطار"
00:37:11أو "أريدك أن تستخدم أفضل إطار عمل"،
00:37:12وقلت فقط "ابنِ لي تطبيقًا"، فسيختارون React تلقائيًا.
00:37:17وليس هناك الكثير مما يمكننا فعله لتغيير ذلك.
00:37:21لذلك، صببنا جل اهتمامنا
00:37:23على التأكد من أنه بالنسبة للفرق التي تختار Svelte،
00:37:27سيحصلون على أفضل تجربة ممكنة.
00:37:29وأن تمتلك الوكلاء (Agents) أفضل قدرة ممكنة
00:37:31على تصفح الوثائق وفهم الأخطاء.
00:37:36نعم، وكما رأينا في مدونة Portal وموقع Potato Cannon،
00:37:42فقد أصبحوا بارعين جدًا
00:37:46في التعامل مع السياق وبروتوكول MCP وما إلى ذلك.
00:37:50لذا نعم، يمكنك إنجاز الكثير بسرعة كبيرة باستخدامه الآن.
00:37:56رائع.
00:37:57نعم، من الرائع رؤية كل العمل
00:37:58الذي تقومون به في ذلك الصدد، وأيضًا مراعاة
00:38:01كل من الجمهور البشري والوكلاء الاصطناعيين.
00:38:04ولدينا بضعة أسئلة أكثر تحديدًا
00:38:06حول ميزات Svelte.
00:38:08أحدها هو: هل من المقبول إجراء استدعاءات متعددة
00:38:11لنفس الدالة البعيدة (remote function) في لغة الترميز (markup)؟
00:38:14أم يجب أن يكون لدينا مرجع واحد في وسم الـ script؟
00:38:17نعم، هذا صحيح.
00:38:20أنت تعمل على هذا الآن، لذا تفضل بالإجابة.
00:38:24الشيء الذي يمنع ريتش من العمل على الاستعلامات المباشرة (live queries)
00:38:26حالياً يتعلق في الواقع بهذا السؤال.
00:38:29نعم، من المقبول تمامًا استدعاء نفس الدالة البعيدة
00:38:35عدة مرات والإشارة إليها عدة مرات
00:38:39في أماكن مختلفة.
00:38:41عندما تستخدم الدوال البعيدة،
00:38:44يجب أن يكون نموذجك الذهني للاستعلامات هو:
00:38:46عندما أستدعي استعلامًا بمعامل معين،
00:38:50فإنني أحصل على مرجع لهذا الاستعلام،
00:38:54والاستعلام يختلف عن البيانات نفسها.
00:38:57لذا إذا استدعيت getUser بالمعرف رقم واحد في أي مكان بالتطبيق،
00:39:04سأحصل في الواقع على نفس النسخة من ذلك الاستعلام
00:39:07في كل مكان.
00:39:08لذا يتم إلغاء تكرار استدعاءات الاستعلام عبر تطبيقك
00:39:11بحيث تحصل كحد أقصى على استدعاء واحد لكل مجموعة معاملات.
00:39:16لذا المعاملات المختلفة تنتج نتائج مختلفة.
00:39:19أما نفس المعاملات فتنتج نفس الاستعلام.
00:39:21يتم دمجها ومنع تكرارها عبر التطبيق.
00:39:24هناك بعض الاستثناءات الغريبة لهذا حاليًا،
00:39:28وهذا ما أعمل على إصلاحه وتقنينه
00:39:33وجعله أكثر وضوحًا قليلاً
00:39:37خلال الأسبوعين الماضيين.
00:39:39ونأمل أن يصدر ذلك قريبًا.
00:39:41لكن نعم، الإجابة المختصرة جدًا هي نعم.
00:39:44فقط قم باستدعائها واستخدامها أينما تريد.
00:39:47نعم، وللتوسع في ذلك فقط،
00:39:48فإن السبب الكامل وراء قيامنا بكل هذا العمل
00:39:51باستخدام الكلمة المفتاحية await وما إلى ذلك، هو
00:39:54لأننا نريد منك أن تكون قادرًا، قدر الإمكان،
00:39:57على التعبير عن كل ما يحتاجه المكون الخاص بك
00:39:59داخل ذلك المكون نفسه.
00:40:00لذا فإن أيام جلب البيانات في المستوى الأعلى ثم
00:40:04تمريرها بعناية إلى كل الأشياء التي تحتاجها،
00:40:08ستنتهي قريبًا.
00:40:10ولكن كجزء من ذلك، إذا اضطررت لامتلاك مرجع لاستعلام
00:40:14ثم تمريره هنا وهناك، فعندها
00:40:15نكون لم نحقق ذلك الهدف حقًا.
00:40:17لذا الفكرة هي أنه إذا كان هذا المكون يحتاج لبعض البيانات
00:40:20وهذا المكون يحتاج أيضًا لبعض البيانات،
00:40:22فلا يحتاجان للتحدث مع بعضهما البعض.
00:40:24يمكنهما فقط طلب البيانات من النظام
00:40:28عبر واجهة الاستعلام.
00:40:29والنظام يتكفل بالتأكد من
00:40:32أن ذلك يؤدي لطلب واحد فقط
00:40:34ولا يؤدي إلى أي تناقضات بين هذين
00:40:36المكونين.
00:40:40مذهل، شكرًا لك.
00:40:42وهذا السؤال حول واجهة برمجة تطبيقات الحركة والانتقال (animation and transition).
00:40:47هل هناك خطة لإعادة هيكلة ذلك؟
00:40:49يقول السائل: وجدت صعوبة في تمرير أحجام flip من وإلى
00:40:54عبر المرفقات (attachments).
00:40:57أنا متحمس للغاية للعمل على هذا الأمر.
00:41:02كنت أتطلع لذلك منذ وقت طويل.
00:41:04هناك الكثير من الأشياء للقيام بها.
00:41:06نعم، كل شيء آخر يعيق الطريق.
00:41:09في الأساس، عندما صممنا واجهة برمجة تطبيقات المرفقات،
00:41:12كان ذلك مع وضع هذا الأمر تحديدًا في الاعتبار.
00:41:16الانتقالات والتحريكات رائعة.
00:41:19وهي مدمجة في إطار العمل
00:41:21بطريقة تجعل من السهل جدًا القيام بأشياء معينة.
00:41:25ولكن بمجرد أن تتجاوز حدًا معينًا،
00:41:28لا يمكنها مساعدتك حقًا بعد ذلك.
00:41:29ستحتاج إلى تحكم برمجي أكبر بها.
00:41:33وهنا تبرز أهمية وجود واجهة برمجة تطبيقات برمجية
00:41:36لتعريف الانتقالات والتحريكات.
00:41:42وواجهة برمجة تطبيقات المرفقات هي—
00:41:46الفكرة هي أنه في المستقبل، ستعمل واجهة المرفقات
00:41:49بالتكامل مع واجهة برمجة تطبيقات تقول:
00:41:52"مهلاً، عندما يتم سحبي خارج الـ DOM،
00:41:54انتظر دقيقة حتى أتمكن من تنفيذ تلاشٍ بسيط
00:41:58أو حركة بسيطة أو أيًا كانت."
00:42:00"وبعدها يمكنك إزالتي من الـ DOM."
00:42:02هذا ما سيمكّن من تنفيذ بعض سيناريوهات التحريك
00:42:06والانتقال الأكثر تقدمًا.
00:42:09لكننا لم نصل إلى هناك بعد.
00:42:11الأمر مخطط له.
00:42:12وسوف يحدث بالتأكيد.
00:42:13لكن لا يمكنني إعطاء جدول زمني محدد.
00:42:16بالتأكيد ليس في الشهرين أو الثلاثة أشهر القادمة.
00:42:22جيد.
00:42:22على الأقل الموضوع قيد النظر.
00:42:24يسعدنا سماع ذلك.
00:42:25رائع.
00:42:25أعتقد أن لدينا وقتًا لسؤال واحد إضافي.
00:42:27السؤال الأخير.
00:42:29إطار Svelte محايد، ولكن ما هي قاعدة البيانات المفضلة
00:42:32لأعضاء الفريق؟
00:42:34جولة أخرى من الإجابات السريعة.
00:42:37SQLite.
00:42:37لقد استخدمت Neon في الماضي لتجربة سريعة،
00:42:47وكان ذلك لطيفًا حقًا.
00:42:50نعم، SQLite جيدة.
00:42:53ما أنتظره حقًا هو أن تصبح محركات المزامنة هذه
00:42:59جيدة جدًا ومتوفرة على نطاق واسع حتى نتمكن
00:43:02من البدء في تطوير تطبيقات تعتمد على المبدأ المحلي أولاً (local-first).
00:43:05وبعد ذلك— بصراحة، لا يهمني
00:43:09ما هي قاعدة البيانات التي أستخدمها في الخلفية، هذه هي إجابتي المختصرة.
00:43:13نعم، أعتقد—
00:43:15لا أعلم حقًا ما إذا كان لدي واحدة مفضلة لأنها—
00:43:18عندما تسأل ببساطة: "ما هي قاعدة بياناتك المفضلة؟"،
00:43:22هناك الكثير من القواعد المختلفة لأنها
00:43:24تتفوق في أشياء مختلفة.
00:43:26لذا يجب أن تعرف حقًا لماذا
00:43:28تختار قاعدة بيانات معينة لتحدد المفضلة لديك.
00:43:31أجد أشياء مثل Convex مثيرة للاهتمام للغاية فيما يتعلق
00:43:36بمحركات المزامنة المحلية أولاً.
00:43:38أعتقد أنها رائعة حقًا، ولديهم الكثير من المزايا
00:43:41المميزة.
00:43:42قاعدتي المفضلة للأغراض العامة
00:43:45هي في الواقع Dynamo.
00:43:47قد يكون من المحبط الاعتياد عليها،
00:43:49لكنها سريعة جدًا جدًا.
00:43:51وتتوسع بشكل مذهل حقًا.
00:43:55لكنني أحب SQL أيضًا.
00:43:58لذا إذا استطعت جعل قاعدة بيانات SQL تعمل في مشروع ما،
00:44:04فمن المحتمل أن أختارها لأن مسيرتي المهنية بدأت
00:44:07في تحليل البيانات وما شابه.
00:44:09لذا فإن SQL هي ما نشأت عليه تقريبًا.
00:44:14لذا نعم، لا أعرف إذا كان لدي واحدة مفضلة،
00:44:16ولكن هكذا أفكر في الأمر.
00:44:20جميل.
00:44:20ولدينا تعليق واحد من باولو.
00:44:23أعلم أنك أشرت إليه سابقًا.
00:44:24يقول: "أرى الكثير من الألوان."
00:44:27"هل نحن متأكدون أن ريتش وسايمون وإليوت يعملون لدى Vercel؟"
00:44:32"كرسيي لونه أسود."
00:44:35نعم، لقد كان باولو يضغط عليّ لارتداء سترة Vercel،
00:44:38لكن الجو حار جدًا هنا.
00:44:40حسنًا يا رفاق.
00:44:45لكنها موجودة في خزانتي، وسأرتديها
00:44:48عندما يكون الجو أبرد قليلاً.
00:44:51هذا ما نحب سماعه، استعراض لمنتجات الشركة.
00:44:54مذهل.
00:44:55نعم، أنا متحمس جدًا لمستقبل Svelte
00:44:58وأقدر حقًا انضمامكم إلينا
00:45:01ولكل عملكم الشاق خلف الكواليس.
00:45:03شكرًا جزيلاً لبقية فريق Svelte
00:45:05أيضًا الذين ليسوا معنا في البث، مطوري Svelte.
00:45:09وتحية لمجتمع Svelte الرائع أيضًا.
00:45:11نعم، شكرًا ريتش وسايمون وإليوت لانضمامكم إلينا اليوم.
00:45:16شكراً لكم.
00:45:17مع السلامة.
00:45:18إنه لمن دواعي سروري.
00:45:20حسنًا، أيها الجمهور، لا تذهبوا لأي مكان بعد
00:45:23لأنه قبل الختام، لدينا ضيف خاص جدًا.
00:45:26لدينا إيف من فريق Vercel التعليمي.
00:45:31أهلاً بكِ.
00:45:32كيف تسير الأمور؟
00:45:33أهلاً إيف.
00:45:33بخير.
00:45:34كيف حالكم؟
00:45:35أنا بخير.
00:45:36شكرًا لكِ.
00:45:36هذا فريق رائع من الأفضل في مجالهم.
00:45:40نعم.
00:45:41يا له من أمر ممتع.
00:45:44حسنًا.
00:45:45هل تودين إخبارنا المزيد عن الأكاديمية
00:45:47وعما كنتِ تعملين عليه؟
00:45:49نعم، يسعدني ذلك.
00:45:50إذا لم تسمعوا بعد، فإن Vercel لديها الآن أكاديمية.
00:45:55لدينا 11 دورة تدريبية متاحة الآن.
00:45:57وأحدثها انطلقت اليوم،
00:46:03وهي، تادااا، دورة Svelte على Vercel.
00:46:10لقد كان الفريق متعاونًا حقًا في الوصول
00:46:13بذلك إلى خط النهاية.
00:46:15فيها، نقوم ببناء تطبيق لتنبيهات التزلج.
00:46:18لذا إذا كنت من هواة التزلج—
00:46:23أوه، نعم.
00:46:25أنا أشارك الشاشة الآن، وسأعرضها.
00:46:28رائع.
00:46:29أوه، ها هي ذي.
00:46:30ها هي ذي.
00:46:31هكذا أفضل للقيام بذلك.
00:46:34دورة Svelte على Vercel متاحة الآن.
00:46:36فيها، ستقومون ببناء تطبيق لتنبيهات التزلج.
00:46:40في عالمنا الحديث، إذا كنت متزلجًا هذا العام،
00:46:43فأنت تعلم أنه كان موسمًا صعبًا نوعًا ما.
00:46:47ثلوج قليلة جدًا.
00:46:48الجو كان دافئًا في كل مكان.
00:46:50لذا من المهم جدًا أن يتم إخطارك
00:46:52بالموعد المناسب للتزلج.
00:46:54وهذا هو التطبيق الذي نبنيه طوال الدورة
00:46:58لجعل ذلك ممكنًا.
00:46:59لدينا كافة الأنواع— يمكنك كتابة تنبيهات مختلفة
00:47:02لمختلف الظروف التي تبحث عنها حتى
00:47:06تكون هناك عندما يحين يوم التزلج،
00:47:10ولا تضيع اليوم المحتمل.
00:47:13لذا نعم، تتناول الدورة إطار Svelte.
00:47:17كيف تنشره على Vercel؟
00:47:19كيف تستخدم الـ AI SDK؟
00:47:21كيف تستخدم سير العمل (workflows)؟
00:47:23وبعض نصائح الإنتاج على طول الطريق.
00:47:27مذهل.
00:47:28رائع.
00:47:29أنا أؤمن تمامًا بالتعلم من خلال البناء.
00:47:31لذا نعم، هذا أمر رائع.
00:47:33شكرًا جزيلاً لكِ.
00:47:34وسنقوم بإضافة رابط للدورة
00:47:36أيضًا في مصادر البث المباشر.
00:47:38شكرًا لانضمامك إلينا اليوم يا إيف.
00:47:41مذهل.
00:47:41شكرًا جزيلاً لكم.
00:47:42حسنًا.
00:47:46وبهذا نصل إلى نهاية جلستنا المباشرة.
00:47:49شكرًا جزيلاً لمجتمعنا
00:47:51على قضاء الوقت معنا.
00:47:52لن أكذب، كانت المحادثة في البث مشتعلة اليوم.
00:47:54وهذا أمر رائع حقًا.
00:47:56نعم، نأمل أن تكونوا قد استمتعتم.
00:47:58وعلى حد قول ريتش هاريس، Svelte هي أسلوب حياة.
00:48:02لذا اذهبوا وجربوها.
00:48:03قوموا ببناء المزيد من الأشياء باستخدام Svelte.
00:48:05إذا كنتم ترغبون في الانضمام إلينا في جلساتنا المجتمعية المستقبلية،
00:48:08يمكنكم العثور على كافة التفاصيل على منصتنا المجتمعية
00:48:11على [community.vercel.com/live](https://community.vercel.com/live).
00:48:13نعم، شكرًا لكم جميعًا.
00:48:15نراكم لاحقاً.
00:48:16مع السلامة.