Файл: Критерии выбора средств разработки WEB-приложений.pdf

Вот некоторые примеры задач, которые можно решать с помощью Perl:

- проверка пользователей Windows NT на несоответствие их статуса и возможностей;

- управление NT-сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;

- может работать и с протоколом FTP;

- системная поддержка UNIX и Windows.

ГЛАВА 2. РАЗРАБОТКА WEB-ПРИЛОЖЕНИЯ ДЛЯ ОЦЕНКИ РЕКЛАМНЫХ КОНСТРУКЦИЙ

2.1. Понятие одностраничного приложения

Single page application (SPA) – это приложение, которое работает в браузере и не перезагружает страницу во время работы. Как и любое другое приложение, оно предназначено для того, чтобы помочь пользователю в решении стоящей перед ним задачи, например: «подготовить документ» или «администрировать веб-сервер».

• SPA могут использоваться любые серверные технологии. Поскольку значительная часть веб-приложения перемещается в браузер, требования к серверу можно существенно ослабить.

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

Рисунок 2.1 - Схема сравнения работы одностраничного приложения и традиционного подхода к созданию web-сайтов

23

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

SPA может реагировать как персональное приложение. Оно минимизирует время реакции за счет того, что переносит рабочие (временные) данные и часть обработки с сервера в браузер.

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

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

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

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

SPA, как и сайт, работает на разных платформах. В отличие от большинства персональных приложений, хорошо написанное SPA может работать в любой операционной системе, где есть современный браузер с поддержкой HTML5. Обычно эта особенность считается преимуществом для разработчика, но она не менее важна многочисленным пользователям, работающим с несколькими устройствами, скажем, с Windows на работе, с Mac’ом дома, с сервером под управлением Linux и с телефоном Android.

SPA может предложить лучшее из обоих миров – мгновенную реакцию персонального приложения наряду с переносимостью и доступностью веб-сайта. JavaScript SPA доступно более чем миллиарду устройств, которые поддерживают современные браузеры и не нуждаются в сторонних подключаемых модулях. Приложив немного усилий, можно сделать так, что оно будет работать на настольных ПК, планшетах и смартфонах с разными операционными системами. SPA легко обновлять и распространять, обычно это не требует никаких действий со стороны пользователя [12].

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

2.2. Технологии, используемые для реализации одностраничного web-приложения

На данный момент есть много фреймворков с помощью которых можно реализовать одностраничное приложение. У каждого есть свои плюсы и недостатки.

AngularJS – это клиентский MVC-фреймворк, написанный на JavaScript. Он выполняется в веб-браузере и оказывает огромную помощь в создании современных, одностраничных веб-приложений, использующих технологию AJAX. Это – многоцелевой фреймворк, но особенно ярко его особенности проявляются при реализации веб-приложений типа CRUD (Create Read Update Delete).

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

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

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

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

AngularJS имеет несколько скрытых возможностей, механизм внедрения зависимостей (Dependency Injection, DI) и сильный упор на тестируемость. Встроенная поддержка DI существенно упрощает сборку веб-приложений из небольших, надежно протестированных служб. Архитектура фреймворка и окружающих его инструментов способствует применению тестирования на всех этапах разработки.

AngularJS относительно новый игрок на поле клиентских MVC-фреймворков; версия 1.0 была выпущена только в июне 2012. В действительности работа над этим фреймворком началась в 2009, как персональный проект Мишко Хеври (Miško Hevery), сотрудника Google. Однако идея фреймворка оказалась настолько хороша, что позднее проект был официально поддержан компанией Google Inc., и с того момента над фреймворком работает целая команда, а все работы оплачиваются компанией Google.

AngularJS – это проект с открытым исходным кодом, который можно найти на GitHub (https://github.com/angular/angular.js), и лицензируется компанией Google, Inc. на условиях лицензии MIT.

• стандартной форме HTML значением элемента ввода является значение, которое будет отправлено на сервер в составе формы, как показано на рисунке 2.2.

Рисунок 2.2 - Передача значений на сервер в составе формы

Проблема заключается в том, что мы вынуждены работать со значениями в элементах ввода, так как они отображаются на экране. Это часто не совпадает с нашими желаниями. Например, поле ввода даты может позволять пользователю вводить строку в некотором предопределенном формате, например, «12 марта 2013». Но в программном коде было бы желательно работать с этим значением в виде объекта Date. Однако постоянное перекодирование из одного формата в другой слишком утомительное занятие и чревато ошибками. Фреймворк AngularJS отделяет модель от представления. Вы позволяете директивам ввода заботиться об отображении значений, а AngularJS позаботится об обновлении модели в случае изменения значений [13]. Это дает возможность работать с моделями, например, в контроллерах, не беспокоясь о том, как данные отображаются или вводятся (рисунок 2.3).

Рисунок 2.3 - AngularJS отделяет модель от представления

Основная концепция фреймворка AngularJS состоит в архитектурном шаблоне MVC (Model-View-Controller). Модель-Представление-Контроллер (или MVVM, обозначающий Модель-Представление-Представление-Контроллер, который очень похож) развивается как способ разделения логических блоков при разработке крупных приложений. Это дает разработчикам отправную точку в принятии решения о том, как и где можно разделить обязанности. Архитектурный шаблон MVC делит приложение на три отдельные модульные части:

Модель является движущей силой приложения. Это, как правило, данные приложения, обычно полученные с сервера. Любой пользовательский интерфейс с данными, которые видит пользователь, получен из модели или подмножества модели.

Представление – это пользовательский интерфейс, который пользователь видит и взаимодействует. Он динамический и генерируется на основе текущей модели приложения.

Контроллер – это уровень бизнес-логики и представления, который выполняет такие действия, как выборка данных, и принимает решения, например, как представить модель, какие части ее отображать и т. д. [14] Основным конкурентом AngularJS является KnockoutJS.

KnockoutJS – это библиотека JavaScript с открытым исходным кодом. Он был создан, чтобы позволить создавать динамичные и насыщенные веб-приложения. Он использует шаблон проектирования Model-View-View-Model (MVVM). Knockout упрощает реализацию сложного пользовательского интерфейса, который реагирует на пользовательские действия. Это одна из самых легких библиотек JavaScript, доступных сегодня. Он также не пытается быть универсальной структурой. Он служит единой цели: привязка данных вашей модели ViewModel к вашему пользовательскому интерфейсу [15].

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

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

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

2.3. Клиентская часть web-приложения для оценки эффективности рекламных конструкций

Данное приложение имеет модульную структуру. Каждый модуль является самостоятельной и независимой единицей. Перечислим модули, на которые декомпозируется приложение:

Core; Auth; Layout; Tasks; Map.

Рисунок 2.4 - Схема одностраничного web-приложения для оценки рекламных конструкций

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

Core – основной модуль приложения. В него импортируются модули, предназначенные для расширения базового функционала AngularJS. Например, это модуль ngCookies, позволяющий работать с Cookie.

Cookie – это небольшая порция текстовой информации, которую сервер передает браузеру. Браузер будет хранить эту информацию и передавать ее серверу с каждым запросом как часть HTTP заголовка. Одни значения cookie могут храниться только в течение одной сессии, они удаляются после закрытия браузера [17].