Bugün, yeni nesil web geliştirme kitaplığımızın (lit-html ve LitElement) ilk kararlı sürümünü duyurmanın heyecanını yaşıyoruz.
lit-html, HTML şablonları için küçük, hızlı, ifade gücü yüksek 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 muhtemelen lit-html ve LitElement hakkında bilgi sahibisinizdir (dilerseniz sona atlayabilirsiniz). lit-html ve LitElement kullanmaya yeni başladıysanız genel bir bakış için okumaya devam edin.
lit-html: HTML şablonları için küçük, hızlı bir kitaplık
lit-html, HTML şablonu için küçük (3.000'den fazla paketlenmiş, küçültülmüş ve gzip uygulanmış bir) hızlı JavaScript kitaplığıdır. lit-html, işlevsel programlama yaklaşımlarıyla iyi bir şekilde çalışarak uygulamanızın kullanıcı arayüzünü, durumunun bir işlevi olarak bildirimli şekilde ifade etmenizi sağlar.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
lit-html şablonu oluşturmak oldukça kolaydır:
render(myTemplate('Ada'), document.body);
Bir şablonu yeniden oluşturduğunuzda yalnızca değiştirilen veriler güncellenir:
render(myTemplate('Grace'), document.body);
lit-html verimli, etkileyici ve genişletilebilir:
- Verimli. lit-html ışık hızında çalışır. Veriler değiştiğinde lit-html'nin herhangi bir değişiklik yapması gerekmez. Bunun yerine, ifadeleri şablonda nereye eklediğinizi hatırlar ve yalnızca bu dinamik parçaları günceller.
- Expressive: lit-html, JavaScript'in, bildirim temelli kullanıcı arayüzünün ve işlevsel programlama kalıplarının gücünü size sunar. lit-html şablonundaki ifadeler sadece JavaScript olduğundan, özel bir söz dizimi öğrenmeniz gerekmez ve dilin tüm ifade gücüne sahip olursunuz. lit-html, yerel olarak birçok değer türünü destekler: dizeler, DOM düğümleri, diziler ve daha fazlası. Şablonlar; hesaplanabilen, işlevlere/fonksiyonlardan geçirilebilen ve iç içe geçmiş değerlerdir.
- Genişletilebilir: lit-html, hem özelleştirilebilir hem de genişletilebilir. Kendi şablon oluşturma kitinizdir. Yönergeler, değerlerin işlenme şeklini özelleştirerek eşzamansız değerler, etkili anahtarlı tekrarlar, hata sınırları ve daha fazlasını sağlar. lit-html, çeşitli kullanıma hazır yönergeler içerir ve kendi komutlarınızı tanımlamanızı kolaylaştırır.
Halihazırda bir dizi kitaplık ve projede lit-html kullanılıyor. Bu kitaplıklardan bazılarının listesini GitHub'daki awesome-lit-html deposunda bulabilirsiniz.
Tek ihtiyacınız şablon oluşturmaksa lit-html belgelerini kullanarak hemen başlangıç yapabilirsiniz. Uygulamanızda kullanmak veya ekibinizle paylaşmak istediğiniz bileşenler oluşturmak istiyorsanız daha fazla bilgi edinmek için okumaya devam edin.
LitElement: Hafif bir Web Bileşeni temel sınıfı
LitElement, Web Bileşenleri'ni oluşturmayı ve paylaşmayı hiç olmadığı kadar kolay hale getiren hafif bir temel sınıftır.
LitElement, bileşenleri oluşturmak için lit-html'yi kullanır ve reaktif özellikleri ve özellikleri bildirmek için API'ler ekler. Özellikleri değiştiğinde öğeler otomatik olarak güncellenir. Üstelik hiç değişiklik yapmadan hızlı güncellenirler.
Burada, TypeScript'teki basit bir LitElement bileşenini görebilirsiniz:
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
(Ayrıca mükemmel bir vanilla JavaScript API'miz de var.)
Bu, normal bir HTML öğesi kullandığınız her yerde kullanabileceğiniz bir öğe oluşturur:
<name-tag name="Ida"></name-tag>
Web Bileşenleri'ni zaten kullanıyorsanız, bunların artık Chrome, Safari ve Firefox'ta yerel olarak desteklendiğini duymaktan memnun olacaksınız. Yakında Edge desteği sunulacak ve çoklu dolgular yalnızca eski tarayıcı sürümleri için gerekli olacaktır.
Web Bileşenleri'ni kullanmaya yeni başladıysanız, denemelisiniz! Web Bileşenleri, HTML'yi diğer kitaplıklar, araçlar ve çerçevelerle birlikte çalışacak şekilde genişletmenizi sağlar. Bu özellik, kullanıcı arayüzü öğelerini büyük bir kuruluş içinde paylaşmak, web'de herhangi bir yerde kullanıma yönelik bileşenler yayınlamak veya Materyal Tasarım gibi kullanıcı arayüzü tasarım sistemleri oluşturmak için idealdir.
Özel öğeleri HTML kullandığınız her yerde kullanabilirsiniz: ana dokümanınızda, İYS'de, Markdown'da veya React ve Vue gibi çerçevelerle oluşturulmuş görünümlerde. Ayrıca LitElement bileşenlerini, vanilla web teknolojileriyle yazılmış veya Salesforce Lightning Web Bileşenleri, Ionic'in Stencil, SkateJS veya Polymer kitaplığı gibi araçların yardımıyla yapılmış diğer Web Bileşenleriyle de karıştırıp eşleştirebilirsiniz.
Başlayın
lit-html ve LitElement'i denemek ister misiniz? LitElement eğitimi iyi bir başlangıç noktasıdır:
lit-html'yi tek başına kullanmak veya lit-html şablonunu başka bir projeye entegre etmek istiyorsanız lit-html dokümanlarına bakın:
Her zaman olduğu gibi, görüşlerinizi bizimle paylaşın. Slack veya Twitter'dan bize ulaşabilirsiniz. Projelerimiz açık kaynaktır (Elbette!). Ayrıca, GitHub'da hataları ve özellik isteklerini bildirebilir ya da iyileştirmeler önerebilirsiniz: