Stencil.js ile Web Bileşenleri - 2018'de yeniden kullanılabilir UI öğeleri oluşturmanın en iyi yolu bu mu?

Farklı projeler ve ekipler arasında paylaşılabilecek evrensel, çerçeve ve kütüphane agnostik kullanıcı arabirimi öğeleri geliştirme yeteneği, modern ön uç dünyadaki çerçeve çalkantısı dediğimiz şeyin en azından bir kısmı için mükemmel bir ilaç gibi görünmektedir. Bir web geliştiricisi olarak çalışmaya başladığımdan beri, tekrar kullanılabilir bir koda soyutlanabilecek çok sayıda unsura ve etkileşime şahit oldum, ancak çerçeveler ve uygulama detayları arasındaki farklılıklar onu hantallaştırıyordu ... Web bileşenleri bir cevap gibi görünüyor.

Fakat bekleyin, web bileşenleri nelerdir?

Web Bileşenleri, yeniden kullanılabilir özel kullanıcı arabirimi bileşenleri oluşturmanıza olanak tanıyan - işlevselliği ile kodunuzun geri kalanından uzağa yerleştirilmiş - ve bunları web uygulamalarınızda kullanmanıza izin veren farklı teknolojiler paketidir.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Dünyadaki milyonlarca insan her gün bu teknolojiyi kullanıyor. Geçen yılın ikinci en popüler web sitesi olan youtube.com, Web Bileşenlerine dayanıyor. Chrome'daki Geçmiş sekmesi bile bir Web Bileşenleri kütüphanesi olan Polimer kullanılarak yazılmıştır! Wikipedia'ya göre, Web Bileşenleri ilk kez Alex Russell tarafından Fronteers Konferansı 2011'de ilk kez tanıtıldı.

İlgili teknolojiler hakkında birkaç söz

Gölge DOM

Enkapsülasyon, yeniden kullanılabilir unsurlar yaratmayı düşünürken başarının anahtarıdır - işaretleme, stil ve uygulama ayrıntılarını belgenin geri kalanından ayırabilmek, Web Bileşenleri fikrini bu kadar çekici kılan şeydir. Gölge DOM API hile yapar. Tarayıcının API'sı, DOM öğesinde kapsamlandırılmış alt ağacı oluşturmanıza olanak sağlayan şeydir.

Gölge DOM'daki düğümleri, gölgesiz olmayan düğümlerle aynı şekilde etkileyebilirsiniz - örneğin alt öğelerin eklenmesi veya niteliklerin ayarlanması, element.style.foo kullanarak tek tek düğümlerin stillendirilmesi veya bir öğesi. Fark, gölge DOM içindeki kodlardan hiçbirinin, dışındaki bir şeyi etkilememesi ve kullanışlı kapsülleme sağlamasıdır.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow DOM’in iki modu vardır: açık ve kapalı. Shadow DOM kapalı modu, bileşen yazarlarına, bileşenlerinin Shadow Root'unun js aracılığıyla nasıl gösterileceğini kontrol etme imkanı sunar. Burada gölge DOM hakkında daha fazla bilgi edinebilirsiniz.

Şekillendirme

Shadow DOM'deki stiller kapsamlıdır ve sızıntı yapmaz. Global CSS, Gölge DOM öğelerini, diğer herhangi bir html öğesi gibi - özelliklerin devralınması nedeniyle etkiler; böylece font-ailesinin gövdede ayarlanması özel kapsamlı bileşen tarafından miras alınır. Stilleri * olarak ayarlamak, tüm öğeleri etkilediği için Gölge DOM köklü öğesini de etkiler. Bileşen kullanıcılarınızın bileşene stil vermesine izin vermek istiyorsanız, özel CSS özelliklerini kullanmalısınız.

Özel Öğeler

Özel öğelerle, özel html etiketleri oluşturabilir veya mevcut etiketleri ve bileşenleri geliştirebiliriz. Bu teknoloji sayesinde, web bileşenleri normal html etiketlerine benzeyecek, örneğin .

Web bileşenleri ile çalışacak kütüphaneler

Vanilla js ile Web Bileşenleri oluşturmak elbette mümkündür (gerekli teknolojileri desteklemeyen tarayıcılar için polyfilling'i hatırlamamız gerekir), ancak düz js'li bileşenler yazmak zor olabilir ve çok sayıda kaynak kodu gerektirebilir. Burası web bileşenleri kütüphanelerinin kullanışlı olduğu yerdir. Onlara ihtiyacınız yok, ancak üretime hazır Web Bileşenleri oluşturmaya çalışmak bunlardan birini kullanmak daha az acı verici olacaktır.

Polimer

Bu, Google tarafından oluşturulan ve yoğun olarak kullanılan en popüler Web Bileşenleri kütüphanesidir. Bileşenler oluşturmak için basit bir API sağlar. Bu yıl gönderilecek olan Sürüm 3.0, litre-html kullanacak, bu da js'de html oluşturmanın güzel bir yoludur.

Skate.js

Skate.js, Web Bileşenleri standartları üzerinden işlevsel bir soyutlama olduğunu iddia ediyor. İlginç olan kısım, lit-html, vaaz verme ve hatta tepki de dahil olmak üzere çoklu görünüm kitaplıklarını kullanmanıza izin vermesidir.

Stencil.js

Stencil.js, Ionic team tarafından oluşturulan nispeten yeni bir Web Components derleyicisidir. Popüler modern web geliştirme kavramlarını (Sanal DOM, zaman uyumsuz oluşturma, reaktif olay akışı ve TSX gibi) alır ve temiz, standart tabanlı bir web bileşeni kodu oluşturur.

Stencil.js ile Web Bileşenleri Oluşturma

Size Stencil.js ile Web Bileşenleri oluşturma hakkında biraz daha bilgi vermek istiyorum. Bu kütüphaneyi neden seçtim? Temelde, yer alan Typescript desteği ve Açısal ve Tepki deneyimimden ve aşina olduğum yöntemden aşina olduğum reaktif kalıpların kullanımı ve elbette şablon olmayan bir çerçeve yaklaşımı nedeniyle. Stencil.js sadece bir Web Bileşenleri derleyicisi olduğunu iddia etti ve oluşturulan bileşenler vanilya js - küçük ve hızlı, ek olarak ES6 alma işleminin yanı sıra