Yönetim Paneli Tasarlamada geldiğim son nokta !

Baktığınızda bu nedir demeyin sadece kafamdakileri yazdım yarın değişebilir bu fikirler pek takmayın yani :)


Projenin temel sorunu bir frontent mimarisinin olmayışı, bu mimari sorunun çözümü için aylardır bir çok şey denedik fakat tam manasıyla başarılı olamadık. Bunun temel sebebi kullandıığımız teknolojiler değildi, Bu güne kadar yanlış bildiğimiz şeyleri doğru olarak kabul edip ilerlemeye çalışmamızdı.


Yapılması gereken sadece işleri basitçe ele almaktı hepsi bu, bir tarih seçtirmek için koskoca kütüphanenin yüklenmesi yerine HTML5 kullanmak mesala çok basit bir değişimle performansa etki eden önemli bir adım.


Bu çalışma ile SammyJs’den edindiğimiz bilgiyi, Metronic(Bootstrap) Admin Theme’den aldığımız tasarım düsturunu ve d3’dn altığımız grafik işleme mantığını doğru bir şekilde hayata geçirebileceğiz.


Bootstrap çıkar PureCss girer.

Bootstrap ile yaşadığımız birincil sorun bir dosya içerisinde tüm herşeyin gömülmüş olması test ve analizlerde bir sayfa kullanımında %99’u boşa gidiyor şeklinde ifadeler vardı. Bu durumu aşmak için 5’e bölünmüş PureCss kullanımı ile bir tasarım planlanması önerilmektedir. Forms, Buttons, Menu, Tables, Layouts olarak farklı başlıklara bölebiliriz.

Kullanım kolaylığı ikisi içinde makul seviyededir.


Jquery, Bootstrap Çıkar -> Pure Javascript + AngularJS girer.

Jquery ve Bootstrap teknolojileri çok güzel ve hızlı geliştirilselerde sayfa hızlarının büyük kısmını yemekteler. Performanslı bir çalışma için yapılması gereken jquery ve bootstrap componentlerinden kurtulmaktır.

DateTime, Time, Week, Month, Color, Number, Email , Range(1-5 arası bir değer seçtirmekgibi) Selectorler için HTML5 desteği mevcut durumdadır. Geriye modal popup, dialog gibi kullanımlar kalıyor. Bunların kullanımlarını tamami ile yasaklıyor olacağım bunlar mobil kullanımıda engelleyen teknolojiler. Artık sadece HTML5 + Javascript kullanımına odaklanıyor olacağız. CKEditor ile ilgili jquery bağlantısı yok kontrol ettim. D3 library kullanımına devam edilebilir. 


Kayıplarımız  olarak en önemli konu efeklerimiz, geçiş efektleri kullanabiliyorduk. Jquery gittikten sonra bu işi Angularjs bırakıyor olacağız.

http://www.nganimate.org/



Yönetim Paneli Yapımı İçin Gerekli Bilgiler

Bir Yönetim Paneli tasarlanırken gerekli temel tasarım özelliklerimiz harici çok fazla şatafat gereksinimi duymayız. Yapmak istediğimiz işler CRUD ekranları etrafında toplanırlar.  muhtemelen tüm benzer yönetim panelleri için gerekli tüm componentlerin listesini hazırlamaya çalıştım.

DateTime Picker (HTML5)

Time Picker(HTML5)

Color Picker(HTML5)

Week Picker(HTML5)

Month Picker(HTML5)

Email(HTML5), Number(HTML5-Max-Min özellikleri kullanılacak), Text(Single Line) (MaxLength özelliği kullanılacak – spellcheck gözden geçirilecek HTML), Textarea(Multi)(HTML)

HTML Editor(CKEDİTOR JS) kullanılacağı sayfada js eklenerek çözülecek.

Range Slider (HTML5) -> 1-5 arası bir değer seçmek istediğimizde jquery içerisinden kütüphane yüklüyorduk gerek yok artık.

Button, A, Image Button(HTML5)

File Picker

Table

Mega Menü (Full CSS olarak hazırlanmış sistemler mevcut)bknz: http://jsfiddle.net/fredthewebchap/maasz/

Async GET-POST bu işlerin tamamını ve sayfa geçişleri ile ilgili işi AngularJS üstlenecek. Sayfada bir şey gösterilecek veya gösterilmeyecekse bunlara Angularjs karar verecek.

Icon için resim kullanımı yapılmayacak font-awesome kullanımına devam edilecek.

Grafik gösterimleri için d3 library içerisinden gerekli kütüphaneler kullanılacak diğerleri kullanılmadan önce bilgi verilecek.


Tüm bu özelliklerin detaylı kullanım bilgileri SamplesController planlaması ile belirlenecek. Developer için gerekli tüm özellikler burada test edilecek.


Sayfa Planlaması ve Yönetimi

Yönetim Paneli içerisinde sayfa planlamaları için bir doküman hazırlanacak. Genel Mimari ile ilgili temel bilgilerde dahil tüm sayfaların dokümantasyonu değiştirilmeden geliştirilmesi yasaklanacak. 


Sayfa geliştirmesine başlanmadan önce çizimler ve tasarımsal geliştirmeler tamamlanacak. Her sayfa yerleşim ve fonksiyonları Ekip onayından geçirilecek. İcon kullanımlarına özen gösterilecek.


Sayfa hazırlandıktan ve dokümantasyonu yazılıp gerekli resimleri dokümana eklendikten sonra Sayfaların detay bilgilerinin bulunduğu excel içerisine eklenecek.


Sayfa Başlığı – Sayfa Url – Hangi Rollerin girebileceği – Sayfanın Local Açılma Hızı – Sayfanın Live Açılma Hızı – Yapılma Tarihi – Sorumlu Personel 


Formatında doldurulduktan sonra sayfa tamamlanmış olacak.


Burada hazırlamış olduğumuz birinci dokümantasyon bölümü her sayfanın görünür bir bölümünde (?) butonu şeklinde bir erişimle müşteriye açılacak. Müşterinin sayfa ile ilgili detaylı bilgileri alması buradan sağlanacak. 


Bu kısım otomatize olacak eklenen her dokümantasyon otomatik olarak sayfa ile bağlanacak. View/Home/Indexcshtml – Documentation/Home/Index.html şeklinde bir mimari basitçe çözer.


Documantation bilgileri düzenleme panel olabilir file düzenlemelerini basitçe yapabilmemiz için.

ASP.NET Web Sitenizin Hızı Yavaş Mı ?

Web sitenizin hızını arttırabilmek için yapabileceğimiz çok şey ama basitçe aklıma gelenleri hızlıca yazıp uzatmadan kapatcam konuyu.

  1. JS, Css dosyalarınızı sıkıştırın ve tek dosya halinde getirin. Örnek 30 adet js ve css dosyanız var. Bunları 15 js, 15 css düşünün. Sunucunuza ayrı ayrı 30 çağrı atılmasındansa tek dosya olacak şekilde ScriptFiles.js ve StyleFiles.css olarak iki çağrı atacaktır. Dosya boyutlarınız büyüyecektir fakat bu sorunuda StaticFile Caching ile çözebilirsiniz. Bu konu ile ilgili araştırma yapacağınız anahtar kelime grupları şöyle; Bundle And Minification ayrıca bu link içerisinde anlatılanları eksiksiz yapın derin çok faydalı oluyor. Ayrıca Javascript dosyalarınızı kesinlikle body'nin sonuna koyun head içerisinde olduğunda sayfa açılma beklemesini etkiyor.
  2. Server Gücü, İnternet Hızı ve Server Region Seçimi; Bu konuda da Amazon Web Server(AWS) kullandığımız için en ucuz server olan OREGON Serverlarını tercih ettim fakat Türkiye'deki bir sunucu 1 kb dosyayı 10-30ms civarında getirebilirken ABD(Oregon) sunucusu 230ms ve üzerinde cevap veriyordu. 
  3. Web Sitenizi klasik mantıktan kurtarın en azından Yönetim Paneli için söyleyebileceklerim şu yönde;
    Her sayfa açılışında en az 1-2 MB scriptiniz ve yönetim panelini kullanan kişiler size küfür ediyorlar :) Çok yavaş diye. Burada çözüm ilk açılışta Scriptler yüklendikten sonra sayfa geçişlerini Ajax ile Bir div içerisinde gerçekleştiriyor olmak. bu bize ne kadar diye düşünelim. 
    2 MB Script, 400kb Style, Sayfanın normal açılma hızı 500ms olsun. 1mbps internet hızı olan birisi server iyi durumdaysa bunu 3-5 saniyede indirebilecek ve düşünün kü bir rapor sayfası Sayfa açılma hızı 2-3 saniye üzerine çıkmaya başladıkça üzerinde birde 3-5 saniye binecek. Eğer dediğim şekilde bir yöntem tercih edersiniz. sayfa geçiş hızınız 500ms olacak. 5 saniye yerine... Konu ile ilgili AngularJS Routing veya SammyJS önerebilirim. Bence performans için ve maliyetleri düşürmek için önemli büyük bir bandwith bu sayede ortadan kalkıyor.
Bu konu ile ilgili aklıma gelenler şimdilik bu kadar sorularınız olursa müsait olduğum zamanlar yazarım onlarıda...