Bugün, yeni nesil iki web geliştirme kitaplığımızın (lit-html ve LitElement) ilk kararlı sürümlerini duyurmanın heyecanını yaşıyoruz.
lit-html, HTML şablonları için küçük, hızlı ve etkileyici bir kitaplıktır. LitElement, lit-html şablonlarıyla web bileşenleri oluşturmak için basit bir temel sınıftır.
Projeleri takip ediyorsanız lit-html ve LitElement'in neyle ilgili olduğunu muhtemelen biliyorsunuzdur (isterseniz sonuna atlayabilirsiniz). lit-html ve LitElement'te yeniyseniz genel bakış için okumaya devam edin.
lit-html: HTML şablon oluşturma için küçük ve hızlı bir kitaplık
lit-html, HTML şablonları için küçük (birleştirilmiş, sıkıştırılmış ve gzip'lenmiş haliyle 3 binin biraz üzerinde) ve hızlı bir JavaScript kitaplığıdır. lit-html, işlevsel programlama yaklaşımlarıyla iyi çalışır ve uygulamanızın kullanıcı arayüzünü, durumunun bir işlevi olarak açık bir şekilde ifade etmenize olanak tanır.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
lit-html şablonunu oluşturmak kolaydır:
render(myTemplate('Ada'), document.body);
Bir şablonu yeniden oluşturmak yalnızca değişen verileri günceller:
render(myTemplate('Grace'), document.body);
lit-html verimli, etkileyici ve genişletilebilirdir:
- Verimli: lit-html son derece hızlıdır. Veriler değiştiğinde lit-html'nin herhangi bir karşılaştırma yapması gerekmez. Bunun yerine, şablonunuza ifadeleri nereye eklediğinizi hatırlar ve yalnızca bu dinamik bölümleri günceller.
- Anlaşılır: lit-html, JavaScript, açıklayıcı kullanıcı arayüzü ve işlevsel programlama kalıplarının tüm gücünü size sunar. lit-html şablonlarındaki ifadeler yalnızca JavaScript olduğundan özel bir söz dizimi öğrenmeniz gerekmez ve dilin tüm ifade gücünden yararlanabilirsiniz. lit-html, dizeler, DOM düğümleri, diziler ve daha fazlası gibi birçok değer türünü doğal olarak destekler. Şablonlar, hesaplanabilen, işlevlere iletilebilen, işlevlerden alınabilen ve iç içe yerleştirilebilen değerlerdir.
- Genişletilebilir: lit-html, özelleştirilebilir ve genişletilebilirdir. Kendi şablon oluşturma kitinizdir. Direktifler, değerlerin nasıl işleneceğini özelleştirerek asenkron değerlere, verimli anahtarlanmış tekrarlara, hata sınırlarına ve daha fazlasına olanak tanır. lit-html, kullanıma hazır birkaç direktif içerir ve kendi direktifinizi tanımlamayı kolaylaştırır.
lit-html, birçok kitaplık ve projeye zaten dahil edilmiştir. Bu kitaplıklardan bazılarının listesini GitHub'daki awesome-lit-html deposunda bulabilirsiniz.
Tek ihtiyacınız şablon oluşturma ise lit-html belgelerini inceleyerek hemen başlayabilirsiniz. Uygulamanızda kullanmak veya ekibinizle paylaşmak için bileşen oluşturmak istiyorsanız daha fazla bilgi edinmek için okumaya devam edin.
LitElement: hafif bir Web Bileşeni taban sınıfı
LitElement, web bileşenlerini oluşturmayı ve paylaşmayı hiç olmadığı kadar kolaylaştıran hafif bir temel sınıftır.
LitElement, bileşenleri oluşturmak için lit-html'yi kullanır ve reaktif özellikleri ve özellikleri tanımlamak için API'ler ekler. Öğeler, özellikleri değiştiğinde otomatik olarak güncellenir. Ayrıca, fark karşılaştırması yapmadan hızlı güncellenir.
TypeScript'te basit bir LitElement bileşeni aşağıda verilmiştir:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Ayrıca harika bir JavaScript API'miz de var.)
Bu işlem, normal bir HTML öğesini kullanabileceğiniz her yerde kullanabileceğiniz bir öğe oluşturur:
<name-tag name="Ida"></name-tag>
Web bileşenlerini zaten kullanıyorsanız artık Chrome, Safari ve Firefox'ta yerel olarak desteklendiklerini duymak sizi mutlu edecektir. Edge desteği yakında kullanıma sunulacaktır. Polifiller yalnızca eski tarayıcı sürümleri için gereklidir.
Web bileşenlerini kullanmaya yeni başladıysanız bunları denemeniz önerilir. Web bileşenleri, HTML'yi diğer kitaplıklar, araçlar ve çerçevelerle birlikte çalışacak şekilde genişletmenize olanak tanır. Bu, kullanıcı arayüzü öğelerini büyük bir kuruluş içinde paylaşmak, bileşenleri web'in herhangi bir yerinde kullanılmak üzere yayınlamak veya Materyal Tasarım gibi kullanıcı arayüzü tasarım sistemleri oluşturmak için idealdir.
Özel öğeleri, HTML'yi kullandığınız her yerde kullanabilirsiniz: ana belgenizde, içerik yönetim sisteminde, Markdown'da veya React ve Vue gibi çerçevelerle oluşturulmuş görünümlerde. LitElement bileşenlerini, standart web teknolojileri kullanılarak yazılmış veya Salesforce Lightning Web Bileşenleri, Ionic'in Stencil, SkateJS veya Polymer kitaplığı gibi araçlar yardımıyla oluşturulmuş diğer web bileşenleriyle de kullanabilirsiniz.
Başlayın
lit-html ve LitElement'i denemek ister misiniz? LitElement eğitimiyle başlamanız önerilir:
lit-html'i tek başına kullanmak veya lit-html şablonlarını başka bir projeye entegre etmek istiyorsanız lit-html belgelerine bakın:
Her zaman olduğu gibi, düşüncelerinizi bizimle paylaşın. Bize Slack veya Twitter üzerinden ulaşabilirsiniz. Projelerimiz açık kaynaktır (elbette!). GitHub'da hata bildirebilir, özellik isteği gönderebilir veya iyileştirme önerisinde bulunabilirsiniz: