Jaki jest cel kręgosłupa.js?

Jeśli zamierzasz budować złożone interfejsy użytkownika w przeglądarce, prawdopodobnie znajdziesz się w końcu wymyślając większość elementów, które składają się na frameworki takie jak Backbone.js i Sammy.js. Więc pytanie brzmi, czy budujesz coś na tyle skomplikowanego w przeglądarce, aby zasługiwać na korzystanie z niego (więc nie skończysz wymyślając to samo samodzielnie).

Jeśli to, co planujesz zbudować, jest czymś, gdzie interfejs regularnie zmienia sposób wyświetlania , ale nie idzie do serwera, aby uzyskać całe nowe strony wtedy prawdopodobnie potrzebujesz czegoś takiego jak kręgosłup.js czy Sammy.js. Kardynalnym przykładem czegoś takiego jest Gmail Google. Jeśli kiedykolwiek go używałeś, zauważysz, że pobiera jeden duży kawałek HTML, CSS i JavaScript podczas pierwszego logowania, a następnie wszystko dzieje się w tle. Może poruszać się między czytaniem wiadomości e-mail a przetwarzaniem skrzynki odbiorczej i wyszukiwaniem i przeglądaniem wszystkich ponownie bez pytania o zupełnie nową stronę renderowane.

Jest to rodzaj aplikacji, które te frameworki wyróżniają się w ułatwianiu tworzenia. Bez nich albo skończysz glomming razem różnorodny zestaw poszczególnych bibliotek, aby uzyskać części funkcjonalności (na przykład, jQuery BBQ do zarządzania historią, wydarzenia.js na imprezy itp.) albo sam wszystko zbudujesz i będziesz musiał sam wszystko utrzymywać i testować. Kontrast z czymś w rodzaju kręgosłupa.js, który ma tysiące ludzi oglądających go na Github, setki forków, w których ludzie mogą nad tym pracować, oraz setki pytań już zadanych i odpowiedzi tutaj na Stack Overflow.

Ale nic z tego nie ma znaczenia, jeśli to, co planujesz zbudować, nie jest wystarczająco skomplikowane, aby było warte krzywej uczenia się związanej z frameworkiem. Jeśli nadal budujesz PHP, Java lub coś innego, gdzie serwer zaplecza nadal wykonuje ciężkie prace związane z budowaniem stron internetowych na żądanie użytkownika, a JavaScript / jQuery jest po prostu wisienka na tym procesie, nie będziesz potrzebował lub nie jesteś jeszcze gotowy na kręgosłup.js.

Kręgosłup jest...

...bardzo mała biblioteka komponentów, których możesz użyć do uporządkowania kodu. Jest pakowany jako pojedynczy plik JavaScript. Wyłączając komentarze, ma mniej niż 1000 linii rzeczywistego JavaScript. Jest sensownie napisane i można przeczytać całość w kilka godzin.

To biblioteka front-end, umieszczasz ją na swojej stronie internetowej z tagiem script. Wpływa tylko na przeglądarkę i niewiele mówi o Twoim serwerze, poza tym, że powinien idealnie Udostępnij restful API.

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

Kręgosłup jest dla...

...dodawanie struktury do JavaScript.

Ponieważ JavaScript nie wymusza żadnych konkretnych wzorców, Aplikacje JavaScript mogą stać się bardzo niechlujne bardzo szybko. Każdy, kto zbudował coś poza trywialne w JavaScript będzie prawdopodobnie uruchomić przeciwko pytania takie jak:

1. gdzie będę przechowywać moje dane?
2. gdzie umieszczę moje funkcje?
3. Jak połączyć moje funkcje, aby były wywoływane w rozsądny sposób i nie zamieniały się w spaghetti?
4. Jak mogę sprawić, by ten kod był możliwy do utrzymania przez różnych programistów?

Backbone stara się odpowiedzieć na te pytania dając:

• modele i kolekcje, które pomogą Ci reprezentować Dane i zbiory danych.
• Views, to pomoże Ci zaktualizować DOM, gdy zmienią się Twoje dane.
• System zdarzeń, dzięki któremu komponenty mogą się nawzajem słuchać. Dzięki temu Twoje komponenty są odłączane od siebie i zapobiegają spaghettyzacji.
• minimalny zestaw rozsądnych konwencji, więc programiści mogą pracować razem na tej samej bazie kodowej.

Backbone is light

Pomimo początkowych pozorów, kręgosłup jest fantastycznie lekki, prawie nie cokolwiek. To, co robi, jest bardzo pomocne.

Daje Ci zestaw małych obiektów, które możesz tworzyć, i które mogą emitować wydarzenia i słuchać siebie nawzajem. Możesz utworzyć na przykład 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 masz ten sam komentarz wyświetlane w kilku miejscach na stronie wszystkie te widoki mogą słuchać tego samego modelu komentarza i być zsynchronizowane.

Ten sposób komponowania kodu pomaga uniknąć zaplątania się, nawet jeśli baza kodu staje się bardzo duża z wieloma interakcjami.

Modele

Na początku, to jest powszechne, aby przechowywać dane albo w zmiennej globalnej, lub w DOM jako atrybuty danych . Oba mają problemy. Zmienne globalne mogą być ze sobą sprzeczne i są ogólnie zła forma. Atrybuty danych przechowywane w DOM mogą być tylko ciągami znaków, będziesz musiał je przeanalizować ponownie. Trudno jest przechowywać takie rzeczy, jak tablice, daty lub obiekty, a także analizować dane w ustrukturyzowanej formie.

Atrybuty danych wyglądają tak:

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

Backbone rozwiązuje to poprzez dostarczenie obiektu Modelu do reprezentowania danych i powiązanych metod. Powiedzmy, że masz listę todo, będziesz miał model reprezentujący każdy element na tej liście.

Gdy twój model zostanie zaktualizowany, zostanie wywołane zdarzenie. Możesz mieć widok związany z tym konkretnym obiektem. Widok nasłuchuje zdarzeń zmiany modelu i ponownie renderuje się.

Views

Backbone zapewnia obiekty widoku, które rozmawiają z DOM. Wszystkie funkcje, które manipulują DOM lub nasłuchują zdarzeń DOM, znajdują się tutaj.

Widok zazwyczaj implementuje funkcję renderowania, która przerysowuje cały widok lub jego część. Nie ma obowiązku realizacji Funkcja render, ale to wspólna konwencja.

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

Widoki są zazwyczaj powiązane z konkretnymi modelami lub kolekcjami. Gdy Model zostanie zaktualizowany, zostanie wywołane zdarzenie, którego widok nasłuchuje. Widok może wywołać render do samego przerysowania.

Podobnie, kiedy wpisujesz do formularza, Twój Widok może aktualizować obiekt modelu. Każdy inny widok słuchający tego modelu wywoła następnie własną funkcję renderowania.

To daje nam czysty rozdział obaw, który utrzymuje nasz kod schludny i uporządkowany.

Funkcja renderowania

Możesz zaimplementować swoją funkcję renderowania w dowolny sposób. Możesz po prostu umieścić jQuery tutaj, aby ręcznie zaktualizować DOM.

Możesz również skompilować szablon i go użyć. Szablon jest tylko ciągiem znaków z punktami wstawiania. Zdasz to do funkcji kompilacji wraz z obiektem JSON i uzyskać z powrotem skompilowany ciąg znaków, które można wstawić do domu.

Kolekcje

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

Widok może odsłuchać kolekcję i aktualizować się za każdym razem, gdy kolekcja aktualizacje.

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

I Wydarzenia, aby wszystko połączyć

W miarę możliwości elementy aplikacji są oddzielone od siebie. Komunikują się za pomocą zdarzeń, więc widok shoppingCartView może nasłuchiwać kolekcji shoppingCart i ponownie rysować się po dodaniu koszyka.

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

Oczywiście, inne obiekty mogą również słuchać shoppingCart, jak również, może również wykonywać inne czynności, takie jak aktualizowanie całości lub zapisywanie stanu w pamięci lokalnej.

• widoki odsłuchują modele i renderują, gdy Model się zmieni.
• widoki słuchaj kolekcji i Renderuj listę (lub siatkę, mapę itp.), gdy element w kolekcji ulegnie zmianie.
• modele słuchają widoków, aby mogły zmieniać stan, być może po edycji formularza.

Odsprzęganie obiektów w ten sposób i komunikowanie się za pomocą zdarzeń oznacza, że nigdy nie zostaniesz splątany w węzłach, a dodawanie nowych komponentów i zachowanie jest łatwe. Twoje nowe komponenty muszą tylko słuchać innych obiektów już w systemie.

Konwencje

Kod napisany dla szkieletu jest zgodny z luźnym zestawem konwencji. Kod DOM należy do widoku. Kod kolekcji należy do kolekcji. Logika biznesowa idzie w modelu. Inny programista odbierający twoją bazę kodową będzie mógł zacząć działać.

Do podsumowania

Backbone to lekka biblioteka, która nadaje strukturę twojemu kodowi. Komponenty są odsprzęgane i komunikują się za pomocą zdarzeń, dzięki czemu nie skończysz w bałaganie. Możesz łatwo rozszerzyć bazę kodu, po prostu tworząc nowy obiekt i odpowiednio nasłuchując istniejących obiektów. Twój kod będzie czystszy, ładniejszy i łatwiejszy do utrzymania.

Moja mała książeczka

Tak mi się podobał kręgosłup, że napisałem o nim małą wstępną książkę. Możesz go przeczytać online tutaj: http://nicholasjohnson.com/backbone-book/

Podzieliłem również 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 jednego dnia.

Oto ciekawa prezentacja:

Wstęp do kręgosłupa.js

Podpowiedź (ze slajdów):

• Rails w przeglądarce? NIE .
• Framework MVC dla JavaScript? tak jakby .
Wielka, Gruba maszyna Państwowa? Tak!

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

To daje fajny zestaw klas bazowych, które można rozszerzyć, aby stworzyć czysty kod JavaScript, który łączy się z RESTful endpoints na serwerze.

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

To całkiem dobry filmik wprowadzający: http://vimeo.com/22685608

Jeśli szukasz więcej o Railach i kręgosłupie, Thoughtbot ma tę całkiem dobrą książkę (nie darmową): https://workshops.thoughtbot.com/backbone-js-on-rails

Muszę przyznać, że wszystkie "zalety" MVC nigdy nie uczyniły mojej pracy łatwiejszą, szybszą lub lepszą. To sprawia, że całe doświadczenie kodowania jest bardziej abstrakcyjne i czasochłonne. Konserwacja jest koszmarem, gdy próbuje debugować kogoś, co oznacza separacja. Nie wiem, ilu z was próbowało kiedykolwiek zaktualizować stronę FLEX, która używała Cairngorm jako modelu MVC, ale co powinno zająć 30 sekund, aby zaktualizować może często zająć ponad 2 godziny (polowanie/śledzenie/debugowanie tylko aby znaleźć pojedyncze zdarzenie). MVC był i nadal jest dla mnie "zaletą", którą można wypchać.

Oto szybki początek postu, 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

Kręgosłup.js to Model-View-Controller (MVC) with JavaScript ale Extjs lepszy niż backbone for MVC Pattern by java script

Z kręgosłupem masz wolność, aby zrobić prawie wszystko, czego chcesz. Zamiast próbować fork przez api i dostosować chciałbym użyć Backbonejs dla jego prostoty i łatwości implementacji. Ponownie trudno powiedzieć, co wymaga z dwóch jeden jest biblioteka inny komponent

Backbone został stworzony przez Jeremy ' ego Ashkenasa, który również napisał CoffeeScript. Jako aplikacja o dużej zawartości JavaScript, to, co obecnie znamy jako Backbone, było odpowiedzialne za strukturyzację aplikacji w spójną bazę kodu. Podkreślam.js, jedyna zależność szkieletu, była również częścią aplikacji DocumentCloud.

Dodatkowe korzyści z używania Backbone.js

1. Patrz szkielet jako biblioteka, nie jako framework
2. Javascript jest teraz uporządkowany w sposób zorganizowany, model (MVVM)
3. duża społeczność użytkowników

Dodaje również routing za pomocą kontrolerów i widoków z KVO. Dzięki niemu będziesz mógł tworzyć aplikacje "AJAXy".

Zobacz to jako lekki Framework Sproutcore lub Cappuccino.

Jest wzorcem projektowym MVC po stronie klienta, uwierz mi.. Zaoszczędzi Ci 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, to świetna biblioteka.

Tyle już dobrych odpowiedzi. Backbone js pomaga utrzymać porządek w kodzie. Zmiana modelu / kolekcji zajmuje się automatycznym renderowaniem widoku, co zmniejsza koszty rozwoju.

Mimo że zapewnia maksymalną elastyczność w rozwoju, programiści powinni uważać, aby zniszczyć modele i usunąć widoki prawidłowo. W przeciwnym razie może dojść do wycieku pamięci w aplikacji.

Aplikacja internetowa wymagająca wielu interakcji użytkownika z wieloma żądaniami AJAX, które muszą być zmieniane od czasu do czasu i które działają w czasie rzeczywistym (np. Facebook lub StackOverflow) powinna używać frameworka MVC, takiego jak Backbone.js. To najlepszy sposób na zbudowanie dobrego kodu.

Jeśli aplikacja jest tylko mała, tojs to przesada, szczególnie dla pierwszych użytkowników.

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