Введение в AngularJS

 ИГОРЬ АНТОНОВ, страховая компания ОАО «ДальЖАСО», руководитель отдела разработки программного обеспечения,

Введение в AngularJS

С самого появления JavaScript получил репутацию гадкого утенка. Лишь спустя годы ему удалось стать настоящей рок-звездой среди языков программирования

Немного истории

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

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

Черная полоса JavaScript продолжалась вплоть до 2006 года, пока Джон Резиг не представил альфа-версию библиотеки jQuery. Крохотной библиотеке было суждено сыграть роль революционера и заставить разработчиков взглянуть на JavaScript с другой стороны. Библиотека элегантно решила ряд проблем (взаимодействие с Ajax, кроссбраузерность, работа с DOM), и веб-разработчики повсеместно начали внедрять jQuery в свои проекты.

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

JavaScript получил второе рождение: jQuery решила ряд проблем, разработчики начали оптимизировать интерпретаторы, позволив JS-коду исполняться существенно быстрее. Улучшения были налицо, но новая проблема не заставила себя долго ждать.

Количество кода на JavaScript стало зашкаливать, а типичное веб-приложение превращаться в лапшу из html/css/js-кода. Никто не задумывался о паттернах, методах разработки и других проверенных временем практикам разработки. Все наслаждались простотой разработки и распихивали тонны кода по всему приложению. Популярность, низкий порог вхождения в очередную волну хаоса и создали в нестабильном мире JS новую глобальную проблему.

Новая ступень развития JavaScript

Взрослые языки программирования, прошедшие длинный путь становления, прекрасно отработали различные паттерны проектирования. Оставалось лишь собрать лучшие из них и перенести в мир JavaScript. Так стали появляться первые фреймворки. В основе большинства лежали модный архитектурный MV*-паттерн (MVC, MVVM, MVP, HMVC и т.д.) и, само собой, библиотека jQuery (чуть позже начали избавляться и от нее).

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

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

AngularJS – героический фреймворк

Впервые AngularJS был представлен в 2009 году двумя разработчиками – Мишко Хевери (Misko Hevery) и Адамом Абронсом (Adam Abrons) из Brat Tech LLC. Чуть позже Абронс покинул проект, и дальнейшим развитием AngularJS стал заниматься Хевери (в тот момент сотрудник Google) со своими коллегами. Так проект перекатился под крыло всемирно известной корпорации.

Ключевой компонент AngularJS – директивы, позволяющие естественным образом расширить возможности HTML. Они элегантно добавляются к существующим тегам и прокидывают невидимый мост между HTML и JavaScript. Их можно сравнить с кирпичиками, из которых строится приложение.

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

Преимущества AngularJS

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

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

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

Декларативный подход выделяет AngularJS среди других фреймворков. Разработчики не стали ввязываться в священные войны против HTML. Вместо этого они попытались расширить возможности языка разметки и вывести его на новый уровень с помощью дополнительных директив. Не хватает возможностей – просто создаем директиву в соответствии со своими предпочтениями.

Другая сильная сторона AngularJS – безграничные возможности тестирования. Тестировать можно абсолютно все, и чем раньше разработчик приучит себя к написанию тестов, тем больше ему удастся сэкономить времени.

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

Производительность AngularJS

Вопросы производительности AngularJS – одна из самых наболевших тем. «Тормозит ваш angular с крутым двухсторонним связыванием!» – типичная реплика во время сессии вопросов. Любой ненавистник может несколькими строками кода продемонстрировать тормоза во всей красе.

Перед тем как сетовать на снижение производительности, необходимо досконально разобраться в предмете. В AngularJS есть такое понятие, как область видимости (scope). Эти объекты связаны с моделью данных и выступают связующим звеном между представлением и контроллером. Все, что находится в области видимости, подвергается строгому «наблюдению», тем самым позволяя директивам моментально реагировать на изменение состояния или значения.

Отсюда следует, что область видимости = модель, и не нужно пытаться в нее запихнуть все данные из модели. Ничего хорошего из этого все равно не выйдет. Область видимости – модель представления (вспоминаем о паттерне MVVM) и должна содержать только данные, необходимые для текущего отображения. Разве есть много задач, где требуется отображать несколько тысяч элементов?

Хорошо, вроде все ясно – делаем по спецификации, избавляемся от проблем с производительностью. Но из-за чего несколько тысяч объектов в области видимости вызывают подобные проблемы? Ведь по современным меркам это совсем немного.

Проблема кроется в реализации двухстороннего связывания. Чем больше объектов, тем больше создается наблюдателей ($watch). Они должны оперативно сообщать директивам об изменении свойств, чтобы те, в свою очередь, успели обновить DOM. Обновляются они очень часто, и соответственно, чем больше объектов, тем больше тормозов.

Классический пример

Продемонстрировать AngularJS в работе я решил на классическом примере. Мы попробуем разработать простейший список задач (TODO-лист). Подобные приложения уже стали своеобразным «Hello World» в мире JavaScript. Каждый новый фреймворк обязательно комплектуется подобным демонстрационным примером, чтобы разработчик мог сравнить решение одной задачи разными инструментами.

Статью целиком читайте в журнале «Системный администратор», №9 за 2014 г. на страницах 64-67.

PDF-версию данного номера можно приобрести в нашем магазине.

Комментарии могут оставлять только зарегистрированные пользователи