Web Components Nedir? Hangi Web Component Kütüphanesi Tercih Ettik?
Web Components, yeniden kullanılabilir custom elementler oluşturmamıza ve bunları web uygulamalarında kullanmamıza olanak sağlayan bir yapıdır. Örnek vermek gerekirse, elimizde iki farklı projemiz mevcut ve biz ikisine de aynı butonu yapacağız ama tekrar tekrar kod yazmak istemiyoruz. Buradaki izleyeceğimiz yol ise web components kullanmak olacaktır. Web components ile oluşturduğumuz componentler, farklı projelerde kullanılabilir oluyor ve bizim kod tekrarı yapmamızı önlüyor. Web componetsi basitçe böyle tanımlayabiliriz.
Motivasyonumuz neydi? Neden Web Components kullanmaya karar verdik?
sahibinden.com olarak Frontend tarafında birden çok projemiz mevcut ve bu projelere de her geçen gün yenileri eklenmeye devam ediyor. Bu projeler tasarım olarak birbirine çok benzer, altyapı olaraksa birbirinden çok farklı projeler. Yani aynı butonu biz birden çok projede farklı teknolojilerle kullanıyoruz. Durum böyle olunca önümüzde karar vermemiz gereken iki yol gözüktü; ya her projenin kendi componenti olacak ve her componenti her proje için tekrar tekrar yapacağız ya da bir design system projesi yapıp içerisindeki componenetleri tüm projelerde kullanabilir şeklinde yapacağız. Bu şekilde iki yolu yazınca tek bir component yapıp kullanmak bariz şekilde daha avantajlı olsa da aslında iş o kadar basit olmuyor. Çünkü her projenin kendi componentini yazması aslında çok basit. Kompleks bir durum yok. Fakat tek component yapmak çok daha zor ve kompleks bir durum. Çünkü uyumluluk, entegrasyon, SEO gibi bir çok farklı problem önümüze çıkıyor. Biz de bu problemleri göze alıp bir ön çalışma yapmaya karar verdik.
Spike Çalışması ve Kütüphaneler
Ekip içerisinde 5 kişinin kütüphanelerle ilgili araştırma yapacağı 1 kişinin de bu çalışmayı yöneteceği toplamda 6 kişilik bir spike ekibi kurduk. Ardından en popüler 5 web components kütüphanesi belirledik ve her bir ekip üyesine bunları atadık. Bunlar sırasıyla; Angular Web Component, FAST, Lit, Stencil ve Open Web Components. Amacımız bu 5 kütüphaneyi inceleyip, örnekler yapıp, içerisinde bizim için en ideal olanı tespit etmekti. Burada karar verirken önceliklere göre karar vermek çok önemli. Bir özellik bir ekip için çok önemliyken diğer bir ekip için önemsiz olabilir.
Spike çalışmasında dikkat ettiğimiz kısımların başında performans geliyor. Performansın haricinde TypeScript desteği, hala maintance ediliyor olması ve framework desteği gibi konular da başlıca bizim için önemli olan konular. Bu maddelere göre çalışmamızı yaptık ve kararımızı verdik.
Angular Web Component, FAST ve Open Web Component
Yaptığımız çalışmalardan sonra eleyeceğimiz ilk 3 kütüphane Angular Web Component, FAST ve Open Web Component oldu. Bunların sebebi ise sırasıyla şöyle;
- Angular Web Component: Arkasında Angular olması ve Sahibinden olarak Angular yazmamız bir artıyken dökümanının yetersiz olması ve Angular runtime ekleme zorunluğunun sisteme yük bindirmesi büyük bir eksik. Ayrıca kullanan herhangi büyük bir proje veya şirket olmaması da ileride desteği kesebilirler gibi bir şüphe uyandırdı. Bu sebeple tercih etmedik.
- FAST: Arkasında Microsoft olması, Microsoft Teams’te kullanılması ve framework desteği büyük artıyken browser desteği ve döküman konusunda yetersiz olması sebebiyle tercih etmedik.
- Open Web Components: Open Web Components aslında web components kütüphanelerinin birlikte çalışmasına olanak veren bir kütüphane ve flexible bir yapısı var. Bunun için bir çok şeyi düşünüp karar vermemiz gerekiyordu. Böyle bir ihtiyacımız olmadığına karar verdik ve bu sebeple tercih etmedik.
Yukarıdaki incelemelerden de anlaşılacağı gibi, bizim isteklerimizi tam karşılayacak ve bize göre herhangi bir eksiği olmayacak kütüphane istiyorduk. Bunu da karşılayan aslında iki kütüphane kaldı; Lit ve Stencil.
Lit vs Stencil
Elediğimiz kütüphaneler sonrasında geriye Lit ve Stencil arasında seçim yapmamız kaldı. Açıkçası burada yapacağımız seçim beklediğimiz kadar kolay olmadı. Lit’in arkasında Google, Stencil’in arkasında ise Ionic Team vardı. İkisi de tüm frameworklere uygundu ve TypeScript desteği vardı. İkisinin de browser desteği iyiydi. Durum böyle olunca biraz daha araştırma yapmaya karar verdik ve araştırmamızdan sonra seçimimiz Lit oldu. Sebepleri ise;
- Stencil’in dökümanında detaylara yer verilmezken, Lit’in dökümanı detaylara yer veriyordu,
- Stencil’da detay sorulara hızlı yanıt verilmeme şikayetleri vardı,
- Performans konusunda Lit’in yüksek render hızı vardı,
- Google, Microsoft, Adobe, IBM gibi şirketler Lit’i kullanıyordu,
- Özellikle Lit v2 ile birlikte büyük bir ivme kazanıp ve gelişimine hızlı devam ediyordu,
- Yaptığımız araştırmalarda Lit’ten Stencil’e geçen bir çok projede tekrardan Lit’e geri dönüş olduğuydu.
Lit, design system yapımız için seçtiğimiz web components kütüphanemiz oldu. Fakat aslında çalışma daha yeni başlıyor. Çünkü bundan sonra Lit’in detaylarına inmemiz gerekecek.
Lit nedir? Lit ile Örnek
Lit kendini hızlı, yüksek performanslı web compenentler oluşturmanızı sağlayan basit bir kütüphane şeklinde tanımlıyor. Web component yapısına uygun bir yapısı var ve minify-compressed yapısı ile büyük bir performans avantajı sağlıyor.
Lit ile basit bir buton componenti yapalım.
İlk olarak componentimiz için gerekli tanımlamaları import ediyoruz ve @customElement('sahibinden-button') ile componentimizin tagini belirliyoruz. Yani biz componentimizi <sahibinden-button></sahibinden-button> şeklinde kullanacağız. Ardından css tanımlamalarımızı yapıyoruz ve @Property ile alacağımız propları tanımlıyoruz. render içerisinden htmlmetodu ile de componentimizin render içeriğini yazıyoruz. Burada _onClick metodunda da event emit ediyoruz. Yani componentten componentin kullanıldığı yere butona tıklanıldığını söylüyoruz. Basitçe oluşturduğumuz componentimiz bir prop alıp tıklanıldığında event emit ediyor.
Yaptığımız componenti basit bir html sayfasında kullanmak için ilk etapta gerekli dosyaları import ediyoruz. Burada aynı zamanda yaptığımız butonu da import ediyoruz ve yukarıda da belirttiğimiz gibi
<sahibinden-button text="Click meee!"></sahibinden-button>şeklinde text propunu da vererek kullanabiliyoruz. Burada ayrıca addEventListener ile componentten gönderdiğimiz eventleri de dinleyebiliyoruz.
Projenin tamamına buradan ulaşabilirsiniz.
Sonuç
Yaptığımız araştırmalardan sonra bize en uygun kütüphane Lit oldu. Lit ile Design System çalışmalarına başlıyoruz. Lit ile bir proje oluşturup mevcut projelerimize import etmeyi düşünüyoruz. Yaptığımız Design System projesini yazının devamı olarak paylaşacağız.
Yazımı okuduğunuz için teşekkür ederim. Yazımı beğendiyseniz aşağıda yer alan alkış butonuna tıklayabilirsiniz.
Aşağıdaki adreslerden bana ulaşabilirsiniz:
GitHub: github.com/BurakGur
Twitter: twitter.com/BrkGur
Web Sitesi: burakgur.com
Kaynaklar
https://developer.mozilla.org/en-US/docs/Web/Web_Components
https://angular.io/guide/elements
https://www.fast.design/
https://stenciljs.com/
https://lit.dev/
https://open-wc.org/
https://github.com/lit/lit-element-starter-ts
https://www.phase2technology.com/blog/web-components-our-journey-from-lit-to-stencil-and-back-again
https://www.abeautifulsite.net/posts/moving-from-stencil-to-lit-element/
