SharePoint Framework kullanarak geliştirme yaparken UI ve Http istekleri için kullanabileceğiniz birçok seçeneğe sahipsiniz. Popüler JavaScript Framework’lerinden bazılarının isimlerinden bahsetmek gerekirse Angular, React, Vue.js, Knockout başta gelebilir. Bunun yanında dilerseniz JavaScript kütüphanesi olarak jQuery de kullanabilirsiniz. Basit WebPartlar geliştirmek için Pure JavaScript’te iyi bir seçenek olarak köşede durabilir.
Kodun bakımı, yönetilebilir olması, devamlılığın sağlanması, birlikte geliştirilebilirlik ve UI’daki kompleksliğe göre en uygun framework’ü veya kütüphaneyi seçmek elbette size kalıyor. Ben bu yazımda SharePoint Framework ile birlikte jQuery nasıl kullanılabilir bundan bahsedeceğim. Sharepoint Framework ile jQuery‘yi seçme sebebim hem çokça geliştiricinin jQuery’e hâkim olması hem de topluluklar ve doküman anlamında iyi bir kaynağa sahip olması. Bunun yanında ek olarak ihtiyacım olan tüm taleplere cevap verebilir düzeyde olması yeterli bir sebep olacaktır diye düşünüyorum.
Önceki yazılarımda çokça bir proje için SharePoint Framework ile kurulumun nasıl yapıldığını çokça anlattım. Bu nedenle artık kurulum aşamasını geçiyorum ve kurulu bir ortama sahip olduğunuzu varsayıyorum.
Öncelikle “npm install –save jquery@2″ komutunu çalıştırarak projemiz içerisine kütüphaneyi indirelim.
Daha sonra “npm install –save @types/jquery@2” komutunu çalıştırarak jQuery Typinglerini de projemiz içerisine eklemiş olalım. Typingler sayesinde geliştirme yaparken çok güçlü bir intellisense (otomatik tamamlama) desteği alabiliriz.
SharePoint Framework kurulumuna nazaran bu kütüphaneler boyutları küçük olması nedeniyle yüklenme aşamasında çok fazla vakit almayacaktır.
WebPart ile ilgili işlemlerimizi tamamlayıp ilgili projeyi SharePoint online içerisinde deploy ederken scriptleri bundle ettiğimizde bu paket içerisinde jQuery’nin de olması gerekiyor. Bu nedenle configconfig.json dosyayı içerisine aşağıdaki tanımlamayı yapalım.
“externals”: {
“jquery”:”node_modules/jquery/dist/jquery.min.js”
}
Projemizi geliştirdiğimiz .ts uzantılı dosyamızda, en yukarıda kütüphaneleri çağırdığımız namespace alanında aşağıdaki tek satırlık kodla jQuery’i hangi alias (takma isim) ile kullanacağımız da belirttikten sonra proje içerisinde jQuery’nin tüm yeteneklerinden faydalanabiliriz. Burada “as” direktifinden sonra kullanacağınız isimlendirme ile tüm class içerisinde sağlayacağınız erişim anahtar kelimesini belirttiğinizi de bildirmek isterim.
import * as jQuery from
‘jquery’;
Bir örnek vermek gerekirse, DOM içerisinde bir objeye en kolay aşağıdaki satırları kullanarak ulaşabilirsiniz.
Bir sonraki yazımızda görüşmek üzere.
