Single page application

Что такое SPA в веб-разработке.

Всем привет! В этой статье мы разберемся, что такое SPA в веб-разработке и в чем его плюсы и минусы.

Описание

Возможно, кто-то из вас уже слышал такое сокращение как SPA. Однако не все могут знать, что это такое, поэтому давайте разбираться.

SPA(single page application) – это веб-приложение, работающее на одной странице. Оно подгружает все необходимые javascript и css файлы при первой загрузке страницы, а затем все общение между клиентом и сервером сводится к минимуму. Т.е. при таком подходе большая часть работы сайта производится на стороне клиента, а если нужно получить данные с сервера, то это обычно делается с помощью JSON.

Такой способ создания сайтов появился относительно недавно, с приходом HTML5, но уже активно набирает обороты. В принципе, здесь нет ничего удивительного, ведь такое веб-приложение будет работать намного быстрее обычных сайтов, да и разработка не займет много времени. Благо, что сейчас уже есть куча фреймворков, которые позволяют создавать очень сложные сайты такого типа достаточно просто и быстро. На данный момент лучшим фреймворком считается React. У него больше плюсов, чем у конкурентов, а также он прост в изучении и использовании. Если вы хотите побольше узнать о том, как им пользоваться, советую заглянуть сюда.

А мы пока перейдем к плюсам SPA.

Плюсы SPA

  • Поддержка большого количества устройств. В отличие от стандартного подхода, SPA приложения работают как на станционарных компьютерах, так и на мобильных устройствах одинаково хорошо. Таким образом, вы можете создать одно приложение и быть уверены, что оно не будет тормозить и будет прекрасно работать даже на не очень мощных устройствах
  • Мощный UX. В приложениях, основанных на таком подходе, намного проще хранить различную информацию, управлять представлением сайта, анимациями. Также, поскольку рабочая страница всего одна, написать красивый пользовательский интерфейс не составит труда
  • Высокая производительность. В обычных сайтах очень часто можно встретить загрузку одного и того же содержимого. Например, шапка сайта, футер, меню и другие элементы, которые не меняются от страницы к странице, тем не менее, каждый раз загружаются с сервера. С использованием SPA подхода такой проблемы просто не будет, т.к. контент будет подгружаться по мере необходимости, что значительно повысит скорость работы приложения

Минусов же у SPA почти нет. Единственное, что стоит отметить, что разработку таких приложений стоит вести достаточно аккуратно. Все дело в том, что если будут утечки памяти, например, то приложение может начать работать намного медленнее, чем нам бы хотелось. Но все это уже зависит от разработчика, от его умений, поэтому, если вы хотите делать приложения качественно, то советую обратить внимание на видеокурс «React JS, Redux, ES2015 с Нуля до Гуру». Он был составлен профессионалом специально для того, чтобы вы тоже научились делать мощные и быстрые приложения, и количество действительно качественных сайтов в интернете стало больше.

Заключение

Итак, сегодня мы рассмотрели, что такое SPA(single page application), в чем его преимущества и недостатки.

Спасибо за внимание!

  • Создано 25.11.2016 07:00:00

  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Одностраничные приложения становятся всё популярнее, поскольку спрос на высоко отзывчивые приложения растёт. Мы могли бы для их создания использовать Ajax и Javascript, но применим Angular в качестве структурного фреймворка для динамических веб-приложений, эффективный и простой в использовании, как его описали люди которые его сделали.

Мы собираемся создать простое приложение, в котором будет только главная страница, страница «О нас» и страница с датой. При этом сделаем так, чтобы не нужно было обновлять страницу для просмотра изменений, все они должны отображаться сразу.

Мы будем использовать:

  • AngularJS
  • Bower
  • Bootstrap

Приступая к работе

Чтобы приступить к проекту вы должны скачать Bootstrap, а также Bower (здесь вы найдёте необходимую информацию как это сделать).

Для начала создадим папку с именем SinglePageApp (можно назвать её как пожелаете) и внутри неё HTML-файл с именем index.html и JavaScript-файл с именем app.js.

Настройка AngularJS

Попросим Bower установить пакет Angular, выполнив эту команду в терминале (убедитесь, что вы находитесь в папке проекта):

Тогда, вновь используя Bower, мы устанавливаем пакет Angular-Route, выполнив:

После выполнения этих команд вы заметите, что в папке нашего проекта добавилась папка bower_components, внутри которой находятся две папки, одна с именем angular, а другая angular-route. Мы воспользуемся ими позже. Затем открываем app.js и пишем код JavaScript для создания модуля Angular и добавляем к нему зависимость ngRoute. Это должно выглядеть так:

Настало время определить маршруты с помощью функции config(), предоставленной angular.module. Прямо под кодом для модуля, в файле app.js мы вставляем этот код:

Мы внедрили $routeProvider в качестве параметра функции. Теперь when() для $routeProvider может применяться для настройки маршрутов. Эта функция принимает два параметра: название маршрута и объект, который содержит различные детали для маршрута. Мы будем использовать только два из этих свойств: templateURL — указывает относительное положение файла представления, начиная с index.html; и контроллер, связанный с этим представлением.

Мы достигли точки, где должны создать контроллеры для различных представлений. Сначала мы создаём папку с именем controllers в папке js и внутри неё создаём файл JavaScript с именем controllers.js, в который помещаем этот фрагмент кода:

Не забудьте про controllers.js в файле index.html. Вы даже можете разместить этот код в файле app.js, но это не рекомендуется, поскольку может снизить читабельность кода и в более тяжёлых приложениях усложнить материал.

HTML-разметка нашего приложения

Важную вещь надо сделать, если мы хотим, чтобы наше приложение функционировало должным образом — это связать все файлы, которые мы скачали. Для начала ссылаемся на стилевой файл Bootstrap путём добавления этой строки ниже тега <title>:

Теперь установим скрипты Bootstrap, Angular и Angular-Route путём добавления этого кода после тега <link>:

Кроме того, мы добавляем файл app.js, так как он содержит модуль и другие необходимые вещи, так:

Вы можете разместить всё это в разделе <body>, прямо перед тегом </body> для повышения производительности, так браузер отобразит HTML-разметку первой, а затем загрузит код JavaScript. Пожалуйста, имейте в виду, что скрипты angular-route.min.js и app.js должны идти после скрипта angular.min.js, а controller.js должен идти после скрипта app.js.

Теперь давайте создадим папку с именем pages, внутри которой мы разместим HTML-файлы для представлений. Будьте осторожнее, они не должны быть полностью HTML-файлами, а должны иметь только разметку для определённого представления.

В файле homepage.html мы размещаем только выражение {{homepage}}.

Страница «О нас» будет типичной описательной страницей, поэтому нам понадобится только этот код:

Страница с датой покажет нам сегодняшнюю дату. Код будет такой:

То, что мы разместили внутри двойных фигурных скобок, представляет собой выражение. Стоит отметить, что | date:’medium’ является фильтром — кратким способом форматирования некоторых, наиболее часто используемых выражений, таких как даты, числа, валюта и т. д. Angular даёт нам несколько встроенных фильтров, а также простой путь для создания собственных фильтров. Данный фильтр форматирует дату так, чтобы показать месяц, число, а затем год, а также время в часах, минутах и секундах в формате AM/PM.

Теперь взглянем на index.html. Нам следует сказать Angular какая часть приложения должна быть активной.

Вы видели, что при объявлении модуля мы назвали его app. Чтобы сказать ему, какая часть должна быть активной, мы добавляем атрибут ng-app="app" к тегу и всё внутри превращается в приложение AngularJS. В нашем случае нужна вся страница целиком, поэтому лучше атрибут ng-app поместить в тег <html> или в <body>.

Я выбираю второе.

В раделе <body> мы добавим кнопки, по одной на каждое представление. Воспользуемся Bootstrap чтобы сделать это проще, но также чтобы кнопки выглядели стильно. Код будет следующий:

Взгляните на атрибут href в каждой ссылке. Знакомо? Это маршрут, который мы использовали в функции when(), только с решёткой (#) впереди. Атрибут class который вы видите в тегах <button> предоставлен Bootstrap, он делает кнопки красиво выглядящими и даёт им определённые цвета (красный для btn-danger, зелёный btn-success и оранжевый для btn-warning).

Но где приложение будет показывать представление, которые мы создали?

Мы говорим ему где, поместив элемент, содержащий атрибут ng-view. Это будет выглядеть так:

Я вставляю это внутрь другого элемента <div>, но вы можете разместить его в любом месте в теле приложения. AngularRoute даёт возможность полностью заменить элемент <div ng-app> на <ng-app> </ng-app>, но так делать не рекомендуется, если ваши целевые пользователи используют IE, поскольку он не поддерживает такой подход.

Вы, возможно, заметили класс row у <div>, внутри которого содержится элемент ng-view. Он нужен только для целей стилизации. Чтобы сайт выглядел немного симпатичнее вы создаёте файл style.css внутри папки css (не забудьте сделать на него ссылку) и помещаете внутри него такой код:

Теперь вы можете открыть своё одностраничное приложение и оно покажет вам различные представления при щелчке по кнопкам без перезагрузки страницы. Выглядит это так:

Рис. 1.1. Одностраничное приложение при нажатии кнопки «About»

Такова магия AngularJS.

Скачать код

Вы можете скачать полный исходный код этого примера здесь.

Автор и редакторы

Автор: Эра Баллиу

Последнее изменение: 03.11.2015

Редакторы: Влад Мержевич

June 1st, 2017

Пример быстрой разработки SPA приложения

SPA — Single Page Application.

Для разработки нам потребуется:

Генерируем данные

Для примера просто выведем список аккаунтов. Для этого нужны поля: логин, имя, аватар, почта.

На сайте json-generator я создал такой шаблон.

После генерации получаем готовый json , сохраним его как db.json.

Веб сервер JSON

Создадим файл json-server.json с настройками сервера.

Файл db.json ложим рядом.

Запускаем сервер

Теперь по адресу можно увидеть всех пользователей. Например так получим 5 записей .

А теперь сам шаблон

JSON Сервер может не только выводить json данные, но и вёрстку. Для этого нужно создать папку public в которой будет лежать index.html.

Пример app.js

Пример index.html

Получим результат

Добавим аватарку и почту.

Сервер позволяет не только выводить данные, но и изменять и удалять их.

Удаление

Сервер использует все базовые REST команды, поэтому достаточно использовать метод DELETE для удаления записи.

Так как json-server ориентируется на поле id для работы с объектами, пришлось заменить поле index на id.

Кнопке удаления допишем метод удаления.

и в js напишем метод удаления, это имя объектов (users) + id записи.

В данном методе мы шлём команду на удаление, затем обновляем список записей.

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

Закрыть меню