M

MLOG

العربية

استكشف Stencil، وهو مُصرف TypeScript قوي لإنشاء مكونات ويب قابلة لإعادة الاستخدام. تعرف على ميزاته وفوائده الرئيسية وكيفية استخدامه لإنشاء تطبيقات ويب قابلة للتطوير والصيانة.

Stencil: نظرة معمقة على مُصرف مكونات الويب المكتوب بلغة TypeScript

في المشهد المتطور باستمرار لتطوير الويب، تعد الحاجة إلى مكونات قابلة لإعادة الاستخدام والتطوير والصيانة أمرًا بالغ الأهمية. يظهر Stencil، وهو مصرف TypeScript، كأداة قوية لتلبية هذه الحاجة من خلال تمكين المطورين من بناء مكونات ويب (Web Components) تتكامل بسلاسة مع مختلف أطر العمل أو حتى تعمل كعناصر مستقلة.

ما هي مكونات الويب؟

قبل الغوص في Stencil، دعنا نفهم الأساس الذي بني عليه: مكونات الويب. مكونات الويب هي مجموعة من واجهات برمجة تطبيقات منصة الويب (web platform APIs) التي تسمح لك بإنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام مع تنسيق وسلوك مغلف. هذا يعني أنه يمكنك تحديد علاماتك الخاصة مثل <my-component> واستخدامها عبر تطبيقات الويب الخاصة بك، بغض النظر عن إطار العمل الذي تستخدمه (أو لا تستخدمه!).

تشمل التقنيات الأساسية وراء مكونات الويب ما يلي:

تقديم Stencil

Stencil هو مصرف يقوم بإنشاء مكونات ويب. تم بناؤه بواسطة فريق Ionic ويستفيد من TypeScript و JSX ومعايير الويب الحديثة لإنشاء مكونات محسّنة وعالية الأداء. يتجاوز Stencil مجرد تصريف الكود؛ فهو يضيف العديد من الميزات الرئيسية التي تجعل بناء وصيانة مكونات الويب أسهل وأكثر كفاءة.

الميزات والفوائد الرئيسية لـ Stencil

1. دعم TypeScript و JSX

يتبنى Stencil لغة TypeScript، مما يوفر كتابة قوية للأنواع، وتحسينًا لتنظيم الكود، وزيادة في إنتاجية المطورين. يسمح استخدام JSX بطريقة تعريفية وبديهية لتحديد واجهة المستخدم للمكون.

مثال:

خذ بعين الاعتبار مكون عداد بسيط مكتوب في Stencil:


import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @State() count: number = 0;

  increment() {
    this.count++;
  }

  render() {
    return (
      <div class="counter-container">
        <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

2. ربط البيانات التفاعلي

يقدم Stencil طريقة مباشرة لإدارة حالة المكون وتحديث واجهة المستخدم بشكل تفاعلي. باستخدام مزين @State، تؤدي التغييرات في حالة المكون تلقائيًا إلى إعادة العرض، مما يضمن أن واجهة المستخدم متزامنة دائمًا مع البيانات.

مثال:

في مثال العداد أعلاه، فإن الإعلان @State() count: number = 0; يجعل متغير count تفاعليًا. في كل مرة يتم فيها استدعاء دالة increment()، يتم تحديث متغير count، ويعيد المكون العرض ليعكس القيمة الجديدة.

3. DOM الافتراضي والعرض الفعال

يستخدم Stencil نموذج كائن المستند الافتراضي (Virtual DOM) لتحسين أداء العرض. يتم تطبيق التغييرات على الـ DOM الافتراضي أولاً، ثم يتم تطبيق التحديثات الضرورية فقط على الـ DOM الفعلي، مما يقلل من عمليات التلاعب المكلفة في الـ DOM.

4. التصريف المسبق (AOT)

يقوم Stencil بالتصريف المسبق (AOT)، مما يعني أن الكود يتم تصريفه أثناء عملية البناء بدلاً من وقت التشغيل. ينتج عن هذا أوقات تحميل أولية أسرع وأداء محسن وقت التشغيل.

5. التحميل الكسول (Lazy Loading)

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

6. التوافق عبر أطر العمل

إحدى المزايا الرئيسية لـ Stencil هي قدرته على إنشاء مكونات ويب متوافقة مع مختلف أطر العمل، بما في ذلك React و Angular و Vue.js وحتى HTML العادي. يتيح لك هذا بناء مكتبة مكونات مرة واحدة وإعادة استخدامها عبر مشاريع متعددة، بغض النظر عن إطار العمل المستخدم.

7. دعم تطبيقات الويب التقدمية (PWA)

يوفر Stencil دعمًا مدمجًا لـ PWAs، مما يسهل إنشاء تطبيقات ويب قابلة للتثبيت وموثوقة وجذابة. يتضمن ميزات مثل إنشاء service worker ودعم manifest.

8. أحجام حزم صغيرة

تم تصميم Stencil لإنتاج أحجام حزم صغيرة، مما يضمن تحميل مكوناتك بسرعة وكفاءة. يحقق ذلك من خلال تقنيات مثل tree-shaking وتقسيم الكود.

9. الأدوات وتجربة التطوير

يقدم Stencil مجموعة غنية من الأدوات والميزات التي تعزز تجربة التطوير، بما في ذلك:

البدء مع Stencil

للبدء مع Stencil، ستحتاج إلى تثبيت Node.js و npm (أو yarn) على نظامك. يمكنك بعد ذلك تثبيت Stencil CLI عالميًا باستخدام الأمر التالي:


npm install -g @stencil/core

بمجرد تثبيت CLI، يمكنك إنشاء مشروع Stencil جديد باستخدام الأمر stencil init:


stencil init my-component-library

سيؤدي هذا إلى إنشاء دليل جديد يسمى my-component-library بهيكل مشروع Stencil أساسي. يمكنك بعد ذلك الانتقال إلى الدليل وبدء خادم التطوير باستخدام الأمر npm start:


cd my-component-library
npm start

سيؤدي هذا إلى بدء خادم التطوير وفتح مشروعك في متصفح الويب. يمكنك بعد ذلك البدء في إنشاء مكونات الويب الخاصة بك عن طريق تعديل الملفات في دليل src/components.

مثال: بناء مكون إدخال بسيط

لنقم بإنشاء مكون إدخال بسيط باستخدام Stencil. سيسمح هذا المكون للمستخدمين بإدخال نص وعرضه على الصفحة.

1. إنشاء ملف مكون جديد

أنشئ ملفًا جديدًا باسم my-input.tsx في دليل src/components.

2. تعريف المكون

أضف الكود التالي إلى ملف my-input.tsx:


import { Component, State, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @State() inputValue: string = '';
  @Event() inputChanged: EventEmitter;

  handleInputChange(event: any) {
    this.inputValue = event.target.value;
    this.inputChanged.emit(this.inputValue);
  }

  render() {
    return (
      <div class="input-container">
        <input type="text" value={this.inputValue} onInput={(event) => this.handleInputChange(event)} />
        <p>You entered: {this.inputValue}</p>
      </div>
    );
  }
}

يعرّف هذا الكود مكونًا جديدًا يسمى my-input. يحتوي على متغير حالة inputValue يخزن النص الذي أدخله المستخدم. يتم استدعاء دالة handleInputChange() عندما يكتب المستخدم في حقل الإدخال. تقوم هذه الدالة بتحديث متغير الحالة inputValue وتصدر حدث inputChanged بالقيمة الجديدة.

3. إضافة التنسيق

أنشئ ملفًا جديدًا باسم my-input.css في دليل src/components وأضف CSS التالي:


.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

4. استخدام المكون في تطبيقك

يمكنك الآن استخدام مكون my-input في تطبيقك عن طريق إضافة الكود التالي إلى ملف HTML الخاص بك:


<my-input></my-input>

مفاهيم متقدمة في Stencil

1. تركيب المكونات

يسمح لك Stencil بتركيب المكونات معًا لإنشاء واجهات مستخدم أكثر تعقيدًا. يتضمن ذلك تداخل المكونات داخل بعضها البعض وتمرير البيانات بينها باستخدام الخصائص والأحداث.

2. الخصائص والأحداث

تُستخدم الخصائص (Properties) لتمرير البيانات من مكون أب إلى مكون ابن. يتم تعريفها باستخدام مزين @Prop().

تُستخدم الأحداث (Events) للتواصل من مكون ابن إلى مكون أب. يتم تعريفها باستخدام مزين @Event() ويتم إصدارها باستخدام دالة emit().

3. دوال دورة الحياة

يوفر Stencil مجموعة من دوال دورة الحياة التي تسمح لك بالتدخل في مراحل مختلفة من دورة حياة المكون. تشمل هذه الدوال:

4. الاختبار

يوفر Stencil إطار عمل اختبار مدمج يعتمد على Jest. يمكنك استخدام هذا الإطار لكتابة اختبارات الوحدة والتكامل لمكوناتك. الاختبار أمر بالغ الأهمية لضمان أن مكوناتك تعمل بشكل صحيح ولمنع التراجعات.

Stencil مقابل أطر عمل مكونات الويب الأخرى

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

أمثلة وحالات استخدام من الواقع

الخاتمة

Stencil أداة قوية ومتعددة الاستخدامات لبناء مكونات الويب. إن تركيزها على الأداء والتوافق عبر أطر العمل وتجربة المطور الرائعة يجعلها خيارًا ممتازًا لإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام لتطبيقات الويب الحديثة. سواء كنت تبني نظام تصميم، أو منصة تجارة إلكترونية، أو موقعًا بسيطًا، يمكن لـ Stencil مساعدتك في إنشاء مكونات قابلة للتطوير والصيانة من شأنها تحسين أداء تطبيقك وقابليته للصيانة. من خلال تبني مكونات الويب والاستفادة من ميزات Stencil، يمكن للمطورين بناء تطبيقات ويب أكثر قوة ومرونة ومقاومة للمستقبل.

مع استمرار تطور مشهد تطوير الويب، يتمتع Stencil بوضع جيد للعب دور مهم في تشكيل مستقبل تطوير واجهات المستخدم. إن التزامه بمعايير الويب، وتحسين الأداء، وتجربة المطور الإيجابية يجعله أداة قيمة لأي مطور ويب يتطلع إلى بناء مكونات ويب عالية الجودة.