Backbone.js tabanlı birçok çerçevenin gerçek dünyadaki güçlü ve zayıf yanları nelerdir? [kapalı]


186

Birisinin deneyimlerini, en son ortaya çıkan backbone.js varyantlarından bazılarıyla paylaşabileceğini umuyoruz. Birkaç projede omurga / alt çizgi / gereksinim ile iyi bir deneyime sahibim ve karmaşık uygulama yapısı için daha gelişmiş çözümlere doğru bir sonraki adımı atmak istiyorum.

Aşağıdaki çerçevelerin mevcut olduğunu biliyorum:

Ve muhtemelen birkaçını özledim.

Buradaki farklılıklar hakkında kısa bir giriş var:

ama çok genel. Birinin bu çerçeveleri kullanarak deneyimlerini gerçek hayat uygulamalarıyla paylaşıp paylaşamayacağını merak ediyordum.

Birini diğerinden seçmenin faydası nedir? Kukla ne zaman chaplin'e göre daha iyi bir çözüm olacak veya örneğin vetebralar belirli uygulamalar için neden daha iyi?

Tabii, açık cevap " ihtiyaçlarınız için en iyisini kullanın " olacaktır, ancak güçlerini / amaçlarını / avantajlarını veya tercih edilen senaryolarını bilmek için bu çerçevelerle ilgili deneyimim yok.

Teşekkürler!

1 Düzenle: bu gönderiyi buldu: Backbone.Marionette vs Backbone-Boilerplate

Edit 2: Tarafından cevap Mathias schafer (Chaplin) posta ile:

Kısacası, mevcut yapı halihazırda üretimde kullanıldığından 1.0 sürümüne yakındır. 1.0'a kadar büyük yeni özellikler eklemeyi veya API değişikliklerini kırmayı düşünmüyoruz.

Kukla elbette en kapsamlı ve istikrarlı kütüphanedir. Backbone ile JS uygulama geliştirmenin çeşitli yönlerini ele alır. Örneğin, Omurga'nın tamamen boş bıraktığı güçlü bir görünüm tabakasına sahiptir. Tabii ki, bazı yönlerin taleplerinizi karşılamayacağını göreceksiniz ve Marionette etrafında bir yapı kurma gereğini hissedebilirsiniz.

Bunun aksine, Chaplin, Omurga uygulamalarının oldukça küçük ama çok önemli bir yönüne, yani genel uygulama yapısına ve modül yaşam döngüsüne odaklanır. Bu bağlamda Chaplin çok seçicidir ve bir kütüphaneden çok bir çerçeveye benzer (“kodunuz bir kütüphaneyi çağırır, bir çerçeve kodunuzu çağırır” gibi). Chaplin, bireysel uygulama modüllerinin üzerinde yer alan ve genel uygulama durumunu kontrol eden bazı merkezi sınıflar sağlar. Bu, uygulamanıza Ruby on Rails gibi geleneksel bir yapı verir.

Chaplin'de, denetleyicilere eşlenen bazı yollar bildirirsiniz ve Chaplin, rota eşleştiğinde denetleyiciyi başlatır. Ayrıca eski denetleyicilerin atılması ve bir denetleyicinin oluşturması gereken ana görünümlerin gösterilmesi ve gizlenmesi ile de ilgilenir. Temel fikir budur, ancak Chaplin bunun sorunsuz çalışması için çirkin ayrıntılarla ilgilenir.

Bu yapı ile birlikte gelen iki prensip vardır: - Modülerleştirme, ayırma ve kum havuzu oluşturma - Yayınlama / Abone Olma ve Aracı (lar) kullanarak modüller arası iletişim

Elbette bu modeller yazılım geliştirme dünyasında yeni değildir ve Chaplin, bunları Backbone.js uygulamalarına uygulayan tek kütüphane değildir.

Chaplin ayrıca Görünüm katmanı için geliştirmeler de sağlar, örneğin oldukça sofistike bir CollectionView, ancak Bölgeleri ve Düzenleri ile toplamda Marionette kadar değil. Ancak Chaplin Views'un sağladığı araçları kullanarak bu tür meta sınıfları yazmak nispeten kolaydır.


12
+1 Sorunuz yerinde. Geçen bir ya da iki yıl boyunca, bir çeşit çerçeve yutturmaca, farklılaştırması gerçekten zor olan sayısız mimariden ilham alan projelerle manzarayı şişirdi - her biri bir şeyler yapmak için hafifçe kendi ve daha çok şişirilmiş bir yaklaşım uyguluyor. Bu bir yorum olduğunu unutmayın :)
kontur

Yanıtlar:


132

Baktığınız çerçevelerin çoğu (hepsi?) Aynı sorunları çözüyor, ancak bunu biraz farklı hedeflerle biraz farklı şekillerde yapıyorlar.

Tüm bu projelerin bu kategorilerdeki sorunları çözeceğini söylemek adil olur:

  • Makul varsayılanlar kümesi sağlayın
  • Isıtıcı plaka kodunu azaltın
  • BackboneJS yapı taşlarının üstüne uygulama yapısı sağlayın
  • Yazarların uygulamalarında kullandığı kalıpları ayıklayın

Aralık 2011'den bu yana inşa ettiğim Marionette, birkaç farklı hedef ve ideali de göz önünde bulunduruyor:

  • Kompozit uygulama mimarisi
  • Kurumsal mesajlaşma kalıbı etkisi
  • Modülerleştirme seçenekleri
  • Artımlı kullanım (ya hep ya hiç gerek yok)
  • Sunucu kilitleme yok
  • Bu varsayılanları değiştirmeyi kolaylaştırın
  • Yapılandırma / aşırı yapılandırma olarak kod

Diğer çerçevelerin hiçbirinin aynı hedeflere sahip olmadığını söylemiyorum. Ama sanırım Marionette'in benzersizliği bu hedeflerin birleşiminden geliyor.

Kompozit Uygulama Mimarisi

WinForms ve C # kullanan kalın istemci, dağıtılmış yazılım sistemlerinde 5 yıldan fazla çalıştım. Masaüstü, dizüstü bilgisayar (akıllı istemci), mobil cihazlar ve web uygulamaları için uygulamalar geliştirdim, hepsi temel bir fonksiyonel seti paylaşıyor ve aynı sunucu arka ucuyla birçok kez çalışıyor. Bu sırada modülerleştirmenin değerini öğrendim ve çok hızlı bir şekilde kompozit uygulama tasarımı yolunda ilerledim.

Temel fikir, uygulamanızın çalışma zamanı deneyimini "oluşturmak" ve birbirlerini mutlaka bilmeyen birçok küçük parçadan birini işlemektir. Kendilerini genel kompozit uygulama sistemine kaydederler ve daha sonra birbirinden ayrılan mesajlar ve çağrılar yoluyla iletişim kurarlar.

Blogumda bunun hakkında biraz yazdım ve Marionette'i Backbone için kompozit bir uygulama mimarisi olarak tanıttım:

Mesaj Kuyrukları / Desenleri

Aynı büyük ölçekli, dağıtılmış sistemler aynı zamanda ileti sıralaması, kurumsal entegrasyon kalıpları (mesajlaşma kalıpları) ve mesajları işlemek için servis veri yollarından yararlandı. Bu, her şeyden çok, ayrıştırılmış yazılım geliştirme yaklaşımım üzerinde çok büyük bir etkiye sahipti. Tek işlemli, bellek içi WinForms uygulamalarını bu perspektiften görmeye başladım ve yakında sunucu tarafım ve web uygulaması geliştirmem bundan etkilendi.

Bu, kendisini doğrudan Omurga uygulama tasarımına nasıl baktığımıza çevirdi. Hem üst düzey Uygulama nesnesi hem de uygulama içinde oluşturduğunuz her modül için Marionette'de bir olay toplayıcı sağlarım.

Modüllerim arasında gönderebileceğim mesajları düşünüyorum: komut mesajları, olay mesajları ve daha fazlası. Sunucu tarafı iletişimini de aynı kalıplara sahip mesajlar olarak düşünüyorum. Desenlerden bazıları zaten Marionette'e girdi, ancak bazıları henüz olmadı.

modularization

Kodun modülerleştirilmesi son derece önemlidir. İyi tanımlanmış giriş ve çıkış noktalarına sahip tek bir odağa sahip küçük, iyi kapsüllenmiş paketler oluşturmak, önemli boyut ve karmaşıklığa sahip herhangi bir sistem için bir zorunluluktur.

Kukla doğrudan moduletanımları yoluyla modülerleştirme sağlar . Ancak, bazı insanların RequireJS'i sevdiğini ve bunu kullanmak istediğini de biliyorum. Bu yüzden hem standart bir yapı hem de RequireJS uyumlu bir yapı sağlarım.


MyApp = new Backbone.Marionette.Application();

MyApp.module("MyModule", function(MyModule, MyApp, Backbone, Marionette, $, _){

  // your module code goes here

});

(Bunun için henüz blog yayını yok)

Artımlı Kullanım

Bu, Marionette'in her parçasına pişirdiğim temel felsefelerden biri: Marionette kullanımı için "ya hep ya hiç" gerekliliği yok.

Omurga, tüm yapı taşı nesneleriyle çok artımlı ve modüler bir yaklaşım benimser. Hangisini ne zaman kullanmak istediğinizi seçmekte özgürsünüz. Bu ilkeye çok inanıyorum ve Marionette'in de aynı şekilde çalıştığından emin olmak için çabalıyorum.

Bu amaçla, Marionette'e inşa ettiğim parçaların çoğu tek başına duracak, Omurga'nın çekirdek parçalarıyla çalışacak ve daha da iyi çalışacak şekilde üretildi.

Örneğin, hemen hemen her Omurga uygulamasının, ekranda belirli bir yerde bir Omurga görünümünü dinamik olarak göstermesi gerekir. Uygulamaların, yeni görünümler yerleştirildiğinde eski görünümlerin kapatılması ve hafızanın temizlenmesi de gerekiyor. Marionette's de burada devreye Regiongiriyor. Bir bölge, bir görünüm almak, üzerinde render oluşturmak ve sonucu sizin için DOM'a doldurmak için ortak plaka kodunu işler. Ardından, görünümünüzde "kapat" yöntemi olması şartıyla bu görünümü kapatır ve sizin için temizler.


MyApp.addRegions({
  someRegion: "#some-div"
});

MyApp.someRegion.show(new MyView());

Ancak bir bölgeyi kullanmak için Marionette'in görüşlerini kullanmanız gerekmez. Tek gereksinim, nesnenin prototip zincirinin bir noktasında Backbone.View'den genişlemenizdir. Bir closeyöntem, onShowyöntem veya başkalarını sağlamayı seçerseniz , Marionette Bölgesi bunu sizin için doğru zamanda arayacaktır.

Sunucu Kilidi Yok

Çok çeşitli sunucu teknolojilerinin üzerine Backbone / Marionette uygulamaları geliştiriyorum:

  • ASP.NET MVC
  • raylar üzerinde yakut
  • Yakut / Sinatra
  • NodeJS / ExpressJS
  • PHP / İnce
  • Java
  • Erlang
  • ... ve dahası

Tarayıcıda çalışırken JavaScript JavaScript'tir. Sunucu tarafı JavaScript de harika, ancak tarayıcı tabanlı JavaScript'imi nasıl yazdığım üzerinde sıfır etkisi veya etkisi var.

Yaptığım projelerdeki çeşitlilik ve müşterilerimin kullandığı arka uç teknolojileri nedeniyle, Marionette'i herhangi bir nedenle tek bir sunucu tarafı teknoloji yığınına kilitleyemem ve etmeyeceğim. Ortak bir proje vermeyeceğim. Bir yakut mücevher veya npm paketi sağlamayacağım. İnsanların Marionette'in belirli bir arka uç sunucusu gerektirmediğini anlamasını istiyorum. Tarayıcı tabanlı JavaScript ve arka uç önemli değil.

Tabii ki, kendi dilleri ve çerçeveleri için paketler sağlayan diğer insanlara da tam destek veriyorum. Bu paketleri Wiki'de listeliyorum ve insanların ihtiyaç gördükçe daha fazla paket oluşturmaya devam etmelerini umuyorum. Ama bu toplum desteği, Marionette'den doğrudan destek değil.

Varsayılanları Kolayca Değiştirin

Kaynatma plakası kodunu azaltma ve mantıklı varsayılanlar sağlama çabalarımda (bu, Tim Branyen'in LayoutManager'ından doğrudan "ödünç aldığım bir fikirdir), diğer geliştiricilerin benden biraz farklı uygulamalar kullanması gerektiğinin farkındayım.

<script>Varsayılan olarak Underscore.js şablonunu kullanarak şablonlar için satır içi etiketlere dayalı oluşturma sağlarım. Ancak bunu Marionette'deki Rendererve / veya TempalteCachenesneleri değiştirerek değiştirebilirsiniz . Bu iki nesne, oluşturma yeteneklerinin temelini oluşturur ve belirli şablonlama motorları ve şablonların yüklenmesinin farklı yolları için bunun nasıl değiştirileceğini gösteren wiki sayfaları vardır.

Marionette v0.9 ile daha da kolaylaşıyor. Örneğin, satır içi şablon komut dosyası bloklarının kullanımını önceden derlenmiş şablonlarla değiştirmek istiyorsanız, Oluşturucu'da yalnızca bir yöntemi değiştirmeniz gerekir:


Backbone.Marionette.Renderer.render = function(template, data){
  return template(data);
};

ve şimdi tüm uygulama, görünümünüzün templateözelliğine eklediğiniz önceden derlenmiş şablonları kullanacaktır .

Hatta senkronize olmayan görünümleri desteklemenizi sağlayan v0.9 içeren bir Marionette.Async eklentisi bile sağlıyorum. Marionette'deki varsayılan davranışları değiştirmeyi mümkün olduğunca kolaylaştırmak için sürekli çaba sarf ediyorum.

Yapılandırma Olarak Kodla

Ben belirli bağlamlarda "yapılandırma konvansiyonu" hayranıyım. Bu, işleri halletmenin güçlü bir yoludur ve Marionette bunun bir kısmını sağlar - çok fazla olmasa da, dürüstçe. Diğer birçok çerçeve - özellikle LayoutManager - yapılandırma üzerinde Marionette'den daha fazla kongre sağlar.

Bu amaç ve niyetle yapılır.

Anlamlı ve hızlı bir şekilde çalışmak için sözleşmeler almaya çalışmanın acısını bilmek için yeterli JavaScript eklentileri, çerçeveler, eklentiler ve uygulamalar geliştirdim. Hızla yapılabilir, ancak genellikle onu değiştirebilme pahasına.

Bu amaçla, Marionette'e bir "konfigürasyon olarak kod" yaklaşımı uyguluyorum. Davranışların bir yığınını değiştiren statik değerlerle bir nesne değişmezi sağlayabileceğiniz bir çok "yapılandırma" API'si sağlamıyorum. Bunun yerine, her nesnenin sahip olduğu yöntemleri - hem açıklamalı kaynak kodu yoluyla hem de gerçek API belgeleri aracılığıyla - Marionette'i istediğiniz gibi çalıştıracak şekilde nasıl değiştireceğinizi anlatmak amacıyla belgeliyorum.

Marionette nesneleri için temiz ve net bir API sağlayarak, belirli bir nesnenin veya Marionette'nin davranışının bir bütün olarak değiştirilmesinin nispeten basit ve çok esnek olduğu bir durum yaratırım. Ben "basit" yapılandırma API çağrıları şeyler istediğiniz şekilde çalışması için kendi kodunu sağlama esnekliği için feda.

Marionette'de "configure" veya "options" API'sini bulamazsınız. Ancak, her birinin çok özel bir amaca hizmet eden, temiz imzalarla Marionette'in çalışma şeklini değiştirmeyi kolaylaştıran çok sayıda yöntem bulacaksınız.


16
Bu neden en yüksek puan alan cevap? Bu soruya cevap vermiyor - temelde Marionette için bir tarih / reklam ...
Jess Telford

@JessTelford soruyu tekrar okumak isteyebilirsiniz, bu oldukça iyi bir cevap.
mor

daha soru şu What is the benefit of choosing one over the other?- bu cevap, bir Marionette [...] has a few very distinct goals and ideals in mindzamanlar kendini başka bir çerçeveyle karşılaştırmaz. Soru, lütfen bu çerçevelerin her birinin ne yapabileceğini açıklayın , o zaman bu harika bir cevaptır. Ama değildi. Ve öyle değil.
Jess Telford

@JessTelford Soru açıkça birden fazla cevap istiyor. Bu, Marionette'nin desteklediği güçlü yanları ve sorunları belirtir. Soruyu okuduktan sonra bu cevabı gerçekten yararlı buldum. Bence en iyisi değil, ama yine de iyi bir cevap. Oh, ve soru şu: What are the strengths and weaknesses of....
mor

Beni yanlış anlamayın - bu Marionette'nin çok ayrıntılı ve açık bir açıklamasıdır. Sadece soruyu cevapladığını hissetmiyorum. Her durumda, upvotes bunun iyi bir cevap olması içindir.
Jess Telford

25

Şu anda mizanpaj motoru olarak mizanpaj yöneticisi modülü ve gidon ile kullanıyorum ve zaten var olan Grails arka ucunu kullanarak küçük bir uygulama kurmak gerçekten kolay buldum. Düzen yöneticisini kullanmaya başlamadan önce Marionette ve Chaplin hakkında okudum ve her ikisi de bana gerçekten güçlü ama karmaşık görünüyordu. Sonra neden backbone.js'yi seçtiğimi hatırladım: basitlik. Tüm bu çerçeveler, tasarımla omurga dışında kalanları ekliyor. Bir çerçevenin kötü olduğunu söylemiyorum, ancak daha karmaşık bir şeye ihtiyacım olursa, geliştiricilerinin aklında bir hedefle yazılmış benzersiz bir kod tabanına sahip oldukları için ember.js veya sproutcore gibi diğer projeleri deneyeceğim. Burada bir diğerinin üzerinde çerçeveler var. Tabii ki, omurga sadece bina uygulamaları için değil, aynı zamanda daha güçlü bir kütüphane yazmak için bir omurga, ama gerçekten kötü olduğunu düşünüyorum tek şey görünümü katmanı, çünkü bir düzen yöneticisi ve görünümleri yuvalama olasılığı eksik. Düzen yöneticisi ile bu boşluk oldukça iyi doldurulur.

Yani, sorunuza cevabım: omurgayı olduğu gibi kullanmaya başlayın ve kendinize eksik olanı ve çerçeve hakkındaki beklentilerinizi kendinize sorun. Omurga tarafından bırakılan çok fazla şey olduğunu görürseniz, diğer çerçevelerde onları arayın ve ihtiyaçlarınıza en yakın olanı seçin. Ve hala seçimden emin değilseniz, belki omurga sizin için değildir ve başka bir çözüm aramak zorundasınız (ember.js, sproutcore, ExtJ'ler, JavaScript MVC hepsi iyidir). İstemci uygulamaları yazma konusunda deneyiminiz varsa, doğru olanı seçmek için tüm çerçeve üzerinde gerçekten deneyime ihtiyacınız yoktur (elbette sizin için)


13

Backbone.js ile yapılan çeşitli çerçeveleri inceledim ve Vertebra'yı HauteLook'ta bir proje için inşa ettim. Proje hedefleri ... dinamik komut dosyası yükleme, AMD modül formatı, bağımlılık yönetimi, çoğunlukla açık kaynak kitaplıklarla derleme, paketler halinde kod düzenleme, bir veya daha fazla tek sayfa uygulaması için optimizasyon ve derleme, tamamen önbelleğe alınmış sunucuda ana bilgisayar, örn. Sunucu yok -Veriler için sadece bir API ve benim için en eğlenceli olan komut dosyası yazarken, proje için davranış odaklı geliştirme kullanın. Projede bir açıklama var: http://www.hautelooktech.com/2012/05/24/vertebrae-front-end-framework-built-with-backbone-js-and-requirejs-using-amd/

Bizim problemimiz:

Seçilen kütüphaneler (jQuery, Underscore.js, Backbone.js, RequireJS, Bıyık) modül yükleme, bağımlılık yönetimi, uygulama yapısı (modeller, koleksiyonlar, görünümler ve rotalar için), API ile eşzamansız etkileşimler, eşzamansız davranışları yönetmek için çeşitli yardımcı programlar ve nesneler sağlar , örneğin (Vaatler) Ertelemeler, Geri Aramalar. Çerçeveyi tamamlamak için gereken mantık şunları içerir:

  • tek sayfalık uygulamanın durumunu yönetmek için bir nesne (model);
  • görünümleri sunmak, düzenlemek / değiştirmek ve net görünümler sunmak için bir düzen yöneticisi ve
  • rotalara yanıt veren, uygulama durumunu alma / ayarlama ve işi mizanpaj yöneticisine teslim eden kontrolörler

Çözümlerimiz (Vertebra'da uygulanmaktadır):

Uygulama Durumu Yöneticisi -

Uygulama yöneticisi verileri bellekte saklar ve ayrıca ortak veri / meta veriler için bir kaynak sağlamak üzere tarayıcı deposundaki verileri saklar. Ayrıca, önceki etkileşimlere (ör. Seçilen sekme, uygulanan filtreler) dayalı olarak sayfa görünümlerini yeniden oluşturmak için veriler (durum) sağlar. Uygulama durumu yöneticisi, kaynakların durumu alması için bir strateji sağlar. Devlet makinesi gibi davranmak istiyordu.

Düzen Yöneticisi -

Düzen yöneticisi, bir (birçok) görünümün yanı sıra her (görüntülenen) görünüm için belge (DOM) hedeflerine sahiptir. Bir sayfa birçok görünüm arasında geçiş yapabilir, bu nedenle mizanpaj yöneticisi görünüm durumlarını izler, örn. Oluşturulmuş, oluşturulmamış, görüntülenen, görüntülenmeyen. Bir site ziyaretçisinin isteyebileceği görünümleri tembel yüklemek ve oluşturmak (mizanpaj) için mizanpaj yöneticisini kullanabilirsiniz, örneğin bir sayfada sekme değişiklikleri. Görünüm durumları arasındaki geçiş bu nesne tarafından yönetilir. Görünüm nesnelerinin ve bağlantılarının kaldırılması için bu mizanpajın tamamı temizlenebilir ve bu nesneler çöp toplama için hazırlanır (bellek sızıntılarını önler). Düzen yöneticisi, görünüm durumunu denetleyicilerle de iletir.

Kontrolör -

Bir denetleyici nesnesi bir rota işleyici işlevi tarafından çağrılır ve bir sayfa (mizanpaj) oluşturmak için ilgili durumun (uygulama modelleri) elde edilmesinden sorumludur (ayrıca yollar değiştiğinde durumun ayarlanmasından da sorumludur). Denetleyici, istenen bir sayfa için bağımlı verileri (modeller / koleksiyonlar) ve oluşturulmuş görünüm nesnelerini mizanpaj yöneticisine iletir. Bir yan etki olarak kontrolörlerin kullanılması, route nesnesinin şişirilmesini ve dolanmasını önler. Bir rota daha sonra sayfa görünümünü başlatan bir rota ile eşleşmelidir ve rota işleme işlevlerini zayıf tutar.

Todos uygulaması hem dev modunda barındırılıyor hem de Heroku'da ...

Diğer çerçevelerdeki kavramların çoğu ödünç alınmıştır, örneğin Derick Bailey tarafından belirtildiği gibi bellek sızıntılarını önizlemek için destory görünümlere ihtiyaç - http://lostechies.com/derickbailey/ ; Tim Branyen'den Layout Manager http://tbranyen.github.com/backbone.layoutmanager/

Özet olarak, Backbone.js'nin uygulamanızda bir araç olması amaçlanmıştır Backbone.js kütüphanesi, bir uygulama oluşturmak için ihtiyaç duyacağınız tüm mimariyi sağlamaz, ancak bir API ve katı kod yapısı ile mükemmel etkileşimler sağlar ... Görünümler (denetleyiciler gibi davranır) ve veri katmanınız Modeller ve Koleksiyonlar ve son olarak Rotalar. Vertebra'yı projemizin amaçlarına uygun hale getirmek için inşa ettik ve kodu başkalarının kullanması, öğrenmesi veya herhangi bir şekilde kullanması için bir çerçeve olarak çıkarmaya karar verdik.

Bence sorunuzun cevabı, tüm çerçevelerden öğrenmek ve hedeflerinize ulaşmak için ihtiyaç duyduğunuz şeyleri kullanmaktır, eğer proje hedeflerinizin Omurga ile inşa edilen çerçevelerden birine çok yakın olduğunu fark ederseniz, aksi takdirde kendi çerçevenizi oluşturursunuz. topluluk tarafından paylaşılan harika örnekler var. Ya da kendinizi başvurunuzun yönünde biraz kayıp bulursanız, daha fazla düşünülmüş ve yapılandırılmış bir şey seçin, belki de Ember.js. Harika bir şey, JavaScript ile bir (MVX) MVC benzeri desen kullanarak kodlamanıza yardımcı olacak iyi bir ürün yelpazesi olmasıdır.


Detaylı cevap için teşekkürler.
danikoren

13

BenchPrep'te çalışırken Luca çerçevesini geliştirdim, burada backbone.js kütüphanesinin üstünde birkaç büyük tek sayfa uygulaması geliştirmek için kullandık.

ExtJS ile birkaç yıl önce çalışmıştım ve görüşlerinizi bağımsız bileşenler olarak geliştirdiğiniz ve daha sonra konteyner görünümlerini kullanarak diğer bileşenlerle birleştirdiğiniz bileşen odaklı mimari gibi bu çerçeveden en sevdiğim konseptleri çalmıştım. Ve büyük ölçüde yapılandırmaya dayandığından, Luca'da bir uygulama geliştirmek JSON ile bir nesneyi tanımlamak gibi bir şey hissettiriyor.

Bu yaklaşımın bir avantajı, Bileşenleri birkaç uygulamada veya uygulamanızın farklı yerlerinde yeniden kullanma yeteneğidir ve Backbone'un uzantısını kullanan sadece küçük değişikliklerle. Ayrıca, JSON yapılandırmasında sadece küçük değişiklikler yaparak birçok farklı düzen / sunum bileşeniyle deneme yapmak çok kolaydır.

Çok çeşitli yardımcı / fayda fonksiyonlarına ek olarak, Luca, karmaşık bir kullanıcı arayüzü oluşturmak için akla gelebilecek herhangi bir şekilde bir araya getirebileceğiniz birçok daha yüksek seviyeli Omurga türevine sahiptir.

Görünümler, Bileşenler, Kaplar

  • Artırılmış Model, Görünüm, Koleksiyon, Yönlendirici sınıfları
  • Modeller, Koleksiyonlar, Görünümler, Uygulama ve ilgili yöneticileri arasındaki iletişimi kolaylaştıran yapılandırma seçenekleri.
  • Kapsayıcılar (Böl / Sütun Düzeni, Izgara Düzeni, Sekme Görünümü, Kart / Sihirbaz Görünümü)
  • Tüm standart alan bileşenleriyle FormView ve bir Omurga ile senkronizasyon için yardımcılar.
  • Bir Luca.Collection'dan kaydırılabilir ızgara öğeleri oluşturmak için GridView
  • Bir koleksiyona dayalı görünümler oluşturmak için CollectionView
  • Araç Çubukları / Düğmeler

Ücretsiz Twitter Bootstrap Stilleri ve İşaretleme

  • Luca, Twitter önyükleme çerçevesiyle çok iyi oynuyor. Sadece Luca.enableBootstrap = true ayarlanarak ve CSS dahil olmak üzere bileşenleriniz (sekme görünümleri, araç çubukları, düğmeler, formlar, alanlar, ızgaralar vb.) Otomatik olarak Twitter Bootstrap uyumlu biçimlendirme ve CSS sınıfı kurallarını kullanır.
  • Izgara sistemini mizanpaj için kullanır ve bootstrap base css sınıflarının çoğuna akıllıca yanıt verir
  • Luca.Viewport ve GridLayout bileşenleri, bootstrap'in duyarlı, akıcı veya statik ızgara sistemleriyle çalışacak şekilde ayarlanmıştır.
  • Twitter bootstrap bileşenleri için bire bir eşleşme sağlamayı, bunları yapılandırılabilir omurga görünümleri olarak göstermeyi hedefler

Uygulama Bileşeni

  • Model tabanlı durum makinesi, uygulama kontrol akışı stili olarak alıcı / ayarlayıcı yöntemleri ve nitelik değişikliği olayları sağlar
  • Omurgaya yanıt olarak uygulamanın sayfalarını gizleyen / gösteren Entegre Denetleyici bileşeni.
  • Oluşturduğunuz koleksiyonları takip eden Entegre Koleksiyon Yöneticisi, onları kapsamlandırmanıza, gruplandırmanıza, bunlara varsayılan parametreler atamanıza izin verir
  • Websocket hizmetlerinin üstünde bir soyutlama katmanı olan bir Soket Yöneticisi, itmeyi Backbone kadar kolay hale getirir.
  • Bu tür olaylara yanıt vermeyi önemseyen bileşenlerdeki adlandırılmış önemli olayları tetikleyen bir Klavye Olayı yönlendiricisi

Koleksiyon ve Model Geliştirmeleri

  • Koleksiyonlar, mongoDb'ye çok benzer bir sorgulama arabirimi sağlayan omurga sorgusunu temel alır
  • collection.localStorage = true ayarını yaparak yerel bir depolama Backbone.sync dosyasını etkinleştirin
  • verileri sayfa yüklemesinde önyüklenen koleksiyonların otomatik popülasyonu
  • önbellek yöntemleri / hesaplanan özellikler. toplama yöntemlerinin sonucunu önbellekte saklayın ve koleksiyondaki veya modellerindeki etkinlikleri değiştirmek / eklemek / kaldırmak için önbelleğin süresinin dolmasını sağlayın
  • hesaplanan özellikler. karmaşık işleve dayalı öznitelikler oluşturun ve değişikliklere yanıt olarak hesaplanan değeri otomatik olarak güncelleyin

Etkinlikler ve Kancalar

Luca bileşenleri, stok Omurga bileşenlerine kıyasla yaydıkları olaylarla daha liberal. Önceki gibi olayları yayınlarlar: başlatma, sonra: başlatma, önce: oluşturma, sonra: oluşturma, etkinleştirme, ilk: etkinleştirme, devre dışı bırakma, ilk: devre dışı bırakma ve bu, bileşenlerinizin davranışını daha hassas bir şekilde ayarlamanıza olanak tanır. Ayrıca, görünümünüzde @hooks porperty'sinde bir olay tanımlayarak, varsa benzer şekilde adlandırılmış bir işlevi otomatik olarak çağırır. Bu, okunabilirliği artıran birçok geri arama stili kodunu önler.

Luca.Events sınıfını, olayları global bir yayınlama / abone olma kanalında yayınlayacak şekilde yapılandırabilirsiniz, bu da büyük bir uygulama oluşturmayı kolaylaştırır ve modüller arası iletişime yardımcı olur.

Yakut Taş

Luca, Rails ve Sinatra API'lerine karşı çalışırken özel olarak geliştirildi ve bu nedenle şu anda belirli bir yığın için optimize edildi, ancak hiçbir şekilde sizi belirli bir sunucuya kilitlemiyor.

Luca, varlık kanalında çalışmak üzere yapılandırılmış bir Ruby Gem'in parçası olarak veya indirilebilir bir JS dosyası olarak dağıtılır.

Rails veya Sinatra kullanmanıza gerek yoktur. Ama eğer yaparsanız, birçok yararlı şey ekledim:

  • .Luca uzantılı dosyalar JST stili değişken enterpolasyonlu HAML olarak işlenir. (.jst.ejs.haml ile aynıdır)
  • Tarayıcı için bir Test Demeti veya birçok Omurga ve Alt Çizgi test yardımcısıyla birlikte başsız Yasemin tabanlı Birim Testleri.
  • Luca ile birlikte gelen geliştirme araç seti için bir API bitiş noktası (bunun hakkında daha fazla bilgi)
  • Redis'i Luca için şematik bir depolama motoru olarak kullanmanıza izin veren bir API uç noktası.

Geliştirme Araçları

  • Luca uygulamaları, Luca uygulamalarını ve bileşenlerini izlemeye, denetlemeye, hata ayıklamaya yardımcı olan Luca'ya özgü yardımcılar ve komutlarla tarayıcı tarayıcı kahve konsolu etkinleştirebilir

CoffeeScript tarafından desteklenen tarayıcı Geliştirme Konsolu'ndaki Luca'ya bir örnek

  • Rails Gem ve Luca'nın CodeMirror tabanlı bileşen düzenleyicisinin yardımıyla, Coffeescript'i kullanarak Luca Framework'ün kaynak kodunu ve uygulamaya özgü bileşenleri doğrudan tarayıcıda düzenleyebilirsiniz. Etkilenen nesnelerin örnekleri güncellenen prototiple yenilenirken, düzenlemelerinize yanıt olarak anında geri bildirim görür ve değişikliklerinizi diske kaydedebilirsiniz.

  • Bileşen Test Cihazı, uygulamanızı ayrı ayrı oluşturan bileşenlerle oynamak için canlı bir sanal alandır. Bileşenin prototipini değiştirmek, bağımlılıklarını ayarlamak ve bileşeni yapılandırmak için araçlar sağlar. Bileşen, her düzenleme yaptığınızda hemen yeniden oluşturulur. Bileşenin oluşturduğu biçimlendirmeyi ve CSS'yi doğrudan tarayıcıda görüntüleyebilir ve düzenleyebilir ve değişikliklerinizi hemen görebilirsiniz. Bu onu çok değerli bir deney aracı yapar.

  • Bileşen Test Cihazı yakında Jasmine ile entegre olacak, böylece kodlarını düzenlerken bileşen birimi testlerinizin sonuçlarını gerçek zamanlı olarak görüntüleyebilirsiniz

Bileşen test cihazının ekran görüntüsü

Luca, devam eden bir çalışmadır, ancak kararlı bir API (henüz 1.0 değil) sürdürmektedir ve birkaç büyük üretim uygulamasında kullanılmıştır. Kesinlikle çok fikirli bir çerçeve, ama daha modüler hale getirmeye çalışıyorum. Aktif olarak dokümantasyon ve örnek bileşenler üzerinde çalışıyorum.


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.