SPFx Nedir

SPFx Nedir

Son günlerde yayınlanan SharePoint Feature Pack 2 ile beraber adını sıkça duymaya başladığımız, aslında geçtiğimiz yıl preview olarak duyurulmuş olan SharePoint Framework (SPFx) ile ilgili kısa birkaç bilgi paylaşarak başlamak istiyorum. Bundan sonra gelecek kısa yazılarımda da bu konuda farklı örneklere yer vermeye çalışacağım ancak öncelikle nedir bu SharePoint Framework (SPFx), bize ne gibi avantajlar sunacak veya ne gibi eksikleri var onlara bakmakta yarar görüyorum. Ardından geliştirme ortamımızı oluşturacak ve bir klasiği bozmadan, “Merhaba Dünya” diyerek devam edeceğiz elbette. Sonrasında ise biraz daha gerçek hayat örnekleri ve sorunları çözme yollarıyla devam edebiliriz.

SPFx client-side SharePoint geliştirme yapmanıza imkan veren bir sayfa ve webpart modeli olarak kısaca özetlenebilir. SharePoint verileri ile hızlıca entegre olabilen, open source araç/kaynak kullanma konusunda destek veren bir yapısı var. Klasik server-side SharePoint geliştirmede kısmen mahkum kaldığımız yeni nesil web teknolojilerini rahatlıkla kullanmamıza imkan veriyor. SharePoint Online için zaten kullanım imkanı varken, Feature Pack 2 ile beraber artık on-premise ortamda da kullanım desteğimiz sunulmuş durumda. On-premise ortamda kullanabilmek için September 2017 güncellemesi olarak da geçen Feature Pack 2 kurulumunu yapmış olmanız gerekiyor.

 

SharePoint Framework için ana özellikleri listeleyecek olursak.

  • Bağlantı sağlamış olan kullanıcı ve connection contextini kullanabiliyoruz. Burada herhangi bir iframe veya benzeri yapı söz konusu değil, javascript doğrudan sayfa içerisine ekleniyor.
  • Sayfada kullandığınız kontroller ayrı bir yapı üzerinde değil, doğrudan DOM içerisinde render ediliyor.
  • Kullanılan kontroller responsive özellikte.
  • Sayfanın yaşam döngüsüne bir geliştirici olarak müdehale edebiliyorsunuz. Mesela render, load, serialize, deserialize, vb.
  • Herhangi bir javascript framework ile çalışabilirsiniz. Mesela React, Knockout, Angular, Handlebars, vb.
  • Open source geliştirme araçlarını kullanabilirsiniz. Mesela npm, TypeScript, Yeoman, webpack, gulp, vb.
  • Son kullanıcılar tarafından da kullanılabilecek bir geliştirme yöntemi tabi ki tenant admin tarafından onaylanması durumunda.
  • Hazırlayacağınız webpartlar hem classic hem de modern sayfalarda kullanılabilir.

 

 

SharePoint Framework öncesinde de client-side geliştirme yapabiliyorduk elbette. Bu yöntemleri ve avantaj/dezavantaj incelemesini yapmaya çalışalım kısaca.

 

JavaScript Injection

SharePoint Online üzerinde, özellikle SandBox geliştirme yapısında kod kullanımımız giderek bloklandıktan sonra en yoğun kullanılan webpart Script Editor’dü sanırım. Kullanım şekli oldukça pratikti. Hazırladığınız JavaScript’i Script Editor webpart içerisine kopyalamanız yeterliydi. Sayfa çalıştırıldığında “page render” işlemi esnasında eklediğiniz script çalıştırılıyordu. İlk avantajı sanırım kolay olması. Kullanımı kolay, test etmesi kolay, tarayıcı üzerindeki araçlar aracılığı ile debug etmesi kolay. Diğer avantajlı kısmı ise aynı DOM ve aynı browser context’ini kullanıyor olması. Böylece sayfa içerisindeki diğer kontrollere ulaşmak ve dolayısıyla basit entegrasyon ve interaktiviteler sağlamak mümkün. Bu yazacağınız kod ile doğrudan bağlantılı olsa da genel itibariyle performanslı yada UX açısından tüm sayfanın gelmesini beklememe konforu sunması açısından performanslı görünen bir yapıda olduğunu söylemek mümkün.

Dezavantajlı kısımlarına bakacak olursak yine kolay olması burada da ilk maddeye gelecektir sanırım. Bizim için kolay olduğu kadar son kullanıcının sayfayı düzenleme moduna aldığında scripte yapacağı ufak müdehaleler ile fonksiyonaliteyi bozması da çok kolay 🙂 İkinci sorunumuz ise “NoScript” olarak ifade edebileceğimiz feature’ın aktif olduğu senaryolar. Bu feature aktif durumdayken “Add/Customize Pages (ACP)” yetkileriniz alındığından Script Editor ilgili site koleksiyonlarında bloklu duruma gelecektir.

 

SharePoint Add-in Model

Özellikle NoScript özelliğinin aktif olduğu sitelerde kullanmayı düşündüğümüz geliştirme modellerinden bir tanesi. Bu yöntemi kullandığınızda aslında hazırladığınız geliştirme paketleri bir iFrame yardımıyla sayfaya ekleniyor. iFrame’in responsivite katili olmasını bir tarafa bırakacak olursak özellikle admin rolündeki arkadaşların bu yönteme yönlendirmelerinin altında yatan bir diğer sebep de iFrame olması sebebiyle sayfamız ile aynı DOM’u ve context’i kullanmıyor olduğundan güvenli bulunuyor olması. Tabi aynı DOM ve context’i kullanamıyor olmanın verdiği dezavantaj ayrıca değerlendirilmeli.

Dezavantajlarına bakacak olursak öncelikle Script Editor’a göre çok daha yavaş çalışan bir mekanizması olduğunu söylemek mümkün. Bunun nedeni iFrame olarak çalışıyor olması ve aynı DOM’u kullanmıyor olması nedeniyle iFrame’deki sayfayı açmak için ayrı bir request daha göndermek durumunda. Yukarıda da belirttiğim gibi günümüzde artık çok da küçümseyemeyeceğimiz bir diğer dezavantaj ise responsivite noktasında iFrame kaynaklı olarak sorun yaşıyor olmamız.

 

SharePoint Framework

Son dönemde özellikle bulut kullanımının da yoğunlaşmaya başlaması, Microsoft’un önem verdiği mecralardan birinin on-premise yerine SharePoint Online olması gibi sebeplerle eski geliştirme metodumuz olan full trust C# assembly kullanarak geliştirme tarih olmaya doğru gidiyor. Çok sert oldu, tarih olmayacak elbette ama daha çok on-premise ve hybrid olmayan daha kısıtlı bir domainde hayatını sürdürmeye devam edecek. Yeni nesil geliştirmelerde yerini artık JavaScript tabanlı, arka planda REST çağrıları ile veriye ulaşan veya düzenleyen yapılarda ilerliyoruz. İşte SharePoint Framework (SPFx) bu noktada karşımıza çıkan yeni nesil SharePoint geliştirme modeli diyebiliriz.

SharePoint Framework’ün halen geliştirilmeye devam ettiğini söylemeden geçmek istemiyorum. Hatta şu anda aktif olan bazı bölümler için ileride değişimler de sözkonusu olabilir. Ancak Microsoft bu kısım için geriye dönük destek olacağı sözünü veriyor. Dolayısıyla “beklemeyin, geliştirin” diyor bize.

Microsoft tarafından ürün için paylaşılmış eski tarihli bir road map var ancak yenisi Ekim ayı içerisinde yayınlanacak, bunun ile ilgili road map’in yayınlanması sonrası bir şeyler yazmayı daha doğru buluyorum.

Bitirmeden önce bizi doğrudan ilgilendirecek bir known-issue’dan da haberdar etmek isterim. Eğer geliştirme esnasında tarayıcı olarak Chrome kullanıyorsanız Workbench’in kullanımında geliştirici sertifikası konusunda sorun yaşayabilirsiniz. Bu durumda “Your connection is not private” hata mesajı sonrasında çalışmanızı devam ettirebilirsiniz. Tüm bilinen hataların güncellendiği adrese buradan erişebilirsiniz.

 

Geliştirme Araçlar

SharePoint Framework ile clien-side geliştirmede aşağıdaki kod editörlerini kullanabilirsiniz.

  • Visual Studio Code
  • Atom
  • Webstorm

 

1 Comment

Hasan Köroğlu

about 2 sene ago

Bu harika makale için teşekkür ederim. Makalelerinizin devamını bekleriz.

Cevapla

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked