Создание SPA-приложений при помощи NodeJS, SailsJS и DustJS в Ubuntu 14.04

21 ноября, 2015 12:38 пп 1 659 views | Комментариев нет

, | | Комментировать запись

Node.js® – это созданная в JavaScript платформа для быстрой разработки масштабируемых приложений. Node.js использует событийно-управляемую, не блокирующую I/O модель, благодаря чему платформа легковесна и производительна, а значит – идеально подходит для информационно ёмких приложений, которые работают в режиме реального времени на распределенных устройствах.

Sails – это фреймворк для сервера NodeJS на бэкенде. Основанный на архитектуре Model-View-Controller, он позволяет быстро разрабатывать приложения. Sails предоставляет встроенные веб-сокеты для push-сообщений. По умолчанию этот фреймворк использует Waterline ORM, что делает его независимым от БД. Другими словами, Sails позволяет использовать БД SQL и noSQL. А главное, Sails придаёт приложению правильную структуру.

Dust – это шаблонизатор JavaScript. Dust.js унаследовал внешний вид от языков ctemplate. Этот шаблонизатор предназначен для работы в асинхронном режиме на сервере и в браузере.

SPA-приложения (или Single Page Application) – это приложение, помещающееся на одной веб-странице.

После открытия сайта страница не обновляется. Цель такого приложения – снижение времени загрузки страницы и обеспечение простого перехода на другие страницы.

Данное руководство поможет создать такое приложение при помощи NodeJS, фреймворка SailsJS и шаблонизатора DustJS (на клиенте и на сервере).

Требования

Данное руководство требует предварительно настроить сервер Ubuntu 14.04 (с 64-битной архитектурой). Для среднестатистической разработки 512 MB памяти будет достаточно.

Кроме того, нужен доступ к sudo.

1: Установка программ

Для начала нужно становить всё необходимое ПО.

Установите инструменты для разработки:

sudo apt-get install python-software-properties python g++ make

Затем установите NodeJs и NPM при помощи следующих команд:

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Примечание: Эти команды также установят npm, пакетный менеджер NodeJs.

NPM используется для установки пакетов NodeJs. Установите с помощью этого менеджера Sails:

sudo npm -g install sails

Примечание: Это установит последнюю версию Sails. Прочитать больше о Sails.js можно на сайте проекта.

2: Создание проекта Sails

Создайте новое приложение:

sails new dustspa
cd dustspa

Фреймворк Sails создаст каталог dustspa со следующей структурой:

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

В файле package.json найдите следующие строки:

"dependencies": {
"sails": "~0.11.0",

Измените их следующим образом:

"dependencies": {
"dustjs-linkedin": "^2.5.1",
"sails": "~0.11.0",

Компилятор dust используется для компилирования шаблонов dust в шаблоны dust JavaScript.

Затем установите dustjs и остальные зависимости из файла package.json:

sudo npm install

Затем используйте команду:

sails lift

Посетите your_server_ip:1337. На экране появится домашняя страница приложения. Остановите сервер, нажав Ctrl+C.

3: Установка View Engine

Для начала замените engine: ‘ejs’ на engine: ‘dust’ (в файле config/views.js):

nano ./config/views.js

Найдите:

engine: 'ejs',

И замените строкой:

engine: 'dust',

Затем нажмите Ctrl+X,Y и ENTER, чтобы охранить и закрыть файл.

Примечание: В дальнейшем все файлы будут редактироваться таким образом.

4: Создание файла layout.dust

Контент файла layout.dust будет отображаться на посадочной странице. Все запросы будут сначала приходить на эту страницу, а потом обрабатываться фронтендом.

Создайте layout.dust в каталоге views:

touch views/layout.dust

Добавьте в файл следующий код:

<!DOCTYPE html>
<html>
<head>
<title>Dust SPA</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
<li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
<li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
</div>
<br/>
<div id="template">
<h1>Partial Goes Here</h1>
</div>
<footer class="footer">
<p>Styled by Bootstrap&copy;</p>
</footer>
</div>
</body>
</html>

Этот HTML-код довольно прост.

Затем нужно установить вид для / в routes.js. Откройте файл config/routes.js:

'/': {
view: 'layout'
}

Запустите сервер.

Примечание: Если сервер уже запущен, остановите его при помощи Ctrl+C.

Запустите следующую команду из каталога dustspa (текущий каталог):

sails lift

Откройте в браузере ip_сервера:1337. Если на экране появилась страница, значит, всё работает верно и можно продолжать разработку. Если страница не открылась, проверьте, всё ли вы выполнили правильно.

Примечание: На данном этапе ссылки не работают.

5: Создание шаблонов

Примечание: Шаблоны – это часть страницы.

Создайте каталог partials в каталоге views и откройте этот каталог:

mkdir views/partials
cd views/partials

Затем создайте файлы home.dust, about.dust и contact.dust в каталоге partials. Добавьте в них такой контент:

home.dust
<div class="jumbotron">
<h1>Home Page
{?home}<small class="pull-right">Visit Count: {home}</small>{/home}
</h1>
<p class="lead">This is the home page. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</p>
<p>
<a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
<a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
</p>
</div>
about.dust
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">About Us
{?about}<kbd class="pull-right">Visit Count: {about}</kbd>{/about}
</h1>
</div>
<div class="panel-body">
<h4>This is the About Us template. Its actually a dust partial which will be replaced when we navigate away from the page. Only this partial will change while the rest of the page will not be reloaded. SPA Magic!</h4>
<br>
<p>
<a class="btn btn-lg btn-success" href="http://linkedin.github.io/dustjs/" target="_blank" role="button">Check out DustJS</a>
<a class="btn btn-lg btn-warning pull-right" href="http://sailsjs.org" target="_blank" role="button">Check out SailsJS</a>
</p>
</div>
</div>
contact.dust
<div class="well">
<h1 class="align-center">Show us some love and we'll get back to you !
{?contact}<small class="pull-right">Visit Count: {contact}</small>{/contact}
</h1>
<hr/>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1">
</div>
<br/>
<p>
<a class="btn btn-lg btn-success" href="#" role="button">Send Contact</a>
</p>
</div>

6: Компилирование шаблонов

Шаблоны нужно скомпилировать, прежде чем использовать их на фронтенде.

Установите dust compiler:

sudo npm install -g dust-compiler

Скомпилированные шаблоны будут храниться в assets/templates. Откройте главный каталог dusts:

cd ../..

Скомпилируйте шаблоны dust:

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

В каталоге assets/templates появятся файлы:

  1. home.js
  2. about.js
  3. contact.js

Теперь файлы шаблонов готовы.

Для начала добавьте в конец файла views/layout.dust библиотеки dust-js и файлы шаблонов в тегах <body> :

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>

После этого нужно добавить скрипт, фиксирующий клики по ссылкам и выводящий на экран требуемый шаблон. Создайте файл assets/js/clickHandler.js со следующим контентом:

(function () {
var links = document.getElementsByClassName("links"),
templateDiv = document.getElementById("template"),
nav = document.querySelector('nav > ul'),
clicked = false, viewCount = { home: 2, about: 1, contact: 1 };
function clickHandler(e) {
var target = event.target,
templateName = this.getAttribute("data-template");
if(clicked) {
clicked.removeAttribute('class');
}
else {
nav.querySelector('.active').removeAttribute('class');
}
target.parentElement.setAttribute('class','active');
clicked = target.parentElement;
dust.render(templateName, viewCount, function (err, out) {
if(err) console.log('Error:',err);
else {
viewCount[templateName]++;
templateDiv.innerHTML = out;
}
});
};
for(var i = 0; i < links.length; i++){
links[i].addEventListener('click', clickHandler, false);
}
})();

Этот скрипт очень прост. Он выполняет следующие действия:

  • Фиксирует клики по ссылкам.
  • Извлекает имя шаблона из атрибута data-template.
  • Стилизует открытую ссылку.
  • Отображает шаблон при помощи функции dust.render, редактируя объект viewCount.

Ссылаясь на clickHandler.js, отредактируйте views/layout.dust и добавьте в теги <body> в конце файла следующее:

<script type="text/javascript" src="/js/clickHandler.js"></script>

Теперь нужно отредактировать layout.dust в каталоге views. Замените <div id=”template”>…</div> следующим кодом:

<div id="template">
{> "partials/home"/}
</div>

Это настроит повторное использование шаблона. Механизм dust.js заменит {> “partials/home”/} контентом файла view/partials/home.dust.

Как этот шаблон будет использоваться? Его скомпилированная версия (полученная при помощи dust-compiler) хранится в assets/templates/home.js. Позже этот скомпилированный шаблон будет добавлен в скрипт. После добавления шаблона при помощи тега <script src=”/templates/home.js”/> он будет автоматически добавлен в dust.cache как frontend. Чтобы повторно отобразить шаблон, используется dust.render(“home”, obj, callbackFunction).

Примечание: Чтобы лучше разобраться в коде, откройте assets/js/clickHandler.js.

Шаблон по имени xxx будет помещён в файл по имени xxx.dust. Можно создавать много .dust файлов и ссылаться на шаблоны внутри других шаблонов. Это позволяет размещать заголовки и футеры на нескольких страницах.

Обратите внимание: кроме расширения .dust часто встречаются файлы с расширением .tl. Поскольку это имеет значение только при сборке, можно использовать любое расширение.

Синтаксис ссылки на шаблон {> name /} также поддерживает пути; то есть, шаблон можно указывать в пути (например, shared/header.dust) и ссылаться на него {> “shared/header” /}. Это систематизирует шаблоны в подобные библиотекам структуры.

Примечание: Больше о шаблонах можно найти здесь.

В результате layout.dust будет иметь такой вид:

<!DOCTYPE html>
<html>
<head>
<title>Dust SPA</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="header">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#" class="links" data-template="home">Home</a></li>
<li role="presentation"><a href="#" class="links" data-template="about">About</a></li>
<li role="presentation"><a href="#" class="links" data-template="contact">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">SPA - DustJS Templates, SailsJS Architecture</h3>
</div>
<br/>
<div id="template">
{> "partials/home"/}
</div>
<footer class="footer">
<p>Styled by Bootstrap&copy;</p>
</footer>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.5.1/dust-core.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dustjs-helpers/1.5.0/dust-helpers.min.js"></script>
<script type="text/javascript" src="/templates/home.js"></script>
<script type="text/javascript" src="/templates/about.js"></script>
<script type="text/javascript" src="/templates/contact.js"></script>
<script type="text/javascript" src="/js/clickHandler.js"></script>
</body>
</html>

7: Тестирование приложения

Запустите сервер:

sails lift

Откройте в браузере:

Ip_сервера:1337

Протестируйте SPA, кликнув по ссылкам Home, About, Contact.

Заключение

SPA-приложение успешно разработано! Данный сайт позволяет использовать шаблон и на клиенте, и на сервере.

Tags: , , , , , ,

Добавить комментарий