Polymer, Web Bileşenleri'nin muhteşem geleceğine açılan yöntemlerden biridir. Özel öğelerin kullanılmasını ve oluşturulmasını kolaylaştırmak istiyoruz. Ekip geçtiğimiz yıl boyunca, değişen özelliklere yönelik olarak bir dizi çoklu dolgu üzerinde yoğun bir şekilde çalıştı. Buna ek olarak, web bileşenleri oluşturmayı kolaylaştıran pratik bir şekerleme kitaplığı oluşturduk. Son olarak da uygulamalarınızda tekrar kullanabileceğiniz bir kullanıcı arayüzü ve yardımcı öğeler seti oluşturuyoruz. 2013 Chrome Geliştirici Zirvesi'nde, Polymer'in farklı bölümlerini ve "Her şey bir öğedir" felsefemizi yakından inceledim.
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html
"Her şey bir öğedir" (<select> öğesinden özel öğelere kadar)
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#6
1990'larda web sayfaları oluşturmak sınırlayıcı ama güçlü bir süreçti. Elimizde yalnızca birkaç öğe vardı. İşin güçlü tarafı: Her şey açıklamaya dayalıydı. Bir sayfa oluşturmak, form denetimleri eklemek ve bir ne kadar JavaScript kodu yazmadan bir "uygulama" oluşturmak son derece kolaydı.
Mütevazı <select> öğesini ele alalım. Bunun için öğenin içinde birçok işlev yerleşik olarak bulunur. Tek yapmanız gereken bu öğeyi belirtmektir:
- HTML özellikleriyle özelleştirilebilir
- Varsayılan kullanıcı arayüzüyle alt öğeleri (ör.
<option>) 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 en güzel günlerine geri dönmek için gereken araçları sağlıyor. <select> öğesini anımsatan, ancak 2014'ün kullanım alanları için tasarlanmış yeni öğeler oluşturabileceğimiz bir alan. Örneğin, bugün AJAX icat edildiyse bu büyük olasılıkla bir HTML etiketi olacaktır (örnek):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Alternatif olarak, bir queryMatches özelliğine bağlanan duyarlı öğeler de olabilir:
<polymer-media-query query="max-width:640px" queryMatches="">
Polymer'de benimsediğimiz yaklaşım da tam olarak bu. Monolitik JavaScript tabanlı web uygulamaları oluşturmak yerine yeniden kullanılabilir öğeler oluşturalım. Bir uygulama zamanla daha küçük öğelerin birleştirilmesiyle büyür. Yani uygulamanın tamamı tek bir öğe olabilir:
<my-app></my-app>
Polymer'in özel sosuyla web bileşenleri oluşturma
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polimer, web bileşeni tabanlı uygulamalar oluşturmak için çeşitli kolaylıklar içerir:
- Bildirim temelli öğe kaydı:
<polymer-element> - Bildirim temelli 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 mülkler:
xFoo.bar = 5<-><x-foo bar="5"> - Tesis gözlemi:
barChanged: function() {...} - Varsayılan olarak PointerEvents / İşaretçi Hareketleri
Bu hikayenin ahlakı, Polimer öğelerini yazmanın tamamen bildirim odaklı olması üzerinedir. Ne kadar az kod yazmanız gerekirse 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 ile ilgili standartlardan söz etmeseydim çok üzülecektim. Sonuçta Polymer, gelişen bu temel API'leri temel alır.
Web geliştirmede ç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. Yalnızca geliştirici üretkenliği için kullanılabilir. Dört ana API'nin her biri kendi başlarına faydalı olsa da birlikte büyülü şeyler ortaya çıkabilir.
- Gölge DOM: Stil ve DOM kapsülleme
- Özel Öğeler - Yeni HTML öğeleri tanımlayın. Özellikler ve yöntemleri içeren bir API sağlayın.
- HTML İçe Aktarma; CSS, JS ve HTML paketinin dağıtım modelidir.
- Şablonlar: Daha sonra damgalanacak sabit olmayan işaretleme parçalarını tanımlamak için uygun DOM şablonları
API'lerin temel ilkeleri hakkında daha fazla bilgi edinmek için webcomponents.org adresine göz atın.