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).
Odpowiedzi:
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
źródło
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:
itp.
źródło
Sposób tworzenia aplikacji:
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.
źródło
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.
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.
Odpowiedź - Zrozumienie i prostota.
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.
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.
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.
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 !!
źródło
Najlepszą rzeczą do zrobienia jest przyjrzenie się przykładowym zastosowaniom innych frameworków:
TodoMVC prezentuje wiele struktur SPA.
źródło
Możesz użyć frameworka javascript MVC http://javascriptmvc.com/
źródło
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ć.
źródło
Używam Samm.js w kilku jednostronicowych aplikacjach z wielkim sukcesem
źródło
Pójdę z jQuery MVC
źródło
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.
źródło
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.
źródło
Lub spójrz na https://github.com/flosse/scaleApp
źródło
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.
źródło
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
źródło