Polymer ile Webcomponentin İlişkisi nedir? WebComponentler Nasıl Kullanılırlar?

Merhaba sevgili yazılım aşıkları,

Bir söylentiye göre eniyi yazılım geliştiriciler tembel olanlarmış. Güya tembellik yapıyorlarmış ve bir işi tekrar tekrar yapmak yerine tekrar kullanılabilir kodlar yazıyorlarmış. User control ler, helper lar geliştiriyorlarmış yazdığı kodlarda bağımlılıkları en aza indirip değişik değişik şeyler yapıyorlarmış :) Herhalde webconponent denilen kavramda yine onların başının altından çıktı. Eeeee yeni bir kavram varsa karmaşa vardır. Zor söz dizimi vardır.Tam bu noktada birilerinin de hemen piyasaya girip bu zor süreci kolaylaştırması gerekiyor. İşte bu birisi, bu yazı dizisinin konusunu oluşturan webcomponent geliştirme sürecini kolaylaştıran Polymer.

Hadi hep birlikte Polymer arkadaşımızı alkışlıyoruz :)

Polymer projesi webcomponent geliştirme sürecini kolaylaştırırken aynı zamanda web uygulamaları geliştirmemize olanak sağlıyor. Şimdilik web component geliştime bölümüne odaklanmamızda fayda var diye düşünüyorum.

Polymer ile yazılmış webcomponent lerini aşağıdaki linki tıklayarak açılan sayfadan inceleyebilirsiniz.

Bu yazıda ben GoogleWebComponents in yayınladığı google-map isimli web componenti incelemeyi planlıyorum. Bu web component aşağıdaki gibi bir googlemap i sayfamıza eklememizi sağlıyor.

Web Component Kodu:

JavaScript Kodu:

Yukarıdaki verdiğim iki kodda haritanın dom üzerinde oluşmasını sağlıyor. Tartışmasız webcomponent yazdığımız kodları azaltıyor.

Artık Adım adım google-map isimli componentinin kullanımı inceleyebiliriz.

Chrome Dev Editor yardımı ile projemizi oluşturuyoruz. İsteyen arkadaşlar bir önceki yazımızdan bu süreci inceleyebilirler. Yazıya aşağıdaki link yardımı ile ulaşabilirsiniz.

Oluşturduğumuz projenin index.html dosyasını aşağıdaki gibi düzenliyoruz.

bower.json dosyasının dependencies bölümüne aşağıdaki kodu ekliyoruz. Bower Update işlemini başlatıyoruz.

"google-map":"GoogleWebComponents/google.map#1.1.3"

index.html dosyasını aşağıdaki gibi düzenliyoruz.

index.html dosyasının bulunduğu dosya dizinine içeriği aşağıdaki gibi olan styles.css dosyası ekliyoruz.

Artık projeyi çalıştırdığımızda haritayı görmemiz gerekiyor.

Haritamızı istediğimiz bir noktaya odaklamak için body bölümünü aşağıdaki gibi düzenlememiz gerekiyor.

Haritamızı istediğimiz bir noktaya odaklamak ve zoom uygulamak için body bölümünü aşağıdaki gibi düzenlememiz gerekiyor.

Harita google-map tag i içersinde google-map-marker taglerini kullanarak harita üzerinde bir noktayı işaretleyebiliriz.

Aşağıdaki kodda kullanılan attributelerin işlevleri:

latitude ve longitude : Kordinat girmek için

fitToMarkers: google-map-marker elementlerine göre haritanın merkezini ayarlamak için

title: Belirlediğimiz noktaların başlıkları

draggable: Belirlediğimiz noktanın yerinin değiştirilebilmesi

Yukarıdaki kodun sonucunda aşağıdaki gibi bir sayfa oluşması gerekiyor.

google-map webcomponentini daha ayrıntılı olarak aşağıdaki sayfadan inceleyebilirsiniz.

Evet Polymer kullanma amacımız bu gibi Webcomponentleri kolay bir şekilde oluşturmak ve tüm projelerimizde ilgili componentin karmaşasıyla uğraşmadan direk sayfaya ekleyebilmek. Bu amaca ulaştığımızda isteyen arkadaşlar Polymerin diğer yeteneklerinde kullanarak komple web projesi geliştirebilirler. İsterlerse daha önceden geliştirdikleri component leride bu sayfalarda kullanabilirler. Bu sürecin çok kolay ilerleyeceğini düşünüyorum.

Bundan sonraki yazılarım kendi komponentimizi nasıl yazarız, webcomponent.org da bende yazdığım componentleri paylaşabilir miyim gibi sorulara cevap vermeye çalışacak.
Yararlı olması dileklerimle. İyi çalışmalar diliyorum.