10 aplikacji internetowych wykonanych za pomocą Backbone.js [Case Study]
Czy kiedykolwiek uwikłałeś się w kod spaghetti? Czy wolisz nakarmić swoją aplikację czymś zdrowszym? Jeśli tak, zajrzyj do tego, co można osiągnąć za pomocą Backbone.js. Kręgosłup jest biblioteką JavaScript, która jest luźno oparta na wzorcu projektowym Model-View-Kontroler, ale ponieważ nie ma elementu Controller, lepiej nazwać ją frameworkiem MV *.
To pomaga budować szybki, elegancki i bogaty w dane jednostronicowe aplikacje internetowe, zachowują Twoje logika danych oddzielona od interfejsu użytkownika, oszczędza ci wiązania danych z DOM i skaluje się wraz z rozwojem aplikacji. Ponieważ Backbone synchronizuje się domyślnie z dowolnym API RESTful, można łatwo połączyć aplikację po stronie klienta z istniejącym interfejsem API po stronie serwera za pomocą interfejsu RESTful JSON.
W tym poście będziemy studiować 10 aplikacji internetowych, które wykorzystują funkcje biblioteki Backbone, aby pomóc Ci zrozumieć potencjalne możliwości Backbone.js w przyszłych projektach aplikacji internetowych.
1. Trello
Trello to aplikacja do współpracy online i zarządzania projektami, która pomaga organizować projekty w tablice, listy kontrolne, karty, listy kart i udostępnia narzędzia, takie jak konwersacje dla komunikacji członków zespołu.
Trello został zbudowany od podstaw dzięki Backbone.js. Backbone współpracuje z interfejsem API historii HTML5 i językiem szablonów bez logiki Mustache na interfejsie. Wszystkie elementy Trello Tech Stack zostały zaprojektowane w sposób, który zaowocował programowalny klient, który z łatwością obsługuje aktualizacje, i dynamicznie ponownie synchronizuje się z serwerem za każdym razem, gdy wyzwalane jest zdarzenie DOM.
Trello wykorzystuje Model szkieletowy i Widoki dla swoich obiektów, takich jak Karty lub Członkowie, i Kolekcje kręgosłupa dla powiązanych modeli - na przykład Karty na liście. Twórcy również zbudował własną pamięć podręczną modelu po stronie klienta dla szybsze aktualizacje i więcej wydajne ponowne wykorzystanie kodu.
2. Foursquare
Najprawdopodobniej już o tym słyszałeś Foursquare, popularna aplikacja społecznościowa oparta na lokalizacji, która umożliwia udostępnianie obiektów znajomym na całym świecie.
Podstawowy interfejs API JavaScript Foursquare jest zbudowany wokół modeli szkieletowych, gdzie Klasy modeli API Foursquare (takie jak Użytkownicy, Miejsca i Meldunki) są podklasami klas Modelu szkieletowego i odziedziczyć ich metody i właściwości.
Wdrożenie kodu można naszkicować w następujący sposób: fourSq.api.models.Venue = fourSq.api.models.Model.extend (…); Tak, to prawda, Backbone umożliwia programistom napisz ładny obiektowy JavaScript.
Widoki kręgosłupa mają również swoją rolę w aplikacji Foursquare, ponieważ zwiększają komfort korzystania z takich funkcji mapy i listy stron głównych. Inne niż Backbone, API JavaScript Foursquare również korzysta jQuery, Underscore.js (która jest jedyną twardą zależnością Backbone) i kompilatorem zamknięcia.
3. Kalendarz Basecamp
Basecamp, popularna aplikacja do zarządzania projektami wykorzystuje Backbone.js do funkcji kalendarza.
Głównym celem projektu Basecamp Calendar było stworzenie interaktywnego interfejsu, który tworzy intuicyjne planowanie grup możliwe i aktualizuje się w milisekundach. W Basecamp Calendar Backbone renderuje widoki w szablony ECO (Embedded CoffeeScript) zawsze, gdy modele (dane po stronie klienta) są aktualizowane.
Warto zauważyć, że zespół programistów nie uczynił całej aplikacji Basecamp jednostronną aplikacją, która jest podstawowym przypadkiem użycia Backbone.js, ale wykorzystał tylko bibliotekę w funkcji Kalendarz, gdzie mogli naprawdę wykorzystać jej zalety. Po prostu pokazuje, że niekoniecznie musisz zbudować pełną, jednostronicową aplikację z Backbone; lepiej dokładnie przemyśleć, gdzie można go zastosować.
Dowiedz się więcej na temat wzorców sieci szkieletowych, aby zdecydować, czy potrzebujesz Backbone dla całej aplikacji, czy nie.
4. Flowdock
Flowdock to aplikacja do komunikacji zespołowej w czasie rzeczywistym, która zapewnia funkcje takie jak czat grupowy, skrzynki zespołowe i przepływy pracy w czasie rzeczywistym
Flowdock został zbudowany od podstaw na szczycie Backbone.js. Głównym wyzwaniem zespołu programistów było umożliwienie przesyłania wiadomości i przepływów pracy w czasie rzeczywistym. Domyślnie Backbone.js łączy się ze stroną serwera za pośrednictwem interfejsu RESTful, co nie umożliwia przepływu danych w czasie rzeczywistym. Dlatego twórcy postanowił zapisać wiadomości za pomocą silnika czasu rzeczywistego Socket.io zamiast API REST.
Aby to osiągnąć, oni napisał niestandardową metodę nazywa Backbone.sync. Ponieważ Socket.io jest także biblioteką JavaScript, sprawia, że komunikacja między frontendem JavaScript i backendem (Node.js) jest płynna. Flowdock to przede wszystkim aplikacja Rails po stronie serwera, ale mają oddzielny backend Node.js, który obsługuje połączenia Socket.io.
Flowdock poprawia wrażenia użytkownika w czasie rzeczywistym jeszcze bardziej dzięki Bacon.js, poręcznej bibliotece JavaScript, która umożliwia funkcjonalne programowanie reaktywne. Funkcja EventStreams w Bacon.js pomaga Flowdock aktualizować swój model szkieletowy i kolekcje.
5. Wyszukiwanie koktajlowe
Wyszukiwanie koktajlowe to aplikacja o otwartym kodzie źródłowym, która daje szansę przyjrzenia się kodowi bardzo prostej implementacji Backbone.js. Backend jest obsługiwany przez Pythona, ale interesuje nas plik script.js aplikacji.
Jeśli przeanalizujesz kod, zobaczysz bardzo podstawową strukturę frameworka Model-View: * zawiera ona jedną Model zdefiniowane w Koktajl klasa, która nie zmienia domyślnych ustawień klasy macierzystej Backbone.Model, jeden Kolekcja kręgosłupa w przypadku wyników wyszukiwania i 3 widoków szkieletowych każdy z nich dodaje nowe metody do Backbone.View klasa macierzysta.
Jeśli spojrzysz na plik index.html, możesz dowiedzieć się, jak deweloper dodał Backbone.js i jego zależności, Underscore.js i jQuery w sekcji głowy. Underscore.js jest jedyną twardą zależnością Backbone, podczas gdy jQuery jest potrzebna jeśli chcesz manipulować DOM za pomocą widoków kręgosłupa (tak jest w przypadku aplikacji Cocktail Search).
6. Bitbucket
Bitbucket to hosting kodu źródłowego i aplikacja do zarządzania kodem podobna do Github. Atlassian, firma, która za nim stoi, używa Backbone w komercyjnym oprogramowaniu do śledzenia problemów JIRA, ich drugim głównym produkcie.
Podczas dokładnego wykorzystania Backbone.js w swoich aplikacjach, zespół programistów znalazł kilka rzeczy, których brakowało w Backbone. Napotkali wiele cichych awarii spowodowanych przez luźne konwencje definicji Backbone.js. Oznacza to zasadniczo, że Modele, Kolekcje i Widoki niekoniecznie określają niestandardowe zdarzenia, które ujawniają. A gdyby tego było mało, modele nie zawsze definiują atrybuty ujawniają się.
Ta permisywna natura jest cechą kochaną przez wielu programistów, ale nie przez zespół Atlassian, więc opracowali własne rozszerzenie Backbone o nazwie Backbone.Brace, które dodaje do biblioteki miksy i samodokumentowane atrybuty i zdarzenia.
Jeśli denerwuje cię to samo, możesz dodać Backbone.Brace do własnej aplikacji, ponieważ jest to projekt open-source hostowany na samym Bitbucket. BitBucket używa języka szablonów Mustache tak jak Trello do renderowania widoków szkieletowych na interfejsie.
7. SoundCloud
SoundCloud to popularna platforma dystrybucji dźwięku, na której można nagrywać, przesyłać i udostępniać własne audio lub słuchać muzyki za darmo.
Programiści SoundCloud użyli Backbone.js jako pierwszego frontendu swojej aplikacji mobilnej, ale spodobało im się to tak bardzo, że wykorzystali je również po stronie klienta swojej witryny internetowej. W swoim blogu Backstage wyjaśniają, w jaki sposób wybierają framework z umiejętnością Backbone zapewniają solidne podstawy strukturalne, a jednocześnie pozostają elastyczne.
Skalowanie jest głównym problemem dla aplikacji strumieniowej audio, a SoundCloud to potwierdza “ma więcej wspólnego z organizacją niż wdrożeniem” co sprawia, że dobrze zorganizowany, ale lekki szkielet jest idealnym wyborem dla nich.
SoundCloud korzysta z semantycznego systemu szablonów Handlebars do renderowania widoków szkieletowych na interfejsie.
8. AirBnB
AirBnB to szalenie udany rynek społecznościowy, na którym można znaleźć i zarezerwować różne rodzaje zakwaterowania w prawie 200 krajach na całym świecie
AirBnB po raz pierwszy użył Backbone.js w swojej aplikacji mobilnej, podobnie jak SoundCloud, ale później wykorzystywał ją coraz częściej w swoich funkcjach aplikacji internetowych, takich jak Wishlists, Match, Search, Communities i Payments. AirBnB kochał Backbone tak bardzo, że nie tylko zdecydował się na użycie go na interfejsie, ale także chciał umożliwić uruchomienie biblioteki na zapleczu.
Oni później stworzyli swoją bibliotekę Backbone po stronie serwera, Rendr, open source i dostępne na stronie Github. Rendr jest napisany w Node.js i jest zgodny z filozofią “imponująca minimalna struktura, pozwalająca programistom na korzystanie z biblioteki w najbardziej odpowiedni sposób dla ich aplikacji” podobnie jak sam kręgosłup
Jeśli interesuje Cię więcej technologii AirBnB, przeczytaj ich wpis na blogu o ich podróży z backendu Rails do Świętego Graala jednoczesne wykorzystanie Backbone zarówno po stronie klienta, jak i serwera.
9. Hulu
Hulu to aplikacja do strumieniowego przesyłania wideo, która umożliwia oglądanie programów telewizyjnych i filmów za darmo, jeśli znajdujesz się w USA.
Hulu skorzystał z Backbone.js, aby stworzyć bezproblemową i szybką obsługę dla miłośników filmów. Interfejs umożliwia szybkie poruszanie się po aplikacji z delikatnymi przejściami podczas nawigacji. Kręgosłup oszczędza przepustowość dla użytkowników jako skrypty i osadzone filmy nie ładuj się ponownie cały czas.
Hulu uruchamia silnik Rails na zapleczu, a jeśli lubisz zabawne, ale pouczające rozmowy, możesz o tym przeczytać jak zespół programistów uwikłał się w jQuery przed podjęciem decyzji o zmianie na bardziej zorganizowana struktura szkieletowa.
Backbone.js pozwolił Hulu na przyrostowo konwertuj ich renderowanie ze strony serwera na stronę klienta zamiast ryzykownego przepisywania istniejącego zaplecza Railsów.
10. Odliczanie
Odliczanie to mobilna aplikacja analityczna działająca w czasie rzeczywistym, która umożliwia śledzenie wydajności aplikacji na iPhone'a, Androida lub Windows Phone bezpośrednio z okna przeglądarki.
Spójrz na niezwykłą listę oprogramowania open source, które zostało użyte do stworzenia platformy, w tym supergwiazdy z ostatnich lat: Nginx, MongoDB, Node.js po stronie serwera i oczywiście Backbone.js dla frontendu.
Countly wykorzystuje bibliotekę semantycznych szablonów Handlebars do renderowania widoków szkieletowych wyświetlających dane przygotowane i załadowane za pomocą modeli szkieletowych. Countly to aplikacja przyjazna programistom: jest nie tylko łatwa do rozszerzenia, ale jej dokumentacja zapewnia również programistom takie samouczki jak ten jak zbudować niestandardowe wtyczki na głównym kliencie Backbone.
Nota redaktora: Jest to napisane przez Annę Monus dla Hongkiat.com. Anna jest twórcą stron internetowych i twórcą kodu, zainteresowanym nauką, sztuczną inteligencją i przełomowymi technologiami.
