Polymer, Web Bileşenleri'nin muhteşem geleceğine açılan bir kapıdır. Özel öğeleri kullanmayı ve oluşturmayı kolaylaştırmak istiyoruz. Ekip, geçen yıl boyunca gelişen spesifikasyonlar için bir dizi polyfill üzerinde yoğun bir şekilde çalıştı. Ayrıca, web bileşenleri oluşturmayı kolaylaştırmak için kullanışlı bir sugaring kitaplığı oluşturduk. Son olarak, uygulamalarınızda yeniden kullanabileceğiniz bir dizi kullanıcı arayüzü ve yardımcı program öğesi oluşturuyoruz. 2013 Chrome Geliştirici Zirvesi'nde Polymer'in farklı bölümlerini ve "Her şey bir öğedir" mantramızın arkasındaki felsefeyi inceledim.
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html
"Her şey bir öğedir" (<select>'dan özel öğelere kadar)
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#6
1990'larda web sayfası oluşturmak kısıtlayıcı olsa da güçlü bir deneyimdi. Elimizde yalnızca birkaç öğe vardı. En etkileyici kısmı ise her şeyin bildirimsel olmasıydı. Sayfa oluşturmak, form kontrolleri eklemek ve çok fazla JavaScript yazmadan bir "uygulama" oluşturmak son derece kolaydı.
<select> öğesini ele alalım. Öğeyi yalnızca tanımlayarak birçok işlevden yararlanabilirsiniz:
- HTML özellikleri aracılığıyla özelleştirilebilir
- Alt öğeleri (ör.
<option>) varsayılan bir kullanıcı arayüzüyle oluşturur ancak özellikler aracılığıyla yapılandırılabilir. <form>gibi diğer bağlamlarda kullanışlıdır.- DOM API'si var: özellikler ve yöntemler
- İlginç şeyler olduğunda etkinlikleri tetikler.
Web Bileşenleri, web geliştirmenin bu altın çağına geri dönmenizi sağlayacak araçları sunar. <select>'i anımsatan ancak 2014'ün kullanım alanları için tasarlanmış yeni öğeler oluşturabileceğimiz bir dil. Örneğin, AJAX bugün icat edilmiş olsaydı muhtemelen bir HTML etiketi olurdu (örnek):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Veya bir queryMatches özelliğine veri bağlayan duyarlı öğeler:
<polymer-media-query query="max-width:640px" queryMatches="">
Polymer'da tam olarak bu yaklaşımı benimsiyoruz. Monolitik JavaScript tabanlı web uygulamaları oluşturmak yerine yeniden kullanılabilir öğeler oluşturun. Zamanla, daha küçük öğelerin bir araya getirilmesiyle uygulamanın tamamı oluşturulur. Hatta bir uygulamanın tamamı bile bir öğe olabilir:
<my-app></my-app>
Polymer'ın özel sosuyla web bileşenleri oluşturma
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer, web bileşeni tabanlı uygulamalar oluşturmak için birçok kolaylık sunar:
- Bildirim öğesi kaydı:
<polymer-element> - Bildirimsel devralma:
<polymer-element extends="..."> - Bildirim temelli iki yönlü veri bağlama:
<input id="input" value=""> - Bildirim temelli etkinlik işleyiciler:
<button on-click="" - Yayınlanan özellikler:
xFoo.bar = 5<-><x-foo bar="5"> - Mülk gözlemi:
barChanged: function() {...} - Varsayılan olarak PointerEvents / PointerGestures
Kıssadan hisse: Polymer öğeleri yazmak tamamen bildirimsel olmakla ilgilidir. Ne kadar az kod yazarsanız o kadar iyi. ;)
Web Bileşenleri: Web geliştirmenin geleceği
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#26
Web Bileşenleri'nin arkasındaki standartlardan bahsetmeden geçmek olmaz. Sonuçta Polymer, gelişen bu temel API'leri temel alır.
Web geliştirme alanında çok heyecan verici bir dönemin eşiğindeyiz. Web platformuna eklenen diğer yeni özelliklerin aksine, Web Bileşenleri'ni oluşturan API'ler gösterişli veya kullanıcılara yönelik değildir. Bu araçlar yalnızca geliştirici üretkenliği için tasarlanmıştır. Dört ana API'nin her biri tek başına kullanışlıdır ancak birlikte kullanıldıklarında mucizeler yaratırlar.
- Gölge DOM: Stil ve DOM kapsülleme
- Özel Öğeler: Yeni HTML öğeleri tanımlayın. Özellikleri ve yöntemleri olan bir API verin.
- HTML İçe Aktarmaları, CSS, JS ve HTML paketinin dağıtım modelidir.
- Şablonlar: Daha sonra kullanılacak etkin olmayan işaretleme parçalarını tanımlamak için uygun DOM şablonu oluşturma
API'lerin temel özellikleri hakkında daha fazla bilgi edinmek istiyorsanız webcomponents.org adresini ziyaret edin.