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

  Опросы
  Статьи

Учебные центры  

Карьерные мечты нужно воплощать! А мы поможем

Школа Bell Integrator открывает свои двери для всех, кто хочет освоить перспективную

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

Гость номера  

Дмитрий Галов: «Нельзя сказать, что люди становятся доверчивее, скорее эволюционирует ландшафт киберугроз»

Использование мобильных устройств растет. А вместе с ними быстро растет количество мобильных

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

Прошу слова  

Твердая рука в бархатной перчатке: принципы soft skills

Лауреат Нобелевской премии, специалист по рынку труда, профессор Лондонской школы экономики Кристофер

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

Как хорошо вы это знаете  

Портал Инкоманд. Для чего он? Для кого? Какие проблемы решает?

Компания «ЕМДЕВ» – создатель интернет-портала, предлагает всем желающим протестировать себя на

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

1001 и 1 книга  
19.03.2018г.
Просмотров: 10102
Комментарии: 0
Потоковая обработка данных

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

19.03.2018г.
Просмотров: 8311
Комментарии: 0
Релевантный поиск с использованием Elasticsearch и Solr

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

19.03.2018г.
Просмотров: 8407
Комментарии: 0
Конкурентное программирование на SCALA

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

19.03.2018г.
Просмотров: 5343
Комментарии: 0
Машинное обучение с использованием библиотеки Н2О

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

12.03.2018г.
Просмотров: 6030
Комментарии: 0
Особенности киберпреступлений в России: инструменты нападения и защита информации

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

Друзья сайта  

 Введение в 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