Tek sayfalık bir JavaScript web uygulamasının mimarisi?

İstemci tarafında karmaşık bir tek sayfalı JS web uygulaması nasıl yapılandırılmalıdır? Özellikle, uygulamanın model nesneleri, UI bileşenleri, herhangi bir denetleyici ve sunucu kalıcılığını işleyen nesneler açısından temiz bir şekilde nasıl yapılandırılacağını merak ediyorum.

MVC ilk başta uygun görünüyordu. Ancak, çeşitli derinliklerde yuvalanmış UI bileşenleri ile (her biri model verileri üzerinde kendi hareket etme / tepki verme yöntemlerine ve kendilerinin doğrudan işleyebilecekleri veya edemeyecekleri her bir olay oluşturmaya sahiptir), MVC temiz bir şekilde uygulanabilecek gibi görünmüyor. (Ama durum bu değilse lütfen beni düzeltin.)

-

( Bu soru , en önemsiz tek sayfalık uygulama dışında herhangi bir şey için açıkça gerekli olan ajax kullanımına ilişkin iki öneriyle sonuçlandı.)

PureMVC / JS'nin MVC mimarisi en zarif IMO'dur. Ben ondan çok şey öğrendim. Ayrıca Nicholas Zakas'ın Ölçeklenebilir JavaScript Uygulama Mimarisi , istemci tarafı mimari seçeneklerini araştırmada yararlı buldum.

Diğer iki ipucu

1. Tek sayfalı web uygulamalarında özellikle dikkat edilmesi gereken alanların görünüm, odaklanma ve girdi yönetimi olduğunu buldum
2. Ayrıca, JS kitaplığını soyutlamayı, ne kullandığınızla ilgili fikrinizi değiştirmek için kapıyı açık bırakmayı veya ihtiyaç duyulduğunda karıştırıp eşleştirmeyi yararlı buldum.

Dean tarafından paylaşılan Nicholas Zakas'ın sunumu, başlamak için çok iyi bir yer. Ben de bir süredir aynı soruyu cevaplamakta zorlanıyordum. Birkaç büyük ölçekli Javascript ürünü yaptıktan sonra, birinin ihtiyaç duyması durumunda öğrendiklerini bir referans mimari olarak paylaşmayı düşündüm. Bir bak bakalım:

http://boilerplatejs.org/

Aşağıdakiler gibi yaygın Javascript geliştirme endişelerini giderir:

• Çözüm yapılandırma
• Karmaşık modül hiyerarşisi oluşturma
• Bağımsız UI bileşenleri
• Olay tabanlı modüller arası iletişim
• Yönlendirme, Geçmiş, Yer İmlerine Ekleme
• Birim Testi
• Yerelleştirme
• Belge Üretimi

vb.

Uygulamaları geliştirme şeklim:

• ExtJS çerçevesi, tek sayfalı uygulama, ayrı bir JS dosyasında tanımlanan her bileşen, isteğe bağlı olarak yüklenir
• Her bileşen kendi özel web hizmetiyle (bazen birden fazla) bağlantı kurarak verileri ExtJS mağazalarına veya özel amaçlı veri yapılarına getirir
• Oluşturma standart ExtJS bileşenlerini kullanıyor, böylece mağazaları ızgaralara bağlayabilir, kayıtlardan formları yükleyebilirim, ...

Bir javascript çerçevesi seçin ve en iyi uygulamalarını izleyin. Favorilerim, ExtJS ve GWT, ancak YMMV.

Bunun için kendi çözümünüzü Yuvarlamayın. Modern javascript çerçevelerinin yaptıklarını çoğaltmak için gereken çaba çok büyük. Mevcut bir şeyi uyarlamak, hepsini sıfırdan inşa etmekten her zaman daha hızlıdır.

Question - What makes an application complex ? 

Cevap - Sorunun kendisinde "karmaşık" kelimesinin kullanılması. Bu nedenle, en başından itibaren karmaşık bir çözüme dikkat etmek ortak bir eğilim olacaktır.

Question - What does the word complex means ?

Cevap - Bilinmeyen veya kısmen anlaşılan her şey. Örnek: Yerçekimi teorisi benim için bugün bile KARMAŞIK, ancak onu 1655'te keşfeden Sir Isaac Newton için değil.

Question - What tools can I use to deal with complexity ?

Cevap - Anlama ve basitlik.

Question - But I understand my application . Its still complex ?

Cevap - İki kez düşünün, çünkü anlayış ve karmaşıklık bir arada bulunmaz. Çok büyük bir uygulamayı anlarsanız, bunun küçük ve basit birimlerin entegrasyonundan başka bir şey olmadığını kabul edeceğinizden eminim.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

Cevap - Çünkü,

-> SPA, uygulama geliştirmede yaptığımız birçok şey için tekerleği yeniden icat etmemiz gereken yeni icat edilmiş bir tür çekirdek teknoloji değildir.

-> Web uygulamalarının daha iyi performans, kullanılabilirlik, ölçeklenebilirlik ve sürdürülebilirlik ihtiyacından kaynaklanan bir kavramdır.

-> Oldukça yeni tanımlanmış bir tasarım modeli, bu nedenle bir tasarım modeli olarak SPA'nın anlaşılması, bir SPA'nın mimarisi hakkında bilinçli kararlar vermede uzun yol kat ediyor.

-> Kök düzeyinde hiçbir SPA karmaşık değildir, çünkü bir uygulamanın ve SPA modelinin gereksinimlerini anladıktan sonra, bazı değişiklikler ve yeniden düzenlemelerle hemen hemen aynı şekilde bir uygulama oluşturduğunuzu fark edeceksiniz. geliştirme yaklaşımında.

Question - What about the use of Frameworks ?

Cevap - Çerçeveler, bazı yaygın olarak tanımlanan ve jenerik modeller için kazan plaka kodu / çözümüdür, bu nedenle uygulama geliştirmeden% x (uygulamaya bağlı olarak değişken) yükü alabilirler ancak bu durumda özellikle ağır için bunlardan çok fazla şey beklenmemelidir. ve büyüyen uygulamalar. Uygulama yapınız ve akışınız üzerinde tam kontrol sahibi olmak her zaman iyi bir durumdur, ancak en önemlisi kodudur. Uygulama kodunda gri veya siyah alan olmamalıdır.

Question - Can you suggest one of the many approaches to SPA architecture ?

Cevap - Uygulamanızın doğasına göre kendi çerçevenizi düşünün. Uygulama bileşenlerini kategorilere ayırın. Türetilmiş çerçevenize yakın mevcut bir çerçeveyi arayın, bulursanız kullanın, bulamazsanız, kendi çerçevenizle devam etmenizi öneririm. Çerçeve oluşturmak oldukça önceden bir çabadır ancak uzun vadede daha iyi sonuçlar verir. SPA çerçevemdeki bazı temel bileşenler şunlar olacaktır:

• Veri Kaynağı: Modeller / Model Koleksiyonları

• Verileri sunmak için işaretleyin: Şablonlar

• Uygulama ile etkileşim: Etkinlikler

• Durum yakalama ve navigasyon: Yönlendirme

• Yardımcı programlar, widget'lar ve eklentiler: kitaplıklar

Bunun herhangi bir şekilde yardımcı olup olmadığını bana bildirin ve SPA mimarinize iyi şanslar!

Yapılacak en iyi şey, diğer çerçevelerin örnek kullanımlarına bakmaktır:

TodoMVC birçok SPA çerçevesini sergiliyor.

Http://javascriptmvc.com/ javascript MVC çerçevesini kullanabilirsiniz.

Şu anda üzerinde çalıştığım web uygulaması JQuery kullanıyor ve bunu herhangi bir büyük tek sayfalı web uygulaması için önermem. Çoğu çerçeve, yani Dojo, yahoo, google ve diğerleri, kütüphanelerinde ad alanları kullanır, ancak JQuery kullanmaz ve bu önemli bir dezavantajdır.

Web sitenizin küçük olması amaçlanıyorsa, JQuery uygun olacaktır, ancak büyük bir site oluşturmayı planlıyorsanız, mevcut tüm Javascript çerçevelerine bakmanızı ve hangisinin ihtiyaçlarınızı en çok karşıladığına karar vermenizi tavsiye ederim.

Ve MVC modelini javascript / html'nize uygulamanızı öneririm ve muhtemelen javascript için nesne modelinizin çoğu, sunucudan ajax aracılığıyla döndürdüğünüz json olarak yapılabilir ve javascirpt, html'yi oluşturmak için json'u kullanır.

Bilmeniz gereken çoğu şeyi içerdiği için Ajax kitabını çalışırken okumanızı tavsiye ederim.

Ben kullanıyorum Samm.js büyük bir başarı ile birkaç tek sayfa uygulamalarında

JQuery MVC ile giderdim

Http://bennadel.com/projects/cormvc-jquery-framework.htm adresini ziyaret edin. Ben oldukça zekidir ve blogunda gezerseniz CorMVC'nin nasıl ve neden bir araya getirildiği hakkında bazı güzel yazıları vardır.

Alternatif: ItsNat'a bir göz atın

JavaScript'i düşünün, ancak aynı DOM API'lerine sahip sunucuda Java'da aynı kodlayın; sunucuda, özel istemci / köprüler olmadan uygulamanızı yönetmek çok daha kolaydır çünkü UI ve veriler bir arada bulunur.

Veya https://github.com/flosse/scaleApp adresine bir göz atın

NikaFramework , tek sayfalık uygulama oluşturmanıza olanak sağlar. Ayrıca, HTML , CSS ( SASS ), JavaScript'i ayrı dosyalarayazmanızave bunları sonunda tek bir çıktı dosyasına paketlemenizeolanak tanır.

Yeoman'ı keşfetmenizi tavsiye ederim . Yeni projeniz için mevcut "en iyi uygulamayı" kullanmanıza izin verir.

Örneğin:

Angular.js kullanmaya karar verirseniz, bir Yeoman oluşturucu var , size yönlendirme, görünümler, hizmetler vb. için bir yapı sağlayan . Ayrıca kodunuzu test etmenize, küçültmenize vb. izin verir.

Omurga kullanmaya karar verirseniz, bu oluşturucuya göz atın