Architektura jednostronicowej aplikacji internetowej JavaScript?

Jak powinna być zbudowana złożona, jednostronicowa aplikacja internetowa JS po stronie klienta? W szczególności jestem ciekawy, jak uporządkować aplikację pod względem obiektów modelu, komponentów interfejsu użytkownika, dowolnych kontrolerów i obiektów obsługujących trwałość serwera.

Na początku MVC wydawało się pasować. Ale z komponentami UI zagnieżdżonymi na różnych głębokościach (każdy z własnym sposobem działania / reagowania na dane modelu i każde generowanie zdarzeń, które same mogą lub nie mogą obsługiwać bezpośrednio), nie wydaje się, aby MVC można było zastosować w czysty sposób. (Ale proszę mnie poprawić, jeśli tak nie jest.)

-

( To pytanie zaowocowało dwiema sugestiami użycia Ajax, który jest oczywiście potrzebny do czegokolwiek innego niż najbardziej trywialna jednostronicowa aplikacja).

Architektura MVC PureMVC / JS jest najbardziej eleganckim IMO. Wiele się z tego nauczyłem. Uważam również, że Scalable JavaScript Application Architecture Nicholasa Zakasa jest pomocna w badaniu opcji architektury po stronie klienta.

Dwie inne wskazówki

1. Zauważyłem, że zarządzanie widokiem, fokusem i wprowadzaniem danych to obszary, które wymagają szczególnej uwagi w aplikacjach internetowych z pojedynczą stroną
2. Zauważyłem również, że pomocne jest oderwanie biblioteki JS, pozostawiając otwarte drzwi do zmiany zdania na temat tego, czego używasz, lub mieszania i dopasowywania, jeśli zajdzie taka potrzeba.

Prezentacja Nicholasa Zakasa, którą podzielił się Dean, jest bardzo dobrym punktem wyjścia. Przez chwilę też usiłowałem odpowiedzieć na to samo pytanie. Po zrobieniu kilku produktów Javascript na dużą skalę, pomyślałem o udostępnieniu wiedzy jako o architekturze odniesienia na wypadek, gdyby ktoś tego potrzebował. Spójrz na:

http://boilerplatejs.org/

Rozwiązuje typowe problemy związane z rozwojem Javascript, takie jak:

• Strukturyzacja rozwiązania
• Tworzenie złożonej hierarchii modułów
• Niezależne komponenty interfejsu użytkownika
• Komunikacja między modułami oparta na zdarzeniach
• Routing, historia, zakładki
• Testów jednostkowych
• Lokalizacja
• Generowanie dokumentów

itp.

Sposób tworzenia aplikacji:

• Framework ExtJS, aplikacja jednostronicowa, każdy komponent zdefiniowany w oddzielnym pliku JS, ładowany na żądanie
• Każdy komponent kontaktuje się z własną dedykowaną usługą internetową (czasami więcej niż jedną), pobierając dane do sklepów ExtJS lub struktur danych specjalnego przeznaczenia
• Renderowanie wykorzystuje standardowe komponenty ExtJS, więc mogę wiązać sklepy z siatkami, ładować formularze z rekordów, ...

Po prostu wybierz framework javascript i postępuj zgodnie z jego najlepszymi praktykami. Moje ulubione to ExtJS i GWT, ale YMMV.

NIE twórz własnego rozwiązania do tego. Wysiłek wymagany do powielenia tego, co robią współczesne frameworki JavaScript, jest zbyt duży. Zawsze szybciej jest zaadaptować coś istniejącego, niż zbudować to wszystko od podstaw.

Question - What makes an application complex ? 

Odpowiedź - użycie słowa „złożony” w samym pytaniu. Stąd powszechną tendencją będzie szukanie od samego początku kompleksowego rozwiązania.

Question - What does the word complex means ?

Odpowiedź - Wszystko, co jest nieznane lub częściowo zrozumiane. Przykład: Teoria grawitacji nawet dzisiaj jest dla mnie ZŁOŻONA, ale nie dla Sir Isaaca Newtona, który odkrył ją w 1655 roku.

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

Odpowiedź - Zrozumienie i prostota.

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

Odpowiedź - Zastanów się dwa razy, ponieważ zrozumienie i złożoność nie istnieją. Jeśli rozumiesz ogromną ogromną aplikację, na pewno zgodzisz się, że jest to nic innego jak integracja małych i prostych jednostek.

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

Odpowiedź - Ponieważ,

-> SPA nie jest rodzajem nowo wynalezionej podstawowej technologii, dla której musimy na nowo odkryć koło dla wielu rzeczy, które robimy podczas tworzenia aplikacji.

-> Jest to koncepcja napędzana potrzebą lepszej wydajności, dostępności, skalowalności i łatwości utrzymania aplikacji internetowych.

-> Jest to dość nowy wzorzec projektowy, więc zrozumienie SPA jako wzorca projektowego jest bardzo ważne w podejmowaniu świadomych decyzji dotyczących architektury SPA.

-> Na poziomie głównym żadne SPA nie jest skomplikowane, ponieważ po zrozumieniu potrzeb aplikacji i wzorca SPA zdasz sobie sprawę, że nadal tworzysz aplikację, prawie tak samo, jak robiłeś to wcześniej, z pewnymi modyfikacjami i rearanżacjami w podejściu do rozwoju.

Question - What about the use of Frameworks ?

Odpowiedź - Struktury są standardowym kodem / rozwiązaniem dla niektórych powszechnie identyfikowanych i ogólnych wzorców, dlatego mogą odciążyć x% (zmienne, w zależności od aplikacji) obciążenia z rozwoju aplikacji, ale nie należy się po nich spodziewać zbyt wiele, szczególnie w przypadku ciężkich i rosnące aplikacje. Zawsze dobrze jest mieć pełną kontrolę nad strukturą i przepływem aplikacji, ale przede wszystkim nad kodem. W kodzie aplikacji nie powinno być szarych ani czarnych obszarów.

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

Odpowiedź - Pomyśl o własnej strukturze opartej na naturze aplikacji. Kategoryzuj komponenty aplikacji. Poszukaj istniejącego frameworka, który jest zbliżony do twojego pochodnego frameworka, jeśli go znajdziesz, użyj go, jeśli go nie znajdziesz, sugeruję kontynuowanie własnego. Tworzenie frameworka jest dość trudne z góry, ale daje lepsze wyniki w dłuższej perspektywie. Oto kilka podstawowych elementów w moim frameworku SPA:

• Źródło danych: modele / zbiory modeli

• Zaznacz do prezentacji danych: Szablony

• Interakcja z aplikacją: Wydarzenia

• Przechwytywanie stanu i nawigacja: wyznaczanie tras

• Narzędzia, widżety i wtyczki: biblioteki

Daj mi znać, czy to w jakikolwiek sposób pomogło i powodzenia w Twojej architekturze SPA !!

Najlepszą rzeczą do zrobienia jest przyjrzenie się przykładowym zastosowaniom innych frameworków:

TodoMVC prezentuje wiele struktur SPA.

Możesz użyć frameworka javascript MVC http://javascriptmvc.com/

Aplikacja internetowa, nad którą obecnie pracuję, korzysta z JQuery i nie polecałbym jej dla żadnej dużej pojedynczej aplikacji internetowej. Większość frameworków, tj. Dojo, Yahoo, Google i inne, wykorzystuje przestrzenie nazw w swoich bibliotekach, ale JQuery tego nie robi i jest to znacząca wada.

Jeśli Twoja witryna ma być mała, JQuery będzie w porządku, ale jeśli zamierzasz zbudować dużą witrynę, polecam przejrzenie wszystkich dostępnych frameworków JavaScript i podjęcie decyzji, który z nich najlepiej spełnia Twoje potrzeby.

I poleciłbym zastosować wzorzec MVC do twojego javascript / html i prawdopodobnie większość twojego modelu obiektowego dla javascript może być wykonana jako json, który faktycznie zwracasz z serwera przez ajax, a javascirpt używa json do renderowania html.

Polecam przeczytanie książki Ajax w akcji, ponieważ zawiera ona większość rzeczy, które musisz wiedzieć.

Używam Samm.js w kilku jednostronicowych aplikacjach z wielkim sukcesem

Pójdę z jQuery MVC

Zajrzyj na http://bennadel.com/projects/cormvc-jquery-framework.htm Ben jest dość bystry i jeśli przeglądasz jego blog, ma kilka fajnych postów o tym, jak składa się CorMVC i dlaczego.

Alternatywnie: spójrz na ItsNat

Myśl w JavaScript, ale koduj to samo w Javie na serwerze z tymi samymi interfejsami API DOM, na serwerze jest o wiele łatwiejsze zarządzanie aplikacją bez niestandardowego klienta / mostów, ponieważ interfejs użytkownika i dane są razem.

Lub spójrz na https://github.com/flosse/scaleApp

NikaFramework umożliwia tworzenie aplikacji jednostronicowych. Pozwala także na zapisywanie HTML , CSS ( SASS ), JavaScript w osobnych plikach i łączenie ich w jednym pliku wyjściowym.

Polecam zbadać Yeoman . Umożliwia wykorzystanie istniejących „najlepszych praktyk” w nowym projekcie.

Na przykład:

jeśli zdecydujesz się użyć Angular.js, istnieje generator Yeoman , który zapewnia strukturę routingu, widoków, usług itp. Umożliwia także testowanie, minimalizowanie kodu itp.

Jeśli zdecydujesz się użyć Backbone, sprawdź ten generator