Czy istnieje framework JavaScript MVC (mikro)? [Zamknięte]

133

Czy istnieją (mikro) struktury JavaScript MVC po stronie klienta ?

Mam dość skomplikowany formularz HTML i przydałby się wzorzec MVC.

Wyobrażam sobie, że dobre rozwiązanie zapewniłoby:

  • Model i widok aktualizują kontroler po zmianie wartości (wzorzec obserwatora)
  • Wypełnij model z danych formularza podczas ładowania strony
  • Wypełnij formularz z modelu, gdy model się zmieni

Ajax, kometa, JSONP i cały ten jazz to poważna przesada.

javascript model-view-controller forms nicholaides
źródło
2
Czy się mylę, czy to tylko zły pomysł (a może framework zgodny z modnym hasłem)?
2
Zacząłem nad czymś pracować jakiś czas temu, ponieważ miałem takie samo uczucie jak Ty. Jest tak minimalne, jak to tylko możliwe, AMD i tak nieopinowane, jak tylko mogłem. To oznacza brak jQuery itp. Wiem, że to zostało zamknięte, ale myślę, że może to być coś, czego szukałeś: github.com/Wolfy87/tarmac - ostatnio niewiele z tym zrobiłem, bo pomyślałem, że tak byłby jedynym użytkownikiem.
Olical,
github.com/yuval-a/ZOE
Yuval A.,
Spójrz na TodoMVC , który porównuje (prawie) wszystkie dostępne frameworki JavaScript poprzez implementację prostej aplikacji TODO.
koppor

Odpowiedzi:

71

Backbone to świetna lekka konstrukcja. Spróbuj: http://backbonejs.org/

Martin Drapeau
źródło
2
Tak się cieszę, że znalazłem Backbone.
Aaron Greenlee
Zgadzam się, zdecydowanie jeden do sprawdzenia!
Ivanhoe
Jak używać Backbone w sposób MVC?
IsmailS
1
@TristanJuricek Czy istnieje bezpłatna alternatywa dla peepcode?
Matt
Skip Backbone i idź w prawo do Spine. Ma znacznie bardziej logiczną implementację MVC.
Chris Jaynes
33

JavaScriptMVC to doskonałe rozwiązanie. To wszystko, a podejście oparte na wtyczkach pozwala wybrać tylko te funkcje, których potrzebujesz. Od wersji 2.0 jest oparty na jQuery.

Stopniowe ulepszanie witryny pozostawia się użytkownikowi, ponieważ JMVC zapewnia tylko środkową warstwę do rozwoju - to Ty decydujesz o wyborze projektu.

Jednak JavaScriptMVC jest po prostu najlepszą biblioteką JavaScriptMVC ogólnego przeznaczenia ze względu na potężne kontrolery oparte na delegowaniu zdarzeń.

Delegowanie zdarzeń pozwala uniknąć konieczności dołączania programów obsługi zdarzeń i po prostu tworzyć reguły dla swojej strony.

Wreszcie, JMVC to znacznie więcej niż architektura MVC. Posiada wszystkie części cyklu rozwojowego objęte:

  • Generatory kodu
  • Zintegrowane testowanie Selenium i Env.js
  • Silnik dokumentacji
  • Automatyczne Concat + Compress
  • Wykrywanie i raportowanie błędów
Justin Meyer
źródło
1
+1 dla JavascriptMVC - używałem go teraz w kilku aplikacjach i jest całkiem fajny. Pomiń przykłady generowania kodu w witrynie. Wyobrażam sobie, że są tam tylko po to, by uspokoić fanów Railsów. :) Zacznij od podstawowego modelu obiektowego JQueryMX i utwórz kontroler.
Chris Jaynes
1
Odkąd napisałem ten komentarz, przełączyłem się na używanie Require and Spine. Ostatecznie są mniejsze, bardziej eleganckie i mniej „korporacyjne” niż JMVC. JMVC było miłe dla naszego zespołu programistów Java, który wprowadził poprawki do JS, ale po prostu nie wytrzymuje, gdy zaczniesz lepiej rozumieć JS ...
Chris Jaynes
Część MVC JMVC to teraz can.js
PHearst
21

Spine ma interfejs API podobny do Backbone, ale jest o wiele mniejszy. Posiada dziedziczenie prototypowe.

Kolja
źródło
2
Jest również napisany w CoffeeScript i wykorzystuje styl klas CoffeeScript - nie oznacza to wielkiej wygranej, ale jest całkiem przyjemny.
płatny nerd
1
Zakładam, że dlatego jest mały niż kręgosłup? Kod Coffeescript jest bardziej zwarty ...
Brenden,
Uwielbiam Spine. Używaj go z RequireJS dla czystej niesamowitości. Nie pozwól, aby cię odstraszył fakt, że to CoffeeScript, działa też dobrze z normalnym JS ...
Chris Jaynes
Przeglądarka obsługuje IE> = 9, więc sprawdź, czy pasuje do profilu Twoich gości.
Richard
20

AngularJS działa dobrze w połączeniu z jQuery i bardzo pomoże Ci ze strukturą MVC i ścisłym oddzieleniem problemów.

Pełne środowisko testowe i Dependency Injection obejmowały ...

Sprawdź to na http://angularjs.org

Vojta
źródło
Angularjs jest jak dotąd NAJLEPSZY pod koniec 2013 roku… myślę…
Tony Bao
15
angular
1
Zgadzam się, Angular nie jest mikro-ramą.
Vojta
2
tak, również krzywa uczenia się jest nieproporcjonalna, a korzyści w porównaniu z innymi frameworkami.
vsync
4
kątowy jest całkowitym przeciwieństwem mikro-ramy. to bestia.
hasen
14

Rzeczywiście jest: http://www.javascriptmvc.com/

Myślę, że uznasz to za wystarczające!

Filip Ekberg
źródło
Ta witryna ma blink tag. o_0
Tad Donaghe,
ta strona w ogóle się nie ładuje
Josh
1
Spróbuj ponownie, powinno działać ponownie.
Filip Ekberg
14

Myślę, że ten wygląda na coś, co powinieneś sprawdzić: http://knockoutjs.com/

(Jako programista Silverlight / wpf była to biblioteka, która sprawiła, że ​​w końcu zacząłem uczyć się javascript. Jest ona oparta na wzorcu Model-View-View-Model (MVVM), ponieważ teraz wydaje mi się, że to dobry wybór!)

Larsi
źródło
Jako programista Silverlight / WPF oceniałem nokaut, kręgosłup i kilka innych. Pod koniec dnia przesiadłem się na Angular. Ma wiązania i DUŻO więcej.
jonperl
8

Ember.js

Oto trzy funkcje, które sprawiają, że korzystanie z Ember jest przyjemne:

  1. Wiązania
  2. Obliczone właściwości
  3. Szablony automatycznej aktualizacji

Wiązania

Użyj powiązań, aby zachować synchronizację właściwości między dwoma różnymi obiektami. Wystarczy raz zadeklarować powiązanie, a Ember upewni się, że zmiany zostaną propagowane w dowolnym kierunku.

Oto jak tworzysz powiązanie między dwoma obiektami:

MyApp.president = Ember.Object.create({
  name: "Barack Obama"
});

MyApp.country = Ember.Object.create({
  // Ending a property with 'Binding' tells Ember to
  // create a binding to the presidentName property.
  presidentNameBinding: 'MyApp.president.name'
});

MyApp.country.get('presidentName');
// "Barack Obama"

Powiązania pozwalają zaprojektować aplikację przy użyciu wzorca MVC (Model-View-Controller), a następnie spać spokojnie, wiedząc, że dane zawsze będą prawidłowo przepływać z warstwy na warstwę.

Obliczone właściwości

Obliczone właściwości pozwalają traktować funkcję jak właściwość. Obliczone właściwości są przydatne, ponieważ mogą działać z powiązaniami, tak jak każda inna właściwość.

Automatyczne aktualizacje szablonów

Ember używa Handlebars, semantycznej biblioteki szablonów. Aby pobrać dane z aplikacji JavaScript i umieścić je w DOM, utwórz tag i umieść go w swoim HTML, gdziekolwiek chcesz, aby pojawiła się wartość:

<script type="text/x-handlebars">
  The President of the United States is {{MyApp.president.fullName}}.
</script>
Sam Hasler
źródło
2
żar jest korzystny w jakikolwiek sposób nad kręgosłupem .... jeśli specyfikacje nie są tak jasne na początkowych etapach ..
Bijendra
4
Lubię emberJS, ale nie jest „mikro” , jest OGROMNY, ponieważ jest to płaski framework
iConnor,
1
Używanie Embera i microframework w tym samym zdaniu nie powinno być dozwolone.
Prefiks
8

Stapes.js

Pełne ujawnienie: jestem autorem tej biblioteki :)

Jeśli szukasz czegoś naprawdę małego (1,5 kb zminimalizowanego / spakowanego gzipem), zajrzyj i powiedz mi, czy Ci się podoba.

Ochrypły
źródło
Wygląda świetnie na pierwszy rzut oka! Podoba mi się, że skupiasz się na dziedziczeniu prototypowym (bez symulowanych klas i bez zagmatwanianew operatorów). To, co wydaje się niepotrzebne, jest jeszcze jednym eachi map. Mam je już w Underscore.js i jQuery .
feklee
7

Jeśli twoje wymagania są naprawdę proste, możesz napisać własny prosty MVC, taki jak Alex Netkachov zrobił .

Jego przykłady są zbudowane w dojo (Uwaga: nie działają dla mnie na jego stronie z powodu braku pliku dojo.js), ale możesz podążać za wzorcem w zwykłym JavaScript.

system PAUSE
źródło
4

To prawdopodobnie przesada jak na to, czego potrzebujesz, ale SproutCore to framework MVC i nie wygląda na bardziej ciężki niż JavaScriptMVC lub Junction TrimPath.

Niestety, żaden z nich nie wydaje się opierać na zasadzie stopniowego ulepszania .

PAUZA systemu
źródło
1
Podstawowe komponenty MVC w JavaScript MVC są o około 1k większe niż pliki gzipowane w Backbone (choć mają o wiele więcej funkcji). JMVC jest w pełni zdolny do tworzenia stopniowo ulepszanych aplikacji. Po prostu wyrzuciłbyś warstwę Model.
Justin Meyer,
3

Popularny framework ActionScript MVC PureMVC został niedawno przeniesiony na JavaScript. Nie miałem jeszcze okazji tego wypróbować, ale jestem przekonany, że jest dobry.

Ricky
źródło
Podoba mi się flex. Proste i wydajne.
Glenn
3

Proszę również do kasy sprawdzić jquery-claypool .

jquery-claypool to mały, szybki framework mvc oparty na jquery, oparty na moich doświadczeniach z django, szynami, sprężynami itp. Jest bardzo lekki i działa zarówno na kliencie, jak i na serwerze.

zapewnia strukturę routingu dla czystego MVC, rejestrowania kategorii, filtrów (aop), leniwego tworzenia kontrolerów, odwrócenia kontroli, konfiguracji przez konwencję i niewiele więcej zgodnie z projektem.

nie robi niczego, co jquery już robi, czuje się jak jquery i działa tak, jak powinien: po prostu.

jquery-claypool

Mam nadzieję, że to sprawdzisz.

Chris Thatcher
źródło
Jak widzisz Claypool w stosunku do Backbone?
Pepijn
2

Jamal jest najlżejszym, jaki widziałem. Jest również oparty na jQuery (bonus). Nie korzystałem.

http://jamal-mvc.com/

KevBurnsJr
źródło
2

Jeśli chcesz mieć wszystko pod kontrolą i całkiem proste, możesz nie potrzebować frameworka, ale po prostu zaimplementuj własny wzorzec MVC. Po prostu sprawdź ten artykuł: Model-View-Controller (MVC) z JavaScriptem autorstwa Alexa Netkachova w 2006 roku.

Batailley
źródło
2

Spróbuj kotka . Ma tylko 1,4 KB, a jedyną zależnością jest EJS.

msn0
źródło
2

UPDATE 2016: Sammy.js wydaje się być porzucony.

Spójrz na Sammy.js

Tekst ze strony:

Mała platforma internetowa z klasą.

  • MAŁY rdzeń Sammy'ego jest skompresowany tylko do 16K, a do 5,2K i do gzipa
  • MODUŁOWY Sammy zbudowany jest na systemie wtyczek i adapterów. Podaj tylko kod, którego potrzebujesz. Łatwo jest również wyodrębnić własny kod do wtyczek wielokrotnego użytku.
  • CLEAN Całe API zostało zaprojektowane tak, aby było łatwe do zrozumienia i czytania. Sammy stara się zachęcić do dobrej enkapsulacji i projektowania aplikacji.
  • ZABAWA Jaki jest prawdziwy punkt rozwoju, jeśli nie jest przyjemny. Sammy stara się postępować zgodnie z podejściem MATZ. Jest zoptymalizowany pod kątem zadowolenia programistów.
Bijan
źródło
Czy mógłbyś rozwinąć, proszę, czym jest MATZ?
kstep
Yukihiro „Matz” Matsumoto, twórca rubinu, często mówił, że „stara się uczynić Ruby naturalnym, a nie prostym” w sposób, który odzwierciedla życie. Oprogramowanie powinno więc wydawać się użytkownikowi naturalne. Oznacza to podejście MATZ.
Bijan
1

CorMVC, łatwy do zrozumienia i na początek, oparty na jquery i niezależny od żadnej technologii serwerowej

epitka
źródło
1

Opracowałem bardzo prosty framework MVC Javascript o nazwie MCV . Nie robi dokładnie tego, o co prosisz, ale można go łatwo rozszerzyć za pomocą pomocników. W każdym razie jest to zdecydowanie mikro (zapakowane 1,9kb).

Działa mniej więcej jak Jamal, ale zdecydowałem się na własny z dwóch powodów:

  • usunąć zależność od jQuery (chociaż najczęściej używam jej razem z jQuery)
  • czyniąc go rozszerzalnym za pomocą pomocników. Są one analogiczne do zachowań, komponentów i pomocników CakePHP.
Andrea
źródło
1

Żeby lista była trochę bardziej kompletna: ActiveJS

Bijan
źródło
1

Głosowałem za AngularJS (pełne ujawnienie, jestem zaangażowany w ograniczony sposób w angularne wysiłki deweloperów) i jestem bardzo podekscytowany. Zrobiłem porównanie side-by-side, biorąc jedną funkcję dla projektu wewnętrznego (przepraszam, nie mam podpisu, aby ją udostępnić) i implementując ją zarówno w AngularJS, jak i Backbone. To było świetne ćwiczenie i na koniec bardzo skłaniam się ku Angularowi. Główni programiści świetnie odpowiadają na pytania i wykonali naprawdę dobrą robotę z wbudowanym wiązaniem danych, testowaniem jednostkowym / e2e i dokumentacją. Jest nadal w wersji beta, a 1.0 pojawi się w najbliższej przyszłości. Wersja beta jest bardzo stabilna.

Nastąpiła pewna zmiana paradygmatu, a oni stosują całkiem inne podejście niż większość. Integracja twoich ulubionych wtyczek jquery wymaga trochę wysiłku, ale jest wykonalna i została wykonana (angular-contrib na github).

Powiem (i jest to problem w przypadku większości frameworków skoncentrowanych na js), upewnij się, że zbadałeś, jak uczynić treść przyjazną dla SEO (jeśli jest to dla Ciebie ważne). Odkąd dołączyłem do społeczności Angular w czerwcu, zauważyłem, że zainteresowanie rośnie i wiele osób publikuje posty, w których mówi, że oglądali Backbone i innych, ale naprawdę podoba im się to, co widzą w Angular.

Dan Doyon
źródło
0

Can.js ma wszystko, czego potrzebujesz i waży zaledwie 8 KB. Wziął najlepsze fragmenty z JavaScriptMVC i wydestylował go w jeden mały, ale niesamowity framework z obserwatorami, widżetami, powiązaniami, pracami. Jest kompatybilny z głównymi frameworkami ( jQuery , Dojo Toolkit , MooTools itp.). Dokumentacja jest doskonała, a autorzy reagują. Na pewno warto zajrzeć.

Steven Garcia
źródło