Polimer, Web Bileşenleri'nin muhteşem geleceğine açılan kapılardan biridir. Özel öğelerin kullanımını ve oluşturulmasını kolaylaştırmak istiyoruz. Ekip geçen yıl, gelişen spesifikasyonlar için bir dizi çoklu dolgu üzerinde yoğun bir şekilde çalışıyor. Ayrıca, web bileşenlerini daha kolay bir şekilde oluşturmak için kullanışlı bir şekerleme kitaplığı oluşturduk. Son olarak, uygulamalarınızda tekrar kullanabileceğiniz bir dizi kullanıcı arayüzü ve yardımcı program öğesi hazırlıyoruz. 2013 Chrome Geliştirici Zirvesi'nde Polymer'in farklı bölümlerine ve "Her şey bir elementtir" yaklaşımımızın arkasındaki felsefeye değindim. ilkesini uygulayın.
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html
"Her şey bir elementtir" (<select> öğeden özel öğelere)
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#6
90'larda web sayfaları oluşturmak sınırlayıcı ama güçlüydü. Elimizde yalnızca birkaç öğe vardı. İşin güçlü tarafı ise her şey beyan temelliydi. Sayfa oluşturmak, form kontrolleri eklemek ve bir "uygulama" oluşturmak son derece basitti en iyi yöntemin ne olduğunu öğreneceğiz.
Mütevazı <select> öğesini ele alalım. Şunu beyan etmeniz yeterlidir: Bu öğede birçok işlev yerleşiktir:
- HTML özellikleri aracılığıyla özelleştirilebilir
- Varsayılan bir kullanıcı arayüzüyle alt öğeler (ö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 en parlak çağına geri dönmek için gerekli araçları sağlar. <select>'e benzeyen ancak 2014'ün kullanım alanları için tasarlanmış yeni öğeler oluşturabileceğimiz bir platform. Örneğin, AJAX bugün 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>
queryMatches özelliğine veri bağlayan duyarlı öğeler de olabilir:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Polymer'de tam olarak bu yaklaşımı benimsiyoruz. Monolitik JavaScript tabanlı web uygulamaları derlemek yerine yeniden kullanılabilir öğeler oluşturalım. Zamanla uygulamanın tamamı, daha küçük öğelerin birleştirilmesiyle gelişir. Sonuçta uygulamanın tamamı bir öğe olabilir:
<my-app></my-app>
Polymer'in özel sosuyla web bileşenleri geliştiriyoruz
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> - Bildirime dayalı devralma:
<polymer-element extends="..."> - Bildirim temelli iki yönlü veri bağlama:
<input id="input" value="{{foo}}"> - Bildirim temelli etkinlik işleyiciler:
<button on-click="{{handleClick}}"> - Yayınlanan mülkler:
xFoo.bar = 5<-><x-foo bar="5"> - Mülk gözlemi:
barChanged: function() {...} - Varsayılan olarak PointerEvents / PointerHareketleri
Hikayenin ana fikri, polimer elementleri yazmanın bildirime dayalı olması gerektiğidir. 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şenlerinin temelini oluşturan standartları açıklamasam işimi almaz. Sonuçta Polymer, gelişen bu temel API'lere dayanıyor.
Web geliştirme alanında çok heyecan verici bir dönemdeyiz. Web platformuna eklenen diğer yeni özelliklerin aksine, Web Bileşenlerini oluşturan API'ler gösterişli veya kullanıcılara yönelik değildir. Bunlar sadece geliştirici üretkenliği içindir. Dört ana API kendi başına faydalıdır ancak birlikte sihirli şeyler gerçekleşebilir.
- Gölge DOM: stil ve DOM kapsülleme
- Özel Öğeler: Yeni HTML öğeleri tanımlayın. Özellikleri ve yöntemleri içeren bir API sağlayın.
- HTML İçe Aktarmaları; CSS, JS ve HTML paketinin dağıtım modelidir.
- Şablonlar: Daha sonra damgalanacak durağan işaretleme parçalarını tanımlamak için uygun DOM şablonu
API'lerin temelleri hakkında daha fazla bilgi edinmek istiyorsanız ebidel.github.com/webcomponents adresine göz atın.