Lit - Hızlı ve hafif web bileşeni geliştirme kütüphanesi

• Web bileşeni standartlarını temel alarak yalnızca reaktivite, bildirimsel şablonlar ve minimum boilerplate ekler
• 5KB düzeyindeki küçük boyutu ve hızlı render performansıyla, yalnızca değişen UI bölümlerini güncelleyerek performansı ve yükleme hızını optimize eder
• Tüm Lit bileşenleri yerel web bileşenleridir ve framework'ten bağımsız olarak HTML'nin kullanılabildiği her yerde yeniden kullanılabilir
• Shadow DOM kullanarak varsayılan olarak stil kapsamını sınırlar; böylece CSS seçicileri sadeleşir ve diğer stillerle çakışmalar önlenir
• Reactive Property ile bileşen API'sini ve iç durumu modeller, özellik değiştiğinde verimli yeniden render desteği sunar
• Tagged template Literals tabanlı şablonlarla hızlı ve basittir
• Paylaşılan bileşenlerden tasarım sistemlerine, vendor bağımlılığını azaltan ve bakım kolaylığını artıran tam uygulama geliştirmeye kadar çeşitli web projelerinde kullanılabilir
• Eğitim sunulur
• GitHub

[devstudyman7]

3 yıldır böyle hissediyorum; vanilla web component’leri doğrudan kullanmak için hızlı ve geçiş dönemi için bir framework gibi hissettiriyor ama yavaş..

[cnaa97]

Ne anlama geliyor?

[bluemir]

Web standartlarındaki Web Components ve yalnızca lit-html kullanarak operasyon araçları geliştiriyorum; bilinmesi gereken bilgi miktarının en aza inmiş olması hoşuma gidiyor. lit-html içinde kullandığım özellikler de sadece event handler binding ve loop templating düzeyinde. (Geri kalanı için web standartları yeterli oluyor..) Değişiklik olduğunda render'ı elle çağırmak zorunda olmanın yarattığı bir rahatsızlık var, ama öte yandan değişken değişimini otomatik algılayıp örtük davranışlar sergilemesindense, açık bir çağrının yardımcı olduğu yönleri de var. Sonuçta bunlar operasyon araçları olduğu için, farklı ortamlara uyum sağlamak öncelik açısından daha düşük; belki de bu yüzden bana böyle gelmiş olabilir.

[GN⁺]

Hacker News görüşleri

• Şirketteki bir projede Lit kullanmıştım; artık kullanmıyor olmamız gerçekten içimi rahatlatıyor
  Zaten ağır bir framework kullanıyorduk, birinin özgeçmişine bir satır daha eklemek için Lit’i de eklemesi büyük bir yüktü
  Shadow DOM özellikle erişilebilirlik (A11y) sorunlarını daha da ağırlaştırdı. id kapsamı ayrılınca label-for, describe-by gibi bağlantılar bozuldu ve epey uğraştık
  Tabii bunun bir kısmı da ekibimizin beceri eksikliği sorunuydu
  • React kod tabanına Web Components entegre etmek gerçekten çok zordu. Bence bu Lit’ten çok Web Components’in kendisiyle ilgili bir sorun
    Stil kapsamlanıyor ama yazı tipi boyutu gibi kritik kısımlar istisna olduğu için, her değiştirmede küçük regresyon hataları çıkmaya devam etti
    DX de ciddi biçimde düştü; araçların iyileşmesini umuyorum ama şu an sadece yorucu bir durum
  • Lit’te Shadow DOM isteğe bağlıdır; bunu bileşen bazında devre dışı bırakabilirsiniz
  • Birinin sırf özgeçmişini doldurmak için teknoloji devreye aldığı durumlar gerçekten bu kadar yaygın mı diye merak ediyorum.
    Aslında daha yaygın olan, sadece yeni bir şeyi denemek istediği için pek gerekçelendirmeden devreye almak gibi görünüyor
• Lit için bir durum yönetimi kütüphanesini kendim yazdım (258 satır, https://github.com/gitaarik/lit-state)
  Karmaşık uygulamalarda iç içe geçmiş bileşenler etkileşirken iyi çalıştı; React’e benziyor ama çok daha tarayıcıya özgü yerel, daha az boilerplate içeriyor ve render da daha hızlı
  Lit’in neden daha popüler olmadığını anlayamayacak kadar memnunum
  • Ben de Lit’in iç işleyişini anlamak için temelden yeniden uygulamıştım
    Temel işlevler şaşırtıcı derecede basit ve büyük ölçüde platform API’lerine dayanıyor
    Bu yüzden herkes kendisi uygulayabilir; bence bu sadelik çok değerli
    Bu arada yaptığım alternatif uygulama: https://github.com/ruphin/lite-html
• Ben Lit’in maintainer’ıyım. Bugün neden birden HN ana sayfasına çıktığını bilmiyorum ama sorunuz varsa yanıtlayabilirim
  • lit-html gerçekten çok kullanışlı; neredeyse tüm kişisel projelerimde kullanıyorum
    CDN’den doğrudan çağırıp build adımı olmadan deneyebilmek de büyük avantaj
    Diğer framework’ler kadar ağır değil; sanki sadece Vanilla JS + HTML kullanıyormuşsunuz gibi, bilişsel yük neredeyse yok
  • Shadow DOM hakkında çok konuşulduğu için ben de düşüncelerimi toparladım
    Shadow DOM, temelde bileşen içi DOM’u ayıran özel bir ağaçtır
    Bu sayede slot kavramı mümkün oluyor ve gerçekten birleştirilebilir bileşenler yapılabiliyor
    Sorun şu ki stil kapsülleme, mevcut sistemlerle entegrasyonda büyük bir engel hâline geliyor
    Bu yüzden Open Styleable Shadow Roots adında bir öneri sundum; dış stilin içeri akmasına izin verirken slot’ları koruyan bir yaklaşım. Hâlâ tarayıcı üreticilerini ikna etmeye çalışıyorum
  • Lit, framework’ün araya girmediği temiz bir araç, bu yüzden tüm kişisel/iş uygulamalarımı Lit ile geliştiriyorum
    Bununla ilgili yazdığım bir yazı da var: https://medium.com/gitconnected/getting-started-with-web-com...
  • Lit sayesinde ister basit ister karmaşık olsun geliştirme keyifli
    Bazen neden daha yaygın kullanılmadığını ben de merak ediyorum
  • Web Components standardına Lit benzeri özelliklerin dahil edilme ihtimali olup olmadığına dair bir soru var
    • Web Components yerel olduğu için güzel ama reaktivite eksik olduğu için benimsenmesi yavaş kalıyor
    • Lit, bu boşluğu dolduran doğal bir uzantı gibi
• Converse.js adlı XMPP sohbet istemcisi projesinde Lit kullandım
  Başlangıçta Backbone.js tabanlıydı; lit-html → lit-element → lit şeklinde kademeli olarak değiştirdik
  Şimdi <converse-root /> adlı bir Web Component olarak sunuluyor; bu sayede React gibi diğer framework’lerle de iyi entegre oluyor
  GitHub: https://github.com/conversejs/converse.js / Demo: https://chat.conversejs.org/
• Bu aralar Lit’e gerek olmadığını düşünüyorum. Sadece saf Web Components ile çalışmak daha rahat geliyor
  Sunucuda JSX benzeri bir şablon sistemi kullanmak yeterince konforlu; istemci tarafı da sadece JS olduğu için yükseltme kaygısı olmuyor
  • Web Components’in avantajı, onları istediğiniz şekilde oluşturabilmeniz
    Ancak yerel API’ler fazla düşük seviyeli, bu yüzden DX zayıf; Lit bunun üstüne deklaratif reaktivite ekliyor
  • Bence Lit, tekrarlayan `` işleme ve DOM bağlama işlerini iyi soyutluyor
    Elle yapınca can sıkıcı olan kısımları temiz biçimde çözüyor
  • Kişisel olarak Lit’in html template literal’ı ile JSX arasında büyük bir fark hissetmedim
    Hatta JSX, derleme aşaması gerektirdiği için daha uğraştırıcı
• Üç yıldır üretimde Lit kullanıyorum. Web Components API’si üstündeki en iyi soyutlama katmanı olduğunu düşünüyorum
  • Benim de benzer bir deneyimim oldu
    Başta bağımlılıksız bir ortamda Web Components’i kendim yapmıştım, sonra LitElement’e geçince çok daha rahat ettiğimi gördüm
    Ancak Shadow DOM varsayılan olsa da bazen daha fazla sorun çıkarıyor; bu yüzden artık Shadow DOM olmadan LitElement kullanıyorum
• 2020’den beri Lit’i üretimde kullanıyorum ve buna asla pişman olmadım
  En büyük avantajı, istikrarlı bir temel üzerinde durması
  Yerel Web Components tüm tarayıcılarda istikrarlı şekilde desteklendiği için framework değiştirme riski olmadan geliştirmeye odaklanabiliyorsunuz
  Keşke daha fazla ekip denese
  Bu arada Lit’i ele alan HTTP 203 videosunu da öneririm
• Frontend işlerinde Lit gerçekten kurtarıcı gibi olmuştu
  Angular fazla ağır, React ise eski tarayıcı kısıtlarına göre tasarlanmış olduğundan bugün daha çok ataletle ayakta duruyor gibi geliyor
  • Eski tarayıcı özelliklerinden tam olarak hangilerini kastettiğini daha ayrıntılı duymak isterim
  • Ben Aurelia framework’ünü seviyorum; standartları iyi izliyor ve kodu da sade
    Angular’ın boilerplate’i ya da React hook’larının karmaşıklığına kıyasla çok daha sezgisel
    Ama ne yazık ki popüler olamadı
  • React’in eski tarayıcı desteği sayesinde meşhur olduğuna dair yorumları görünce bir anda yaşlandığımı hissettim
• Tek başına lit-html render kütüphanesini seviyorum ama Lit’in tamamına ihtiyaç duymadım
  Aslında + Web Components birleşiminin yeterli olduğunu düşünüyorum
• Vue 3 ile yapılmış büyük ölçekli bir projedeki bileşenleri başka sitelerde yeniden kullanmak için Web Component olarak dağıtmayı düşünüyorum
  Ama Vue yerine bunları Lit ile yeniden yazmanın ne gibi bir avantajı olacağını merak ediyorum
  • Hem Vue hem Lit kullandım; kişisel olarak Vue’yu biraz daha iyi buldum
    Vue 3’ün ref/reactive durum yönetimi güçlü ve DOM’a bağlı olmadan test edilebiliyor
    Lit’in reaktivitesi widget düzeyinde; bu yüzden güncelleme tetikleyicilerini kendiniz yönetmeniz gerekiyor
    Vue’nun yaşam döngüsü basitken, Lit’te birden fazla callback’i takip etmek gerekiyor; bu da hata üretmeye daha açık
    Özel bir neden yoksa özellik geliştirmeye odaklanmak daha iyi; teknoloji yığınını değiştirmenin kullanıcıya neredeyse hiç etkisi olmuyor
  • Tüketici açısından Vue ya da Lit fark etmez; sonuçta ortaya çıkan şey Web Components olur
    Vue bir framework olduğu için daha fazla özellik sunar, Lit ise yerel API’lere daha yakın bir uygulama yaklaşımı benimser
    Vue build gerektirir ama Lit çalışma zamanında yükleme ile kullanılabilir
    Vue başka hedeflere de derlenebilirken, Lit yalnızca Web Components’e odaklandığı için daha temizdir
    Sonuçta en önemlisi ekibin daha hâkim olduğu teknolojiyi kullanması
  • Aslında en gerçekçi yaklaşım, sadece bir Web Component paketi üretip dışa aktarmak ve içini istediğiniz gibi uygulamak
    Tüketici iç uygulamayla ilgilenmez; boyut ve API önemlidir
    Zaten başkaları da kendi ortamlarına uygun adaptörler yapıp kullanacaktır