I/O 2019'da web bileşenleri
Yayınlanma tarihi: 18 Haziran 2019
Google I/O 2019'da Polymer Projesi'nden 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 interneti kullandıysanız muhtemelen web bileşenlerini de kullanmışsınızdır. Hesaplamalarımıza göre, günümüzde tüm sayfa yüklemelerinin yaklaşık% 5 ila% 8'inde bir veya daha fazla web bileşeni kullanılıyor. Bu nedenle web bileşenleri, son beş yılda kullanıma sunulan en başarılı yeni web platformu özelliklerinden biri oldu.
Web bileşenlerini YouTube ve GitHub gibi her gün kullandığınız sitelerde bulabilirsiniz. Ayrıca, AMP ile oluşturulan birçok haber ve yayın sitesinde de kullanılır. AMP bileşenleri, web bileşenleridir. Ayrıca birçok kuruluş da web bileşenlerini kullanmaya başladı.
Web bileşenleri nedir?
Peki web bileşenleri nedir? Web bileşenleri özellikleri, tarayıcının yerleşik HTML etiketleri grubunu genişletmenize olanak tanıyan düşük düzeyli bir API grubu sağlar. Web bileşenleri şunları sağlar:
- Bir bileşen oluşturmak için kullanılan yaygın bir yöntem (standart DOM API'lerini kullanarak).
- Veri alma ve göndermenin yaygın bir yolu (özellikleri/etkinlikleri kullanarak).
Bu standart arayüzün dışında, standartlarda bir bileşenin nasıl uygulandığıyla ilgili herhangi bir bilgi verilmez:
- DOM'unu oluşturmak için hangi oluşturma motorunu kullandığı.
- Özelliklerinde veya niteliklerinde yapılan değişikliklere göre nasıl güncellendiği.
Başka bir deyişle, web bileşenleri tarayıcıya bir bileşenin ne zaman ve nerede oluşturulacağını söyler ancak nasıl oluşturulacağı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 bildirim temelli şablonları kullanabilir. Yazar olarak, bileşenin içinde kullanacağınız teknolojiyi seçme konusunda tamamen özgürsünüz ve birlikte çalışabilirliği korursunuz.
Web bileşenleri ne için uygundur?
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 kullandığı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 uygulama yelpazesinde daha yaygın olarak 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 durum, teknoloji paketinizi güncellediğinizde uygulamalarınızın geleceğe hazır olmasını sağlar. Tüm bileşenlerinizi değiştirdiğiniz bir çerçeveden diğerine geçişte büyük bir adım atmak yerine, bileşenlerinizi tek tek güncelleyebilirsiniz.
Web bileşenlerini kimler kullanıyor?
Bu nedenle, Web Bileşenleri çeşitli kullanım alanlarında büyük başarı elde ediyor. Üç kullanım alanı özellikle popüler olmuştur: içerik siteleri, tasarım sistemleri ve kurumsal uygulamalar.
İçerik siteleri
Web bileşenleri, içerikleri aşamalı olarak geliştirmek için mükemmel bir teknolojidir. Çünkü web bileşenleri, sayısız İçerik Yönetim Sistemi tarafından standart HTML olarak çıkış verilebilir.
AMP, Web Bileşenleri'nin içerik sunma konusunda yayıncılık sektörünün altyapısına ne kadar hızlı ve kolay bir şekilde entegre olduğunun mükemmel bir örneğidir.
Tasarım sistemleri
Giderek daha fazla şirket, bir tasarım sistemi (kuruluşun siteleri ve uygulamaları için ortak görünümü ve tarzı tanımlayan bir bileşenler ve yönergeler grubu) kullanarak kendilerini sunma şeklini birleştiriyor. Web bileşenleri de bu konuda çok uygundur.
Genellikle tasarımcılar, tek bir standart bileşen seti 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, gerçekten bir kez yazılıp her yerde çalıştırılabilen ve uygulama ekiplerine istedikleri çerçeveyi kullanma özgürlüğü veren bir bileşen sistemidir.
ING, EA ve Google gibi şirketler, şirketlerinin tasarım dilini web bileşenlerinde uyguluyor.
Enterprise: Web components at Salesforce
Web bileşenleri, işletmelerde standartlaştırma için güvenli ve geleceğe hazır bir teknoloji olarak da ö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 yoluyla edinilmiş bir uygulama koleksiyonudur. Bunların her biri kendi teknoloji yığını üzerinde çalışabilir. Farklı yığınlar üzerinde oluşturuldukları için hepsine 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şenler ideal olarak harici geliştiriciler tarafından da kullanılabilir olmalıdır.
Salesforce, platformunun müşterilerinin bir dizi ihtiyacını belirledi:
- Tescilli çözümler yerine standart çözümler kullanıldığından deneyimli geliştiriciler bulmak ve yeni geliştiricileri eğitmek daha kolaydır.
- Ortak bir bileşen modeli sayesinde herhangi bir Salesforce uygulamasını aynı şekilde özelleştirebilirsiniz.
Ayrıca müşterilerin istemediği bazı şeyler de belirlendi:
- Bileşenlerinde ve uygulamalarında yapılan, uyumluluğu bozan değişiklikler. Başka bir deyişle, geriye dönük uyumluluk olmazsa olmazdı.
- Eski teknolojiye bağlı kalmak ve gelişememek
- Kapalı ekosistemlere bağlı kalmak
Yeni kullanıcı arayüzü platformunun temelini web bileşenleri oluşturarak tüm bu ihtiyaçlar karşılandı ve sonuç olarak yeni Lightning Web Components 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 mevcut birçok standart web bileşeninden bazılarını kullanabilirsiniz. İşte size sadece birkaç örnek:
- Google, kendi Material Design sistemini web bileşenleri olarak sunar: Material Web Components.
- Wired Elements, kabataslak ve elle çizilmiş gibi görünen bir dizi web bileşenidir.
- 3D içerik eklemek için herhangi bir uygulamaya bırakabileceğ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ılabilir olmasını istediğiniz tek bir bileşen ya da kitaplık satıyorsanız bileşenlerinizi web bileşenlerini kullanarak oluşturmayı düşünebilirsiniz. Yerleşik web bileşenleri API'lerini kullanabilirsiniz ancak bunlar oldukça düşük seviyeli olduğundan süreci kolaylaştırmak için kullanabileceğiniz çeşitli kitaplıklar vardır.
Kendi bileşenlerinizi oluşturmaya başlamak için Google tarafından geliştirilen ve React'e benzer harika bir işlevsel oluşturma deneyimi sunan bir web bileşeni temel sınıfı olan LitElement'e göz atabilirsiniz.
Değerlendirilebilecek diğer araçlar ve kitaplıklar:
- Stencil, web bileşenlerini öncelikli olarak kullanan bir çerçevedir. JSX ve TypeScript gibi popüler çerçeve özelliklerini içerir.
- Angular Elements, Angular bileşenlerini web bileşenleri olarak sarmalamanın bir yolunu sunar.
- Vue.js web bileşeni sarmalayıcısı, Vue bileşenlerini web bileşenleri olarak paketlemenin bir yolunu sunar.
Diğer kaynaklar:
- open-wc.org; başlangıç için harika bilgiler, ipuçları ve derleme ile geliştirme araçları için varsayılan yapılandırmalar içerir.
- Web'in Temelleri, temel web bileşenleri API'leri ve web bileşenleri tasarlamayla ilgili en iyi uygulamalar hakkında temel bilgiler sağlar.
- MDN, web bileşenleri API'leri için referans belgelerinin yanı sıra bazı eğitimler de sunar.