Polymer.js: Web Uygulaması Geliştirmenin Geleceği?

Yaklaşık bir yıl önce Mayıs 2013'te Google, Polymer.js'yi başlattı.

Yani bir yıl sonra buradayız. Ve soru şu: Prime time için henüz hazır mı? Polimer web geliştirme tekniklerini kullanarak üretime hazır bir uygulama oluşturmak henüz mümkün mü?

Bu soruyu cevaplamak için Polymer'i bir web uygulaması geliştirmek ve ne kadar iyi davranacağını görmek için bir test sürüşüne çıkardım. Bu makale bu deneyim ve bu süreçte öğrendiklerim hakkında.

Polymer.js: Konsept

Polymer eğitimimize girmeden önce, Polymer.js'yi iddia ettiği gibi değil, gerçekte ne olduğu için tanımlayalım.

Polymer'i incelemeye başladığınızda, kendine özgü benzersiz dünya görüşüne kapılmadan edemiyorsunuz. Polymer, kendisini "öğeleri web geliştirmenin merkezine yerleştiren" bir tür doğaya dönüş yaklaşımı benimsiyormuş gibi görünmekte. Polymer.js ile kendi HTML öğelerinizi oluşturabilir ve bunları ölçeklenebilir ve bakımı yapılabilir eksiksiz, karmaşık web uygulamaları halinde oluşturabilirsiniz. Her şey, daha sonra HTML sayfalarınızda, içlerini bilmeye veya anlamaya gerek kalmadan bildirimsel bir şekilde yeniden kullanılabilecek yeni (yani özel) öğeler oluşturmakla ilgilidir.

Öğeler, sonuçta, web'in yapı taşlarıdır. Buna göre, Polymer'in weltanschauung'u, web geliştirmenin temel olarak, işaretlemeyi “komut dosyası parçaları” ile değiştirmekten ziyade, daha güçlü web bileşenleri oluşturmak için mevcut öğe paradigmasını genişletmeye dayanması gerektiğidir. Başka bir deyişle, Polymer, giderek karmaşıklaşan özel JavaScript kitaplıkları labirentine güvenmek yerine tarayıcının "yerel" teknolojilerinden yararlanmaya inanmaktadır (jQuery ve diğerleri). Gerçekten merak uyandıran bir fikir.

Tamam, teori bu. Şimdi gerçeğe bir göz atalım.

Polimer Web Geliştirme: Gerçek

Polymer'in felsefi yaklaşımı kesinlikle haklı olsa da, ne yazık ki (en azından bir dereceye kadar) zamanının ötesinde bir fikirdir.

Polymer.js, hala standardizasyon sürecinde olan (W3C tarafından) ve bugünün tarayıcılarında henüz mevcut olmayan bir dizi teknolojiye dayanarak, tarayıcıya bir dizi ağır gereksinim yükler. Örnekler arasında shadow dom, şablon öğeleri, özel öğeler, HTML içe aktarmaları, mutasyon gözlemciler, modele dayalı görünümler, işaretçi olayları ve web animasyonları yer alır. Bunlar harika teknolojiler, ancak en azından şimdilik modern tarayıcılara henüz ulaşmamış durumdalar.

Polimer stratejisi, ön uç geliştiricilerin şu anda standardizasyon sürecinde olan (W3C tarafından) bu öncü, hala gelecek, tarayıcı tabanlı teknolojilerden, kullanılabilir olduklarında yararlanmalarını sağlamaktır. Bu arada, boşluğu doldurmak için Polymer, çoklu dolguların (bugünün tarayıcılarında henüz yerleşik olmayan özellikler sağlayan indirilebilir JavaScript kodu) kullanılmasını önerir. Önerilen çoklu dolgular, (en azından teorik olarak) bu özelliklerin yerel tarayıcı sürümleri kullanıma sunulduğunda değiştirilmek üzere sorunsuz olacak şekilde tasarlanmıştır.

Tamam iyi. Ama şunu netleştirmeme izin ver. En azından şimdilik, JavaScript Kitaplıklarını kullanmaktan kaçınmak için JavaScript kitaplıklarını (yani çoklu dolgular) mı kullanacağız? Eh, bu "büyüleyici".

Sonuç olarak, Polimer ile bir tür araf modundayız, çünkü nihayetinde henüz var olmayan tarayıcı teknolojilerine güveniyor (veya belki daha doğru bir şekilde, yaklaşık olarak). Buna göre, Polymer.js bugün daha çok öğe merkezli uygulamaların gelecekte nasıl oluşturulabileceğine dair bir çalışma gibi görünüyor (yani, gerekli tüm özellikler büyük tarayıcılarda uygulandığında ve çoklu dolgulara artık ihtiyaç duyulmadığında). Ancak, en azından şu anda, Polimer, tam burada ve şimdi, sağlam bir dünya görüşünüzü değiştirme uygulamaları oluşturmak için gerçek bir seçenekten daha ilgi çekici bir konsept gibi görünüyor, bu da bir Polimer öğreticisi yazmayı (veya bulmayı) zorlaştırıyor. Google'ın belgelerine.

Polimer Mimarisi

Şimdi rehberimize geçelim. Polymer.js mimari olarak dört katmana ayrılmıştır:

Yerel: Gerekli özellikler şu anda tüm büyük tarayıcılarda yerel olarak mevcuttur. Temel: Gerekli tarayıcı özelliklerini uygulayan çoklu dolgular, tarayıcıların kendilerinde henüz yerel olarak mevcut değildir. (Amaç, sağladığı yetenekler tarayıcıda yerel olarak kullanılabilir hale geldikçe, bu katmanın zaman içinde kaybolmasıdır.). Çekirdek: Polimer öğelerinin Native ve Foundation katmanları tarafından sağlanan yeteneklerden yararlanabilmesi için gerekli altyapı. Öğeler: Uygulamanızı oluşturmanıza yardımcı olabilecek yapı taşları olarak hizmet etmesi amaçlanan temel bir öğe kümesi. Şunları sağlayan öğeleri içerir: Ajax, animasyon, esnek düzen ve hareketler gibi temel işlevler. Karmaşık tarayıcı API'lerinin ve CSS düzenlerinin kapsüllenmesi. Akordeonlar, kartlar ve kenar çubukları gibi UI bileşen oluşturucuları.

Polimer Uygulaması Oluşturma

Başlamak için, Polimer'i, kavramlarını ve yapısını tanıtmanıza yardımcı olacak bazı makaleler ve öğretici yazılar bulunmaktadır. Ama siz de benim gibiyseniz, bunların üzerinden geçtiğinizde ve uygulamanızı oluşturmaya hazır olduğunuzda, nereden başlayacağınızdan veya nasıl oluşturacağınızdan gerçekten emin olmadığınızı hemen anlarsınız. Şimdi süreçten geçtiğime ve çözdüğüme göre, işte bazı işaretçiler…

Polimer web geliştirme tamamen eleman yaratmakla ilgilidir ve sadece eleman yaratmakla ilgilidir. Dolayısıyla, Polimer dünya görüşü ile tutarlı olarak, uygulamamız yeni bir unsur olacak. Daha fazla ve daha az değil. Ah tamam anladım. İşte başlıyoruz.

Polimer proje örneğimiz için uygulamanın en üst düzey öğesini adlandıracağım , çünkü özel öğe adları (onları oluşturmak için hangi çerçeveyi kullandığınızdan bağımsız olarak) bir kısa çizgi (örn., x etiketleri, polimer öğeleri vb.) içermelidir.

Ancak bir sonraki adım, biraz daha fazla düşünmeyi gerektiriyor. Uygulamamızı nasıl bileşenleştireceğimize karar vermemiz gerekiyor. Kolay bir yaklaşım, uygulamamızdaki bileşenleri görsel bir bakış açısıyla tanımlamaya çalışmak ve ardından bunları Polymer'de özel öğeler olarak oluşturmaya çalışmaktır.

Örneğin, aşağıdaki ekranlara sahip bir uygulamamız olduğunu hayal edin:

Üst çubuğun ve yan çubuk menüsünün değişmeyeceğini ve uygulamanın gerçek "içeriğinin" farklı "görünümler" yükleyebileceğini belirleyebiliriz.

Durum böyle olunca, makul bir yaklaşım, Bu öğenin içinde, üst çubuğu ve yan çubuk menüsünü oluşturmak için bazı Polimer UI Öğeleri kullanabiliriz.

Daha sonra “içerik” alanına yüklenmek üzere ListView ve SingleView olarak adlandıracağımız iki ana görünümümüzü oluşturabiliriz. ListView'deki öğeler için bir ItemView oluşturabiliriz.

Bu daha sonra şöyle bir yapı verecektir:

Güzel haberler

Artık örnek Polimer uygulamamız olduğuna göre, onu herhangi bir web sayfasına “toptal-app.html” dosyasını içe aktararak ve etiketini ekleyerek ekleyebiliriz. çünkü sonuçta bizim uygulamamız sadece bir element. Çok havalı.

Aslında, Polimer paradigmasının gücü ve güzelliğinin büyük bir kısmı burada yatmaktadır. Uygulamanız için oluşturduğunuz özel öğeler (tüm uygulamanız için en üst düzey dahil), bir web sayfasındaki diğer öğeler olarak kabul edilir. Bu nedenle özelliklerine ve yöntemlerine diğer herhangi bir JavaScript kodundan veya kitaplığından (örneğin, Backbone.js, Angular.js, vb.) erişebilirsiniz. Hatta kendi yeni öğelerinizi oluşturmak için bu kitaplıkları kullanabilirsiniz.

Ayrıca, özel bileşenleriniz diğer özel öğe kitaplıklarıyla (Mozilla'nın X-Tag'i gibi) uyumludur. Bu nedenle, kendi özel öğenizi oluşturmak için ne kullandığınız önemli değil, Polymer ve diğer tarayıcı teknolojileriyle uyumludur.

Bu nedenle, Özel Öğeler sitesi gibi forumlarda yeni oluşturulan öğelerini ortaya çıkaran ve paylaşan bir Öğe Oluşturucu topluluğunun ortaya çıktığını görmeye başlamamız şaşırtıcı değil. Oraya gidebilir ve ihtiyacınız olan bileşeni alabilir ve uygulamanızda kullanabilirsiniz.

Diğer taraftan…

Polimer, geliştiricilerin, özellikle de acemi uygulama geliştiricilerin, onu bulması o kadar da zor olmayan pürüzlü kenarlarla birlikte biraz kırılgan bulabilecekleri kadar yeni bir teknolojidir.

İşte bir örnekleme:

• Dokümantasyon ve rehberlik eksikliği.
  • Tüm Polymer.js UI ve UI olmayan Öğeler belgelenmemiştir. Bazen bunların nasıl kullanılacağına dair tek “rehberlik” demo kodudur. Bazı durumlarda, nasıl çalıştığını ve kullanılabileceğini/kullanılması gerektiğini daha iyi anlamak için bir Polimer Elementin kaynak koduna başvurmak bile gereklidir.
  • Daha büyük uygulamaların nasıl organize edileceği tam olarak açık değildir. Özellikle, tekil nesneleri öğeler arasında nasıl geçirmeniz gerekiyor? Özel öğelerinizi test etmek için hangi stratejiyi kullanmalısınız? Bu noktada bu tür sorunlarla ilgili rehberlik, en iyi ihtimalle yetersizdir.

• Bağımlılık hataları ve sürüm-itis. Polymer.js öğelerini önerildiği gibi indirdiğinizde bile, aynı öğede farklı sürüm bağımlılıklarına işaret eden bir bağımlılık hatasıyla karşılaşabilirsiniz. Polimer Elementlerin şu anda yoğun bir şekilde geliştirilmekte olduğu anlaşılsa da, bu tür sorunlar geliştirmeyi oldukça zorlaştırabilir ve geliştirici güvenini ve ilgisini aşındırabilir.

• Mobil platformlardaki sorunlar. Polymer.js'nin mobil platformlardaki performansı genellikle sinir bozucu ve sorunlu arasında bir yerde olabilir.
  • Tüm kitaplığı ve çoklu dolguları (gzip'leme olmadan) indirmek yavaştır ve kullanmayı düşündüğünüz her Polimer Öğesini indirmeniz gerekir.
  • Çoklu dolguların, kitaplıkların ve özel öğelerin işlenmesi, mobil platformlarda pahalı bir görev gibi görünüyor. İndirme işlemi tamamlandığında bile, genellikle birkaç saniyeliğine boş bir ekranla karşılaşırsınız.
  • Özellikle daha karmaşık işlevler için (sürükle-bırak veya bir tuvale işleme gibi), masaüstünde sorunsuz çalışan işlevselliğin mobil platformda düzgün çalışmadığını veya henüz desteklenmediğini görebilirsiniz. Benim özel durumumda, karşılaştığım böyle bir hayal kırıklığı, iOS'ta bir tuvale dönüştürmekti.
• Yetersiz veya kafa karıştırıcı hata bildirimi. Bazen bir öznitelik adını yanlış yazdığınızda veya çekirdek katmanın kendisiyle ilgili bir şeyi kırdığınızda, konsolunuzda, sorunun nerede olduğunu belirlemeye çalışmak için araştırmanız gereken iki çağrı yığınıyla garip bir hata mesajı alırsınız. Bazen bunu çözmek kolaydır, ancak bazen kaynağını bulamadığınız için hatayı önlemek için tamamen farklı bir strateji denemeniz gerekir.

Çözüm

Polimer ilgi çekici bir teknolojidir, ancak inkar edilemez bir şekilde hala emekleme aşamasındadır. Bu nedenle, büyük, kurumsal düzeyde, üretime hazır bir uygulamanın geliştirilmesine henüz uygun değildir. Ek olarak, Polymer.js web geliştirmesine özel pek çok kılavuz veya eğitim yoktur.

JavaScript merkezli veya DOM merkezli yaklaşımın gerçekten temelde daha iyi olup olmadığı konusunda jüri hala kararsız. Polimer bazı ikna edici argümanlar öne sürüyor, ancak karşı argümanlar var.

Belki de en önemlisi, Polymer, DOM gibi tarayıcı teknolojilerini kullanma konusunda oldukça önemli düzeyde bir uzmanlık gerektirir. Birçok yönden jQuery'den önceki günlere dönüyorsunuz, bir öğeden CSS sınıfı eklemek veya çıkarmak gibi basit görevleri yapmak için DOM API'sini öğreniyorsunuz. Bu kesinlikle, en azından bir düzeyde, ileri değil geri adım atıyormuşsunuz gibi hissettiriyor.

Ancak bununla birlikte, özel öğelerin gelecekte Web Geliştirmenin önemli bir parçası olacağı muhtemel görünüyor, bu nedenle, bugünün web geliştiricisi için er ya da geç dalmak muhtemelen ihtiyatlı olacaktır. Ve daha önce kendi özel öğelerinizi yaratmayı hiç denemediyseniz, Polimer (ve bu öğretici) muhtemelen başlamak için mantıklı bir yerdir.