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.