Architektura REST jest jednym z najczęściej wykorzystywanych podejść w komunikacji klient-serwer dla aplikacji internetowych. Nie powinno to dziwić biorąc pod uwagę prostotę i lekkość. Jedną z najpopularniejszych bibliotek JavaScript pozwalających na wykorzystanie udostępnionych w ten sposób zasobów jest Backbone.js. Wśród jej zalet są m.in. prostota użycia i brak zależności poza biblioteką Underscore.js (swoją drogą również bardzo przydatną i przyjemną w użyciu), co pozwala na pisanie reużywalnego kodu złożonego z komponentów prostych do rozszerzania i łączenia z dowolnymi innymi narzędziami (przydatne zwłaszcza do pisania widoków i szablonów dla nich).

Na początek warto rozpocząć od przygotowania środowiska do pracy. Aby uprościć pracę, przede wszystkim w zarządzaniu zależnościami, polecam środowisko Node.js. Prócz tego, pracę z językiem JavaScipt ułatwia mechanizm AMD dostarczany przez chociażby RequireJS. Chcąc uniknąć implementowania serwisów REST wykorzystam JSONPlaceholder udostępniający przykładowe zasoby.

Stworzenie projektu:

mkdir example-backbone-js
cd example-backbone-js
npm init

Przykładowy plik package.json, po dodaniu potrzebnych zależności:

{
	"name": "example-backbone-js",
	"version": "1.0.0",
	"description": "Example REST client using Backbone.js",
	"main": "index.html",
	"author": "Szymon Napierała",
	"license": "ISC",
	"dependencies": {
		"backbone": "1.3.3",
		"jquery": "3.2.1",
		"requirejs": "2.3.3",
		"underscore": "1.8.3"
	}
}

Po spreparowaniu pliku package.json wystarczy zainstalować zależności:

npm install

Teraz wystarczy stworzyć plik index.html będący plikiem głównym dla nowej aplikacji:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Example</title>
	</head>
	<body>
		<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
		<script src="node_modules/underscore/underscore-min.js" type="text/javascript"></script>
		<script src="node_modules/backbone/backbone-min.js" type="text/javascript"></script>
		<script src="node_modules/requirejs/require.js" type="text/javascript" data-main="js/main.js"></script>
	</body>
</html>

Do wygenerowania struktury DOM wykorzystamy widok stworzony za pomocą Backbone.js:

define(function(require) {
	var AppView = Backbone.View.extend({
		render: function() {
			this.el.appendChild(document.createTextNode("TODO"));
			return this.el;
		}
	});
	return AppView;
});

Na razie nie ma większej potrzeby wgłębianie się w kod. W kolejnych artykułach postaram się przybliżyć zasadę działania widoków. Póki co wystarczy wiedza, że AppView posłuży do wygenerowania elementu div zawierającego tekst “TODO”. Zwrócony obiekt, dzięki otoczeniu przez funkcję define, pozwoli na jego wstrzyknięcie dzięki RequireJS.

Pozostaje teraz stworzenie głównego pliku JavaScript, który pobierze widok aplikacji i go wyrenderuje w drzewie DOM:

define(function(require) {
	var AppView = require("app/AppView");
	var appView = new AppView();
	$(function() {
		document.body.appendChild(appView.render());
	});
});

Dzięki funkcji require, możliwe jest wstrzyknięcie zależności, w tym wypadku konstruktora AppView. Wykorzystując skróconą składnię funkcję ready() z biblioteki jQuery, można do ciała dokumentu dokleić element zwrócony przez metodę render() widoku.

Po otwarciu w przeglądarce pliku index.html, powinna pojawić się strona z tekstem “TODO”, co jest oznaką poprawnego stworzenia szkieletu projektu.

Przykładowy projekt: