# ما مدى اختلاف مكون Ember عن ويدجت Discourse؟

**URL:** https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174
**Category:** Development
**Created:** [8 يونيو 2020، 12:10م UTC](https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174 "2020-06-08T12:10:52Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![hawm](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hawm](https://meta.discourse.org/u/hawm)
#### Post date: [8 يونيو 2020، 12:10م UTC](https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174/1 "2020-06-08T12:10:52Z")

</div>

أعمل على إضافة (plugin) يحتاج إلى نوافذ حوار منبثقة (modal dialog)، وقد تعلمت من البحث في موقع Meta أن كلاً من مكون Ember وودجة Discourse يمكنهما تنفيذ ذلك. يمكن لكل من مكون Ember وودجة Discourse الارتباط بمخرج الإضافة (plugin outlet)، وعرض HTML، والتعامل مع الأحداث.

> [@A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347):
>
> This is out of date. See [Widgets, the Widget API and their roadmap?](https://meta.discourse.org/t/widgets-the-widget-api-and-their-roadmap/292624) The latest builds of Discourse are much faster at rendering topics thanks to our [re-written post stream](https://eviltrout.com/2016/02/25/fixing-android-performance.html). I’ve written up [our new plugin API](https://meta.discourse.org/t/a-new-versioned-api-for-client-side-plugins/40051) but so far haven’t explained how the code all fits together. The purpose of this topic is to allow Discourse developers to understand how the new code works. What’s a Virtual DOM? A Virtual DOM is a data structure that enables browsers to re-render dynamic content very quickly. The techniq…

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

> **[discourse-calendar/assets/javascripts/discourse at...](https://github.com/discourse/discourse-calendar/tree/4e31880f9cf67ca4e04edce06245bdaea7a46875/assets/javascripts/discourse)**
>
> 4e31880f9cf67ca4e04edce06245bdaea7a46875/assets/javascripts/discourse

هل يمكن لأحد أن يخبرني ما الفرق بينهما؟  
شكرًا لكم.

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [8 يونيو 2020، 2:34م UTC](https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174/2 "2020-06-08T14:34:14Z")

</div>

تُستخدم المكونات على نطاق واسع في معظم أجزاء Discourse. وتأتي الودجات (widgets) في متناول اليد في بعض العناصر الأكثر ازدحامًا بحركة المرور، مثل تدفق منشورات الموضوع والشريط العلوي مع قوائمه المتعددة.

غالبًا ما ستلاحظ استخدام الودجات في الإضافات والمواضيع لإضافة أو تعديل الودجات الموجودة.

خذ على سبيل المثال هذه الودجة في إضافة `discourse-calendar`:

> <https://github.com/discourse/discourse-calendar/blob/4e31880f9cf67ca4e04edce06245bdaea7a46875/assets/javascripts/discourse/widgets/going-button.js.es6>

هذه زر يتم عرضه في المنشور الأصلي لموضوع ما. ويجب أن تكون ودجة لأن المنشور نفسه يتم عرضه كودجة لأسباب تتعلق بالأداء.

لكن إذا نظرت إلى الأسطر من 11 إلى 17 في ذلك الملف، يمكنك رؤية قالب Handlebars مُعرَّف في JavaScript عبر مساعد `hbs`، وفي هذا القالب توجد مكونات يتم عرضها مثل `{{i18n ...}}`.

لذلك بشكل عام، يمكنك استخدام المكونات **إلا إذا** كان عنصر واجهة المستخدم مُعرضًا بالفعل كودجة. في هذه الحالة، استخدم ودجة. وإذا كان ذلك منطقيًا، يمكنك استخدام مكونات موجودة داخل الودجة.

---

<div class="post-metadata">

### Author: ![hawm](https://avatars.discourse-cdn.com/v4/letter/h/f07891/32.png) [@hawm](https://meta.discourse.org/u/hawm)
#### Post date: [8 يونيو 2020، 3:17م UTC](https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174/3 "2020-06-08T15:17:34Z")

</div>

شكرًا لك على إجابتك! هذا بالضبط ما أريد معرفته.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [8 يونيو 2020، 4:17م UTC](https://meta.discourse.org/t/how-different-are-ember-component-and-discourse-widget/154174/4 "2020-06-08T16:17:36Z")

</div>

بعض القواعد العامة لاختيار المكونات/الودجات:

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

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