Билет 1

Что такое SPA? Опишите архитектуру приложений такого типа.

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

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

первый “плюс” – работа на большом количестве устройств, а значит, создав одно приложение, вы получаете гораздо большую аудиторию пользователей нежели при использовании стандартного подхода.

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

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

SPA: Минусы

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

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

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

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

SPA размещается на одной web-странице, значит всё необходимое для работы сайта (портала) скрипты и стили должны быть определены в одном месте проекта – на единственной web-странице.

SPA хранит постоянно состояние (важные переменные) работы клиента (клиентского скрипта) в кэше браузера или в WebStorage.

SPA загружает все скрипты требующиеся для старта приложения при инициализации web-страницы.SPA постепенно подгружает модули по требованию.

Билет 2

Опишите принцип работы фреймворка Angular и архитектуру приложения на данном фреймворке.

AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений^[5]. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

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

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

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

Использование html5 для добавления и создания нового функционала.Используются именно новые стандарты html5. В итоге, создается разделение между файлами, которые отображают контент, и непосредственно логикой приложения.

Начало разработки – проще простого. Хотите начать работу с Angular? Тогда вам стоит только включить файл angular.js, который имеет весь необходимый базовый функционал. Дополнительные инстурменты разделяются на отдельные модули, который по необходимости можно подключать.

Управления DOM через встроенные директивы и атрибуты. Данные атрибуты являются частью html5.

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

Разделение программной и визуальной части. Информацию, которые Angular выводит на экран появляются через переменные {{ param }} и в то время, как идет разработка логики, визуальная часть может дорабатываться дизайнерами.

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