قالب‌ها و اجزای وب سریع - lit-html & LitElement

امروز ما مشتاقیم که اولین نسخه پایدار دو کتابخانه توسعه وب نسل بعدی خود را اعلام کنیم: lit-html و LitElement .

lit-html یک کتابخانه کوچک، سریع و رسا برای قالب HTML است. LitElement یک کلاس پایه ساده برای ایجاد کامپوننت های وب با قالب های lit-html است.

اگر پروژه‌ها را دنبال کرده‌اید، احتمالاً می‌دانید که lit-html و LitElement در مورد چیست (و اگر دوست دارید می‌توانید به پایان بروید ). اگر با lit-html و LitElement تازه کار هستید، برای بررسی کلی به ادامه مطلب بروید.

lit-html: یک کتابخانه کوچک و سریع برای قالب‌بندی HTML

lit-html یک کتابخانه کوچک و سریع جاوا اسکریپت برای قالب‌بندی HTML است. lit-html با رویکردهای برنامه نویسی تابعی به خوبی کار می کند و به شما امکان می دهد رابط کاربری برنامه خود را به صورت توضیحی و تابعی از وضعیت آن بیان کنید.

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

ارائه یک الگوی lit-html ساده است:

render(myTemplate('Ada'), document.body);

رندر مجدد یک الگو فقط داده های تغییر یافته را به روز می کند:

render(myTemplate('Grace'), document.body);

lit-html کارآمد، گویا و قابل توسعه است:

  • کارآمد . lit-html بسیار سریع است. هنگامی که داده ها تغییر می کنند، lit-html نیازی به انجام هیچ تغییری ندارد. در عوض، آن را به یاد می آورد که در آن عبارات را در قالب خود درج کرده اید و فقط این بخش های پویا را به روز می کند.
  • رسا . lit-html قدرت کامل جاوا اسکریپت، رابط کاربری اعلانی و الگوهای برنامه نویسی کاربردی را به شما می دهد. عبارات موجود در یک قالب lit-html فقط جاوا اسکریپت هستند، بنابراین شما نیازی به یادگیری یک نحو سفارشی ندارید و تمام بیان زبان را در اختیار دارید. lit-html انواع مختلفی از مقادیر را به صورت بومی پشتیبانی می کند: رشته ها، گره های DOM، آرایه ها و موارد دیگر. خود الگوها مقادیری هستند که می توان آنها را محاسبه کرد، به توابع ارسال کرد و از آنها عبور داد و تودرتو کرد.
  • توسعه پذیر : lit-html همچنین قابل تنظیم و توسعه است - کیت ساخت قالب خود شما. دستورالعمل‌ها نحوه پردازش مقادیر را سفارشی می‌کنند و به مقادیر ناهمزمان، تکرارهای کلیدی کارآمد، مرزهای خطا و موارد دیگر اجازه می‌دهند. lit-html شامل چندین دستورالعمل آماده برای استفاده است و تعریف خود را آسان می کند.

تعدادی از کتابخانه ها و پروژه ها قبلاً از lit-html استفاده کرده اند. شما می توانید لیستی از برخی از این کتابخانه ها را در مخزن awesome-lit-html در GitHub بیابید.

اگر الگوسازی تمام چیزی است که نیاز دارید، می‌توانید اکنون با اسناد lit-html شروع کنید. اگر می‌خواهید اجزایی بسازید تا در برنامه خود از آنها استفاده کنید یا با تیم خود به اشتراک بگذارید، برای کسب اطلاعات بیشتر به ادامه مطلب مراجعه کنید.

LitElement: یک کلاس پایه Web Component سبک وزن

LitElement یک کلاس پایه سبک وزن است که ساخت و اشتراک گذاری کامپوننت های وب را آسان تر از همیشه می کند.

LitElement از lit-html برای ارائه کامپوننت ها استفاده می کند و API ها را برای اعلام ویژگی ها و ویژگی های واکنشی اضافه می کند. هنگامی که ویژگی های آنها تغییر می کند، عناصر به طور خودکار به روز می شوند. و آنها به سرعت ، بدون تفاوت به روز می شوند.

در اینجا یک جزء ساده LitElement در TypeScript وجود دارد:

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(ما یک API جاوا اسکریپت وانیلی عالی نیز داریم.)

این یک عنصر ایجاد می کند که می توانید در هر جایی که از یک عنصر معمولی HTML استفاده می کنید استفاده کنید:

<name-tag name="Ida"></name-tag>

اگر قبلاً از Web Components استفاده می‌کنید، خوشحال می‌شوید که اکنون به صورت بومی در کروم، سافاری و فایرفاکس پشتیبانی می‌شوند. پشتیبانی از Edge به زودی ارائه می‌شود و polyfills فقط برای نسخه‌های مرورگر قدیمی مورد نیاز است.

اگر با Web Components تازه کار هستید، باید آنها را امتحان کنید! کامپوننت های وب به شما امکان می دهند HTML را به گونه ای گسترش دهید که با کتابخانه ها، ابزارها و چارچوب های دیگر تعامل داشته باشد. این آنها را برای به اشتراک گذاری عناصر UI در یک سازمان بزرگ، انتشار مؤلفه ها برای استفاده در هر نقطه از وب یا ساختن سیستم های طراحی UI مانند طراحی متریال ایده آل می کند.

می‌توانید از عناصر سفارشی در هر جایی که از HTML استفاده می‌کنید استفاده کنید: در سند اصلی، در یک CMS، در Markdown یا در نماهایی که با چارچوب‌هایی مانند React و Vue ساخته شده‌اند . همچنین می‌توانید اجزای LitElement را با سایر مؤلفه‌های وب ترکیب و مطابقت دهید، خواه آنها با استفاده از فناوری‌های وب وانیلی نوشته شده باشند یا با کمک ابزارهایی مانند Salesforce Lightning Web Components ، Ionic's Stencil ، SkateJS یا کتابخانه Polymer ساخته شده باشند.

شروع کنید

آیا می خواهید lit-html و LitElement را امتحان کنید؟ یک نقطه شروع خوب، آموزش LitElement است:

اگر به استفاده از lit-html به تنهایی یا ادغام قالب lit-html در پروژه دیگری علاقه دارید، به اسناد lit-html مراجعه کنید:

مثل همیشه، نظر خود را با ما در میان بگذارید. می توانید از طریق Slack یا Twitter با ما تماس بگیرید. پروژه‌های ما منبع باز هستند (البته!) و می‌توانید اشکالات، درخواست‌های ویژگی فایل یا پیشنهاد بهبود در GitHub را گزارش کنید: