Введение в AngularJS::Журнал СА 9.2014
www.samag.ru
     
Поиск   
              
 www.samag.ru    Web  0 товаров , сумма 0 руб.
E-mail
Пароль  
 Запомнить меня
Регистрация | Забыли пароль?
Журнал "Системный администратор"
Журнал «БИТ»
Наука и технологии
Подписка
Где купить
Авторам
Рекламодателям
Магазин
Архив номеров
Вакансии
Контакты
   

  Опросы

Какие курсы вы бы выбрали для себя?  

Очные
Онлайновые
Платные
Бесплатные
Я и так все знаю

 Читать далее...

1001 и 1 книга  
20.12.2019г.
Просмотров: 4293
Комментарии: 0
Dr.Web: всё под контролем

 Читать далее...

04.12.2019г.
Просмотров: 5619
Комментарии: 0
Особенности сертификаций по этичному хакингу

 Читать далее...

28.05.2019г.
Просмотров: 6853
Комментарии: 2
Анализ вредоносных программ

 Читать далее...

28.05.2019г.
Просмотров: 7253
Комментарии: 1
Микросервисы и контейнеры Docker

 Читать далее...

28.05.2019г.
Просмотров: 6326
Комментарии: 0
Django 2 в примерах

 Читать далее...

Друзья сайта  

Форум системных администраторов  

sysadmins.ru

 Введение в AngularJS

Архив номеров / 2014 / Выпуск №9 (142) / Введение в 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-версию данного номера можно приобрести в нашем магазине.


Комментарии отсутствуют

Добавить комментарий

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

               Copyright © Системный администратор

Яндекс.Метрика
Tel.: (499) 277-12-41
Fax: (499) 277-12-45
E-mail: sa@samag.ru