Web bileşenleri yalnızca vanilya JavaScript ile kesinlikle kullanılabilirken, özellikle değer bağlamayla ilgili daha karmaşık kullanım, kolayca hantal hale gelebilir.
Olası bir çözüm, VueJS veya React gibi bir web bileşeni çerçevesi kullanmak olabilir. Bununla birlikte, web standardı bileşenler hala geliştirme için büyük bir nimet olabilir.
Bu nedenle, özellikle web bileşenlerinden yararlanmak için geliştirilmiş “Lit” adlı bir çerçeve vardır. Kararlı bir sürüm olarak piyasaya sürülen Lit 2.0 ile web bileşeni geliştirmeyi nasıl basitleştirebileceğimize bir göz atacağımızı düşündük.
HTML
Özel öğelerin en güçlü yönlerinden biri, birden çok başka öğe içerme yeteneğidir. Bu, her ölçek için özel öğelere sahip olmanızı sağlar: bir düğmeden tüm sayfaya.
Bunu bir vanilya JavaScript özel öğesinde yapmak için, yeni alt öğeler oluşturmak üzere “innerHTML“yi kullanabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> class OrnekComponent extends HTMLElement { connectedCallback() { this.render(); } render() { this.innerHTML = '<p>Merhaba Dünya!</p>'; } } window.customElements.define('merhaba-component', OrnekComponent); </script> <merhaba-component></merhaba-component> |
Bu ilk örnek, bu kodun Lit karşılığına oldukça benziyor:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class MerhabaElement extends LitElement { render() { return html` <p>Merhaba Lit!</p> `; } } window.customElements.define('merhaba-component', MerhabaElement); </script> <merhaba-component></merhaba-component> |
Vanilla JavaScript örneğinden iki temel fark vardır. İlk olarak, artık “render“ı çağırmak için “connectedCallback“i kullanmamız gerekmiyor. LitElement‘in ‘render‘ işlevi, gerektiğinde – örneğin veri değiştiğinde veya bir ilk işleme için – Lit tarafından çağrılır ve işleme yöntemini manuel olarak yeniden çağırma gereksinimini ortadan kaldırır.
Bununla birlikte, Lit bileşenleri, vanilya özel öğeleriyle aynı yaşam döngüsü metotlarını tam olarak destekler.
Vanilya JavaScript bileşeninden Lit uygulamasına geçişte kaçırılması daha kolay olan ikinci değişiklik, HTML’mizi ayarlarken basit bir template literal <p>Merhaba Lit!</p> kullanıyoruz.
Bu, etiketli şablonlar adı verilen şablon değişmezlerinin biraz nadiren kullanılan bir özelliğinden yararlanır. Etiketli şablonlar, bir şablon değişmezinin bir işleve geçirilmesine izin verir. Bu işlev daha sonra çıktıyı dize girdisine ve beklenen enterpolasyonlu yer tutuculara dayalı olarak dönüştürebilir.
Etiketli şablonlar, diğer işlevler gibi bir değer döndürdüğü için, bir değişkene “html“nin dönüş değerini atayabilirsiniz.
1 2 3 4 5 6 7 8 | render() { const el = html` <p>Merhaba Lit!</p> `; return el; } |
Bu değeri “console.log” yapacak olsaydınız, bunun bir HTMLElement olmadığını fark ederdiniz. Bunun yerine, Lit’in uygun DOM düğümlerine işlemek için kullandığı özel bir değerdir.
Event Binding
“Sözdizimi çok benzerse, özel öğeler oluşturmak için neden bir çerçeve ekleyeyim?”
Vanilla JavaScript ve Lit özel öğe kodu küçük bir demo için benzer görünse de: Büyütmek istediğinizde hikaye önemli ölçüde değişir.
Örneğin, bir buton oluşturmak ve vanilya JavaScript ile butna bir tıklama olayı eklemek istiyorsanız, innerHTML eleman atama yöntemini terk etmeniz gerekir.
İlk önce, “document.createElement” kullanarak bir öğe oluşturacağız, ardından olayları ekleyeceğiz ve son olarak düğümü DOM’a eklemek için “append” gibi bir öğe yöntemini kullanacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script> class OrnekComponent extends HTMLElement { connectedCallback() { this.render(); } selamla() { alert("Merhaba Tasarım Kodlama!"); } render() { const button = document.createElement('button'); button.innerText = "Merhaba Söyle!"; button.addEventListener('click', this.selamla); this.append(button); } } window.customElements.define('merhaba-component', OrnekComponent); </script> <merhaba-component></merhaba-component> </body> </html> |
Bu, ilk oluşturma için işe yarasa da, geniş ölçekte uygulamanızın sürdürülebilirliği ve performansında uzun vadeli hasara neden olabilecek herhangi bir Edge vakasını işlemez.
Örneğin, öğenin gelecekteki yeniden oluşturma işlemleri düğmeyi çoğaltacaktır. Bunu çözmek için, öğenin tüm “alt öğelerini” yinelemeli ve bunları birer birer “kaldırmalısınız”.
Ayrıca, öğe DOM’den kaldırıldığında, tıklama dinleyicisi arka planda örtük olarak kaldırılmaz. Bu nedenle, hiçbir zaman bellekten serbest bırakılmaz ve bir bellek sızıntısı olarak kabul edilir. Bu sorun, uygulamanızın uzun süreli kullanımı sırasında oluşmaya devam ederse, büyük olasılıkla bellek kullanımını şişirir ve sonunda kilitlenir veya askıda kalır.
Bunu çözmek için, sahip olduğunuz her ‘addEventListener‘ için bir değişken atamanız gerekir. Bu, bir veya iki etkinlik için basit olabilir, ancak çok fazla ekleyin ve takip etmek zor olabilir.
Ve tüm bunlar bakım bakış açısını yok sayar: Bu kod bir bakışta ne yapar?
HTML gibi bir şeye benzemiyor ve sonuç olarak, bir dizede standart HTML yazmak ile öğeleri oluşturmak için DOM API’lerini kullanmak arasında tutarlı bir şekilde bağlam kayması yapmanızı gerektiriyor.
Neyse ki, Lit’in bu sorunları yok. Vanilla JavaScript yerine Lit kullanarak özel bir öğeye aynı düğme yapımı ve işlemesi:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class MerhabaElement extends LitElement { selamla() { alert("Merhaba Tasarım Kodlama!"); } render() { return html` <button @click=${this.selamla}>Merhaba Söyle!</button> `; } } window.customElements.define('merhaba-component', MerhabaElement); </script> <merhaba-component></merhaba-component> </body> </html> |
Evet, hepsi bu. Lit, “@” işaretini kullanarak ve işlevi “html” etiketli şablona yer tutucu olarak ileterek öğeleri bağlamanıza olanak tanır. Bu yalnızca HTML benzeri görünmekle kalmaz, olay temizleme, yeniden oluşturma ve daha fazlasını da gerçekleştirir.
Nitelikler ve Özellikler
Daha önce öğrendiğimiz gibi, bileşenler arasında ve bileşenlere değer aktarmanın iki yolu vardır: nitelikler ve değerler.
Önceden Vanilla JavaScript kullanırken bunları ayrı ayrı tanımlamamız gerekiyordu. Ayrıca, hangi özniteliklerin değer değişikliklerini dinamik olarak dinleyeceğimizi bildirmemiz gerekiyordu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script> class OrnekComponent extends HTMLElement { connectedCallback() { this.render(); } static get observedAttributes() { return ['mesaj']; } attributeChangedCallback(name, oldValue, newValue) { this.render(); } render() { console.log() const mesaj = this.constructor.observedAttributes["mesaj"] || 'Merhaba Dünya'; this.innerHTML = `<h1>${mesaj}</h1>`; } } window.customElements.define('merhaba-component', OrnekComponent); </script> <merhaba-component></merhaba-component> </body> </html> |
Lit’te, öznitelikleri ve özellikleri statik bir alıcı kullanarak bildiririz ve bunları herhangi bir işlevimizde normal değerler olarak ele alırız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class MerhabaElement extends LitElement { static get properties() { return { mesaj: {type: String}, }; } constructor() { super(); this.mesaj = 'Merhaba Dünya'; } render() { return html` <h1>${this.mesaj}</h1> `; } } window.customElements.define('merhaba-component', MerhabaElement); </script> <merhaba-component></merhaba-component> </body> </html> |
Yeni başlayanlar için, bir özelliğin değeri değiştiğinde artık manuel olarak “render” çağırmamız gerekmiyor. Değerler değiştirildiğinde Lit yeniden oluşturulacaktır.
Yine de hepsi bu kadar değil: Dikkatli okuyucular, “mesaj” özelliğiyle ilişkili bir tür bildirdiğimizi fark edeceklerdir.
React ekosisteminin PropType‘larından farklı olarak, “type” alt özelliği, çalışma zamanı türü doğrulaması yapmaz. Bunun yerine, otomatik tip dönüştürücü görevi görür.
Özniteliklerin yalnızca dizeler olabileceği bilgisi hata ayıklama sırasında hatırlanması zor olabileceğinden, bu çok yardımcı olabilir.
Örneğin, Lit’e bir niteliği bir Sayıya dönüştürmesini söyleyebiliriz ve sayı gibi görünen bir dizeden gerçek bir JavaScript türü numarasına geçecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class MerhabaElement extends LitElement { static get properties() { return { deger: {type: Number}, }; } render() { return html` <h1>${this.deger} Türü: ${typeof this.deger}</h1> `; } } window.customElements.define('merhaba-component', MerhabaElement); </script> <!-- 123 Türü: number --> <merhaba-component deger="123"></merhaba-component> <!-- NaN Türü: number --> <merhaba-component deger="Deneme"></merhaba-component> </body> </html> |
Özellik Tepkimesi
Manuel olarak “render” çağırmak zorunda kalmamanın en büyük faydalarından biri, Lit’in güncellenmesi gerektiğinde içerikleri oluşturabilmesidir.
Örneğin, bu örnekte, içerikler yeni değerlerle güncellenecek şekilde düzgün bir şekilde işlenecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class MerhabaElement extends LitElement { static get properties() { return { deger: {type: Number}, }; } render() { return html` <h1>${this.deger} Türü: ${typeof this.deger}</h1> `; } } window.customElements.define('merhaba-component', MerhabaElement); </script> <script type="module"> //import { html, LitElement } from "lit"; import { html, LitElement } from "https://cdn.skypack.dev/lit"; const sayilar=[ 123, 200, 450, 750, 1000]; export class DegisenMesajElement extends LitElement { static get properties() { return { mesaj: {type: Number}, }; } seciliMesajiDegistir() { const yeniMesaj = sayilar[Math.floor(Math.random() * sayilar.length)]; this.mesaj = yeniMesaj; } constructor() { super(); this.mesaj = 0; } render() { return html` <button @click="${this.seciliMesajiDegistir}">Degistir</button> <merhaba-component deger=${this.mesaj}></merhaba-component> `; } } window.customElements.define('degisen-mesaj-component', DegisenMesajElement); </script> <!-- 123 Türü: number --> <merhaba-component deger="123"></merhaba-component> <!--Mesaj--> <degisen-mesaj-component></degisen-mesaj-component> </body> </html> |
Reaktif Veri Bağlama
Bu tepkisellik kendi sınırlamalarıyla birlikte gelir. Sayılar ve diziler oldukça önemsiz bir şekilde ayarlanabilse de, nesneler (ve uzantı dizileriyle) farklı bir hikaye.
Bunun nedeni, Lit’in oluşturmada hangi özelliklerin güncelleneceğini bilmesi için, bir nesnenin birinden diğerine farklı bir referans değerine sahip olması gerekir. React ve diğer çerçeveler, durumdaki değişiklikleri de bu şekilde algılar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> </head> <body> <!-- Todo Component --> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; export class TodoElement extends LitElement { static get properties() { return { todos: {type: String}, }; } constructor() { super(); this.message = ''; } render() { return html` <h1>${this.todos}</h1> `; } } window.customElements.define('todo-component', TodoElement); </script> <!-- Form Component --> <script type="module"> import { html, css, LitElement } from "https://cdn.skypack.dev/lit@2.0.0-pre.2"; export class FormElement extends LitElement { static get properties() { return { todoList: {type: Array}, inputVal: {type: String}, }; } _onSubmit(e) { e.preventDefault(); this.todoList = [...this.todoList, this.inputVal]; this.inputVal = ''; } _onChange(e) { this.inputVal = e.target.value; } constructor() { super(); this.inputVal = ''; this.todoList = []; } render() { return html` <form @submit="${this._onSubmit}"> <input .value="${this.inputVal}" @change="${this._onChange}" type="text" /> <button type="submit">Ekle</button> </form> <todo-component todos=${this.todoList}></todo-component> `; } } window.customElements.define('form-component', FormElement); </script> <form-component></form-component> </body> </html> |
HTML nitelikleri, verileri bir web bileşenine aktarmanın tek yolu değildir. Öğe sınıfındaki özellikler, bir öğeye yalnızca bir dizeden fazlasını iletmenin bir yoludur.
‘type’ alanı da bu sorunu çözmeye yardımcı olabilir, ancak yine de seri hale getirilebilirlikle sınırlısınız, yani işlevler gibi şeylerin nitelikler tarafından geçemeyeceği anlamına gelir.
Özellikler, web bileşenlerine veri aktarmanın daha sağlam bir yöntemi olsa da, kodlamadaki karmaşıklıkları nedeniyle vanilya JavaScript’te nadiren kullanılırlar.
Örneğin, bu bir diziyi geçirmenin basit bir gösterimidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html> <head> <meta charset="UTF-8"> <script> class MyComponent extends HTMLElement { property = []; connectedCallback() { this.render(); } render() { this.innerHTML = `<h1>${this.property.length}</h1>`; } } customElements.define('my-component', MyComponent); </script> <script> function changeElement() { const compEl = document.querySelector('#mycomp'); compEl.property = [ 'Bir', 'İki', 'Üç' ]; compEl.render(); } </script> </head> <body> <my-component id="mycomp"></my-component> <button onclick="changeElement()">Değiştir ve 3 Yap</button> </body> </html> |
İlk olarak, “querySelector” gibi bir API kullanarak öğeye bir referans almanız gerekir. Bu, bileşene yeni bir referans eklemeniz ve kimliklerin kodun her iki bölümünde de eşleştiğinden emin olmanız gerektiği anlamına gelir.
Ardından, öznitelik değerlerini güncellemede olduğu gibi, UI’yi güncellemek için “render” işlevini manuel olarak çağırmamız gerekiyor.
Ancak bu şikayetler bir yana, bir tane daha var: Verilerinizi ve bileşen etiketlerinizi iki farklı alana yerleştirir. Bu nedenle, hata ayıklamak veya hangi verinin hangi bileşene aktarıldığını anlamak daha zor olabilir.
Lit farklı bir yaklaşım benimsiyor. Bir Lit html etiketli şablon içinde, bir öznitelik bağlamadan önce bir nokta ekleyin ve aniden onun yerine bir özellik olarak geçecektir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <html> <head> <meta charset="UTF-8"> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; class MyElement extends LitElement { static get properties() { return { property: {type: Array}, }; } render() { return html` <h1>${this.property.length}</h1> `; } } window.customElements.define('my-component', MyElement); class ChangeMessageElement extends LitElement { static get properties() { return { array: {type: Array}, }; } constructor() { super(); this.array = []; } changeElement() { this.array = [ 'Bir', 'İki', 'Üç' ]; } render() { return html` <!-- "property"in bir periyodu olmasaydı, nitelik olarak geçerdi --> <my-component .property=${this.array}></my-component> <button @click=${this.changeElement}>3 Yap</button> `; } } window.customElements.define('change-message-component', ChangeMessageElement); </script> </head> <body> <change-message-component></change-message-component> </body> </html> |
Bu işe yarar, çünkü özellikler ve nitelikler, Lit ile aynı anda oluşturulur.
Ancak, nokta bağlamanın HTML standardı olmaması nedeniyle, özellikleri bağlamak için bir Lit şablonu kullanmak zorunda olmanın yan etkisi ile birlikte gelir. Bu, uygulamalarda bir sorun oluşturmaz – çünkü çoğu, uygulamaları boyunca bileşenleri kullanma ve oluşturma eğilimi gösterir.
Dizi Oluşturma
Vanilla JavaScript web bileşenleri hakkındaki makalemizde basit bir yapılacaklar listesi oluşturduk. Bu örneğe bir kez daha bakalım, ancak bu sefer bileşen kodumuz için Lit’i kullanıyoruz. Verileri ve kullanıcı girişini yönetecek olan bir üst “FormElement” ile başlayacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!-- Form Component --> <script type="module"> import { html, css, LitElement } from "https://cdn.skypack.dev/lit@2.0.0-pre.2"; export class FormElement extends LitElement { static get properties() { return { todoList: {type: Array}, inputVal: {type: String}, }; } _onSubmit(e) { e.preventDefault(); this.todoList = [...this.todoList, {name: this.inputVal, completed: false}]; this.inputVal = ''; } _onChange(e) { this.inputVal = e.target.value; } toggleAll() { this.todoList = this.todoList.map(todo => ({...todo, completed: !todo.completed})); } constructor() { super(); this.inputVal = ''; this.todoList = []; } render() { return html` <button @click=${this.toggleAll}>Degistir</button> <form @submit=${this._onSubmit}> <input .value=${this.inputVal} @change=${this._onChange} type="text" /> <button type="submit">Ekle</button> </form> <!-- Notice the period in ".todos" --> <todo-component .todos=${this.todoList}></todo-component> `; } } window.customElements.define('form-component', FormElement); </script> |
Artık bir dizi içeren bir formumuz olduğuna göre, önemli bir soru ortaya çıkıyor: Bir liste için bireysel öğeler oluşturmak için bir diziyi nasıl yineleyeceğiz?
React’te ‘Array.map’ ve Vue’da ‘v-for’ bulunurken, Lit bir ‘repeat’ işlevi kullanır. İşte bir örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class TodoElement extends LitElement { // ... render() { return html` <ul> ${repeat(this.todos, (todo) => html` <li> <input type="checkbox" .checked=${todo.completed}/> ${todo.name} </li> `)} </ul> `; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <html> <head> <meta charset="UTF-8"> <!-- Todo Component --> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; import { repeat } from "https://cdn.skypack.dev/lit/directives/repeat.js"; export class TodoElement extends LitElement { static get properties() { return { todos: {type: Array}, }; } constructor() { super(); this.todos = []; } render() { return html` <ul> ${repeat(this.todos, (todo) => html` <li> <input type="checkbox" .checked=${todo.completed}/> ${todo.name} </li> `)} </ul> `; } } window.customElements.define('todo-component', TodoElement); </script> <!-- Form Component --> <script type="module"> import { html, css, LitElement } from "https://cdn.skypack.dev/lit@2.0.0-pre.2"; export class FormElement extends LitElement { static get properties() { return { todoList: {type: Array}, inputVal: {type: String}, }; } _onSubmit(e) { e.preventDefault(); this.todoList = [...this.todoList, {name: this.inputVal, completed: false}]; this.inputVal = ''; } _onChange(e) { this.inputVal = e.target.value; } toggleAll() { this.todoList = this.todoList.map(todo => ({...todo, completed: !todo.completed})); } constructor() { super(); this.inputVal = ''; this.todoList = []; } render() { return html` <button @click=${this.toggleAll}>Degistir</button> <form @submit=${this._onSubmit}> <input .value=${this.inputVal} @change=${this._onChange} type="text" /> <button type="submit">Ekle</button> </form> <!-- Notice the period in ".todos" --> <todo-component .todos=${this.todoList}></todo-component> `; } } window.customElements.define('form-component', FormElement); </script> </head> <body> <form-component></form-component> </body> </html> |
Geçiş Fonksiyonları
Lit’in artılarını ve eksilerini konuşmak için koddan uzaklaşmadan önce (şşş, spoiler!); bugün bahsettiğimiz vanilya JavaScript web bileşenlerine göre birçok avantajı gösteren bir kod örneğine bakalım.
Önceki blog gönderisinin okuyucuları, bir web bileşenine bir dizi nesneyi geçirirken işlerin oldukça iyi göründüğünü hatırlayacaktır.
Olay dinleyicilerini bir dizi nesneye bağlamayı deneyene kadar işler karmaşık (ve dağınık) hale geldi. Öğeleri “document” kullanarak manuel olarak oluşturma ihtiyacı, özellikleri geçmek için “querySelector” ile uğraşma, manuel olarak “render” çağırma ve özel bir “clear” yöntemini uygulamaya ihtiyaç duyma arasında – karmaşık bir deneyimdi.
Lit’in işi nasıl ele aldığını görelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <html> <head> <meta charset="UTF-8"> <!-- Todo Component --> <script type="module"> import { html, LitElement } from "https://cdn.skypack.dev/lit"; import { repeat } from "https://cdn.skypack.dev/lit/directives/repeat.js"; export class TodoElement extends LitElement { static get properties() { return { todos: {type: Array}, }; } constructor() { super(); this.todos = []; } render() { const headerText = this.todos.filter(todo => todo.completed).length; return html` <h1>${headerText}</h1> <ul> ${repeat(this.todos, (todo) => html` <li> <input type="checkbox" @change=${todo.onChange} .checked=${todo.completed}/> ${todo.name} </li> `)} </ul> `; } } window.customElements.define('todo-component', TodoElement); </script> <!-- Form Component --> <script type="module"> import { html, css, LitElement } from "https://cdn.skypack.dev/lit@2.0.0-pre.2"; export class FormElement extends LitElement { static get properties() { return { todoList: {type: Array}, inputVal: {type: String}, currTodoId: {type: Number}, }; } _onSubmit(e) { e.preventDefault(); const todoId = this.currTodoId++; this.todoList = [...this.todoList, { name: this.inputVal, completed: false, id: todoId, onChange: () => { this.toggleTodoItem(todoId) } }]; this.inputVal = ''; } _onChange(e) { this.inputVal = e.target.value; } toggleTodoItem(todoId) { this.todoList = this.todoList.map(todo => { if (todo.id !== todoId) return todo; return { ...todo, completed: !todo.completed } }) } toggleAll() { this.todoList = this.todoList.map(todo => ({...todo, completed: !todo.completed})); } constructor() { super(); this.inputVal = ''; this.todoList = []; this.currTodoId = 0; } render() { return html` <button @click=${this.toggleAll}>Toggle all</button> <form @submit=${this._onSubmit}> <input .value=${this.inputVal} @change=${this._onChange} type="text" /> <button type="submit">Add</button> </form> <!-- Notice the period in ".todos" --> <todo-component .todos=${this.todoList}></todo-component> `; } } window.customElements.define('form-component', FormElement); </script> </head> <body> <form-component></form-component> </body> </html> |
‘render’ yöntemimizde bir ‘filtre’ kullandığımızı fark edeceksiniz. Bu mantık ‘render’ metodu içinde olduğu için her UI güncellemesinde çalışacaktır. Pahalı işlemleriniz olması durumunda bunu not etmek önemlidir: bunları render yönteminde çalıştırmaktan kaçınmalısınız.
Ancak bunun dışında – hepsi bu kadar! Tıpkı HTML’nin yaptığı gibi okur (temizleme ve pervane geçişinin ek avantajıyla), dinamik verileri işler ve daha fazlasını yapar!
Sonuç
Bir uygulamada Lit’ten yararlanma yeteneği, bir projeyi sürdürmeyi ve geliştirmeyi, web bileşenlerini kendiniz yuvarlamaktan daha kolay hale getirir.
Lit, Polimerin ilk günlerinden itibaren web bileşenlerinde önemli bir büyüme göstermektedir. Bu büyüme, Lit ekibinin kendisinden de kaynaklanmıyor!
Tam teşekküllü bir çerçeve olmadan önce proje, Polymer’in bir dalı olan ‘lit-html’ paketinden başladı. Polymer ekibi, web bileşenlerinin modern varyantını standartlaştırmada etkili oldu.
Lit’i kullanma yeteneği, web bileşeni geliştirmeyi güçlü bir şekilde artırabilir, ancak orada başka seçenekler de var. Bir dahaki sefere rakiplerin ne yaptığından, her birinin artı ve eksilerinin neler olduğundan ve uygulamalarınız için en iyi seçimi nasıl yapabileceğinizden bahsedeceğiz.
1 Yorum