Architektura jednostronicowej aplikacji internetowej JavaScript?

99

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).

Społeczność
źródło
Możesz wypróbować angularJS lub backboneJS
Romain
2
Czy możesz podać własne spostrzeżenia dotyczące tego pytania? Minęło trochę czasu, odkąd zadałeś to pytanie i jestem zainteresowany, aby dowiedzieć się, jakie są najważniejsze aspekty, których nauczyłeś się na podstawie własnego doświadczenia z Javascript SPA.
Adrian Moisa

Odpowiedzi:

35

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.
Dean Burge
źródło
13

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.

Haszt
źródło
10

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.

Joeri Sebrechts
źródło
10
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 !!

Prakash Tiwari
źródło
1
To dodaje świetnej perspektywy (co zwykle jest rzadkie). Dzięki!
Cody
4

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

TodoMVC prezentuje wiele struktur SPA.

Adam Gent
źródło
1

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ć.

orzeł
źródło
jQuery można napisać (jak każdy JS) w przestrzeni nazw przy użyciu prototypów. Nie jestem pewien, czy jest to wystarczająco duża lub niejasna funkcja, aby uzasadniać abstrakcję za frameworkiem - wolę dowiedzieć się, czym właściwie zajmuje się JS. stackoverflow.com/questions/881515/…
SimplGy
4
JQuery nie jest przeznaczona jako platforma aplikacji po stronie klienta. Jest skierowany na „niższy poziom” niż ten. JQuery został zaprojektowany w celu uproszczenia przechodzenia przez dokumenty HTML, obsługi zdarzeń, animacji i operacji Ajax oraz do usunięcia różnic między przeglądarkami. W przypadku większych aplikacji należy używać struktury aplikacji po stronie klienta, takiej jak knockout lub szkielet W POŁĄCZENIU Z JQuery.
Sam Shiles
Więc mój punkt widzenia jest nadal aktualny, jeśli nokaut lub kręgosłup nie obejmują przechodzenia przez dokumenty, obsługi zdarzeń itp., To nie jest wiele warte. YUI3 App Framework to robi i nie ma potrzeby korzystania z JQuery, jeśli go używasz.
burza orła
1
jquery przechowuje wszystkie swoje metody w zmiennej jQuery i zmiennej $. Jeśli używasz opcji bez konfliktu, w globalnej przestrzeni nazw tworzona jest tylko nazwa jQuery. jQuery nie jest frameworkiem, tylko biblioteką, nie mówi ci, jak robić rzeczy, po prostu podaje kilka skrótów do robienia typowych rzeczy. Porównanie jQuery z Dojo / YUI itp. Jest błędne.
Hoffmann
1
@eaglestorm Twoje stwierdzenie if ma wartość fałszywą.
John Lehmann
1

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

NicoGranelli
źródło
0

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.

jmarranz
źródło
0

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.

Alex Ivasyuv
źródło
0

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

Daniel Pérez Rada
źródło