Polymer, Web Bileşenlerinin muhteşem geleceğine açılan kapılardan biridir. Özel öğelerin kullanılmasını ve oluşturulmasını kolaylaştırmak istiyoruz. Ekip, geçtiğimiz yıl gelişen spesifikasyonlar için bir dizi polyfill üzerinde yoğun bir şekilde çalışıyordu. Ayrıca, web bileşenlerini 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ı öğe hazırlıyoruz. 2013 Chrome Geliştirici Zirvesi'nde, Polymer'in farklı bölümlerini ve "Her şey bir öğedir" mantramızın arkasındaki felsefeyi ele aldım.
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html
"Her şey bir öğedir" (<select>'ten özel öğelere)
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#6
1990'larda web sayfası oluşturmak sınırlı ancak güçlü bir deneyimdi. Elimizde yalnızca birkaç öğe vardı. En güçlü kısmı?...Her şey açıklayıcıydı. Çok fazla JavaScript yazmadan sayfa oluşturmak, form kontrolleri eklemek ve "uygulama" oluşturmak son derece basitti.
Basit <select> öğesini ele alalım. Öğede, yalnızca beyan edilerek kullanılabilen birçok işlev bulunur:
- 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 (özellikler ve yöntemler) olmalıdır.
- İlginç şeyler olduğunda etkinlikleri tetikler
Web Bileşenleri, web geliştirmenin bu altın çağına geri dönmek için gereken araçları sağlar. <select>'ü andıran ancak 2014'teki kullanım alanları için tasarlanmış yeni öğeler oluşturabileceğimiz bir platform. Ö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 uyumlu öğeler:
<polymer-media-query query="max-width:640px" queryMatches="">
Polymer'de tam olarak bu yaklaşımı benimsiyoruz. JavaScript tabanlı monolit web uygulamaları yerine yeniden kullanılabilir öğeler oluşturalım. Zaman içinde, daha küçük öğelerin bir araya getirilmesiyle uygulamanın tamamı oluşturulur. Hatta bir uygulamanın tamamı 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
Polymer, web bileşenine dayalı uygulamalar oluşturmak için bir dizi kolaylık sunar:
- Beyan öğesi kaydı:
<polymer-element> - Açıklayıcı devralma:
<polymer-element extends="..."> - Beyanla iki yönlü veri bağlama:
<input id="input" value=""> - Beyan biçiminde etkinlik işleyiciler:
<button on-click="" - Yayınlanan mülkler:
xFoo.bar = 5<-><x-foo bar="5"> - Mülk gözlemi:
barChanged: function() {...} - Varsayılan olarak PointerEvents / PointerGestures
Kıssadan hisse, Polymer öğeleri yazmanın temelinde açıklayıcı olmak yatıyor. Ne kadar az kod yazarsanız o kadar iyidir ;)
Web Bileşenleri: web geliştirmenin geleceği
Slaytlar: http://html5-demos.appspot.com/static/cds2013/index.html#26
Web bileşenlerinin arkasındaki standartlara değinmeden geçmek olmaz. Sonuçta Polymer, bu gelişen temel API'lere dayanı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 kullanıcılara yönelik değildir. Bu özellikler yalnızca geliştirici verimliliği içindir. Dört ana API'nin her biri tek başına faydalıdır ancak birlikte kullanıldığında harikalar yaratabilirsiniz.
- Gölge DOM: stil ve DOM sarmalaması
- Özel Öğeler: Yeni HTML öğeleri tanımlayın. Onlara özellikler ve yöntemler içeren bir API verin.
- HTML içe aktarma, CSS, JS ve HTML paketinin dağıtım modelidir.
- Şablonlar: Daha sonra kaldırılacak işaretleme parçalarını tanımlamak için uygun DOM şablonu
API'lerin temelleri hakkında daha fazla bilgi edinmek için webcomponents.org adresini ziyaret edin.