Struktury JavaScript do tworzenia aplikacji jednostronicowych [zamknięte]

101

Moim celem jest migracja istniejącej aplikacji internetowej do aplikacji jednostronicowej RESTful (SPA). Obecnie oceniam kilka frameworków aplikacji internetowych Javascript.


Moje wymagania są następujące:

  • Warstwa danych RESTful (jak dane ember)
  • MV * - konstrukcja
  • Dynamiczne trasy
  • Wsparcie w testowaniu
  • Kodowanie według konwencji
  • Wsparcie SEO
  • Obsługa historii przeglądarek
  • Dobra dokumentacja (API)
  • Gotowe do produkcji
  • Żywa społeczność

Kręgosłup

Bieżąca aplikacja używa backbone.js. Ogólnie rzecz biorąc, backbone.jsjest to fajny projekt, ale brakuje mi dobrze zdefiniowanych struktur, które określają, gdzie ma się wydarzyć i jak należy wdrażać. Praca w większym zespole ze zmieniającymi się programistami prowadzi do powstania pewnego rodzaju nieustrukturyzowanego kodu, trudnego do utrzymania i trudnego do zrozumienia. Dlatego szukam teraz frameworka, który już definiuje to wszystko.

Niedopałek

Spojrzałem na ember.jsostatnie dni. To podejście wydaje mi się bardzo obiecujące. Ale niestety kod zmienia się prawie codziennie. Więc nie nazwałbym tego gotowym do produkcji. I niestety nie możemy się doczekać, aż będzie to wersja 1.0. Ale bardzo podoba mi się idea tego frameworka.

Kątowy

Angular.jsto również szeroko rozpowszechniony framework, utrzymywany przez Google. Ale nie mogłem zapoznać się z angularem. Dla mnie struktura wydaje się niejasna, brakuje wyjaśnień dotyczących ogólnych obowiązków każdej części frameworka, a implementacje wydają się zawiłe. Aby to wyjaśnić: to tylko moje osobiste wrażenie i może być oparte na brakującej wiedzy.

Batman i Meteor

Jak zrozumiałem, oba frameworki również potrzebują części serwerowej. A ponieważ chcemy tylko zaplecza RESTful - bez względu na język, technologię lub oprogramowanie, nie tego chcemy. Ponadto wewnętrzny interfejs API już istnieje (RoR).

Knockout , CanJS i Spine

Nie wnikałem głębiej w tych trzech kandydatów. Może to będzie mój następny krok.


Więc moje pytania teraz:

  • Czy brakuje mi dobrych ram SPA?
  • Jakie ramy byś zasugerował / polecił?
  • Czy uniknąłbyś któregokolwiek z wymienionych frameworków?
  • Jakie masz doświadczenie z większymi aplikacjami SP?

PS: Chciałbym polecić świetny post na blogu Stevena Andersona (głównego programisty z Knockout.js) na temat konferencji „Throne of JS” (od 2012 roku) i ogólnie o frameworkach javascript.

PS: Tak, wiem, że są już pytania dotyczące SO. Ale ponieważ rozwój OSO jest tak szybki i szybki, większość z nich jest już nieaktualna.

Christopher Will
źródło
Sprawdź strukturę
nokautach,

Odpowiedzi:

81

Niedawno musiałem również zdecydować się na framework JavaScript SPA w projekcie.

  • Niedopałek

    Spojrzałem na Embera wcześnie i miałem podobne przemyślenia na jego temat - bardzo mi się podobał, ale wydawało się, że jest jeszcze za wcześnie, aby go użyć ... około połowa samouczków, które czytałem, nie działała z aktualną wersją, ponieważ coś ostatnio zmieniono sposób działania szablonów.

  • Kręgosłup

    Backbone był pierwszymi frameworkami, którym poważnie przyjrzeliśmy się. Nie jestem pewien, czy rozumiem, dlaczego uważasz, że nie ma „dobrze zdefiniowanych struktur”? Backbone jest całkiem jasne, jak podzielić kod Model i View. Może masz na myśli, że nie ma jakiegoś szablonu aplikacji? W każdym razie Backbone wydaje się być naprawdę skoncentrowany na części wiążącej model / REST, ale tak naprawdę nie przepisuje niczego do wiązania widoku. Jeśli powiązanie modelu jest dla Ciebie ważne i używasz Railsów, zrobienie tego powinno być bardzo proste. Niestety, usługi internetowe dla mojej aplikacji nie pasowały do ​​siebie i musiałem napisać własne .synci .parsemetody do wszystkiego. Oddzielenie kodu Model i View było fajne, ale ponieważ musielibyśmy napisać wszystkie nasze wiązania od zera, nie było tego warte.

  • Nokaut

    Knockout jest jak Yin do Backbone's Yang. Tam, gdzie Backbone koncentruje się na modelu, Knockout jest frameworkiem MVVM i koncentruje się na widoku. Zawiera observableopakowania dla właściwości obiektów JavaScript i używa data-bindatrybutu do wiązania właściwości z kodem HTML. Ostatecznie zdecydowaliśmy się na Knockout, ponieważ wiązanie widoku było głównie tym, czego potrzebowaliśmy dla naszej aplikacji. (... plus inne, jak omówiono później ...) Jeśli podoba Ci się powiązanie widoku Knockout i powiązania modelu Backbone, jest również KnockBack, który łączy oba frameworki.

  • Kątowy

    Przyjrzałem się temu po Knockout - niestety wszyscy wydawali się całkiem zadowoleni z tego, jak Knockout postrzegał wiązanie. Wydawało się o wiele bardziej skomplikowane i trudniejsze do zdobycia niż Knockout. I używa wielu niestandardowych atrybutów HTML do tworzenia powiązań, co nie jestem pewien, czy mi się podoba ... Później mogę spojrzeć na Angulara ponownie, ponieważ spotkałem wielu ludzi, którzy naprawdę lubią ten framework - może my po prostu spojrzałem na to za późno dla tego projektu.

  • Batman , Meteor , CanJS , Spine

    Żadnemu z nich nie przyjrzałem się zbyt uważnie. Chociaż wiem, że Spine jest podobną strukturą do Backbone z wyraźnymi obiektami kontrolera i jest napisany w CoffeeScript.

  • Posłowie

    Jak wspomniałem, w końcu użyliśmy Knockout, ponieważ w naszym projekcie skupienie się na wiązaniu widoków było ważniejsze. Skończyło się również na tym, że używaliśmy RequireJS do modularyzacji, skrzyżowań i Hashera do obsługi routingu i historii, Jasmine do testowania, a także JQuery , Twitter Bootstrap i Underscore.js (i prawdopodobnie więcej bibliotek, o których w tej chwili zapominam).

    Tworzenie aplikacji JavaScript bardziej przypomina ekosystem Java niż ekosystem Rails. Railsy zapewniają solidny rdzeń rzeczy, których będziesz używać dla każdej aplikacji (framework Rails), a społeczność zapewnia wiele dostosowań do tego (klejnoty). Java zapewnia ... język. A potem możesz wybrać Java EE, Spring lub Play lub Struts lub Tapestry. I wybierz JDBC lub Hibernate, TopLink lub Ibatis, aby porozmawiać z bazą danych. A potem możesz użyć Ant, Maven lub Gradle, aby go zbudować. I wybrać Tomcat lub Jetty lub JBoss lub WebLogin uruchomić go w. Nie ma więc większy nacisk na wyborze, co trzeba i co działa razem niż wybór THE ramy do używania.

Nate
źródło
Dziękuję bardzo za szczegółową odpowiedź. Kilka pytań dotyczących knockout.js: 1) Czy zapewnia jakąś warstwę danych do utrzymywania synchronizacji modelu na frontend / backend? 2) W jaki sposób wspiera się włączenie jednego szablonu do drugiego (prawdopodobnie razem z requireJS)? 3) Czy łatwo jest umieścić wszystkie pliki (modele, widoki, kontrolery, pomocnik itp.) Osobno i w różnych folderach? Poza tymi pytaniami twoja odpowiedź została zaakceptowana, ponieważ podałeś wiele informacji.
Christopher Will
@ChristopherWill Thanks! 1.) Podobnie jak Backbone pozostawia to tobie w przypadku wiązania widoku, Knockout pozostawia to tobie w przypadku wiązania REST-> Model. W dokumentacji jest kilka przykładów - knockoutjs.com/documentation/json-data.html lub możesz użyć KnockBack, aby połączyć populację REST-> Model Backbone.
Nate
2.) To zależy od tego, co masz na myśli - Knockout ma wbudowane powiązanie danych, które umożliwia pobranie kolekcji z modelu, powiązanie ze znacznikiem listy lub znacznikiem tabeli i dla każdego renderowania określonego szablonu. W przypadku rzeczy na dużą skalę, takich jak tworzenie ogólnych widoków i ich zamiana - to wciąż trochę ręczne (przynajmniej jak to robię, wciąż się uczę) - RequireJS z wtyczką tekstową sprawia, że ​​jest to trochę łatwiejsze, ale nadal musisz określić logikę i zamienić elementy div - po prostu robię to w metodach, które odpowiadają na moje trasy. W tym celu możesz jednak połączyć wydarzenia Knockout.
Nate,
3.) RequireJS pozwala to zrobić.
Nate,
Dzięki Nate. Myślę, że spróbuję KnockBack… brzmi obiecująco. I oczywiście z twoimi wspomnianymi bibliotekami (requireJS, skrzyżowanie itp.)
Christopher Will
8

Minął rok, odkąd rozpoczęliśmy rozwój naszego projektu usług w chmurze z licznymi SPA, więc była to poważna decyzja, który framework javascript użyć dla naszego interfejsu użytkownika, aby zaspokoić nasze potrzeby związane z architekturą RESTful. i po wielu badaniach skończyło się na używaniu frameworka Dojo .

główne funkcje, które pokochasz:

  1. wykształcona społeczność i zespół, który wymyślił doskonały wzorzec projektowy. świetne konwencje i architektura modułowa / obiektowa. z podejściem do programowania w CrossBrowser :)
  2. Struktura SN *. twórz widżety interfejsu użytkownika za pomocą zewnętrznych szablonów .htm i do celów produkcyjnych, buduj wszystkie swoje javascript i szablony w jednym, zminimalizowanym i małym pliku .js
  3. budować klasy z dziedziczeniem. setery właściwości, wiele narzędzi funkcyjnych.
  4. mechanizm pub / sub (nazwane tematy w dojo)
  5. wiele kontrolek interfejsu użytkownika, od kontroli formularza walidacji, okien dialogowych / podpowiedzi po rozbudowane, wysoce konfigurowalne (ale lekkie) rozwiązanie do tworzenia wykresów i siatek danych.
  6. dobry system testów jednostkowych o nazwie DOH. ma również robota do odtwarzania działań myszy / klawiatury.
  7. narzędzie do zapytań (takie jak JQuery) o nazwie NodeList ze wszystkimi funkcjami jquery, a nawet wieloma jego wtyczkami.
  8. i dobra, ale nie tak kompletna część. ma moduł JsonRest do użycia z usługami REST. jest to przydatne narzędzie, ale brakuje mu wielu funkcji.

Aby rozwiązać te problemy, opracowaliśmy ankietę AJAX, obsługę błędów oraz uniwersalne rozwiązanie do ładowania i powiadamiania. zrobiliśmy to bardzo łatwo, używając konwencji i struktur ramowych dojo. jeśli nie chcesz tego robić, być może będziesz musiał użyć innego frameworka do tej części.

patrząc na świetne SPA w Internecie, dowiesz się, że wszystkie z nich są dostosowane i używają wielu frameworków. ale nasze doświadczenie z samym Dojo było fantastyczne. dlatego radzę nie myśleć o żadnym innym frameworku, ponieważ wszystkie są niekompletne dla SPA. ale ostatecznie masz też inną opcję (której nie polecam i nie mam szczegółowych informacji na temat). idź z frameworkiem JAVA, który jest w stanie budować SPA, automatycznie generując interfejs użytkownika i javascript.

Jednorożec
źródło
Witaj! Czy używasz teraz Dojo? Czy prowadzisz blog o Dojo?
Dunaevsky Maxim
Cześć! Tak, nadal używamy go do tego samego produktu i utrzymujemy go. nasz wewnętrzny framework jest napisany na szczycie dojo i dodajemy go każdego dnia… nie, nie mam bloga na ten temat. jeśli masz zamiar zacząć od tego, jest obecnie uważane za stare narzędzie. Nadal pracują nad Dojo 2.0, ale na razie może lepiej skorzystać z innych opcji. mamy React / Angular na górze listy.
Unicornist