Роман Липский

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

Универсальные веб-приложения заменяют более старомодные десктопные во многих сферах бизнеса. Почему? Потому что они сохраняют функционал на всех устройствах, базируются в облаке, да и вообще куда более удобны в использовании.

Некоторые считают, что браузерные веб-приложения постепенно вытесняются мобильными приложениями с их огромными клиентскими базами. Но правда в том, что веб-приложения сейчас живы как никогда, и спрос на них сейчас только растёт.

Если вы задумываетесь о разработке веб-приложения для своей компании, вы наверняка уже знаете о том, что существуют два основных подхода к разработке: можно создавать как одностраничные веб-приложения (SPA), так и многостраничные приложения (MPA).

Так же, как и всё в нашей с вами жизни, оба варианта дизайнов имеют свои преимущества и недостатки. Прежде чем приниматься за воплощение идей, нужно принять несколько важных решений.

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

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

Как мы уже упоминали выше, и у SPA, и у MPA есть свои плюсы и минусы. Давайте же разберемся в разнице между двумя типами приложений и постараемся найти правильное решение в области веб-разработки для вашей компании.

Чтобы сделать это, мы попросим директора веб-направления BLAKIT Виталия Озерского дать свои экспертные комментарии по теме. Надеемся, что вместе мы сможем облегчить для вас этот выбор.

Одностраничные приложения

Одностраничные приложения работают в рамках браузера и не требуют перезагрузки страницы или загрузки дополнительных страниц во время использования. Подобные приложения ежедневно используют миллионы юзеров, даже не замечая этого. Самые популярные примеры: GitHub, Gmail, Google Maps и даже Facebook.

Виталий Озерский: одностраничные приложения, как правило, максимально интерактивны, причём настолько, что у пользователя складывается ощущение, будто он работает с десктопным приложением: реакция приложения на пользовательские действия моментальная в большинстве случаев. Этим SPA выгодно отличаются от многостраничных сайтов, где при каждом действии пользователю необходимо дожидаться загрузки новой страницы.

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

Типовое одностраничное приложение выглядит как веб-страница, подгружающая и обновляющая контент без перезагрузки с помощью JavaScript. SPA запрашивает разметку страницы и её контент, а затем создает конечный вид страницы непосредственно в браузере. Такого эффекта можно достигнуть благодаря продвинутым фреймворкам JavaScript, таким как AngularJS, Ember.js, Meteor.js, Knockout.js.

ВО: Помимо основных популярных фреймворков разработчики BLAKIT способны также разрабатывать одностраничные приложения при помощи ReactJS.

Основное преимущество React – невысокий порог входа. React довольно прост в использовании; практически любой разработчик, знакомый с HTML, может создавать React-приложения.

Еще одно преимущество – возможность писать приложения под веб и под мобильные платформы, используя единый стек технологий.

Мы используем React вместе с библиотекой Redux, которая позволяет заложить правильную архитектуру и создавать сложные веб-приложения, легко поддающиеся масштабированию.

С точки зрения рядовых пользователей основное UX-преимущество одностраничных приложений в том, что весь контент представляется в доступном и функциональном виде, без необходимости перепрыгивать со страницы на страницу.

Преимущества одностраничных приложений:

• SPA характеризуются отличным быстродействием, так как большинство ресурсов, которые они используют (HTML+CSS+Скрипты), загружаются лишь однажды в течение сессии использования приложения. После совершения действий на странице меняются лишь данные.
• Разработка веб-приложений обычно быстрее и эффективнее. Нет необходимости писать отдельный код для рендера страницы на стороне сервера. Также гораздо легче запустить процесс разработки подобных приложений, потому что писать код можно начинать с файла file://URI, не используя при этом никакой сервер.
• SPA оптимизированы для Chrome debugging, разработчики могут отслеживать сетевые действия, изучать элементы страниц и данные, с ними ассоциируемые.
• Если у вас уже есть SPA, будет возможность с тем же бэкендом создать и мобильное приложение.
• SPA более эффективны в кэшировании данных на локальных носителях. Приложение высылает один запрос, собирает все необходимые данные, и с этого момента способно работать даже в режиме оффлайн.

Недостатки одностраничных приложений:

• SEO-оптимизация одностраничных приложений, по очевидным причинам, не очень проста. Контент приложений загружается при помощи AJAX (Asynchronous JavaScript and XML) - метода обмена данными и обновления приложения без перезагрузки страницы, в то время как SEO-оптимизация основана на устойчивости контента в каждой отдельно взятой странице. При этом продвижение вашего сайта в поисковиках не невозможно. Многие изменения в SEO можно провести на стороне сервера, а компании вроде Google продолжают придумывать новые решения для того, чтобы облегчить жизнь как владельцам SPA, так и их пользователям.
• Они довольно долго загружаются, поскольку тяжелые клиентские фреймворки должны сперва загрузиться в браузер.
• SPA требуют JavaScript в активном режиме в браузерах пользователей. Если кто-то из ваших клиентов вручную отключит использование JavaScript, они не смогут в полной мере воспользоваться вашим приложением. Даже если вы будете кэшировать и обрабатывать ваши страницы на стороне сервера (а это сейчас тоже возможно), вы всё ещё рискуете не доставить пользователям без JS все функции одностраничного приложения в правильном виде.
• По сравнению с традиционными приложениями, SPA чуть хуже защищены. Благодаря межсайтовому скриптингу (XSS), злоумышленники имеют возможность внедрять дополнительные скрипты на стороне клиента.
• Некоторые утечки памяти в JavaScript могут привести к падению производительности даже в мощных системах

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

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

Многостраничные приложения

Многостраничные приложения работают более традиционным способом, так сказать. Каждое значительное изменение данных или выгрузка информации обратно на сервер приводит к рендерингу новой страницы в браузере. Многостраничные приложения, очевидно, «тяжелее», чем одностраничные, и обычно нацелены на отображение большего количества контента.

Сложность и издержки при разработке MPA выше, также для них требуется многоуровневый дизайн UI. К счастью, сейчас это уже не такая большая проблема, поскольку AJAX позволяет обновлять только определенные части приложения, а не перебрасывать кучу данных между серверами и браузерами.

Преимущества многостраничных приложений:

• Это наиболее подходящий вариант для пользователей, которым нужен более визуально понятный интерфейс и привычная навигация по приложению. MPA обычно создаются с многоуровневыми меню и другими инструментами навигации.
• Значительное упрощение SEO. Вы сможете оптимизировать каждую отдельно взятую страницу приложения под нужные вам ключевые слова.

Недостатки многостраничных приложений:

• Frontend и backend разработка в данном случае объединены очень тесно.
• Разработка МPA довольно сложна, так как она требует использования фреймворков как на клиентской, так и на серверной стороне. Сроки и издержки разработки, соответственно, не так приятны для многих компаний.

SPA или MPA?

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

Если же вы ориентируетесь на максимальную функциональность в сжатом веб-пространстве, правильным выбором станет одностраничное веб-приложение. А если вам подходит функциональность SPA, но вы даже представить не можете, как вместить весь ваш контент на одну страницу, вам стоит рассмотреть вариант с гибридным сайтом.

Эту форму веб-разработки в статье мы ещё не упоминали. Гибридное приложение нацелено на то, чтобы взять лучшее из двух миров, минимизируя при этом недостатки.

Технически, гибридное приложение – всё ещё SPA, но оно использует якоря URL как синтетические страницы, благодаря чему расширяются возможности встроенной навигации в браузере и функциональность настроек.

Дайте нам знать, если хотите узнать больше о гибридных приложениях, мы напишем о них отдельный текст.

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

Согласно нашим данным, уже сейчас многие виды бизнеса переходят на эту модель в своей стратегии онлайн-продвижения. Тем не менее, некоторые виды проектов просто невозможно воплотить как SPA: в них попросту слишком много контента. Поэтому, по крайней мере в обозримом будущем, модель MPA всё ещё имеет место быть.

ВО: полностью согласен с утверждением про растущую популярность одностраничных приложений. Сейчас SPA-приложения пользуются большим спросом, так как компании постепенно переводят свой софт с десктоп-приложений на приложения, доступные с любого браузера, а не только на ПК с Windows.

Одностраничное приложение или SPA — single page application — сайт или веб-приложение, в основе которого находится единственный HTML-документ. Обычно в подобном приложении на HTML-странице подключается JavaScript-фреймворки («каркасы» для разработки) тип AngularJS, BackboneJS, Ember.js и др. Эти фреймворки позволяют отображать на странице разное содержимое, в зависимости от действий пользователей и/или состояния URL страницы. Изменение состояния может происходить при нажатии на ссылки, href которых состоит из фрагмента URL начинающегося с символа «#» . Иногда с пары символов «#!», в случае поискового продвижения это сайта (в Яндексе).

Содержимое подобного сайта подгружается с сервера при помощи AJAX — асинхронного JavaScript и XML . Для реализации работы через AJAX нужна также реализация части приложения на серверной стороне. Обычно используются скриптовые языки. Для удобства работы и масштабирования системы выбирают REST (архитектура взаимодействия частей приложения).

Одностраничное приложение и JavaScript-фреймворки

Для построения одностраничных приложений используют различные фреймворки:

• backbone.js (рус .)- легкий библиотека, написана автором CoffeeScript и используемая для разработки SPA-страниц с поддержкой REST архитектуры
• ember.js (рус .)- тоже бесплатный JavaScript-фреймворк основанный на модули Модели-Представления-Контроллера (шаблон разработки — MVC)
• angular.js (рус .) — фреймворк, MVC. Один из авторов продолжается заниматься фреймворком, работая в Google.

Одностраничный сайт html

Можно построить используя работу с селекторами по идентификатору и целевому селектору :target , CSS-свойства для управлением видимостью содержимого (display, visibility и margin). Шаблоны одностраничного сайта включает все необходимое содержимое для работы посетителя. В этом простейшем случае подключать JS-фреймворки обходимости нет.

Псевдокласс:target позволяет выбрать такие HTML-элементы на странице, атрибут id у которых совпадает со значением хеша из адресной строки. Например, если в адресной строке присутствует URI: http://сайт/test-po-html#result, то на HTML-странице будет найден элемент с идентификатором #result и к нему применятся CSS-стили.

Каркас такой страницы может выглядеть так (внимание! Для упрощения используется одинаковая высота у всех страниц. На практике объем содержимого буде разным)

Container{ font: 1em sans-serif; width:600px; min-height:500px; margin:auto; border:1px solid #000; position: relative; } h1,h2,h3,h4,h5,h6 {margin: 0;} .page{ width:600px; height:430px; position: absolute; top:60px; display: none; background-color: #fff; } div:first-of-type{ display:block; z-index: 1; } div:target{ display:block; z-index: 2; }

Посмотреть пример работы . Со страницами, использующими JS-фреймворки работа строится другим способом.

, , Комментарии: 0

В обновлении Web Tools 2012.2 для проектов ASP.NET MVC 4 добавился новый шаблон - Single Page Application (SPA). Этот шаблон предназначен для быстрого построения интерактивных веб-приложений на стороне клиента.

"Single Page Application" (SPA) – это основной термин для веб-приложений, которые загружают одну страницу и затем обновляют ее динамически без загрузки других страниц. Загружена основная страница, и дальше приложение общается с сервером с помощью AJAX-запросов.

AJAX – это не новинка, но сегодня существуют Javascript-библиотеки, которые упрощают разработку и поддержку больших и сложных одностраничных приложений. А HTML5 и CSS3 помогают созданию красивого пользовательского интерфейса.

Рассмотрим пример построения веб-приложения, используя одностраничный шаблон. Построим приложение, которое управляет списком запланированных дел (to-do list).

Создаем новое одностраничное приложение

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

• Visual Studio 2012 или Visual Studio Express 2012 for Web
• Обновление ASP.NET Web Tools 2012.2, его можно устьановить отсюда.

В главном меню приложения Visual Studio откроем File-> New -> Project . Из предложенных шаблонов проектов выберем ASP.NET MVC 4 Web Application .

Запустим приложение. Откроется форма для авторизации.

Зарегистрируемся.

После входа в приложение создается список дел по умолчанию с двумя элементами и появляется кнопка "Add Todo List" для добавления нового списка.

Архитектура одностраничного приложения

На диаграмме изображены основные блоки приложения.

На стороне сервера ASP.NET MVC генерирует HTML, а также управляет forms-аутентификацией. ASP.NET Web API обрабатывает все запросы, касающиеся списков дел и элементов этих списков. Это – получение, создание, обновление и удаление. Клиент обменивается данными c Web API в формате JSON.

Entity Framework является слоем ORM (object relational mapping), который связывает объектно-ориентированную архитектуру приложения с базой данных. База данных используется локальная (LocalDb), но можно подключить и свою в файле web.config. Обычно для локальной разработки используется локальная база данных, а потом с помощью миграции EF code-first она переносится на SQL server.

В этой статье речь пойдет о Single Page Application (SPA). Будут рассмотрены плюсы и минусы web-приложения построенного по принципам одностраничного сайта (SPA)

Что такое SPA

Single Page Application - сокращенно SPA, в переводе на русский язык означает “Приложение одной страницы”. Другими словами SPA - это web-приложение, размещенное на одной web-странице, которая для обеспечения работы загружает весь необходимый код вместе с загрузкой самой страницы. Приложение такого типа появились сравнительно недавно, с началом эры HTML5 и SPA является типичным представителем приложений на HTML5.

Как мы знаем, HTML5 это нечто иное как HTML + CSS3 + JavaScript + [несколько новых тегов]. Таким образом, SPA - это приложения написанные на языке JavaScript. И, следовательно, немного перефразировав предыдущие определение получаем:

“SPA - это web-приложение, размещенное на одной странице, которая для обеспечения работы загружает все javascript-файлы (модули, виджиты, контролы и т.д.) , а также файлы CSS вместе с загрузкой самой страницы.”

Если приложение достаточно сложное и содержит богатый функционал, как например, система электронного документооборота, то количество файлов со скриптами может достигать нескольких сотен, а то и тысяч. А “…загрузка всех скриптов…” никоим образом не означает, что при загрузке сайта будут загружены сразу все сотни и тысячи файлов со скриптами. Для решения проблемы загрузки большого количества скриптов в SPA призван API под названием AMD . AMD реализует возможность загрузки скриптов по требованию. То есть, если для “главной станицы” одностраничного портала потребовалось 3 скрипта, они будут загружены стразу перед стартом программы. А если пользователь кликнул на другую страницу одностраничного портала, например, “О программе”, то принцип AMD загрузит модуль (скрипт + разметка) только перед тем как перейти на эту страницу.

Получается немного скомкано: “Одна страница.. другая станица, третья страница… одностраничный портал”. Расставим все точки над “Ё”. Страница сайта, на котором размещены все ссылки на все CSS, и ссылки на скрипты, необходимые для работы SPA мы назовем “Web-страница”. Файл с такой странице обычно называется “index.html” (в ASP.NET MVC может быть index.cshtml или index.vbhtml или даже index.aspx) А страницы, которые переключает пользователь внутри одностраничного портала назовем “модули”.

Давайте рассмотрим плюсы и минуты данного подхода. Зачем всё это нужно и почему SPA так популярен?

SPA: Плюсы

Первым плюсом стоит отметить тот факт, что приложения на SPA отлично работают на устройствах как стационарных, так и мобильных. “Большие” компьютеры, планшеты, смартфоны, и, в конце-концов, простые телефоны (некоторые) могут беспрепятственно работать с сайтами построенных по принципу SPA. Итак, первый “плюс” - работа на большом количестве устройств , а значит, создав одно приложение, вы получаете гораздо большую аудиторию пользователей нежели при использовании стандартного подхода.

Далее второй “плюс” - богатый пользовательский интерфейс , так называемый User Experience. Так как web-страница одна, построить богатый, насыщенный пользовательский интерфейс гораздо проще. Проще хранить информацию о сеансе, управлять состояниями представлений (views) и управлять анимацией (в некоторых случаях).

Третий “плюс” - SPA существенно (в разы) сокращает так называемые “хождения по кругу”, то есть загрузку одного и того же контента снова и снова . Если ваш портал (сайт) использует шаблон, то вместе с основным содержанием какой-либо страницы посетитель сайта обязательно загружает разметку шаблона. Да, кэширование данных на данном этапе развития WWW достигло высочайших результатов, но если нечего кэшировать, то и время, и ресурсы на это не тратятся.

SPA: Минусы

Если вы программируете на C#, то единственным минусом SPA является необходимость изучения JavaScript. Во всяком случае, других глобальных проблем мне выяснить не удалось.

Составляющие SPA

Принципы любого фреймворка (о них поговорим позже), который реализует парадигму SPA должны придерживаться следующих понятий и определений:

• SPA поддерживает клиентскую навигации. Все “хождения” пользователя по модулям-страницам однозначно фиксируются в истории навигации, причем навигация при этом является “глубокой”, то есть если пользователь скопирует и откроет ссылку на внутреннюю модуль-страницу в другом браузере или окне, он попадет на соответствующую страницу.
• SPA размещается на одной web-странице, значит всё необходимое для работы сайта (портала) скрипты и стили должны быть определены в одном месте проекта - на единственной web-странице.
• SPA хранит постоянно состояние (важные переменные) работы клиента (клиентского скрипта) в кэше браузера или в Web Storage.
• SPA загружает все скрипты требующиеся для старта приложения при инициализации web-страницы.
• SPA постепенно подгружает модули по требованию.

Шаблоны SPA (SPA templates)

Как вы уже наверное догадались, SPA - это абстрактное понятие. Это принцип архитектуры приложения. Давайте поговорим с чего начать при разработке сайта по принципам SPA.

Существует большое количество базовых библиотек (фреймворк - от английского слова framework - “основа, структура, каркас”), которые реализуют принцип Single Page Application. Что дают эти фреймворки:

• обеспечивают базовые принципы для SPA разработки, минимизируя трудозатраты на решение универсальных задач (смотри раздел “Составляющие SPA);
• фреймворки созданы сообществом разработчиков, а значит используют опыт создания сайтов множества программистов;
• фреймворки являются отправной точкой для создания структуры на основе Single Page Application.

Так как я уже много лет работаю на платформе NET, то я буду рассматривать шаблоны Single Page Application на основе ASP.NET. Давайте рассмотрим следующую сравнительную таблицу.

Сравнение возможностей шаблонов SPA

В таблице приведены наиболее распространённые шаблоны для как основа построения Single Page Application приложения. Обратите внимание, синим фоном выделены базовые кирпичики для построения полноценного фреймворка, таких как DurandalJS и HotTowel, которые выделены зеленым цветом.

Итак, следуя данным предоставленных в таблице вы можете создать Single Page Application приложение используя “голый” ASP.NET и KnockoutJS. Однако, реализацию работы с данными (DAL) вам придется писать самостоятельно, впрочем, как и управление навигацией и историей навигации в том числе.

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

Описание

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

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

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

Плюсы SPA

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

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

Заключение

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