I/O 2019'daki web bileşenleri
Google I/O 2019'da Polymer Project'ten Kevin Schaaf ve Salesforce'tan Caridy Patiño web bileşenlerinin durumundan bahsetti.
Web bileşenleri ne kadar popüler?
Şu anda web'i kullandıysanız muhtemelen web bileşenlerini kullanmışsınızdır. Sayımıza göre, günümüzde tüm sayfa yüklemelerinin% 5 ila% 8'i bir veya daha fazla web bileşeni kullanıyor. Bu da web bileşenlerini, son beş yılın en başarılı yeni web platformu özelliklerinden biri haline getiriyor.
YouTube ve GitHub gibi muhtemelen her gün kullandığınız sitelerde web bileşenleri bulabilirsiniz. Ayrıca, AMP ile oluşturulan birçok haber ve yayıncılık sitesinde de kullanılırlar. AMP bileşenleri aynı zamanda web bileşenleridir. Ayrıca birçok işletme web bileşenlerini de benimsiyor.
Web bileşenleri nedir?
Web bileşenleri nedir? Web bileşenleri spesifikasyonları, tarayıcının yerleşik HTML etiketleri kümesini genişletmenize olanak tanıyan alt düzey bir API grubu sağlar. Web bileşenleri şunları sağlar:
- Bileşen oluşturmak için yaygın olarak kullanılan bir yöntem (standart DOM API'leri kullanarak).
- Veri alma ve gönderme için yaygın olarak kullanılan bir yöntem (özellikleri/etkinlikleri kullanarak).
Bu standart arayüzün dışında, standartlar bir bileşenin gerçekte nasıl uygulandığıyla ilgili hiçbir şey belirtmez:
- DOM'yi oluşturmak için hangi oluşturma motorunu kullandığı.
- Özellik 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şturması gerektiğini söyler, ancak nasıl yapması gerektiğini söylemez.
Yazarlar, web bileşenlerini oluşturmak için React gibi işlevsel oluşturma kalıpları seçebilir veya Angular ya da Vue'da bulabileceğiniz bildirim temelli şablonları kullanabilir. Yazar olarak birlikte çalışabilirlik özelliğini korurken bileşenin içinde kullanacağınız teknolojiyi seçme özgürlüğüne sahipsiniz.
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, <input> veya <video> gibi yerleşik bir öğe kullandığınız her yerde web bileşenlerini kullanabilirsiniz.
Gerçek HTML olarak ifade edilebildiklerinden, tüm popüler çerçeveler tarafından oluşturulabilir. Bu sayede bileşenleriniz, kullanıcıları tek bir çerçeveyle sınırlamak zorunda kalmadan çok çeşitli uygulamalarda daha geniş çapta kullanılabilir.
Bileşen arayüzü standart olduğundan, farklı kitaplıklar kullanılarak uygulanan web bileşenleri aynı sayfada karıştırılabilir. Bu bilgi, teknoloji yığınınızı güncellerken uygulamalarınızın geleceğe hazırlanmasına yardımcı olur. Bir çerçeve ile diğeri arasında büyük bir adım değişikliği yapmak yerine tüm bileşenlerinizi tek tek güncelleyebilirsiniz.
Web bileşenlerini kim kullanıyor?
Tüm bu nedenlerle, Web Bileşenleri gerçekten çeşitli farklı kullanım alanlarında büyük başarılar elde ediyor. Özellikle popüler olan üç kullanım alanı şunlardır: içerik siteleri, tasarım sistemleri ve kurumsal uygulamalar.
İçerik ağı siteleri
Web bileşenleri, sayısı çok fazla İYS sistemi tarafından standart HTML biçiminde çıktılar. Bu nedenle, web bileşenleri içeriği kademeli olarak geliştirmek için mükemmel teknolojidir.
AMP, Web Bileşenlerinin içerik sunma için yayıncılık sektörünün altyapısına ne kadar hızlı ve kolay bir şekilde yerleştirildiğine dair harika bir örnektir.
Sistem tasarlama
Giderek daha fazla şirket bir tasarım sistemi kullanarak kendilerini sunum yöntemlerini bir araya getiriyor. Tasarım sistemi, kurumun site ve uygulamalarında ortak bir genel imaj ve hissi sağlayan bir dizi bileşen ve yönergeden yararlanıyor. Web bileşenleri de burada uygundur.
Tasarımcılar genellikle tek bir standart bileşen kümesine sahip olmak yerine React, Angular ve diğer tüm çerçevelerin yanı sıra tasarım sistemi bileşenlerinin kendi versiyonlarını oluşturan birçok ekiple mücadele etmek zorunda kalır.
Çözüm, web bileşenleridir. Gerçekten bir kez yazılarak her yerde çalıştırılabilen bileşen sistemi, uygulama ekiplerine diledikleri çerçeveyi kullanma özgürlüğü sunmaya devam eder.
ING, EA ve Google gibi şirketler, web bileşenlerinde kendi tasarım dillerini uyguluyor.
Kurumsal: Salesforce'taki web bileşenleri
Web bileşenleri de standartlaştırılabilecek güvenli, geleceğe hazır bir teknoloji olarak kuruluşlarda önemli bir artış gösteriyor. Salesforce kullanıcı arayüzü platformunun mimarı Caridy Patiño neden kullanıcı arayüzü platformunu web bileşenlerini kullanarak oluşturduklarını açıkladı.
Salesforce, birçoğu edinmelerden gelen bir uygulamalar koleksiyonudur. Bunların her biri kendi teknoloji yığınında çalışabilir. Farklı gruplar üzerine oluşturulduğundan, hepsine aynı görünümü ve tarzı vermek zordur. Ayrıca Salesforce, müşterilerin Salesforce platformunu kullanarak kendi özel uygulamalarını oluşturmalarını sağlar. Bu nedenle ideal olarak bileşenlerin dışarıdan geliştiriciler tarafından da kullanılabilmesi gerekir.
Salesforce, platformunu kullanan müşterilerin bir dizi ihtiyacı olduğunu belirledi:
- Özel çözümler yerine standart. Böylece deneyimli geliştiricileri daha kolay bulabilir ve yeni geliştiricilerin ilgisini daha hızlı bir şekilde çekebilirsiniz.
- Ortak bir bileşen modeli yani herhangi bir Salesforce uygulamasının özelleştirilmesi aynı şekilde işler.
Ayrıca, müşterilerin istemediği bazı şeyleri de belirledi:
- Bileşenlerinde ve uygulamalarında yıkıcı değişiklikler. Başka bir deyişle, geriye dönük uyumluluk için olmazsa olmaz bir faktördü.
- Eski teknolojiye takılıp kalmak ve gelişmek.
- Duvarlarla çevrili bir bahçede mahsur kalmış olmak.
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 kullanıma hazır web bileşenlerinden bazılarını kullanmayı düşünün. İşte size sadece birkaç örnek:
- Google, kendi Materyal tasarım sistemini web bileşenleri olarak sunmuştur: Materyal Web Bileşenleri.
- Kablolu Öğeler, el çizimi görünüme sahip havalı bir web bileşenleri setidir.
- 3D içerik eklemek için herhangi bir uygulamaya ekleyebileceğiniz
<model-viewer>gibi harika, ö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şeni veya kitaplığı satıyorsanız, bileşenlerinizi web bileşenlerini kullanarak yazmayı düşünün. Yerleşik web bileşenleri API'larını kullanabilirsiniz ancak bunlar oldukça düşük düzeylilerdir; bu nedenle işlemi kolaylaştıracak bir dizi kitaplık mevcuttur.
Kendi bileşenlerinizi oluşturmaya başlamak için Google'ın geliştirdiği, React'a benzer mükemmel bir işlevsel oluşturma deneyimine sahip web bileşeni temel sınıfı LitElement'e göz atabilirsiniz.
Göz önünde bulundurulması gereken diğer araçlar ve kitaplıklar:
- Stencil, web bileşenleri öncelikli bir çerçevedir. JSX ve TypeScript gibi popüler çerçeve özelliklerini içerir
- Açısal Öğeler, Angular bileşenlerini web bileşenleri olarak sarmalama yöntemi sağlar.
- Vue.js web bileşeni sarmalayıcı, Vue bileşenlerini web bileşenleri olarak paketlemek için bir yol sağlar.
Daha fazla kaynak:
- open-wc.org, başlangıç bilgileri sunmanın yanı sıra derleme ve geliştirme araçlarıyla ilgili ipuçları ve varsayılan yapılandırmalar içerir.
- Web'in Temelleri, temel web bileşenleri API'leri hakkında temel bilgiler ve web bileşenleri tasarlamak için en iyi uygulamalar sağlar.
- MDN, web bileşenleri API'leri için referans belgeleri ve bazı eğiticiler sağlar. \
Unsplash'teki Jason Tuinstra'nın hero görseli.
Editörün notu: chromestatus.com adresinde bildirildiği gibi özel öğeler kullanım grafiği tam aylık kullanım verilerini gösterecek şekilde güncellendi. Bu yayının önceki bir sürümünde, son ayları içermeyen ve 6 aylık ayrıntı düzeyine sahip bir grafik bulunuyordu. Orijinal grafikteki V0 ve V1 serileri yığılmış; şimdi belirsizliği ortadan kaldırmak için toplam bir çizgiyle yığınsız olarak gösteriliyorlar. 2017'nin sonlarında yaşanan ani artışın nedeni chromestatus.com veri toplama sisteminde yapılan bir değişiklik oldu. Bu değişiklik tüm web platformu özelliklerinin istatistiklerini etkiledi ve bundan sonra daha doğru ölçümler yapılmasını sağladı.