MVC Mimarisi

Modern tarayıcılar zengin özelliklerle daha güçlü hale geldikçe, JavaScript ile tam anlamıyla gelişmiş web uygulamaları oluşturmak sadece mümkün değil, aynı zamanda giderek daha popüler hale geliyor. HTTP Arşivi'ndeki trendlere bağlı olarak, dağıtılan JavaScript kod boyutu yıl içinde% 45 arttı.

JS aktarım boyutu ve JS istekleri

JavaScript'in popülerlik kazanmasıyla, istemci tarafı uygulamalarımız eskisinden çok daha karmaşıktır. Uygulama geliştirme için birden fazla geliştiricinin ortak çalışması gerekir. Sürdürülebilir ve yeniden kullanılabilir kod yazmak, yeni web uygulaması çağında kritik öneme sahiptir. İstemci taraflı zengin özellikleri olan Chrome Uygulaması da bu konuda istisna değil.

Tasarım kalıpları, sürdürülebilir ve yeniden kullanılabilir kod yazmak için önemlidir. Kalıp, yazılım tasarımında (bizim örneğimizde Chrome Uygulamaları'nın yazılması) yaygın olarak karşılaşılan sorunlara uygulanabilen yeniden kullanılabilir bir çözümdür. Geliştiricilerin, uygulamayı MVC kalıbını izleyerek bir dizi bağımsız bileşene ayırmalarını öneririz.

Son birkaç yılda backbone.js, ember.js, AngularJS, Sencha ve Kendo UI gibi bir dizi JavaScript MVC çerçevesi geliştirilmiştir. Hepsinin kendine özgü avantajları olmakla birlikte her biri, geliştiricileri daha yapılandırılmış JavaScript kodu yazmaya teşvik etmek amacıyla bir tür MVC kalıbı izler.

MVC kalıbına genel bakış

MVC, standart JavaScript'e kıyasla mimari açıdan avantajlar sunar. Daha düzenli, dolayısıyla daha sürdürülebilir kodlar yazmanıza yardımcı olur. Bu kalıp, birçok dilde ve nesiller boyunca programcılarda kullanılmış ve kapsamlı olarak test edilmiştir.

MVC, üç bileşenden oluşur:

model görünümü denetleyicisi

Model

Model, uygulamanın veri nesnelerinin depolandığı yerdir. Model, görünümler ve denetleyiciler hakkında hiçbir şey bilmez. Bir model değiştiğinde, genellikle gözlemcilerine bir değişiklik olduğunu bildirir.

Bunu daha iyi anlamak için Yapılacaklar Listesi uygulamasını kullanalım. Yapılacaklar listesi uygulaması, görev listenizi izleyen basit ve tek sayfalık bir web uygulamasıdır.

model görünümü denetleyicisi

Buradaki model, her bir yapılacaklar listesi öğesiyle ilişkili, açıklama ve durum gibi özellikleri temsil eder. Yeni bir yapılacaklar listesi öğesi oluşturulduğunda bu öğe modelin bir örneğinde depolanır.

Göster

Görünüm, kullanıcılara sunulanlar ve kullanıcıların uygulamayla nasıl etkileşimde bulunduklarıdır. Görünüm HTML, CSS, JavaScript ve genellikle şablonlarla yapılır. Chrome Uygulamanızın bu bölümünün DOM'a erişimi var.

Örneğin, yukarıdaki yapılacaklar listesi web uygulamasında, yapılacaklar listesi listesini kullanıcılarınıza güzel bir şekilde sunan bir görünüm oluşturabilirsiniz. Kullanıcılar giriş biçimlerinden yararlanarak yeni bir yapılacaklar listesi öğesi de girebilirler. Ancak görünüm, denetleyicinin işi olduğu için modelin nasıl güncelleneceğini bilmez.

Denetleyici

Denetleyici, karar verme merciidir ve model ile görünüm arasındaki bağlayıcıdır. Model değiştiğinde kumanda görünümü günceller. Ayrıca görünüme etkinlik işleyiciler ekler ve kullanıcı görünümü değiştirdiğinde modeli günceller.

Yapılacaklar listesi web uygulamasında kullanıcı, bir öğeyi tamamlandı olarak işaretlediğinde tıklama, denetleyiciye yönlendirilir. Kumanda, öğeyi tamamlandı olarak işaretleyecek şekilde modeli değiştirir. Verilerin kalıcı olması gerekiyorsa sunucuya eşzamansız kayıt da yapılır. Chrome Uygulamaları gibi zengin istemci tarafı web uygulaması geliştirme sürecinde verilerin yerel depolama alanında kalıcı olmasını sağlamak da çok önemlidir. Bu durumda denetleyici, verilerin FileSystem API gibi istemci taraflı depolama alanına kaydedilmesini de işler.

MVP (Model-Görünüm-Sunucu) ve MVVP(Model-View-ViewModel) gibi birkaç MVC tasarım modelinin bir varyasyonu vardır. Sözde MVC tasarım kalıbının kendisi olsa bile, çeşitli programlama dillerindeki geleneksel MVC kalıbı ve modern yorum arasında bazı farklılıklar vardır. Örneğin, MVC tabanlı bazı çerçeveler, görünümlerdeki değişiklikleri gözlemlerken, bazıları da görünüm güncellemesini denetleyicinin yapmasına izin verir. Bu makale, çeşitli uygulamaların karşılaştırılmasına değil, kaygıların ayrılmasına ve modern web uygulamaları yazmanın önemine odaklanmaktadır.

Daha fazla bilgi edinmek istiyorsanız Addy Osmani'nin çevrimiçi kitabını öneririz: JavaScript Tasarım Kalıplarını Öğrenme.

Özetlemek gerekirse MVC kalıbı uygulama geliştiricilerine modülerlik katar ve şunları sağlar:

  • Yeniden kullanılabilir ve genişletilebilir kod.
  • Görünüm mantığını iş mantığından ayırma.
  • Farklı bileşenlerden (kullanıcı arayüzü katmanı ve temel mantık gibi) sorumlu geliştiricilerin aynı anda çalışmasına olanak tanır.
  • Bakımı daha kolaydır.

MVC kalıcılık kalıpları

MVC çerçevesiyle ısrarcı olmanın birçok farklı yolu vardır. Bunların her birinin farklı avantajları vardır. Chrome Uygulamaları yazarken, size doğal gelen ve uygulama ihtiyaçlarınıza uygun, MVC ve kalıcılık kalıpları içeren çerçeveleri seçin.

Model kendi kalıcılığını sergiliyor - ActiveRecord kalıbı

Hem Ruby on Rails gibi sunucu tarafı çerçevelerde hem de Backbone.js ve ember.js gibi istemci tarafı çerçevelerde popüler olan ActiveRecord kalıbı, kalıcılık sorumluluğunu modelin kendisinde verir ve genellikle JSON API aracılığıyla uygulanır.

Bir modelin kalıcılığı yönetmesinden biraz farklı bir yaklaşım, ayrı bir Store ve Adapter API kavramını tanıtmaktır. Depolama, Model ve Bağdaştırıcı (bazı çerçevelerde Proxy olarak adlandırılır) el ile çalışır. Depo, yüklenen modellerin bulunduğu depodur ve aynı zamanda içindeki model örneklerini oluşturma, sorgulama ve filtreleme gibi işlevler sunar.

Bağdaştırıcı veya proxy, istekleri mağazadan alır ve kalıcı veri katmanınıza (ör. JSON API) karşı yapılacak uygun işlemlere dönüştürür. Bu durum, modern web uygulaması tasarımında ilginçtir çünkü genellikle uzaktan sunucu ve tarayıcının yerel depolama alanı gibi birden fazla kalıcı veri katmanıyla etkileşimde bulunursunuz. Chrome Uygulamaları, istemci tarafı depolama için hem Chrome Storage API hem de HTML 5 fileSystem API sağlar.

Artıları:

  • Kullanımı ve anlaşılması basittir.

Eksileri:

  • Kalıcılık katmanı nesne hiyerarşisine "eklendiği" için test edilmesi zordur.
  • Farklı nesnelerin farklı kalıcı depolar kullanması zordur (örneğin, FileSystem API'leri ile DirectoryDB'nin ve sunucu tarafının karşılaştırması).
  • Modelin başka uygulamalarda yeniden kullanılması çakışmalara yol açabilir. Örneğin, iki farklı görünüm arasında tek bir Müşteri sınıfının paylaşılması ve her görünümün farklı yerlere kaydedilmesi gerekebilir.

Denetleyici sebat kullanıyor

Bu kalıpta denetleyici hem modele hem de veri deposuna bir referans taşır ve modelin kalıcı olmasını sağlamaktan sorumludur. Denetleyici; Yükleme, Kaydet, Sil gibi yaşam döngüsü olaylarına yanıt verir ve modeli getirmek veya güncellemek için veri deposuna komutlar gönderir.

Artıları:

  • Test edilmesi daha kolay olan denetleyiciye, testlerin yazılması için örnek bir veri deposu geçirilebilir.
  • Aynı model, farklı veri depolarına sahip denetleyiciler oluşturularak birden fazla veri deposuyla yeniden kullanılabilir.

Eksileri:

  • Kodun bakımı daha karmaşık olabilir.

AppController kalıcılık yapıyor

Bazı kalıplarda, bir MVC arasında gezinmekten sorumlu bir denetleyici denetleyici bulunur. Örneğin AppController, "Geri" düğmesinin istemciyi bir düzenleme ekranından (MVC widget'ları/biçimleri içeren) bir ayarlar ekranına taşımasına karar verir.

AppController kalıbında AppController, etkinliklere yanıt verir ve gereken modelleri yüklemek için veri deposuna bir çağrı göndererek ve bu ekranla eşleşen tüm görünümleri ve denetleyicileri oluşturarak uygulamanın geçerli ekranını değiştirir.

Artıları:

  • Kalıcılık katmanını, kolayca değiştirilebilecek şekilde yığının daha üstüne taşır.
  • DateChooseerController gibi alt düzey denetleyicileri, kalıcılık hakkında bilgi sahibi olana kadar kirletmez.

Eksileri:

  • Artık uygulamanın her "Sayfası/Ekranı", yazmak veya güncellemek için çok fazla standart metin gerektirir: Model, Görünüm, Denetleyici, AppController.

MVC, Chrome Uygulamalarının tasarımında çok önemlidir. Güvenli ve ölçeklenebilir Chrome Uygulamaları yazmak için aşağıdaki CSP Uyumlu MVC çerçevelerini öneririz:

Faydalı kaynaklar

Online

Kitaplar