 |
|
|
|
Введение в 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-версию данного номера можно приобрести в нашем магазине. |
ИГОРЬ АНТОНОВ, страховая компания ОАО «ДальЖАСО», руководитель отдела разработки программного обеспечения,Комментарии отсутствуют
| Добавить комментарий |
|
Комментарии могут оставлять только зарегистрированные пользователи |
|
