Ağu.20

AngularJS (1.3 / 1.5) Eğitimi: AngularJS MVW (Model, View, Whatever Works For You) Tasarım Mimarilerini Anlamak

Programlama dillerinde, özellikle büyük çaplı projelerde iş karmaşıklığına çözüm bulmak amacı ile Nesne Yönelimli Programlama tekniği geliştirilmişti. OOP, artık profesyonel programlama dillerinde bir standart haline gelmiştir. Ancak iş geliştirme sürecinin daha da hızlanması, daha kolay şekilde yapılması ve projelerin sürdürülebilir olmasını sağlamak amacıyla daha da farklı tasarım mimarileri geliştirilmiş, geliştirilmeye de devam etmektedir.

Tasarım Mimarisi İhtiyacı

Tasarım mimarileri; temel prensipte kullanıcı arayüzü ile arkaplan kodlarını birbirinden ayırmak için üretilmiştir. Yani daha ilkel bir tanım yapmak istersek; bir projede birkaç kişi varsa, bunlardan birisi arayüzü tasarlar ve kodlar, birisi veritabanı mimarisini tasarlar, birisi de sitenin arkaplan kodlarını yazıp siteyi ayağa kaldırır. İşte bu üç kişiyi bir araya getirip projeye üretmek için bir iş planı oluşturmak gerekir. Buradaki iş planı ofis içindeki yönetim anlamında değildir, projenin hangi yaklaşım ile hazırlanacağıdır.

Tasarım mimarileri işte bu noktada yardıma koşar. Projenin ve ekibin durumuna göre en uygun iş modeli seçilir. Hatta bazen seçmeye bile gerek kalmaz. Mesela ufak bir projeniz varsa, her ne kadar amatörce karşılansa da eski usul metotlarla bütün kodları tek bir yere yığarak, tek başınıza projenin bütün aşamasını kendiniz kodlayıp bitirebilirsiniz. Bunu yaparken de projenizin ilerleyen zamanlarda daha da değiştirilmeyeceğini veya buna ihtiyaç olmayacağını düşünme gibi bir hataya düşeriz. Ancak kendinizi parçalara ayırıp bir tasarım mimarisi oluşturmadıysanız, artık o projenin kodlarını sizden başkası anlayamaz. Proje sonuçta bir şekilde yapılmıştır, ama o proje artık ne geliştirilebilir, ne ölçeklenebilir ne de sürdürülebilirdir.

MVW kavramı ile 3 farklı mimari anlaşılır. Bunlar; MVC, MVVM ve MVP’dir. AngularJS, bunlardan hangisini yapmak istiyorsanız onu seçmenize olana sağlar. Bu 3 yapıyı şema üzerinde inceleyelim…

MVC, MVP ve MVVM Karşılaştırması

Aşağıdaki şemada, MVC, MVP ve MVVM için CONTROLLER, VIEW, MODEL, VIEWMODEL ve PRESENTER yapıları arasındaki veri akışı görülmektedir.

• MODEL: Uygulamaya ait iş mantığının olduğu; verilerin işlendiği ve doğrulandığı katmandır. Verilerin kaydedilmesi, güncellenmesi ve çekilmesi gibi işlemler bu katmanda yapılır.
• VIEW: Adından da anlaşılacağı üzere kullanıcıların görmüş olduğu ve etkileşime girebildiği nesnelerin bulunduğu katmandır. MODEL’den gelip ara katmanda işlenen veriler burada gösterilir.
• CONTROLLER, PRESENTER, VIEWMODEL: MODEL ve VIEW arasında bir köprü görevindedir, çift taraflı veri taşımacılığı yapar.

Şemayı incelediğinizde dikkat etmeniz gereken en önemli husus; VIEW ile MODEL’in birbiri ile tamamen ayrık olduğudur. Yani web sayfasının arayüzü ile sitenin verileri arasında bir bağ yoktur. Bağı CONTROLLER, PRESENTER veya VIEWMODEL kurar. Pratikteki örneğinde ise; web sayfasının ön yüzünü programlayan kişinin, sitenin veritabanı sistemini kodlayan kişi ile ortak bir iş yapmasına gerek yoktur. Yani bugün yayında olsan bir web sayfanız varsa, MVC mantığı ile programlamışsanız, sitenizin veritabanında herhangi bir değişiklik yapmadan doğrudan arayüzü değiştirebilirsiniz.

Şimdi bizi asıl ilgilendiren MVVM olduğu için buna yoğunlaşalım. MVVM, en çok JavaScript Framework’leri, .NET WPF, Silverlight, JavaFX gibi dillerde kullanılmaktadır. Aşağıdaki şemada da MVVM tasarım şablonu mantığı görülmektedir.

MVVM’de şu temel kuralları bilelim… VIEW, VIEWMODEL’deki elementlere erişebilir. Fakat MODEVIEW, kesinlikle VIEW’e erişemez ve VIEW’de neler var neler yok bilemez. Aynı şekilde VIEWMODEL de MODEL’in içine ne var ne yok bilir (yani sorgular, veritabanı yapısını, tabloları vs.). MODEL’de ise VIEWMODEL’deki hiçbir fonksiyon bilinmez, erişilemez.

Burada şimdi VIEW ve MODELVIEW arasında Veri Bağlama (Data Binding) ve Komutlar (Commands) görülmektedir. Veri Bağlama, VIEW üzerinde yer alan input’lardan alınan verilerle MODELVIEW’de yer alan fonksiyonlara (kontrollere) çift taraflı olarak bağlanmasıdır. Komutlar da VIEW ve MODELVIEW içerisindeki fonksiyonların tetiklenmesi içindir.

Az çok MVVM tasarım mimarisini öğrendiğimize göre artık AngularJS’nin nasıl kullanıldığına ve temel yapıtaşlarına değinebiliriz.

AngulaJS’nin Yapıtaşları

AngularJS denince akla 3 temel kavram gelmektedir. Bunlar; direktifler, ifadeler ve kontrollerdir. Bunların dışında yine AngularJS’nin temel bacaklarından modüller, scope denilen değişken kapsama alanları ile birlikte AngularJS’nin diğer birkaç özelliğine de değineceğiz. Öğreneceğiniz konular AngularJS’yi temel ve orta düzey olarak kullanabilmenize olanak sağlarken, AngularJS konusunda kendinizi daha da geliştirebilmeniz için doğru temeller atmanızı sağlayacaktır. Diğer makalelerimizde uygulamalı olarka AngularJS’nin temel taşlarını göreceğiz.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum