Chrome Geliştirici Zirvesi 2014 - Şimdi Polymer ile bazı uygulamalar geliştirelim

Polymer ekibi önceki yıl boyunca geliştiricilere kendi öğelerini nasıl oluşturacaklarını öğretmek için oldukça fazla zaman harcadı. Bu durum, büyük ölçüde Polymer'in Core ve Paper öğeleri ile Mozilla'daki ekip tarafından oluşturulan Tuğla unsurların sağlamlaştırdığı, hızla büyüyen bir ekosisteme yol açmıştır.

Geliştiriciler kendi öğelerini oluşturma konusuna alıştıkça ve uygulama derleme üzerine düşünmeye başladıkça akıllarında birtakım sorular olur:

  • Uygulamanızın kullanıcı arayüzünü nasıl yapılandırmanız gerekir?
  • Farklı eyaletlerden nasıl geçiş yaparsınız?
  • Performansı artırma stratejilerinden bazıları nelerdir?
  • Ç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ştururken uyguladığı süreci analiz ederek bu soruları yanıtlamaya çalıştım. İşte bulduğum sonuç:

Yapı

Bir uygulamayı birleştirilip yeniden kullanılabilen modüler parçalara bölmek, Web Bileşenleri'nin tek kiracılarından biridir. Polimer'in temel* ve kağıt-* öğeleri, paper-toolbar ve paper-icon-button gibi küçük parçalarla başlamayı kolaylaştırır.

Polymer, geliştiricilerin uygulamaları daha hızlı geliştirmesine yardımcı oluyor

Bileşenlerin gücü sayesinde bunları istediğiniz sayıda öğeyle birleştirerek bir uygulama iskelesi oluşturun.

Polimer, Web Bileşenleri'ni daha tatlı hale getirir

Genel bir yapı oluşturduktan sonra, markanıza özel bir deneyime dönüştürmek için kendi CSS stillerinizi uygulayabilirsiniz. Bunu bileşenlerle yapmanın güzel yanı, aynı uygulama derleme temel öğelerinden yararlanırken oldukça farklı deneyimler oluşturabilmenizi sağlamasıdır. Oluşturduğunuz araç oluşturulduğunda içerik üzerine düşünmeye devam edebilirsiniz.

core-list, özellikle çok sayıda içerikle çalışmak için uygun olan öğelerden biridir.

Polimer, Web Bileşenleri'ni daha tatlı hale getirir

core-list bir veri kaynağına (esasen bir nesne dizisi) bağlanabilir ve dizideki her öğe için bir şablon örneğini damgalar. Şablonun içinde, içeriğinizi hızla 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ığından sıradaki görev, bunlar arasında gerçekte nasıl gezineceğinizi bulmaktır.

Yine de deneysel bir öğe olsa da core-animated-pages, uygulamanızdaki farklı durumlar arasında geçiş yapmak için kullanılabilen takılabilir bir animasyon sistemi sağlar.

Polimer rapor kartının iyileştirilmesi gerekiyor

Ancak animasyon, bulmacanın yalnızca yarısıdır. Bir uygulamanın, URL'lerini düzgün bir şekilde yönetebilmesi için bu animasyonları bir yönlendiriciyle birleştirmesi gerekir.

Web Bileşenleri yönlendirmesi dünyasında, zorunlu ve bildirim temelli olmak üzere iki tür yönlendirme vardır. Proje ihtiyaçlarınıza bağlı olarak core-animated-pages bu iki yaklaşımdan herhangi biriyle birlikte kullanılabilir.

Zorunlu bir yönlendirici (örneğin, Flatiron's Director) eşleşen rotayı dinleyip core-animated-pages ürününe, seçilen öğeyi güncellemesini söyleyebilir.

Polimer rapor kartının iyileştirilmesi gerekiyor

Bu, bir rota eşleştikten sonra ve bir sonraki bölümün geçişi yapılmadan önce bazı işlemler yapmanız gerekiyorsa yararlı olabilir.

Diğer yandan, bildirim temelli bir yönlendirici (uygulama-yönlendirici gibi) yönlendirme ile core-animated-pages öğelerini tek bir öğede birleştirebilir. Böylece, ikisinin yönetilmesi daha kolay hale gelir.

Polimer rapor kartının iyileştirilmesi gerekiyor.

Daha hassas bir denetime sahip olmak isterseniz daha fazla yönlendirme gibi bir kitaplıktan yararlanabilirsiniz. Bu kitaplık, veri bağlama özelliği kullanılarak core-animated-pages ile birleştirilebilir. Böylece, her iki özelliğin de en iyi özelliklerinden yararlanabilirsiniz.

Performans

Uygulamanız şekillenmeye devam ederken performans sorunlarını, özellikle de ağ ile ilgili her şeyi dikkatli bir şekilde gözlemlemeniz gerekir. Çünkü bu genellikle bir mobil web uygulamasının en yavaş bölümüdür.

Web Bileşenleri çoklu dolgularının koşullu olarak yüklenmesi, performansı artırmada kolaylık sağlar.

Polimer rapor kartının iyileştirilmesi gerekiyor

Platform zaten tam destek sağlıyorsa bu maliyetlere katlanmanız gerekmez. Yeni webcomponents.js deposunun her sürümünde, çoklu dolgular da bağımsız dosyalara ayrıldı. Bu, çoklu dolguların bir alt kümesini koşullu olarak yüklemek istiyorsanız yararlı olur.

<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 Aktarmalarınızı Vulcanize gibi bir araçla çalıştırdığınızda önemli ağ kazancı elde edebilirsiniz.

Polimer rapor kartının iyileştirilmesi gerekiyor.

Vulcanize, içe aktarmalarınızı tek bir pakette birleştirir. Bu da uygulamanızın gönderdiği HTTP isteklerinin sayısını önemli ölçüde azaltır.

Çevrimdışı

Ancak yalnızca etkili bir uygulama oluşturmak, az bağlantı sahibi olan veya hiç bağlantısı olmayan kullanıcıların ikilemini çözmez. Diğer bir deyişle, uygulamanız çevrimdışı olarak çalışmıyorsa aslında bir mobil uygulama değildir. Bugün, kaynaklarınızı çevrimdışına almak için uygunsuz uygulama önbelleğini kullanabilirsiniz, ancak geleceğe dönük olarak Service Worker, çevrimdışı geliştirme deneyimini yakında çok daha iyi hale getirecektir.

Jake Archibald kısa süre önce hizmet çalışanı kalıpları hakkında harika bir tarif yayınladı. Şimdi işe koyulmanız için size hızlı bir başlangıç yapacağım:

Service Worker yüklemek çok kolay. Bir worker.js dosyası oluşturun ve uygulamanız başlatıldığında bu dosyayı kaydedin.

Polimer rapor kartının iyileştirilmesi gerekiyor

worker.js öğenizi uygulamanızın kök dizininde bulmanız önemlidir. Bu, uygulamanızın herhangi bir yoldan gelen isteklere müdahale etmesine olanak tanır.

Çalışanın yükleme işleyicisinde, bir sürü kaynağı (uygulamayı destekleyen veriler dahil) önbelleğe alıyorum.

Polimer rapor kartının iyileştirilmesi gerekiyor

Bu sayede uygulamam, çevrimdışı erişimi olan kullanıcılara en azından yedek deneyim sunabilir.

Gelsin!

Web Bileşenleri, web platformuna büyük katkı sağladı ve henüz emekleme aşamasındadır. Bu yeni tarayıcılar daha fazla tarayıcıya ulaştıkça, uygulamalarımızı yapılandırmak için en iyi uygulamaları bulmak, yani geliştirici topluluğu olarak bize düşecek. Yukarıdaki çözümler bize bir başlangıç noktası sağlar, ancak daha öğrenecek çok şey var. Daha iyi uygulamalar geliştirmeye devam edin.