Backbone.js i jQuery

Mówi się, że Backbone obsługuje wszystkie abstrakcje wyższego poziomu, podczas gdy biblioteki jQuery lub podobne pracują z DOM, normalizują zdarzenia i tak dalej.

Czy ktoś mógłby mi pomóc zrozumieć to stwierdzenie za pomocą prostego praktycznego przykładu.

Ważną cechą frameworka MVC, takiego jak Backbone, Knockout jest to, że utrzymuje on model (dane) i widok w synchronizacji. Ale wydaje się, że jest to specyficzne na poziomie strony, a nie w całej aplikacji. Czy możemy więc zsynchronizować model / dane i widok na wielu stronach ... (rodzaj globalny)

Backbone / Knockout jest zwykle używany w aplikacjach jednostronicowych. Tak więc, chociaż jQuery to zestaw narzędzi, którego można używać z dowolną stroną internetową, Backbone jest przeznaczony dla określonego typu aplikacji i pomaga zorganizować dla niej kod. Przynajmniej z mojego doświadczenia wynika, że ​​jednym z największych wyzwań podczas tworzenia aplikacji jednostronicowej jest utrzymanie kodu w czystości i modułowości, a szkielet bardzo pomaga w tym.

Cechy typowej aplikacji szkieletowej to:

• Zasadniczo statyczna strona html, na której nic nie jest generowane na serwerze
• Serwer działa jako interfejs API REST json, który udostępnia zawartość aplikacji
• Elementy dom do wyświetlania danych są tworzone za pomocą JavaScript w widokach szkieletu, przy użyciu jQuery i różnych bibliotek szablonów, aby pomóc
• Komunikacja z serwerem, a także między różnymi częściami aplikacji odbywa się za pośrednictwem modeli szkieletowych

Jeśli chodzi o twoje pytanie dotyczące synchronizacji danych na wielu stronach, odruchowo odpowiadam, że nie potrzebujesz wielu stron: użytkownik może zauważyć, że strona się zmienia, adres w pasku adresu URL zmienia się dzięki funkcji pushState, ale technicznie rzecz biorąc, cała aplikacja to jedna strona.

Największymi zaletami tego rodzaju podejścia są płynne wrażenia użytkownika (brak przeładowywania stron), dobra obsługa buforowania, ponieważ wszystko oprócz danych json jest treścią statyczną, w przypadku celów mobilnych możliwość przekształcenia aplikacji internetowej w aplikację mobilną z phoneGap (ponieważ wszystko oprócz json jest statyczne).

Twoje zdanie początkowe było właściwie bardzo dobrym stwierdzeniem różnic między Backbone.js i jQuery, więc rozpakujmy to trochę.

Po pierwsze, obie biblioteki wcale nie konkurują - są komplementarne.

Jako przykład, oto kilka rzeczy, które zrobiłbym z jQuery:

• Animowane pokazy slajdów
• Ulepszenia kontroli formularzy, np. „Pokrętło” liczb w stylu iOS
• Przełączanie widoczności elementów na podstawie nazwy klasy

I kilka rzeczy, które mogę zrobić w Backbone.js:

• Utwórz album ze zdjęciami, w którym użytkownik klika miniaturę i może wyświetlić większą wersję zdjęcia wraz z niektórymi danymi, takimi jak używany aparat, lokalizacja i nazwisko fotografa
• Zbuduj stronę typu wzorzec / szczegóły, która prezentuje siatkę danych i umożliwia użytkownikowi klikanie poszczególnych elementów i aktualizowanie ich w formularzu.

jQuery wyróżnia się na poziomie mikro - wybierając elementy strony, niwelując różnice w sposobie obsługi zdarzeń przez przeglądarki.

Backbone.js to szerszy obraz. Pomaga w zarządzaniu danymi i logiką aplikacji. W powyższym przykładzie albumu ze zdjęciami Backbone zapewnia kilka przydatnych struktur: miałbyś coś, co zawierałoby wszystkie dane związane ze zdjęciami (model), listę wszystkich zdjęć w albumie (kolekcja) i miejsce do umieszczenia logika określająca, co się stanie, gdy użytkownik kliknie miniaturę (widok). To są główne elementy kontrolki lub aplikacji Backbone.

Backbone.js korzysta jednak z jQuery lub czegoś podobnego, aby pomóc w renderowaniu wyników danych i logiki aplikacji do DOM. Na przykład często używa się jQuery do wybierania elementu na stronie, który będzie służył jako kontener dla aplikacji Backbone. Często używa się także jQuery $(function () {});do odpalania elementów kontrolki Backbone. Prawdopodobnie wyświetliłbyś również komunikaty o błędach walidacji pól formularza z jQuery.

Z pewnością w jQuery można budować duże, złożone interfejsy użytkownika. Mamy kilka w aplikacji, którą utrzymuję w pracy. Jednak trudno jest z nimi pracować, ponieważ jQuery nie jest przeznaczony do zapewniania struktury aplikacji. W szczególności API jQuery, które opiera się na wybieraniu grup elementów, a następnie przekazywaniu funkcji zwrotnych, które manipulują tymi elementami, nie jest dobrym wzorcem do użycia w dużej, złożonej kontrolce lub aplikacji. Otrzymujesz wiele zagnieżdżonych funkcji i bardzo trudno jest zobaczyć, co się dzieje.

Obecnie przerabiam jedną z tych kontrolek w Backbone.js. Jako ostatni przykład, oto krótkie podsumowanie tego, jak mój proces myślowy różni się podczas pracy nad tym samym formantem w obu różnych bibliotekach.

W jQuery martwię się o:

• Czy używam prawego selektora, aby pobrać grupę lielementów, które chcę?
• Czy muszę ponownie wypełnić tę listę wartości po zakończeniu tego wywołania Ajax?
• Jak mogę umieścić te wartości tablicowe z powrotem w inputelementach na stronie?

W Backbone bardziej skupiam się na:

• Jaka jest prawidłowa logika sprawdzania tego zestawu właściwości w elemencie modelu?
• Kiedy użytkownik kliknie przycisk Dodaj, czy powinienem natychmiast dodać nowy element do kolekcji, czy powinienem zaczekać, aż wypełnią wszystkie dane i będą „prawidłowe”?
• Jak powinien reagować element w mojej kolekcji, gdy element bezpośrednio przed lub po usunięciu?

jQuery obsługuje najdrobniejsze szczegóły, a Backbone jest bardziej zaawansowany.

Na zakończenie zauważ, że podczas omawiania przykładów Backbone.js użyłem słów „kontrola” i „aplikacja”. Nie jest prawdą, że Backbone.js jest przeznaczony tylko dla aplikacji jednostronicowych. Prawdą jest jednak, że Backbone.js jest dobry do tworzenia złożonych aplikacji, które manipulują danymi i obsługują wiele logiki. Głupio byłoby używać go do elementów interfejsu użytkownika na małą skalę - dodatkowa struktura, którą narzuca, nie jest potrzebna.

Aktualizacja: jeśli chodzi o problem wielu stron, tak, Backbone zapewnia potężny mechanizm utrwalania danych. Każdy model ma savemetodę, która wykona wywołanie AJAX w celu zapisania zmian na serwerze. Tak długo, jak długo zapisujesz swoje dane, możesz mieć aplikację wielostronicową. To bardzo elastyczny model i prawdopodobnie w ten sposób będziemy używać Backbone w pracy. Chociaż chciałbym stworzyć aplikację jednostronicową, mamy 10 lat pracy nad naszą istniejącą aplikacją wielostronicową. Chcemy odbudować niektóre z naszych bardziej zaawansowanych komponentów interfejsu użytkownika w Backbone, a następnie zsynchronizować zmiany z serwerem, zanim użytkownik przejdzie na inną stronę.

Nigdy nie słyszałem o ludziach używających backbone.js na wielu stronach. Prawie zawsze jest to aplikacja jednostronicowa.

Pojedyncza strona może mieć wiele różnych modeli, widoków i stanów i może skutkować w pełni rozwiniętą, potężną aplikacją.

Jeśli masz już renderowanie szablonu / widoku po stronie serwera w java, to backbone.js NIE jest dla Ciebie. Aby jak najlepiej wykorzystać backbone.js, musisz przenieść lub zduplikować część tego kodu w javascript frontendu.

Jeśli nie chcesz tworzyć aplikacji z pojedynczą stroną (oznacza to po prostu aplikację bez odświeżania strony lub zmian, ale adres URL może nadal się zmieniać i może wyglądać jak wiele stron dla użytkownika), możesz zachować wszystkie swoje MVC włączone serwer i nie potrzebujesz sieci szkieletowej.

Edytować:

To, co robi szkielet, to przenoszenie niektórych rzeczy MVC normalnie obsługiwanych na serwerze i przenoszenie ich do klienta. Dla wielu oznacza to zapomnienie o serwerze i napisanie aplikacji jako aplikacji javascript o pojedynczej stronie. Serwer staje się po prostu źródłem danych JSON / REST. Jeśli nie jesteś na to przygotowany, plik backbone.js nie jest tak przydatny.

Backbone to framework MV *, podczas gdy jQuery to zestaw narzędzi DOM.

Główne cechy aplikacji MV * to routing, powiązanie danych, szablony / widoki, modele i dostęp do danych. Backbone może częściowo zależeć od jQuery.

jQuery to solidne API do wysyłania zapytań do DOM z rozbudowaną obsługą przeglądarek i aktywną społecznością. Obejmuje obsługę zdarzeń, odroczone obiekty i animacje.

Proste wiązanie zdarzeń przy użyciu jQuery

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});