Stencil: نگاهی عمیق به کامپایلر وب کامپوننت مبتنی بر TypeScript

در چشم‌انداز همواره در حال تحول توسعه وب، نیاز به کامپوننت‌های قابل استفاده مجدد، مقیاس‌پذیر و قابل نگهداری امری حیاتی است. Stencil، یک کامپایلر TypeScript، به عنوان ابزاری قدرتمند برای پاسخ به این نیاز ظهور کرده و به توسعه‌دهندگان امکان می‌دهد تا وب کامپوننت‌هایی بسازند که به طور یکپارچه با فریمورک‌های مختلف ادغام شده یا حتی به عنوان عناصر مستقل عمل کنند.

وب کامپوننت‌ها (Web Components) چه هستند؟

قبل از پرداختن به Stencil، بیایید با بنیادی که بر آن ساخته شده است آشنا شویم: وب کامپوننت‌ها. وب کامپوننت‌ها مجموعه‌ای از API‌های پلتفرم وب هستند که به شما اجازه می‌دهند عناصر HTML سفارشی و قابل استفاده مجدد با استایل و رفتار کپسوله‌شده ایجاد کنید. این بدان معناست که می‌توانید تگ‌های خود مانند <my-component> را تعریف کرده و از آنها در سراسر برنامه‌های وب خود استفاده کنید، صرف نظر از فریمورکی که استفاده می‌کنید (یا نمی‌کنید!).

فناوری‌های اصلی پشت وب کامپوننت‌ها عبارتند از:

• عناصر سفارشی (Custom Elements): به شما اجازه می‌دهد عناصر HTML خود را تعریف کنید.
• Shadow DOM: کپسوله‌سازی را فراهم می‌کند و تضمین می‌کند که استایل و رفتار کامپوننت با بقیه صفحه تداخل نداشته باشد.
• قالب‌های HTML (HTML Templates): راهی برای تعریف ساختارهای HTML قابل استفاده مجدد ارائه می‌دهد.

معرفی Stencil

Stencil یک کامپایلر است که وب کامپوننت‌ها را تولید می‌کند. این ابزار توسط تیم Ionic ساخته شده و از TypeScript، JSX و استانداردهای مدرن وب برای ایجاد کامپوننت‌های بسیار بهینه و با کارایی بالا استفاده می‌کند. Stencil فراتر از کامپایل کردن ساده کد عمل می‌کند؛ این ابزار چندین ویژگی کلیدی اضافه می‌کند که ساخت و نگهداری وب کامپوننت‌ها را آسان‌تر و کارآمدتر می‌کند.

ویژگی‌ها و مزایای کلیدی Stencil

۱. پشتیبانی از 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>
    );
  }
}

            

              
                Copy
              
            
          

۲. اتصال داده واکنشی (Reactive Data Binding)

Stencil روشی ساده برای مدیریت وضعیت کامپوننت و به‌روزرسانی واکنشی رابط کاربری ارائه می‌دهد. با استفاده از دکوراتور @State، تغییرات در وضعیت کامپوننت به طور خودکار باعث رندر مجدد می‌شود و تضمین می‌کند که رابط کاربری همیشه با داده‌ها همگام است.

مثال:

در مثال شمارنده بالا، تعریف @State() count: number = 0; متغیر count را واکنشی می‌کند. هر بار که تابع increment() فراخوانی می‌شود، متغیر count به‌روزرسانی شده و کامپوننت برای نمایش مقدار جدید دوباره رندر می‌شود.

۳. DOM مجازی و رندر کارآمد

Stencil از یک DOM مجازی برای بهینه‌سازی عملکرد رندر استفاده می‌کند. تغییرات ابتدا بر روی DOM مجازی اعمال می‌شوند و سپس فقط به‌روزرسانی‌های ضروری بر روی DOM واقعی اعمال می‌شوند، که این امر دستکاری‌های پرهزینه DOM را به حداقل می‌رساند.

۴. کامپایل پیش از موعد (AOT)

Stencil کامپایل AOT را انجام می‌دهد، به این معنی که کد در طول فرآیند ساخت به جای زمان اجرا کامپایل می‌شود. این امر منجر به زمان بارگذاری اولیه سریع‌تر و عملکرد بهتر در زمان اجرا می‌شود.

۵. بارگذاری تنبل (Lazy Loading)

کامپوننت‌ها به طور پیش‌فرض به صورت تنبل بارگذاری می‌شوند، به این معنی که فقط زمانی که به آنها نیاز است بارگذاری می‌شوند. این به کاهش زمان بارگذاری اولیه صفحه و بهبود عملکرد کلی برنامه کمک می‌کند.

۶. سازگاری بین فریمورک‌ها

یکی از مزایای کلیدی Stencil، توانایی آن در تولید وب کامپوننت‌هایی است که با فریمورک‌های مختلف از جمله React، Angular، Vue.js و حتی HTML ساده سازگار هستند. این به شما امکان می‌دهد یک کتابخانه کامپوننت را یک بار بسازید و آن را در چندین پروژه، صرف نظر از فریمورک مورد استفاده، مجدداً استفاده کنید.

۷. پشتیبانی از برنامه‌های وب پیش‌رونده (PWA)

Stencil پشتیبانی داخلی برای PWA‌ها فراهم می‌کند و ایجاد برنامه‌های وب قابل نصب، قابل اعتماد و جذاب را آسان می‌سازد. این ابزار شامل ویژگی‌هایی مانند تولید service worker و پشتیبانی از manifest است.

۸. حجم کم بسته‌ها (Bundle Sizes)

Stencil برای تولید بسته‌هایی با حجم کم طراحی شده است تا اطمینان حاصل شود که کامپوننت‌های شما به سرعت و با کارایی بارگذاری می‌شوند. این امر از طریق تکنیک‌هایی مانند tree-shaking و code splitting به دست می‌آید.

۹. ابزارها و تجربه توسعه

Stencil مجموعه‌ای غنی از ابزارها و ویژگی‌ها را ارائه می‌دهد که تجربه توسعه را بهبود می‌بخشد، از جمله:

• جایگزینی ماژول داغ (HMR): به شما امکان می‌دهد تغییرات در کامپوننت‌های خود را به صورت زنده بدون نیاز به تازه‌سازی صفحه مشاهده کنید.
• پشتیبانی از اشکال‌زدایی (Debugging): ابزارهایی برای اشکال‌زدایی کامپوننت‌های شما در مرورگر فراهم می‌کند.
• فریمورک تست: شامل یک فریمورک تست داخلی برای نوشتن تست‌های واحد و یکپارچه‌سازی است.
• تولیدکننده مستندات: به طور خودکار مستندات برای کامپوننت‌های شما تولید می‌کند.

شروع کار با Stencil

برای شروع کار با Stencil، باید Node.js و npm (یا yarn) را روی سیستم خود نصب داشته باشید. سپس می‌توانید Stencil CLI را به صورت سراسری با استفاده از دستور زیر نصب کنید:

            
npm install -g @stencil/core

            

              
                Copy
              
            
          

پس از نصب CLI، می‌توانید یک پروژه جدید Stencil را با استفاده از دستور stencil init ایجاد کنید:

            
stencil init my-component-library

            

              
                Copy
              
            
          

این دستور یک دایرکتوری جدید به نام my-component-library با ساختار اولیه پروژه Stencil ایجاد می‌کند. سپس می‌توانید به این دایرکتوری بروید و سرور توسعه را با دستور npm start راه‌اندازی کنید:

            
cd my-component-library
npm start

            

              
                Copy
              
            
          

این دستور سرور توسعه را راه‌اندازی کرده و پروژه شما را در مرورگر وب باز می‌کند. سپس می‌توانید با تغییر فایل‌ها در دایرکتوری src/components شروع به ایجاد وب کامپوننت‌های خود کنید.

مثال: ساخت یک کامپوننت ورودی ساده

بیایید یک کامپوننت ورودی ساده با استفاده از Stencil ایجاد کنیم. این کامپوننت به کاربران اجازه می‌دهد متنی را وارد کرده و آن را در صفحه نمایش دهند.

۱. ایجاد یک فایل کامپوننت جدید

یک فایل جدید به نام my-input.tsx در دایرکتوری src/components ایجاد کنید.

۲. تعریف کامپوننت

کد زیر را به فایل 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>
    );
  }
}

            

              
                Copy
              
            
          

این کد یک کامپوننت جدید به نام my-input تعریف می‌کند. این کامپوننت یک متغیر وضعیت به نام inputValue دارد که متن وارد شده توسط کاربر را ذخیره می‌کند. تابع handleInputChange() زمانی که کاربر در فیلد ورودی تایپ می‌کند فراخوانی می‌شود. این تابع متغیر وضعیت inputValue را به‌روزرسانی کرده و یک رویداد inputChanged با مقدار جدید منتشر می‌کند.

۳. افزودن استایل

یک فایل جدید به نام 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;
}


            

              
                Copy
              
            
          

۴. استفاده از کامپوننت در برنامه

اکنون می‌توانید از کامپوننت my-input در برنامه خود با افزودن کد زیر به فایل HTML خود استفاده کنید:

            
<my-input></my-input>

            

              
                Copy
              
            
          

مفاهیم پیشرفته Stencil

۱. ترکیب کامپوننت‌ها

Stencil به شما اجازه می‌دهد کامپوننت‌ها را با هم ترکیب کنید تا رابط‌های کاربری پیچیده‌تری ایجاد کنید. این شامل تودرتو کردن کامپوننت‌ها درون یکدیگر و انتقال داده بین آنها با استفاده از پراپرتی‌ها و رویدادها است.

۲. پراپرتی‌ها و رویدادها

پراپرتی‌ها (Properties) برای انتقال داده از یک کامپوننت والد به یک کامپوننت فرزند استفاده می‌شوند. آنها با استفاده از دکوراتور @Prop() تعریف می‌شوند.

رویدادها (Events) برای برقراری ارتباط از یک کامپوننت فرزند به یک کامپوننت والد استفاده می‌شوند. آنها با استفاده از دکوراتور @Event() تعریف شده و با استفاده از تابع emit() منتشر می‌شوند.

۳. متدهای چرخه حیات

Stencil مجموعه‌ای از متدهای چرخه حیات را فراهم می‌کند که به شما امکان می‌دهد به مراحل مختلف چرخه حیات یک کامپوننت متصل شوید. این متدها عبارتند از:

• componentWillLoad(): قبل از اولین رندر کامپوننت فراخوانی می‌شود.
• componentDidLoad(): پس از اولین رندر کامپوننت فراخوانی می‌شود.
• componentWillUpdate(): قبل از به‌روزرسانی کامپوننت فراخوانی می‌شود.
• componentDidUpdate(): پس از به‌روزرسانی کامپوننت فراخوانی می‌شود.
• componentWillUnload(): قبل از حذف کامپوننت از DOM فراخوانی می‌شود.

۴. تست

Stencil یک فریمورک تست داخلی مبتنی بر Jest فراهم می‌کند. شما می‌توانید از این فریمورک برای نوشتن تست‌های واحد و یکپارچه‌سازی برای کامپوننت‌های خود استفاده کنید. تست برای اطمینان از عملکرد صحیح کامپوننت‌ها و جلوگیری از بازگشت خطاها بسیار حیاتی است.

Stencil در مقایسه با سایر فریمورک‌های وب کامپوننت

در حالی که Stencil تنها گزینه برای ساخت وب کامپوننت‌ها نیست، با تمرکز بر عملکرد، سازگاری بین فریمورک‌ها و تجربه توسعه ساده و روان، خود را متمایز می‌کند. فریمورک‌های دیگری مانند LitElement و Polymer نیز راه‌حل‌هایی برای توسعه وب کامپوننت ارائه می‌دهند، اما ویژگی‌های منحصر به فرد Stencil مانند کامپایل AOT و بارگذاری تنبل مزایای مشخصی را در سناریوهای خاص فراهم می‌کنند.

مثال‌ها و موارد استفاده در دنیای واقعی

• سیستم‌های طراحی (Design Systems): بسیاری از سازمان‌ها از Stencil برای ایجاد کتابخانه‌های کامپوننت قابل استفاده مجدد برای سیستم‌های طراحی خود استفاده می‌کنند. این کتابخانه‌ها می‌توانند در چندین پروژه و فریمورک استفاده شوند و ثبات و قابلیت نگهداری را تضمین کنند. به عنوان مثال، یک موسسه مالی جهانی ممکن است از Stencil برای ایجاد یک سیستم طراحی استفاده کند که توسط برنامه‌های وب آن در کشورهای مختلف استفاده می‌شود و تجربه برند ثابتی را برای مشتریان بین‌المللی خود تضمین می‌کند.
• پلتفرم‌های تجارت الکترونیک: پلتفرم‌های تجارت الکترونیک می‌توانند از Stencil برای ساخت کارت‌های محصول سفارشی، فرآیندهای پرداخت و سایر عناصر تعاملی که به راحتی در بخش‌های مختلف وب‌سایت قابل ادغام هستند، استفاده کنند. یک شرکت تجارت الکترونیک جهانی می‌تواند از Stencil برای ساخت یک کامپوننت کارت محصول استفاده کند که در وب‌سایت آن در مناطق مختلف استفاده می‌شود و زبان و واحد پول کامپوننت را بر اساس موقعیت کاربر تطبیق می‌دهد.
• سیستم‌های مدیریت محتوا (CMS): پلتفرم‌های CMS می‌توانند از Stencil برای ایجاد بلوک‌های محتوا و ویجت‌های قابل استفاده مجدد که به راحتی به صفحات اضافه می‌شوند، استفاده کنند.
• داشبوردها و پنل‌های ادمین: Stencil می‌تواند برای ساخت داشبوردهای تعاملی و پنل‌های ادمین با کامپوننت‌های قابل استفاده مجدد برای نمایش داده‌ها، ورودی‌های فرم و موارد دیگر استفاده شود.

نتیجه‌گیری

Stencil یک ابزار قدرتمند و همه‌کاره برای ساخت وب کامپوننت‌ها است. تمرکز آن بر عملکرد، سازگاری بین فریمورک‌ها و تجربه توسعه عالی، آن را به گزینه‌ای عالی برای ایجاد کامپوننت‌های رابط کاربری قابل استفاده مجدد برای برنامه‌های وب مدرن تبدیل می‌کند. چه در حال ساخت یک سیستم طراحی، یک پلتفرم تجارت الکترونیک یا یک وب‌سایت ساده باشید، Stencil می‌تواند به شما در ایجاد کامپوننت‌های مقیاس‌پذیر و قابل نگهداری کمک کند که عملکرد و قابلیت نگهداری برنامه شما را بهبود می‌بخشد. با پذیرش وب کامپوننت‌ها و بهره‌گیری از ویژگی‌های Stencil، توسعه‌دهندگان می‌توانند برنامه‌های وب قوی‌تر، انعطاف‌پذیرتر و آینده‌نگرتر بسازند.

همانطور که چشم‌انداز توسعه وب به تکامل خود ادامه می‌دهد، Stencil در موقعیت خوبی برای ایفای نقشی مهم در شکل‌دهی آینده توسعه رابط کاربری قرار دارد. تعهد آن به استانداردهای وب، بهینه‌سازی عملکرد و تجربه مثبت توسعه‌دهنده، آن را به ابزاری ارزشمند برای هر توسعه‌دهنده وبی تبدیل می‌کند که به دنبال ساخت وب کامپوننت‌های با کیفیت بالا است.