Angular – обзор

Длительное время программирование серьезных продуктов для ПК было «уделом избранных», а для того, чтобы стать программистом, требовалось сравнительно длительное обучение хотя бы одному языку. Ситуация в корне изменилась после появления фреймворков – универсальных программных платформ, в состав которых входили готовые инструменты для разработки.

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

Рассмотрим его особенности, плюсы и минусы, а также историю появления более подробно.

Angular – что это?

Angular – это типичный фреймворк для frontend-разработчиков, который использует язык JavaScript (отсюда пошло его второе название – AngularJS) и имеет открытый исходный код. Он предоставляет возможность полноценной работы по созданию приложений, так как содержит в своем составе следующие компоненты:

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

Главным отличием framework Ангуляр от предшественников, во многом объяснившим стремительный рост его популярности, стала возможность работы с инструментами HTML и CSS. В результате даже не самый квалифицированный или опытный программист получил возможность разрабатывать и внедрять достаточно сложные приложения, причем в разных форматах – для браузера, для мобильных устройств или в десктопном варианте. Ни один фреймворк до появления Angular не был способен на это.

История

Прообраз фреймворка был создан в 2009 году двумя разработчиками – Адамом Абронсом и Мишко Хевери. Несколько позднее проект перешел под крыло Google, где работал второй из программистов. Именно с помощью одной из самых крупных IT-корпорация мира Angular вышел на рынок в готовом виде в октябре 2010 году.

Почти сразу он стал очень популярным среди разработчиков самых разных стран, что объясняется предельно просто. Ангуляр заметно превосходил остальные фреймворки, выпущенные к тому времени, причем практически по всем параметрам. Вплоть до 2013 года у него попросту не было конкурентов. В 2013 году появился мало в чем уступающий React, еще через год – Vue.js.

Но помешать лидирующему положению Angular они уже не смогли, хотя и составили серьезную конкуренцию.

Как устроен фреймворк?

Фреймворк ценен не сам по себе, а за счет своих составляющих, упрощающих разработку. Что предлагает Angular:

• Компоненты. Структурные блоки, из которых и состоит приложение, написанное на Angular. Если вам нужно написать сайт – минимальными компонентами будут шапка, контент и футер. Физически Angular повторяет структуру Java – все структурные блоки хранятся в отдельных файлах, что упрощает разработку и поддержку сложного приложения. Важная особенность: компоненты полностью автономны, изначально зависимостей между компонентами нет. Это позволяет вам безболезненно добавлять или убирать любые из них.
• Модули. Если просто, то модули – это скрипты компонента. У каждого компонента есть как минимум один центральный модуль, описывающий основную линию поведения. Обычно к основному модулю присоединяют ряд дополнительных, расширяющих функционал оригинального – это позволяет построить систему с высокой инкапсуляцией (изолированностью частей друг от друга). Один дополнительный модуль = одно действие.
• Формы. Набор готовых форм, через которые пользователь отправляет данные на сервер. Форм – много, на любой вкус и для любой ситуации.
• Сервисы. Если модули – это скрипты, то сервисы – это классы. Они могут как хранить информацию (data-driven service), так и что-то делать. Сервисами удобно соединять между собой разные части приложений, потому что для сервиса нет проблемы в том, чтобы обратиться к какому-либо компоненту, модулю или форме. Сервисы могут иметь (и чаще всего имеют) свою собственную архитектуру, которая тоже строится по принципам «Один сервис = одно действие».
• Директивы. Глобальные модули с поведением сервисов. Если с помощью сервисов вы управляете одной страницей, то с помощью директив можно управлять всеми страницами сразу. Правильно составленные директивы в десятки раз упрощают разработку нового функционала для уже готового приложения.

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

Если вам нужна, например, новая библиотека, которую вы хотите написать на Angular – вы просто описываете структуру данных «Библиотека», добавляете функционал, пишете интерфейс и пользуетесь.

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

Популярность Angular объясняется длинным списком достоинств платформы для программирования. Ключевыми из них выступают такие:

• удобная структура кода;
• присутствие среди инструментария шаблонов дизайна;
• обширный набор самых разнообразных инструментов для разработки приложений;
• самостоятельность каждого отдельного компонента платформы программирования одновременно с возможностью их быстрой интеграции;
• упрощенные правила разметки, которые достигаются отсутствием связи между логикой и представлением приложения;
• опция сквозного тестирования, в том числе – с применением наиболее популярных инструментов, например, Protractor и Jasmine;
• универсальность, позволяющая программировать для мобильных устройств и ПК;
• многочисленное сообщество, логичным следствием которого становится большое количество тематических форумов и любительского инструментария, который нередко оказывается очень эффективным.

Еще одним преимуществом Angular, заслуживающим отдельного описания, выступает двусторонняя привязка данных. Благодаря ей, любое изменение в базе данных отражается на соответствующей странице приложений. И наоборот – корректировки, внесенные пользователем, также мгновенно сохраняются в базе данных.

Недостатки

Применительно к Angular правильнее говорить не о недостатках, а о некоторых сложностях работы с фреймворком. Дело в том, что платформа стала одной из первых по-настоящему универсальных, но все-таки была выпущена достаточно давно. Она представляет собой разветвленную и объемную систему, полноценное использование которой требуется изучения нескольких дополнительных программных продуктов или технологий, включая:

• уже упомянутую выше TypeScript - надстройку JavaScript;
• модуль Angular CLI для реализации интерфейса командной строки;
• инструменты отладки Augury;
• упаковщики (например, Webpack) и модификаторы (например, UglifyJS).

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

Конкуренты Angular

Как было отмечено ранее, реальные у фреймворка Ангуляр достаточно быстро появились серьезные конкуренты. Первым в 2013 году стал React, разработанный специалистами Facebook. Он представляет собой набор библиотек на JavaScript, позволяющих программировать быстро и легко, причем приложения с высокой производительностью. Важным плюсом выступает низкий порог входа, так как для эффективного использования React требуется минимум начальных знаний.

Еще через год – в 2014-м – появился Vue.js. Он также базируется на JavaScript и обладает открытым исходным кодом. Программная платформа обладает большинством достоинств, характерных для Angular, но легче в освоении, удобнее в работе и имеет очень детализированную сопроводительную документацию. В результате популярность Vue.js стала быстро расти.

Angular или React?

Однозначного ответа нет – некоторые компании используют Angular, некоторые – React, и всех все устраивает. Но если вы только начинаете учить веб-разработку, вам лучше выбрать Angular по следующим причинам:

• Angular – это фреймворк. Как новичку, вам жизненно необходимо научиться работать с фреймворками – понять их архитектуру, преимущества и слабости. React – это библиотека, она не даст вам полного понимания фреймворков.
• За знание Angular больше платят. Поскольку он – сложнее, чем React, вы сможете претендовать на более высокую зарплату.
• На Angular проще поддерживать большие проекты. Причина – в модульности, которую мы описывали выше. Большие проекты – это лучший источник первой работы.
• Простое тестирование. Angular предоставляет специальный инструмент для тестирования, Protractor. Вам будет легче найти свои ошибки и научиться на них.

Хотя есть и проблемы, которые вам нужно учитывать:

• Для того, чтобы использовать Angular, вам нужно выучить TypeScript – надстройку над JavaScript.
• На проектах Angular нужен далеко не всегда – для небольших проектов React подходит лучше.
• Вы в любом случае будете использовать не все возможности Angular, но фреймворки устроены так, что из них нельзя выкинуть кусок – придется жертвовать производительностью.
• Angular примерно в 2 раза менее популярный, чем React и Vue (на основе скачиваний исходников) – найти работу будет сложнее.
• У Angular есть проблемы с обратной совместимостью, поскольку фреймворк с каждой новой версией существенно меняется. Как следствие – вам придется учить не только «базу», но и основные приемы, использовавшиеся в более ранних версиях.

Angular 2

Сложная конкурентная борьба с явно незначительными шансами на успех не устроила разработчиков Angular. Логичным следствием стало появление второй версии фреймворка. Причем даже без совместимости с предыдущей, что показывает глубину переработки исходного продукта. Фактически, была создана новая платформа для разработки приложений под названием Angular 2.

Главным отличием от первой версии стало использование другого языка программирования – TypeScript. Он не является самостоятельным и выступает своеобразным расширением JavaScript, обладая при этом заметно большим набором функциональных возможностей. Хотя сохранилась опция разработки ПО с применением исходного JS. К ней добавилась отдельная ветка для программирования еще на одном языке – Dart. Позднее на ее основе был создан самостоятельный проект AngularDart.

Ключевым преимуществом над первой версией выступило более простое и быстрое освоение фреймворка. Работать в среде программирования стало намного удобнее.

К тому же заметно повысилась производительность создаваемых приложений.

Что дальше?

В дальнейшем новые версии платформы появлялись достаточно часто, пусть и не содержали настолько революционных изменений. Последняя из них – 14.0.4 выпущена совсем недавно – 29.06.2022 года. Она объединила все ключевые новшества предыдущих версий, к числу которых относятся такие:

• функция предварительной компиляции AOT (Ahead of time), которая ускоряет загрузку страниц;
• опция формирования страниц непосредственно на сервере;
• модифицированный HTTPCLient;
• мультиязычный интерфейс;
• улучшенный интерфейс командной строки;
• оптимизация рендера Ivy.

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

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

Что почитать или посмотреть по теме?

1. Сайт с набором сопроводительной документации по AngularJS.
2. Документация от разработчиков фреймворка.
3. Сайт подкастов Angular Air.
4. Репозиторий Angular Universal на GitHub (на русском языке).
5. Видео ролик на YouTube «Angular Основы. Полный курс для начинающих».
6. Плейлист на YouTube «Уроки Angular Теория».
7. Видео ролик на YouTube «Angular – самый популярный JS-фреймворк».

Где учить Angular?

Angular – это часть JavaScript, более глобально – часть front-end разработки. Если у вас нет скилов ни в JS, ни во фронт-энде, то просто выучить Angular вам будет недостаточно, потому что: а) это будет очень сложно; б) вам будет сложно применять где-либо полученные знания. Поэтому для полноценного изучения Angular нужны курсы. Вот вам несколько вариантов:

• Angular. Подробный курс по фреймворку, длительность – полтора месяца. Вам расскажут, как организовать работу с помощью фреймворка, как использовать сервисы для обмена данными, научат тестировать и автоматизировать приложения. Результат: дополнительный крупный проект в портфолио. Стоимость: 4 500 рублей в месяц, рассрочка на 6 месяцев.
• Разработка веб – приложений на AngularJS. Курс, дающий всю базу Angular, как теоретическую, так и практическую. Длится 24 академических часа. Можно записаться как на онлайн-обучение, так и на очное обучение, в последнем случае будете учиться по субботам. Стоимость: 23 990 рублей.
• Frontend-разработчик. Огромный курс по фронт-энду на 355 академических часов. Готовят фронт-эндов с нуля, обучают полному циклу разработки веб-приложений с точки зрения фронта. Попасть на эти курсы сложно – вам нужно будет пройти собеседование и тестирование. Серьезный отбор связан с тем, что курс финансируется государством – оно может покрыть вам всю стоимость обучения при определенных условиях. Стоимость курса: 95 000 рублей.
• Дистанционное обучение Frontend-разработчиков с любого уровня. Учат фронтов с нуля до миддла. Дают личного наставника, помогают с трудоустройством. Есть варианты бесплатного обучения. Покрывают все необходимые технологии, начиная с HTML и заканчивая неочевидными фишками Angular. Стоимость: 22 000 рублей в месяц.
• Курс Фронт-енд разработчик (Junior). Полугодовой курс, после которого вы станете крепким джуном. Вас обучат основным языкам и технологиям, теоретическим аспектам разработки (ООП, к примеру), фреймворкам и сопроводительным технологиям вроде Git. Стоимость: 14 500 рублей в месяц.

FAQ

Что представляет собой Angular?

Angular – это платформа для программирования или фреймворк, в состав которого входит обширный набор инструментов для разработки приложений. Он базируется на языке JavaScript и обладает открытым исходным кодом.

Когда появился Angular?

Прообраз фреймворка появился в 2009 году. Первая официальная версия программной платформы – уже под эгидой Google – опубликована в ноябре 2010 года.

В чем основные достоинства фреймворка?

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

Почему Angular длительное время входит в число самых популярных фреймворков?

До появления Angular на рынке попросту не было настолько многофункциональной, универсальной и разносторонней платформы для программирования. Фреймворк стал первым, логичным следствием чего явилась быстро растущая популярность.

В чем причины разработки Angular 2 и каковы основные особенности этой версии?

В 2013-2014 годах были разработаны сразу два реальных конкурента первой версии Angular, по многим показателям превосходившие ее. Это React и Vue.js. В результате значительная часть программистов перешла на новые платформы, что вынудило разработчиков выпустить новую версию продукта – Angular. Она серьезно отличалась от первой и даже не поддерживала ее.

Какая версия фреймворка является актуальной на сегодня?

Последняя версия фреймворка – Angular 14.0.4 – опубликована 29.06.2022 года. Она поддерживает все предыдущие варианты платформы, кроме самого первого – AngularJS.

Подведем итоги

1. Angular – первый полноценный фреймворк, появившийся на рынке в 2010 году. Платформа для программирования была написана на JavaScript и имела открытый исходный код.
2. Он содержал внушительный набор инструментов для быстрой и беспроблемной разработки приложений любой сложности – мобильных, браузерных и десктопных.
3. Платформа программирования быстро стала популярной и вплоть до 2013-2014 годов попросту не имела конкурентов.
4. После некоторого падения востребованности лидирующие позиции фреймворка были восстановлены в результате появления Angular 2.
5. В настоящее время используется Angular 14.0.4, который остается одной из самых популярных в мире платформ для программирования.