Lit - Library untuk membuat web component yang cepat dan ringan

• Berdasarkan standar web component, hanya menambahkan reaktivitas, template deklaratif, dan boilerplate seminimal mungkin
• Ukurannya kecil di kisaran 5KB dengan rendering cepat, serta mengoptimalkan performa dan kecepatan muat dengan hanya memperbarui bagian UI yang berubah
• Semua komponen Lit adalah native web component, dan dapat digunakan kembali di mana pun HTML bisa digunakan tanpa bergantung pada framework
• Memanfaatkan Shadow DOM untuk membatasi cakupan style secara default, menyederhanakan selector CSS dan mencegah konflik dengan style lain
• Memodelkan API komponen dan state internal dengan Reactive Property, serta mendukung re-rendering yang efisien saat properti berubah
• Template berbasis Tagged template Literals yang cepat dan sederhana
• Dapat digunakan di berbagai proyek web, mulai dari komponen bersama, design system, hingga membangun aplikasi penuh yang mengurangi ketergantungan vendor dan memperkuat maintainability
• Tersedia tutorial
• GitHub

[devstudyman7]

Sudah terasa sejak 3 tahun lalu, ini memang cepat untuk langsung memakai web component vanilla dan terasa seperti framework masa transisi, tapi lambat..

[cnaa97]

Maksudnya apa?

[bluemir]

Kami mengembangkan tool operasional hanya dengan menggunakan web component standar web dan lit-html, dan bagus karena informasi yang perlu diketahui jadi sangat minim. Fitur yang kami pakai di lit-html juga hanya sebatas event handler binding + loop templating. (Sisanya cukup dengan standar web saja ..) Memang ada ketidaknyamanan karena jika ada perubahan kita harus memanggil render secara langsung, tetapi dibanding perilaku implisit yang otomatis mendeteksi perubahan variabel, ada sisi di mana pemanggilan yang eksplisit justru lebih membantu. Karena ini tool operasional, mungkin saya merasa begitu karena prioritas untuk mendukung berbagai lingkungan memang lebih rendah.

[GN⁺]

Komentar Hacker News

• Saya pernah memakai Lit di proyek perusahaan, tapi sekarang sudah tidak memakainya lagi dan rasanya jauh lebih lega
  Kami sudah memakai framework yang berat, lalu seseorang menambahkan Lit hanya agar ada satu baris lagi di resume, dan itu jadi beban besar
  Shadow DOM khususnya membuat masalah aksesibilitas (A11y) jadi lebih parah
  Karena cakupan id terpisah, keterkaitan seperti label-for, describe-by, dan sejenisnya jadi rusak, jadi kami sangat kerepotan
  Tentu saja, sampai batas tertentu ini juga masalah kurangnya skill di tim kami
  • Proses mengintegrasikan Web Components ke codebase React benar-benar berat. Menurut saya ini bukan salah Lit, melainkan masalah Web Components itu sendiri
    Styling memang jadi terisolasi, tetapi bagian penting seperti ukuran font adalah pengecualian, jadi setiap kali diganti terus muncul bug regresi kecil
    DX juga banyak menurun, saya berharap tooling membaik, tapi untuk sekarang situasinya melelahkan
  • Di Lit, Shadow DOM itu opsional, jadi bisa dinonaktifkan per komponen
  • Saya penasaran apakah memang sering ada orang yang memperkenalkan teknologi hanya untuk memperindah resume.
    Sebenarnya, rasanya lebih sering orang mengadopsinya begitu saja karena ingin mencoba hal baru
• Saya membuat sendiri library manajemen state untuk Lit (258 baris, https://github.com/gitaarik/lit-state)
  Ini bekerja dengan baik saat komponen bersarang saling berinteraksi dalam aplikasi kompleks, mirip React tetapi jauh lebih native browser, boilerplate lebih sedikit, dan rendering juga cepat
  Sampai-sampai saya tidak mengerti kenapa Lit tidak lebih populer
  • Saya juga pernah mengimplementasikannya ulang dari dasar untuk memahami cara kerja internal Lit
    Fitur intinya ternyata cukup sederhana, dan sebagian besar bergantung pada API platform
    Karena itu siapa pun bisa membuat implementasinya sendiri, dan saya rasa kesederhanaan ini punya nilai besar
    Sebagai referensi, implementasi alternatif yang saya buat ada di https://github.com/ruphin/lite-html
• Saya adalah maintainer Lit. Saya tidak tahu kenapa hari ini tiba-tiba muncul di halaman utama HN, tapi kalau ada pertanyaan saya bisa menjawab
  • lit-html benar-benar berguna, jadi saya memakainya di hampir semua proyek pribadi
    Bisa langsung dimuat lewat CDN dan bereksperimen tanpa build step juga merupakan kelebihan besar
    Tidak seberat framework lain, dan rasanya seperti hanya memakai Vanilla JS + HTML, jadi hampir tidak ada beban kognitif
  • Karena banyak pembicaraan soal Shadow DOM, saya coba merangkum pandangan saya
    Shadow DOM pada dasarnya adalah private tree yang memisahkan DOM internal komponen
    Ini memungkinkan konsep slot, sehingga kita bisa membuat komponen yang benar-benar dapat dikomposisikan
    Masalahnya, enkapsulasi style menjadi hambatan besar saat diintegrasikan dengan sistem yang sudah ada
    Karena itu saya mengusulkan Open Styleable Shadow Roots, yaitu pendekatan yang membiarkan style eksternal mengalir ke dalam sambil tetap mempertahankan slot. Saya masih berusaha meyakinkan vendor browser
  • Lit adalah alat yang bersih yang tidak menghalangi framework, jadi saya membangun semua aplikasi pribadi/kerja saya dengan Lit
    Terkait itu, ada juga tulisan yang saya buat: https://medium.com/gitconnected/getting-started-with-web-com...
  • Berkat Lit, pengembangan terasa menyenangkan baik untuk kasus sederhana maupun kompleks
    Kadang saya juga bertanya-tanya kenapa ini tidak dipakai lebih luas
  • Ada pertanyaan apakah fitur seperti Lit mungkin akan dimasukkan ke standar Web Components
    • Web Components itu bagus karena native, tetapi memang adopsinya lambat karena tidak punya reaktivitas
    • Lit adalah perpanjangan yang alami untuk mengisi kekosongan itu
• Saya memakai Lit di proyek klien chat XMPP bernama Converse.js
  Awalnya berbasis Backbone.js, lalu diganti secara bertahap dari lit-html → lit-element → lit
  Sekarang disediakan sebagai Web Component <converse-root />, jadi bisa terintegrasi baik dengan framework lain seperti React
  GitHub: https://github.com/conversejs/converse.js / demo: https://chat.conversejs.org/
• Belakangan ini saya merasa Lit tidak diperlukan. Bekerja langsung dengan Web Components murni justru lebih nyaman
  Kalau di server memakai sistem template seperti JSX, itu sudah cukup enak, dan di klien tetap hanya JS jadi tidak ada kekhawatiran soal upgrade
  • Kelebihan Web Components adalah kita bisa membangunnya dengan cara yang kita mau
    Hanya saja API native terlalu low-level, jadi DX-nya kurang, dan Lit menambahkan reaktivitas deklaratif di atasnya
  • Saya rasa Lit mengabstraksikan pemrosesan `` yang berulang dan pengaitan DOM dengan baik
    Hal-hal yang merepotkan kalau dibuat sendiri bisa ditangani dengan rapi
  • Secara pribadi saya tidak merasa ada perbedaan besar antara template literal html milik Lit dan JSX
    Bahkan JSX lebih merepotkan karena membutuhkan tahap kompilasi
• Saya sudah 3 tahun memakai Lit di production. Menurut saya ini adalah lapisan abstraksi terbaik di atas API Web Components
  • Saya juga punya pengalaman serupa
    Awalnya saya membuat Web Components sendiri di lingkungan tanpa dependensi, lalu setelah pindah ke LitElement semuanya jadi jauh lebih nyaman
    Namun Shadow DOM, meski jadi default, justru kadang menimbulkan lebih banyak masalah, jadi sekarang saya memakai LitElement tanpa Shadow DOM
• Saya sudah memakai Lit di production sejak 2020, dan sama sekali tidak menyesal
  Kelebihan terbesarnya adalah berdiri di atas fondasi yang stabil
  Karena Web Components native didukung stabil di semua browser, kita bisa fokus pada pengembangan tanpa risiko harus ganti framework
  Saya harap lebih banyak tim mau mencobanya
  Sebagai referensi, saya juga merekomendasikan video HTTP 203 tentang Lit
• Dalam pekerjaan frontend, Lit benar-benar terasa seperti penyelamat
  Angular terlalu berat, dan React dirancang untuk keterbatasan browser lama, jadi sekarang rasanya hanya bertahan karena inersia
  • Saya ingin mendengar lebih spesifik fitur browser lama mana yang dimaksud
  • Saya suka framework Aurelia, karena sangat patuh pada standar dan kodenya ringkas
    Dibanding boilerplate Angular atau kompleksitas hook React, ini jauh lebih intuitif
    Hanya saja sayang tidak berhasil menjadi populer
  • Ketika ada yang bilang React terkenal karena dukungan browser lama, saya tiba-tiba merasa diri saya tua
• Saya suka lit-html sebagai library rendering mandiri, tetapi saya tidak merasa perlu memakai Lit secara keseluruhan
  Menurut saya, pada dasarnya kombinasi + Web Components saja sudah cukup
• Saya ingin mendistribusikan komponen yang dibuat di proyek Vue 3 berskala besar sebagai Web Components agar bisa dipakai ulang di situs lain
  Tapi saya penasaran, apa keuntungan membuatnya ulang dengan Lit alih-alih tetap memakai Vue
  • Saya pernah memakai Vue dan Lit, dan secara pribadi saya merasa Vue sedikit lebih baik
    Manajemen state ref/reactive di Vue 3 kuat, dan bisa diuji tanpa bergantung pada DOM
    Reaktivitas Lit ada di level widget, jadi trigger update harus dikelola sendiri
    Lifecycle Vue sederhana, sedangkan di Lit harus memperhatikan banyak callback sehingga bug lebih mudah muncul
    Kalau tidak ada alasan khusus, lebih baik fokus ke pengembangan fitur, dan mengganti tech stack hampir tidak berdampak bagi pengguna
  • Dari sudut pandang konsumen, baik Vue maupun Lit hasil akhirnya sama-sama Web Components, jadi tidak ada perbedaan
    Vue adalah framework, jadi fiturnya lebih banyak, sementara Lit diimplementasikan lebih dekat ke API native
    Vue perlu build, sedangkan Lit bisa dimuat saat runtime
    Vue juga bisa dikompilasi ke target lain, sedangkan Lit khusus untuk Web Components sehingga lebih bersih
    Pada akhirnya yang paling penting adalah memakai teknologi yang paling dikuasai tim
  • Sebenarnya pendekatan paling realistis adalah cukup membuat bundle Web Components lalu mengekspornya, dengan implementasi internal bebas apa saja
    Konsumen tidak peduli implementasi internal, yang penting ukuran dan API
    Toh nanti orang lain akan membuat adapter sesuai lingkungan mereka sendiri