Próbowałem zrozumieć użyteczność backbone.js z jego strony http://documentcloud.github.com/backbone , ale nadal nie mogłem wiele zrozumieć.

Czy ktoś może mi pomóc, wyjaśniając, jak to działa i jak może być pomocny w pisaniu lepszego JavaScript?

Backbone.js jest w zasadzie uber-light frameworkiem, który pozwala ustrukturyzować kod JavaScript w sposób MVC (Model, Widok, Kontroler), gdzie ...

Model jest częścią kodu, który pobiera i wypełnia dane,

Widok to reprezentacja HTML tego modelu (widoki zmieniają się wraz ze zmianą modeli itp.)

i opcjonalny kontroler, który w tym przypadku pozwala zapisać stan twojej aplikacji Javascript za pomocą hashbanga URL, na przykład: http://twitter.com/#search?q=backbone.js

Niektóre zalety, które odkryłem przy pomocy Backbone:

• Nigdy więcej Javascript Spaghetti: kod jest zorganizowany i podzielony na znaczące semantycznie pliki .js, które są następnie łączone za pomocą JAMMIT

• Nigdy więcej jQuery.data(bla, bla): nie trzeba przechowywać danych w DOM, zamiast tego przechowywać dane w modelach

• wiązanie zdarzeń po prostu działa

• niezwykle przydatna biblioteka narzędziowa Underscore

• Kod backbone.js jest dobrze udokumentowany i świetnie się czyta. Otworzyłem oczy na szereg technik kodu JS.

Cons:

• Zajęło mi to trochę czasu, aby owinąć głowę i dowiedzieć się, jak zastosować go do mojego kodu, ale jestem początkującym JavaScript.

Oto zestaw świetnych samouczków dotyczących korzystania z Backbone with Rails jako zaplecza:

CloudEdit: samouczek Backbone.js z Railsami:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

ps Jest też ta wspaniała klasa Collection, która pozwala radzić sobie z kolekcjami modeli i naśladować modele zagnieżdżone, ale nie chcę cię mylić od samego początku.

Jeśli zamierzasz budować złożone interfejsy użytkownika w przeglądarce, prawdopodobnie znajdziesz w końcu wynalazki większości elementów tworzących frameworki, takie jak Backbone.js i Sammy.js. Pytanie brzmi: czy budujesz w przeglądarce coś wystarczająco skomplikowanego, aby z niego skorzystać (abyś sam nie wymyślił tego samego).

Jeśli planujesz zbudować coś, w którym interfejs użytkownika regularnie zmienia sposób wyświetlania, ale nie idzie na serwer, aby uzyskać całe nowe strony , prawdopodobnie potrzebujesz czegoś takiego jak Backbone.js lub Sammy.js. Głównym przykładem czegoś takiego jest Gmail Google. Jeśli kiedykolwiek go używałeś, zauważysz, że pobiera jeden duży fragment HTML, CSS i JavaScript po pierwszym zalogowaniu, a potem wszystko dzieje się w tle. Może przechodzić między czytaniem wiadomości e-mail i przetwarzaniem skrzynki odbiorczej oraz wyszukiwaniem i przeglądaniem ich wszystkich bez konieczności wyświetlania nowej strony.

Jest to rodzaj aplikacji, którą te frameworki przodują w ułatwianiu rozwijania. Bez nich albo skończysz glomming razem różnorodny zestaw pojedynczych bibliotek, aby uzyskać części funkcjonalności (na przykład jQuery BBQ do zarządzania historią, Events.js dla wydarzeń itp.) Lub skończysz budować wszystko sam oraz konieczność samodzielnego utrzymywania i testowania wszystkiego. Porównaj to z czymś takim jak Backbone.js, który ma tysiące ludzi oglądających to na Githubie, setki forków, nad którymi ludzie mogą nad tym pracować, oraz setki pytań, które już zadawano i na które odpowiadano tutaj na temat Przepełnienia stosu.

Ale żadne z nich nie ma żadnego znaczenia, jeśli to, co planujesz zbudować, nie jest wystarczająco skomplikowane, aby było warte krzywej uczenia się związanej z ramami. Jeśli nadal budujesz PHP, Javę lub coś innego, gdzie serwer zaplecza nadal wykonuje ciężkie prace związane z budowaniem stron internetowych na żądanie użytkownika, a JavaScript / jQuery po prostu zwleka z tym procesem, nie jesteś Będziesz potrzebował lub nie jest jeszcze gotowy na Backbone.js.

Szkielet jest ...

... bardzo mała biblioteka komponentów, których możesz użyć do uporządkowania kodu. Jest pakowany jako pojedynczy plik JavaScript. Pomijając komentarze, ma mniej niż 1000 wierszy rzeczywistego JavaScript. Jest rozsądnie napisany i możesz przeczytać całość w ciągu kilku godzin.

Jest to biblioteka typu front-end, którą umieszczasz na swojej stronie internetowej ze znacznikiem skryptu. Wpływa tylko na przeglądarkę i niewiele mówi o twoim serwerze, z tym wyjątkiem, że idealnie powinien udostępniać spokojny interfejs API.

Jeśli masz interfejs API, Backbone ma kilka przydatnych funkcji, które pomogą ci z nim rozmawiać, ale możesz użyć Backbone, aby dodać interaktywność do dowolnej statycznej strony HTML.

Szkielet jest dla ...

... dodając strukturę do JavaScript.

Ponieważ JavaScript nie wymusza żadnych konkretnych wzorców, aplikacje JavaScript mogą bardzo szybko ulec bałaganowi. Każdy, kto stworzył w JavaScripcie coś, co nie jest trywialne, prawdopodobnie spotka się z pytaniami takimi jak:

1. Gdzie będę przechowywać moje dane?
2. Gdzie mam umieścić moje funkcje?
3. Jak połączyć ze sobą moje funkcje, aby były rozsądnie wywoływane i nie zmieniały się w spaghetti?
4. Jak sprawić, by ten kod był możliwy do utrzymania przez różnych programistów?

Szkielet stara się odpowiedzieć na te pytania, zapewniając:

• Modele i kolekcje, które pomogą Ci reprezentować dane i kolekcje danych.
• Widoki, które pomogą Ci zaktualizować DOM w przypadku zmiany danych.
• System zdarzeń, dzięki któremu komponenty mogą się wzajemnie nasłuchiwać. Utrzymuje to odłączenie komponentów i zapobiega spreftyfikacji.
• Minimalny zestaw rozsądnych konwencji, dzięki czemu programiści mogą współpracować na tej samej bazie kodu.

Nazywamy to wzorem MV *. Modele, widoki i opcjonalne dodatki.

Kręgosłup jest lekki

Pomimo początkowego wyglądu Backbone jest fantastycznie lekki, prawie nic nie robi. To, co robi, jest bardzo pomocne.

Daje ci zestaw małych obiektów, które możesz tworzyć i które mogą emitować zdarzenia i słuchać się nawzajem. Możesz na przykład utworzyć mały obiekt do reprezentowania komentarza, a następnie mały obiekt commentView do reprezentowania wyświetlania komentarza w określonym miejscu w przeglądarce.

Możesz powiedzieć commentView, aby odsłuchał komentarz i przerysował się, gdy komentarz się zmieni. Nawet jeśli ten sam komentarz jest wyświetlany w kilku miejscach na stronie, wszystkie te widoki mogą słuchać tego samego modelu komentarzy i być zsynchronizowane.

Ten sposób komponowania kodu pomaga uniknąć splątania, nawet jeśli baza kodu staje się bardzo duża przy wielu interakcjach.

Modele

Na początku często przechowujesz dane w zmiennej globalnej lub w DOM jako atrybuty danych . Oba mają problemy. Zmienne globalne mogą ze sobą kolidować i generalnie mają złą formę. Atrybuty danych przechowywane w DOM mogą być tylko ciągami, trzeba je ponownie przeanalizować. Trudno jest przechowywać rzeczy takie jak tablice, daty lub obiekty oraz analizować dane w uporządkowanej formie.

Atrybuty danych wyglądają następująco:

<p data-username="derek" data-age="42"></p>

Szkielet rozwiązuje to, udostępniając obiekt Model do reprezentowania danych i powiązanych metod . Załóżmy, że masz listę rzeczy do zrobienia, masz model reprezentujący każdy element na tej liście.

Gdy twój model zostanie zaktualizowany, uruchamia zdarzenie. Być może widok jest powiązany z tym konkretnym obiektem. Widok nasłuchuje zdarzeń zmiany modelu i ponownie się renderuje.

Wyświetlenia

Backbone zapewnia widok obiektów, które komunikują się z DOM. Tutaj znajdują się wszystkie funkcje, które manipulują DOM lub nasłuchują zdarzeń DOM.

Widok zazwyczaj implementuje funkcję renderowania, która przerysowuje cały widok lub ewentualnie część widoku. Nie ma obowiązku implementacji funkcji renderowania, ale jest to powszechna konwencja.

Każdy widok jest powiązany z określoną częścią DOM, więc możesz mieć searchFormView, który nasłuchuje tylko formularza wyszukiwania, oraz shoppingCartView, który wyświetla tylko koszyk.

Widoki są zwykle również powiązane z określonymi modelami lub kolekcjami. Po zaktualizowaniu Model uruchamia zdarzenie, którego nasłuchuje widok. Widok może wywołać render w celu ponownego przerysowania.

Podobnie podczas pisania w formularzu widok może aktualizować obiekt modelu. Każdy inny widok słuchający tego modelu wywoła wtedy własną funkcję renderowania.

To zapewnia nam czysty podział problemów, dzięki czemu nasz kod jest czysty i uporządkowany.

Funkcja renderowania

Możesz zaimplementować funkcję renderowania w dowolny sposób, jaki uznasz za odpowiedni. Możesz po prostu wstawić tutaj jQuery, aby ręcznie zaktualizować DOM.

Możesz także skompilować szablon i użyć go. Szablon to tylko ciąg znaków z punktami wstawiania. Przekazujesz go do funkcji kompilacji wraz z obiektem JSON i otrzymujesz skompilowany ciąg, który możesz wstawić do DOM.

Kolekcje

Masz również dostęp do kolekcji, które przechowują listy modeli, więc todoCollection będzie listą modeli todo. Gdy kolekcja zyskuje lub traci model, zmienia jego kolejność lub model w kolekcji aktualizuje się, cała kolekcja uruchamia zdarzenie.

Widok może nasłuchiwać kolekcji i aktualizować się przy każdej aktualizacji kolekcji.

Możesz dodać metody sortowania i filtrowania do swojej kolekcji i na przykład automatycznie sortować.

I wydarzenia, które zawiążą wszystko razem

W miarę możliwości komponenty aplikacji są od siebie oddzielone. Komunikują się za pomocą zdarzeń, więc shoppingCartView może nasłuchiwać do kolekcji shoppingCart i przerysować się, gdy koszyk zostanie dodany.

shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);

Oczywiście inne obiekty również mogą nasłuchiwać koszyka zakupów i mogą wykonywać inne czynności, takie jak aktualizacja sumy lub zapisywanie stanu w pamięci lokalnej.

• Widoki nasłuchują modeli i wyświetlają się po zmianie modelu.
• Widoki nasłuchują kolekcji i wyświetlają listę (lub siatkę, mapę itp.), Gdy zmienia się element w kolekcji.
• Modele nasłuchują widoków, aby mogły zmienić stan, na przykład podczas edytowania formularza.

Oddzielenie obiektów w ten sposób i komunikacja za pomocą zdarzeń oznacza, że ​​nigdy nie będziesz zaplątany w węzły, a dodawanie nowych komponentów i zachowanie jest łatwe. Twoje nowe komponenty muszą tylko słuchać innych obiektów już znajdujących się w systemie.

Konwencje

Kod napisany dla Backbone jest zgodny z luźnym zestawem konwencji. Kod DOM należy do widoku. Kod kolekcji należy do kolekcji. Logika biznesowa wchodzi w model. Inny programista, który odbierze twoją bazę kodu, będzie mógł zacząć działać.

Podsumowując

Backbone to lekka biblioteka, która nadaje strukturę Twojemu kodowi. Komponenty są odsprzężone i komunikują się poprzez zdarzenia, więc nie skończysz w bałaganie. Możesz łatwo rozszerzyć bazę kodu, po prostu tworząc nowy obiekt i odpowiednio słuchając istniejących obiektów. Twój kod będzie czystszy, ładniejszy i łatwiejszy w utrzymaniu.

Moja mała książka

Tak bardzo lubiłem Backbone, że napisałem o tym małą książkę wprowadzającą. Możesz przeczytać go online tutaj: http://nicholasjohnson.com/backbone-book/

Podzieliłem też materiał na krótki kurs online, który można znaleźć tutaj: http://www.forwardadvance.com/course/backbone . Możesz ukończyć kurs w ciągu około jednego dnia.

Oto ciekawa prezentacja:

Wprowadzenie do Backbone.js

Wskazówka (ze slajdów):

• Szyny w przeglądarce? Nie .
• Framework MVC dla JavaScript? Sorta .
• Wielka maszyna do obróbki tłuszczu? TAK !

Backbone.js to framework JavaScript, który pomaga uporządkować kod. Jest to dosłownie kręgosłup, na którym budujesz swoją aplikację. Nie zapewnia widżetów (takich jak jQuery UI lub Dojo).

Daje fajny zestaw klas podstawowych, które można rozszerzyć, aby utworzyć czysty kod JavaScript, który będzie współpracował z punktami końcowymi RESTful na serwerze.

JQuery i Mootools to tylko zestaw narzędzi z wieloma narzędziami twojego projektu. Szkielet działa jak architektura lub kręgosłup dla twojego projektu, na którym możesz zbudować aplikację za pomocą JQuery lub Mootools.

To całkiem niezły film wprowadzający: http://vimeo.com/22685608

Jeśli szukasz więcej na temat Rails and Backbone, Thoughtbot ma tę całkiem dobrą książkę (nie za darmo): https://workshops.thoughtbot.com/backbone-js-on-rails

Muszę przyznać, że wszystkie „zalety” MVC nigdy nie czyniły mojej pracy łatwiejszą, szybszą ani lepszą. To sprawia, że ​​całe doświadczenie w programowaniu jest bardziej abstrakcyjne i czasochłonne. Utrzymanie jest koszmarem przy próbach debugowania kogoś innego, co oznacza separacja. Nie wiem, ilu z was kiedykolwiek próbowało zaktualizować witrynę FLEX, która używała Cairngorma jako modelu MVC, ale aktualizacja może potrwać 30 sekund. Może to potrwać ponad 2 godziny (polowanie / śledzenie / debugowanie tylko w celu znalezienia pojedynczego zdarzenia ). MVC było i nadal jest dla mnie „zaletą”, którą można wypchać.

Oto krótki post „Pierwsze kroki”, który napisałem na BackboneJS. Mam nadzieję, że to pomoże! http://www.infragistics.com/community/blogs/nanil/archive/2013/04/01/exploring-javascript-mv-frameworks-part-1-hello-backbonejs.aspx

backbone.js jest Model-View-Controller (MVC) z JavaScript, ale Extjs lepszy niż szkielet dla MVC Pattern według skryptu Java

Dzięki kręgosłupie masz swobodę robienia prawie wszystkiego, co chcesz. Zamiast próbować przeszukiwać interfejs i dostosowywać, używałbym Backbonejs ze względu na prostotę i łatwość implementacji. Znowu trudno powiedzieć, czego wymaga się od dwóch: biblioteki, innego składnika

Backbone został stworzony przez Jeremy'ego Ashkenasa, który napisał także CoffeeScript. Jako aplikacja obciążająca JavaScript, to, co obecnie znamy jako Backbone, było odpowiedzialne za utworzenie aplikacji w spójną bazę kodu. Underscore.js, jedyna zależność szkieletu, była również częścią aplikacji DocumentCloud.

Sieć szkieletowa pomaga programistom w zarządzaniu modelem danych w aplikacji internetowej po stronie klienta z taką dyscypliną i strukturą, jak w tradycyjnej logice aplikacji po stronie serwera.

Dodatkowe zalety korzystania z Backbone.js

1. Zobacz Szkielet jako bibliotekę, a nie jako szkielet
2. JavaScript jest teraz organizowany w uporządkowany sposób, model (MVVM)
3. Duża społeczność użytkowników

Dodaje także routing przy użyciu kontrolerów i widoków za pomocą KVO. Dzięki temu będziesz mógł tworzyć aplikacje „AJAXy”.

Zobacz to jako lekką ramę Sproutcore lub Cappuccino.

Uwierz mi, to wzór projektowy MVC po stronie klienta. Pozwoli ci to zaoszczędzić mnóstwo kodu, nie wspominając o bardziej czystym i przejrzystym kodzie, łatwiejszym w utrzymaniu. Na początku może to być trochę trudne, ale uwierz mi, że to świetna biblioteka.

Już tyle dobrych odpowiedzi. Backbone js pomaga utrzymać porządek w kodzie. Zmiana modelu / kolekcji zajmuje się automatycznym renderowaniem widoku, co zmniejsza nakład pracy związany z programowaniem.

Mimo że zapewnia maksymalną elastyczność programowania, programiści powinni ostrożnie niszczyć modele i odpowiednio usuwać widoki. W przeciwnym razie może wystąpić wyciek pamięci w aplikacji.

Aplikacja internetowa wymagająca dużej interakcji użytkownika z wieloma żądaniami AJAX, która musi być zmieniana od czasu do czasu i która działa w czasie rzeczywistym (np. Facebook lub StackOverflow), powinna korzystać ze środowiska MVC, takiego jak Backbone.js. To najlepszy sposób na zbudowanie dobrego kodu.

Jeśli aplikacja jest tylko niewielka, to Backbone.js jest nadmierna, szczególnie dla początkujących użytkowników.

Szkielet daje MVC po stronie klienta i wszystkie wynikające z tego korzyści.