Geçtiğimiz yıl, Polymer ekibi geliştiricilere kendi öğelerini nasıl oluşturacaklarını öğretmek için çok zaman harcadı. Bu, büyük ölçüde Polymer'in Core ve Paper öğelerinin ve Mozilla'daki ekip tarafından oluşturulan Brick öğelerinin desteğiyle hızla büyüyen bir ekosisteme yol açtı.
Geliştiriciler kendi öğelerini oluşturma konusunda daha fazla bilgi edindikçe ve uygulama oluşturmayı düşünmeye başladıkça bazı sorular ortaya çıkar:
- Uygulamanızın kullanıcı arayüzünü nasıl yapılandırmalısınız?
- Farklı eyaletler arasında nasıl geçiş yapıyorsunuz?
- Performansı artırmaya yönelik bazı stratejiler nelerdir?
- Peki çevrimdışı bir deneyimi nasıl sunmalısınız?
Chrome Dev Summit için küçük bir kişi uygulaması oluşturarak ve bu uygulamayı oluşturmak için uyguladığım süreci analiz ederek bu soruları yanıtlamaya çalıştım. Şunları buldum:
Yapı
Bir uygulamayı birleştirilip yeniden kullanılabilecek modüler parçalara ayırmak, Web Bileşenleri'nin temel ilkelerinden biridir. Polymer'in core-* ve paper-* öğeleri, paper-toolbar ve paper-icon-button gibi küçük parçalarla başlamayı kolaylaştırır.
Ayrıca, kompozisyonun gücüyle bunları istediğiniz sayıda öğeyle birleştirerek bir uygulama iskeleti oluşturabilirsiniz.
Genel bir iskelet oluşturduktan sonra, markanızın benzersiz bir deneyimine dönüştürmek için kendi CSS stillerinizi uygulayabilirsiniz. Bunu bileşenlerle yapmanın avantajı, aynı uygulama oluşturma temel öğelerinden yararlanırken çok farklı deneyimler oluşturmanıza olanak tanımasıdır. İskeleti oluşturduktan sonra içeriği düşünmeye geçebilirsiniz.
Özellikle çok sayıda içerikle ilgilenmek için uygun olan öğelerden biri core-list'tür.
core-list, bir veri kaynağına (temel olarak bir nesne dizisi) bağlanabilir ve dizindeki her öğe için bir şablon örneği oluşturur. Şablonda, içeriğinizi hızlıca bağlamak için Polymer'in veri bağlama sisteminin gücünden yararlanabilirsiniz.
Geçişler
Uygulamanızın çeşitli bölümleri tasarlanıp uygulandıktan sonra, bir sonraki adımda bunların arasında nasıl gezineceğinizi belirlemeniz gerekir.
Hâlâ deneysel bir öğe olsa da core-animated-pages, uygulamanızdaki farklı durumlar arasında geçiş yapmak için kullanılabilecek takılabilir bir animasyon sistemi sağlar.
Ancak animasyon, bulmacanın yalnızca yarısıdır. Bir uygulamanın URL'lerini düzgün bir şekilde yönetmesi için bu animasyonları bir yönlendiriciyle birleştirmesi gerekir.
Web bileşenleri dünyasında yönlendirme, zorunlu ve beyanla iki şekilde yapılır. core-animated-pages'ü bu iki yaklaşımla birlikte kullanmak, projenizin ihtiyaçlarına bağlı olarak geçerli olabilir.
Zorunlu yönlendirici (ör. Flatiron's Director), eşleşen bir rota dinleyebilir ve ardından core-animated-pages'ye seçili öğeyi güncellemesini talimat verebilir.
Bir rota eşleştikten sonra ve bir sonraki bölüme geçiş yapılmadan önce bazı işlemler yapmanız gerekiyorsa bu özellikten yararlanabilirsiniz.
Öte yandan, beyanla yönlendiren bir yönlendirici (ör. app-router), yönlendirme ve core-animated-pages öğelerini tek bir öğede birleştirebilir. Böylece, ikisini yönetmek daha kolay hale gelir.
Daha ayrıntılı kontrol istiyorsanız more-routing gibi bir kütüphaneye göz atabilirsiniz. Bu kütüphane, veri bağlama kullanılarak core-animated-pages ile birleştirilebilir ve size her iki dünyanın da en iyisini sunabilir.
Performans
Uygulamanız şekillenirken performans darboğazlarını, özellikle de ağla ilgili olanları dikkatle izlemeniz gerekir. Bu, genellikle mobil web uygulamasının en yavaş kısmıdır.
Web bileşenleri polyfill'lerini koşullu olarak yüklemek, performans açısından kolay bir kazanç sağlar.
Platform zaten tam destek sunuyorsa bu kadar maliyete katlanmanız gerekmez. Yeni webcomponents.js deposunun her sürümünde polyfill'ler de bağımsız dosyalara ayrıldı. Bu, polyfill'lerin bir alt kümesini koşullu olarak yüklemek istiyorsanız faydalıdır.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
Ayrıca, tüm HTML içe aktarma işlemlerinizi Vulcanize gibi bir araç üzerinden çalıştırarak önemli ağ kazançları elde edebilirsiniz.
Vulcanize, içe aktarma işlemlerinizi tek bir pakette birleştirerek uygulamanızın yaptığı HTTP isteklerinin sayısını önemli ölçüde azaltır.
Çevrimdışı
Ancak yalnızca performanslı bir uygulama oluşturmak, bağlantısı az olan veya hiç olmayan kullanıcıların ikilemlerini çözmez. Diğer bir deyişle, uygulamanız çevrimdışı çalışmıyorsa gerçek bir mobil uygulama değildir. Şu anda kaynaklarınızı çevrimdışı kullanmak için çok eleştirilen uygulama önbelleğini kullanabilirsiniz. Ancak gelecekte Hizmet Çalışanı, çevrimdışı geliştirme deneyimini çok daha iyi hale getirecektir.
Jake Archibald kısa süre önce muhteşem bir hizmet çalışanı kalıpları yemek kitabı yayınladı ancak size başlamanız için hızlı bir başlangıç sunacağım:
Hizmet çalışanı yüklemek oldukça kolaydır. Bir worker.js dosyası oluşturun ve uygulamanız başlatıldığında dosyayı kaydedin.
worker.js öğenizi uygulamanızın kökünde konumlandırmanız önemlidir. Bu, uygulamanızdaki herhangi bir yoldan gelen istekleri engellemesine olanak tanır.
İşleyicinin yükleme işleyicisinde, uygulamayı destekleyen veriler de dahil olmak üzere çok sayıda kaynağı önbelleğe alıyorum.
Bu sayede uygulamam, çevrimdışı olarak erişen kullanıcılara en azından yedek bir deneyim sunabilir.
Devam edelim.
Web bileşenleri, web platformuna eklenen önemli bir özelliktir ve henüz yeni kullanıma sunulmuştur. Bu özellikler daha fazla tarayıcıda kullanıma sunulduğunda, uygulamalarımızı yapılandırmayla ilgili en iyi uygulamaları belirlemek geliştirici topluluğuna düşecek. Yukarıdaki çözümler bize bir başlangıç noktası sağlar ancak öğrenilecek çok daha fazla şey vardır. Daha iyi uygulamalar geliştirmeye devam edin.