Geçtiğimiz yıl, Polymer ekibi geliştiricilere kendi öğelerini nasıl oluşturacaklarını öğretmek için epey zaman harcadı. Bu değişim, büyük ölçüde Polymer'in Core and Paper (Kağıt) öğelerinin ve Mozilla ekibi tarafından oluşturulan Brick elementlerinin desteklediği, hızla büyüyen bir ekosisteme yol açtı.
Geliştiriciler kendi öğelerini oluşturmaya daha fazla alıştıkça ve uygulama geliştirme üzerine düşünmeye başladıkça bu durum akıllara bir dizi soru getirir:
- Uygulamanızın kullanıcı arayüzünü nasıl yapılandırmalısınız?
- Farklı eyaletler arasında nasıl geçiş yaparsınız?
- Performansı iyileştirmeye yönelik stratejilerden bazıları nelerdir?
- Ayrıca nasıl çevrimdışı deneyim sağlamanız gerekir?
Chrome Dev Summit için bu soruları küçük kişiler için bir uygulama oluşturup oluşturma sürecinde izlediğim süreci analiz ederek yanıtlamaya çalıştım. Şu sonuca ulaştım:
Yapı
Bir uygulamayı, birleştirilebilir ve yeniden kullanılabilecek modüler parçalara ayırmak, Web Bileşenlerinin merkezi kiracısıdır. Polimer'in core-* ve Paper-* öğeleri, core-Tool ve paper-icon-button gibi küçük parçalarla başlamayı kolaylaştırır.
...ve bileşimin gücü sayesinde, bunları istediğiniz sayıda öğeyle birleştirerek uygulama yapısı oluşturabilirsiniz.
Genel bir yapı oluşturduktan sonra, kendi CSS stillerinizi uygulayarak bunu markanıza özel bir deneyime dönüştürebilirsiniz. Bunu bileşenlerle yapmanın güzel tarafı, aynı uygulama geliştirme öğelerinden yararlanırken çok farklı deneyimler oluşturmanıza olanak tanımasıdır. Hazır iskelenizi oluşturduktan sonra içerik üzerinde düşünmeye başlayabilirsiniz.
core-list, çok sayıda içerikle başa çıkmaya özellikle uygun öğelerden biridir.
core-list, bir veri kaynağına (temel olarak bir nesne dizisi) bağlanabilir ve dizideki her öğe için bir şablon örneği damgalanır. Şablonun içinde, içeriğinizi hızlı bir şekilde 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 görev bunlar arasında nasıl gezineceğinizi bulmaktır.
core-animated-pages, yine de deneysel bir öğe olsa da 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ı. Bir uygulamanın URL'lerini düzgün bir şekilde yönetebilmek için bu animasyonları bir yönlendiriciyle birleştirmesi gerekir.
Web Bileşenleri dünyasında yönlendirme iki türdür: zorunlu ve bildirimli. Projenizin ihtiyaçlarına bağlı olarak core-animated-pages iki yaklaşımdan biriyle birleştirmek geçerli olabilir.
Zorunlu bir yönlendirici (Flatiron's Director gibi), eşleşen bir rotayı dinleyebilir ve ardından core-animated-pages uygulamasına seçili öğeyi güncellemesi için talimat verebilir.
Bu, bir rota eşleştikten sonra ve sonraki bölümün geçişi tamamlanmadan önce bazı çalışma yapmanız gerekiyorsa yararlı olabilir.
Öte yandan, bildirim temelli bir yönlendirici (uygulama yönlendirici gibi), yönlendirme ile core-animated-pages'yi tek bir öğede birleştirebilir. Böylece, bu ikisinin yönetimi daha kolay hale gelir.
Daha ayrıntılı denetime sahip olmak istiyorsanız daha fazla yönlendirme gibi bir kitaplığa göz atabilirsiniz. Bu kitaplık, veri bağlama kullanılarak core-animated-pages ile birleştirilebilir ve muhtemelen her iki yöntemden de en iyi şekilde yararlanmanızı sağlar.
Performans
Uygulamanızın şekillenmeye başlamasıyla birlikte, performans darboğazlarını, özellikle de ağ ile ilişkili her şeyi dikkatle izlemeniz gerekir. Çünkü bu genellikle bir mobil web uygulamasının en yavaş kısmıdır.
Web Bileşenleri çoklu dolgularını koşullu olarak yükleyerek kolay bir performans kazancı sağlayabilirsiniz.
Platform zaten tam desteğe sahipse bu kadar ücret ödemenize gerek yok. Yeni webcomponents.js deposunun her sürümünde, çoklu dolgular ayrıca bağımsız dosyalara bölündü. Çoklu dolguların bir alt kümesini koşullu olarak yüklemek istiyorsanız bu yöntem yararlı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 İçe Aktarma işlemlerinizi Vulcanize gibi bir araçla çalıştırmak, ağ üzerinde önemli kazanımlar sağlayacaktır.
Vulcanize, içe aktarmalarınızı tek bir paket halinde birleştirir ve uygulamanızın gönderdiği HTTP isteklerinin sayısını önemli ölçüde azaltır.
Çevrimdışı
Ancak yalnızca yüksek performanslı bir uygulama geliştirmek, çok az bağlantısı olan veya hiç bağlantısı olmayan kullanıcılar için bir ikilem oluşturmaz. Diğer bir deyişle, uygulamanız çevrimdışı çalışmıyorsa, aslında bir mobil uygulama değildir. Günümüzde, kaynaklarınızı çevrimdışı kullanmak için birçok açıdan kötü durumdaki uygulama önbelleğini kullanabilirsiniz. Ancak, geleceğe baktığımızda Service Worker'ın yakında çevrimdışı geliştirme deneyimini çok daha iyi hale getirmesi bekleniyor.
Jake Archibald yakın zamanda hizmet çalışanı kalıpları için harika bir tarif defteri yayınladı. İşe koyulmanız için size hızlı bir başlangıç yapmak isterim:
Service Worker'ı yükleme işlemi çok kolaydır. Bir worker.js dosyası oluşturun ve uygulamanız başlatıldığında bu dosyayı kaydedin.
worker.js kodunuzu uygulamanızın kök dizininde bulmanız önemlidir. Bu sayede, uygulamanızdaki herhangi bir yoldan gelen isteklere müdahale edebilir.
Çalışanın yükleme işleyicisinde bir sürü kaynağı (uygulamayı destekleyen veriler dahil) önbelleğe alıyorum.
Bu, uygulamamın çevrimdışı erişen kullanıcılara en azından yedek deneyim sunmasına olanak tanır.
İlerlemeye devam!
Web Bileşenleri, web platformuna büyük katkı sağladı ve henüz emekleme aşamasındadır. Yeni tarayıcılar kullanıma sunulduğunda, uygulamalarımızın yapılandırılmasına yönelik en iyi uygulamaları belirlemek geliştirici topluluğu olarak bize kalmıştır. Yukarıdaki çözümler bize bir başlangıç noktası sağlar, ancak öğrenecek daha çok şey var. Daha iyi uygulamalar geliştirmeye devam ediyoruz