[JS] Tworzymy aplikację JS z wykorzystaniem Backbone.js, część 1 – Zapoznanie z frameworkiem

Dzisiejszy wpis będzie początkiem serii wpisów dotyczących tworzenia aplikacji internetowych z wykorzystaniem języka JavaScript. Celem serii będzie zapoznanie się z frameworkiem Backbone.js a także zapoznanie się z metodologią tworzenia aplikacji webowych.

Aplikacja, którą będziemy tworzyć, będzie miała na celu agregowanie informacji z różnych sieci społecznościowych takich jak Twitter i Facebook, a także pomoże nam w zamieszczaniu informacji na swoich profilach użytkownika w tychże sieciach.

Uwaga z 2026 roku. Ten wpis powstał w wrześniu 2013 roku, gdy obowiązującym standardem języka był ECMAScript 5 — bez klas, modułów, funkcji strzałkowych i obietnic, które dziś uchodzą za oczywistość. Kod celowo pozostaje w konwencji swoich czasów. Opisane wersje API Twittera i Facebooka od dawna nie istnieją, więc traktuj ten tekst jako zapis ówczesnego podejścia do budowy aplikacji, a nie jako instrukcję do wdrożenia. Poprawione zostały wyłącznie błędy rzeczowe oraz fragmenty kodu uszkodzone przez wtyczkę działającą na blogu.

Sekcja 1Czym jest Backbone.js?

Backbone.js jest to framework MV*, który zapewnia tak zwane "jądro aplikacji", czyli:

• obsługę modeli,
• obsługę kolekcji modeli,
• obsługę zdarzeń,
• obsługę widoków,
• obsługę routingu.

Zapewnia tylko tyle i aż tyle. Na bazie takiego frameworka jesteśmy w stanie utworzyć aplikację internetową wg własnego pomysłu i z własnoręcznie zaprojektowanymi funkcjonalnościami. Nie jesteśmy w zasadzie ograniczeni niczym innym poza szkieletem aplikacji opierającym się na trzech najważniejszych rzeczach: modelach, kolekcjach i widokach.

Modele są kontenerami pojedynczej jednostki informacyjnej, np. newsa czy też osoby. Można je tworzyć, walidować (sprawdzać poprawność ich danych), usuwać i zapisywać na serwerze pełniącym rolę bazy danych.
Kolekcje są zbiorami modeli, czyli na przykład kategorią newsów czy też zbiorem osób o określonych umiejętnościach.
Natomiast, widoki są formą prezentacyjną obecnego stanu modeli, to za ich pomocą użytkownik jest w stanie zobaczyć jakie dane zawiera model, a także wykonać na nich różnego rodzaju widoczne operacje.

Backbone.js jest to projekt o otwartym kodzie źródłowym i można go pobrać bezpośrednio z Githuba (gdzie można w razie chęci wspomóc autorów projektu przy rozwoju nowych funkcjonalności frameworka).

Sekcja 2Backbone.js i jego kompania

Backbone.js nie działa samodzielnie. Underscore.js (albo zgodny z nim lodash.js) jest jego twardą zależnością — bez tej biblioteki framework się nie uruchomi. Backbone korzysta z niej wewnętrznie do operacji na kolekcjach oraz do systemu szablonów.

jQuery lub Zepto są natomiast opcjonalne. Backbone sięga po nie wtedy, gdy trzeba operować na drzewie DOM, obsłużyć zdarzenia albo wysłać żądanie AJAX — czyli w praktyce zawsze, gdy budujemy widoki. Autorzy frameworka wyszli z założenia, że jQuery i tak znajduje się na ogromnej liczbie stron, więc jego obecność rzadko bywa dodatkowym kosztem.

Warto od razu wiedzieć, czym system szablonów Underscore nie jest: szablon renderuje się raz i nie śledzi późniejszych zmian w modelu. O ponowne wyrenderowanie widoku trzeba zadbać samodzielnie, zwykle podpinając się pod zdarzenia modelu. To jedna z podstawowych różnic wobec frameworków takich jak Ember.js czy Angular.js, które wiązanie danych mają wbudowane.

Sekcja 3Backbone.js a inne frameworki

Oprócz Backbone.js istnieje całe mnóstwo różnych frameworków JavaScriptowych. Ich cele i sposoby wykorzystania są różne. Bezpośrednimi konkurentami Backbone.js są Ember.js oraz rosnące w siłę Angular.js. Spośród tych 3-ch wymienionych frameworków, to właśnie Backbone.js jest tym, który zapewnia sam szkielet aplikacji i nie robi narzutu na sposób pisania kodu JS, tak jak to ma miejsce w innych frameworkach.

Nie da się powiedzieć, będąc 100% pewnym, który framework jest lepszy. Każdy ma swoje zalety i wady, ale to nie to jest tematem tego wpisu. Uważam, że Backbone.js zapewnia odpowiednią funkcjonalność, odpowiednią przejrzystość kodu oraz jest odpowiednio prosty w wykorzystaniu na co dzień.

Sekcja 4Podsumowanie

Pierwszy wpis zawiera trochę teorii i jest wstępem do fazy tworzenia kodu aplikacji. Starałem się wyjaśnić czym jest Backbone.js a także dlaczego to on został wybrany.
Spodziewam się różnych opinii odnośnie wybranego zestawu narzędzi, jak wiadomo skoro jest wiele opcji wyboru, to każda z tych opcji ma swoich zwolenników jak i przeciwników.

Kolejne części wpisów będą się pojawiać w nadchodzących tygodniach. Postaram się, aby to było przynajmniej raz w tygodniu.

Sekcja 5Inne części z serii:

1. Część 2 - Tworzymy aplikację JS z wykorzystaniem Backbone.js – Integracja z Twitterem
2. Część 3 - Tworzymy aplikację JS z wykorzystaniem Backbone.js – Integracja z Facebookiem
3. Część 4 - Tworzymy aplikację JS z wykorzystaniem Backbone.js – wysyłanie wiadomości