РАЗРАБОТКА ОДНОСТРАНИЧНЫХ ПРИЛОЖЕНИЙ

Введение

Одностраничное приложение – веб-приложение или веб-сайт, которое размещается на одной веб-странице с целью предоставления пользователям опыта, сравнимого с настольными приложениями. В SPA (single-page application) весь необходимый код – HTML, JavaScript и CSS – загружается при первой загрузке страницы или же необходимые ресурсы подгружаются динамически и добавляются на страницу когда необходимо, обычно в ответ на действия пользователя. Страница не выполняет перезагрузку в любой точке этого процесса и так же не осуществляет перехода на другую страницу, хотя прикладной программный интерфейс HTML5 может быть использован для навигации по отдельным логическим страницам приложения. Взаимодействие с одностраничным приложением обычно включает в себя динамическое взаимодействие с веб-сервером.

JavaScript фреймворки

Браузерные JavaScript фреймфорки, такие как AngularJS, EMBER.js, Meteor.js, ExtJS и React применяются для разработки SPA-приложений.

• AngularJS – полноценный клиентский фреймворк. Шаблоны AngularJS основаны на двустороннем связывании данных. Связывание данных – автоматический способ обновления интерфейса при изменении данных, а так же обновление самих данных при изменении интерфейса. HTML шаблон компилируется в браузере. В процессе компиляции создается чистый HTML код, который и отрисовывает браузер. В классической MVC модели HTML генерируется на сервере контроллером, которые использует данные. В Angular JS и контроллер, и модель находятся на клиенте. Таким образом, новый вид может генерироваться без какого-либо взаимодействия с сервером.
• Ember.js – клиентский фрейморк, также основанный на архитектуре MVC. Он позволяет создавать разработчикам масштабируемые одностраничные приложения и поддерживает богатую объектную модель, декларативное двухстороннее связывание, вычисляемые свойства, автоматически обновляемые шаблоны при помощи шаблонизатора Handlebars.js и роутер для управления состоянием приложения.
• Meteor.js – клиент-серверный фреймворк, созданный исключительно для SPA-приложений. Его особенностью является более простое связывание данных, чем в Angular, Ember или ReactJS. Фреймворк Meteor.js  использует протокол распределенных данных и паттерн издатель-подписчик для автоматического обновления данных на клиенте, что освобождает разработчика от написания кода синхронизации.

В нашей работе мы напишем простое одностраничное приложение при помощи фреймворка AngularJS.

Разработка приложения

Мы напишем приложение, предназначенное для создания заданий и отметки их выполнения. В качестве серверной части будем использовать Express фреймворк и базу данных Mongo DB.

Файловая структура

Файловая структура будет очень простой и большинство нашего кода будет находиться в файле server.js. В больших приложениях необходимо разбивать приложение на части, согласно их функциональности.

Рисунок 1. Файловая структура проекта

Установка модулей

Во фреймворке Node package.json файл содержит конфигурацию нашего приложения. Менеджер пакетов Node будет использовать этот файл для установки всех зависимостей и модулей, которые мы собираемся использовать. В нашем случае мы будем использовать Express (популярный Node фреймворк) и Mongoose (моделирование объектов для MongoDB).

Рисунок 2. Содержимое файла package.json

Клиентская часть

Ниже представлен необходимый HTML файл, для взаимодействия с Angular. Мы сделаем следующее:

• Создадим Angular модуль и контроллер
• Инициализируем страницу после получения всех задач
• Пройдемся по ним циклом
• Создадим форму для создания задач
• Удалим задачу, когда она выполнена

Рисунок 3. HTML файл приложения

Старт приложения

Для запуска приложения в папке с файлом server.js необходимо в консоли ввести: node server.js. Теперь у нас будет сервер, слушающий порт 8080. Для того, чтобы зайти на приложение, необходимо в адресной строке браузера ввести: http://localhost:8080/

Заключение

Теперь у нас есть полноценно работающее приложение, которое позволяет просматривать, создавать и удалят задачи. Что в итоге получилось:

• Серверный REST API
• Взаимодействие с нереляционной базой данных Mongo DB
• Angular AJAX запросы
• Одностраничное приложение без перезагрузок страницы

Список литературы:

1. Wikipedia [Электронный ресурс] / https://en.wikipedia.org/wiki/AngularJS (дата обращения 10.06.2017)
2. Scotch [Электронный ресурс] / https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular (дата обращения 10.06.2017)