I/O 2019'da web bileşenleri
Google I/O 2019'da Polymer Project'ten Kevin Schaaf ve Salesforce'tan Caridy Patiño, web bileşenlerinin durumu hakkında konuştu.
Web bileşenleri ne kadar popüler?
Bugün web'i kullandıysanız muhtemelen web bileşenlerini de kullanmışsınızdır. Hesaplarımıza göre, günümüzde tüm sayfa yüklemelerinin% 5 ila% 8'inde bir veya daha fazla web bileşeni kullanılıyor. Bu da web bileşenlerini son beş yılda kullanıma sunulan en başarılı yeni web platformu özelliklerinden biri haline getiriyor.
Web bileşenlerini YouTube ve GitHub gibi her gün kullandığınız sitelerde bulabilirsiniz. AMP bileşenleri, AMP ile oluşturulan birçok haber ve yayın sitesinde de kullanılır. Ayrıca birçok kuruluş web bileşenlerini de kullanmaya başlıyor.
Web bileşenleri nedir?
Peki web bileşenleri nedir? Web bileşenleri spesifikasyonları, tarayıcının yerleşik HTML etiketi grubunu genişletmenize olanak tanıyan düşük düzeyli bir API grubu sağlar. Web bileşenleri şunları sağlar:
- Bileşen oluşturmak için yaygın bir yöntemdir (standart DOM API'leri kullanılır).
- Verileri alma ve göndermeyle ilgili yaygın bir yöntemdir (mülkleri/etkinlikleri kullanır).
Standart arayüz dışında, standartlar bir bileşenin gerçekte nasıl uygulandığı hakkında hiçbir şey söylemez:
- DOM'unu oluşturmak için kullanılan oluşturma motoru.
- Mülkünde veya özelliklerinde yapılan değişikliklere göre kendisini nasıl güncellediği.
Diğer bir deyişle, web bileşenleri tarayıcıya bir bileşeni ne zaman ve nerede oluşturacağını söyler ancak nasıl oluşturacağını söylemez.
Yazarlar, web bileşenlerini oluşturmak için React'te olduğu gibi işlevsel oluşturma kalıplarını seçebilir veya Angular ya da Vue'da bulabileceğiniz gibi açıklayıcı şablonlar kullanabilir. Yazar olarak, bileşen içinde kullandığınız teknolojiyi seçerken birlikte çalışabilirliği koruma konusunda tam özgürlük sahibisiniz.
Web bileşenleri ne işe yarar?
Web bileşenleri ile tescilli bileşen sistemleri arasındaki temel fark birlikte çalışabilirliktir. Standart arayüzleri sayesinde web bileşenlerini <input> veya <video> gibi yerleşik bir öğeyi kullanacağınız her yerde kullanabilirsiniz.
Gerçek HTML olarak ifade edilebildikleri için tüm popüler çerçeveler tarafından oluşturulabilirler. Böylece bileşenleriniz, kullanıcıları herhangi bir çerçeveye kilitlemeden daha geniş bir yelpazede, daha çeşitli uygulamalarda kullanılabilir.
Ayrıca, bileşen arayüzü standart olduğundan farklı kitaplıklar kullanılarak uygulanan web bileşenleri aynı sayfada karıştırılabilir. Bu durum, teknoloji yığınınızı güncellediğinizde uygulamalarınızın gelecekte de kullanılabilir olmasını sağlar. Tüm bileşenlerinizi değiştirdiğiniz bir çerçeveden diğerine geçiş yapmak yerine bileşenlerinizi tek tek güncelleyebilirsiniz.
Web bileşenlerini kimler kullanıyor?
Tüm bu nedenlerden dolayı Web Bileşenleri, çeşitli kullanım alanlarında büyük başarı elde ediyor. Özellikle popüler olan üç kullanım alanı vardır: içerik siteleri, tasarım sistemleri ve kurumsal uygulamalar.
İçerik siteleri
Web bileşenleri, sayısız içerik yönetim sistemi tarafından standart HTML olarak yayınlanabildiğinden, içeriği aşamalı olarak iyileştirmek için mükemmel bir teknolojidir.
AMP, web bileşenlerinin yayıncılık sektörünün içerik yayınlama altyapısına ne kadar hızlı ve kolay bir şekilde entegre edildiğinin mükemmel bir örneğidir.
Tasarım sistemleri
Giderek daha fazla şirket, kendilerini bir tasarım sistemi kullanarak tanıtıyor. Tasarım sistemi, bir kuruluşun siteleri ve uygulamaları için ortak görünüm ve tarzı tanımlayan bir bileşen ve yönerge grubudur. Web bileşenleri bu durumda da mükemmel bir seçimdir.
Tasarımcılar genellikle tek bir standart bileşen grubuna sahip olmak yerine React, Angular ve diğer tüm çerçevelerin üzerine tasarım sistemi bileşenlerinin kendi sürümlerini oluşturan birçok ekiple uğraşmak zorunda kalır.
Web bileşenleri, uygulama ekiplerine istedikleri çerçeveyi kullanma özgürlüğü veren, gerçekten bir kez yazıp her yerde çalıştırılabilir bir bileşen sistemidir.
ING, EA ve Google gibi şirketler, şirketlerinin tasarım dilini web bileşenlerine uyguluyor.
Enterprise: Salesforce'ta web bileşenleri
Web bileşenleri, standartlaştırılacak güvenli ve geleceğe hazır bir teknoloji olarak işletmelerde de önemli bir ilerleme kaydediyor. Salesforce'un kullanıcı arayüzü platformunun mimarı Caridy Patiño, kullanıcı arayüzü platformlarını neden web bileşenlerini kullanarak oluşturduklarını açıkladı.
Salesforce, çoğu satın alma işlemlerinden elde edilen bir uygulama koleksiyonudur. Bunların her biri kendi teknoloji grubuyla çalışabilir. Farklı platformlarda oluşturuldukları için tüm bu platformlara aynı görünüm ve tarzı vermek zordur. Ayrıca Salesforce, müşterilerin Salesforce platformunu kullanarak kendi özel uygulamalarını oluşturmasına olanak tanır. Bu nedenle, bileşenlerin ideal olarak harici geliştiriciler tarafından da kullanılabilir olması gerekir.
Salesforce, platformunun müşterilerinin ihtiyaç duyduğu bir dizi özelliği belirledi:
- Özel çözümler yerine standart çözümler kullanın. Böylece deneyimli geliştiriciler bulmak daha kolay olur ve yeni geliştiricileri daha hızlı eğitebilirsiniz.
- Ortak bir bileşen modeli olduğundan, herhangi bir Salesforce uygulamasını özelleştirmek aynı şekilde çalışır.
Ayrıca müşterilerin istemediği bazı şeyleri de belirlediler:
- Bileşenlerinde ve uygulamalarında önemli değişiklikler Başka bir deyişle, geriye dönük uyumluluk şarttı.
- Eski teknolojiye bağlı kalmak ve gelişememektir.
- Duvarlarla çevrili bir bahçede sıkışıp kalmak.
Yeni kullanıcı arayüzü platformunun temeli olarak web bileşenlerinin kullanılması tüm bu ihtiyaçları karşıladı ve sonuç olarak yeni Lightning Web Bileşenleri ortaya çıktı.
Web bileşenlerini kullanmaya başlama
Web bileşenlerini kullanmaya başlamanın birçok harika yolu vardır.
Web uygulaması oluşturuyorsanız hazır birçok web bileşeninden bazılarını kullanmayı düşünebilirsiniz. İşte size sadece birkaç örnek:
- Google, kendi Material tasarım sistemini web bileşenleri olarak satar: Material Web Bileşenleri.
- Kablolu Öğeler, el çizimi bir görünüme sahip harika bir web bileşeni grubudur.
- 3D içerik eklemek için herhangi bir uygulamaya ekleyebileceğiniz
<model-viewer>gibi özel amaçlı web bileşenleri vardır.
Şirketiniz için bir tasarım sistemi geliştiriyorsanız veya herhangi bir ortamda kullanılmasını istediğiniz tek bir bileşen ya da kitaplık satıyorsanız bileşenlerinizi web bileşenlerini kullanarak oluşturabilirsiniz. Yerleşik web bileşeni API'lerini kullanabilirsiniz ancak bunlar oldukça düşük düzeyde olduğundan süreci kolaylaştırmak için kullanılabilecek çeşitli kitaplıklar vardır.
Kendi bileşenlerinizi oluşturmaya başlamak için Google tarafından geliştirilen ve React'e benzer mükemmel bir işlevsel oluşturma deneyimine sahip bir web bileşeni temel sınıfı olan LitElement'e göz atabilirsiniz.
Kullanabileceğiniz diğer araçlar ve kitaplıklar:
- Stencil, web bileşenlerine öncelik veren bir çerçevedir. JSX ve TypeScript gibi popüler çerçeve özelliklerini içerir.
- Angular Elements, Angular bileşenlerini web bileşenleri olarak sarmalamak için bir yöntem sağlar.
- Vue.js web bileşen sarmalayıcısı, Vue bileşenlerini web bileşenleri olarak paketlemenizi sağlar.
Diğer kaynaklar:
- open-wc.org, başlangıçla ilgili mükemmel bilgilere ve derleme ve geliştirme araçlarıyla ilgili ipuçlarına ve varsayılan yapılandırmalara sahiptir.
- Web'in Temelleri, temel web bileşeni API'leri ve web bileşenleri tasarlamayla ilgili en iyi uygulamalar hakkında başlangıç bilgileri sağlar.
- MDN, web bileşeni API'leri için referans dokümanları ve bazı eğitici içerikler sağlar. \
Unsplash'taki Jason Tuinstra tarafından oluşturulan hero resmi.
Yayıncı notu: Özel öğe kullanım grafiği, chromestatus.com'da bildirildiği üzere aylık kullanım verilerinin tamamını gösterecek şekilde güncellendi. Bu yayının önceki bir sürümünde, en son aylar hariç 6 aylık ayrıntı düzeyinde bir grafik yer alıyordu. Orijinal grafikteki V0 ve V1 serileri yığın halindeydi. Bu seriler artık belirsizliği ortadan kaldırmak için toplam çizgisiyle birlikte yığın halinde gösterilmiyor. 2017'nin sonlarında görülen ani artış, chromestatus.com'un veri toplama sisteminde yapılan bir değişiklikten kaynaklanmaktadır. Bu değişiklik, tüm web platformu özelliklerinin istatistiklerini etkilemiş ve daha sonra daha doğru ölçümler elde edilmesini sağlamıştır.