Что представляет собой фреймворк Angular: основные функции и принципы работы

Что такое Angular

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular — Angular 11 вышла в ноябре 2020 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Зачем нужен

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

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

На самом деле, JS фреймворки появились не так давно. Я помню, когда сайты писали с плохо структурированным JS кодом (в большинстве случаев под управлением jQuery). Однако клиентские UI становились все сложнее, и JS потерял репутацию «игрушечного» языка. Современные сайты сильно полагаются на JS, поэтому необходимость правильной организации (и тестирования!) кода возросла. Поэтому клиентские фреймворки стали популярны, и на данный момент их, как минимум, десяток.

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

Так почему же Angular? Потому что он поддерживается на разных платформах (веб, мобильные устройства, нативный десктоп), он мощный, современный, у него отличная экосистема, и он просто крутой. Не убеждены? Позвольте немного углубиться в подробности:

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

Это JS, но лучше. Angular построен на TypeScript, который, в свою очередь, полагается на ES6. Вам не нужно учить полностью новый язык, и вы получаете функции типа статической типизации, интерфейсов, классов, пространства имен, декораторы и т.д.

Не нужно изобретать велосипед. В Angular уже есть много инструментов для создания приложения. Благодаря директивам, HTML элементы могут вести себя динамически. Вы можете усилить формы с помощью FormControl и представить различные правила валидации. Можно легко посылать асинхронные HTTP запросы различных типов. Можно без труда настроить маршрутизацию. В Angular есть еще много функций!

Компоненты разъединены. Angular старался убрать жесткую связь между различными компонентами приложения. Инъекция проходит подобно NodeJS, что позволяет легко заменять компоненты.

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Все манипуляции с DOM проходят там, где должны. В Angular представление и логика приложения не связаны, что сильно очищает и упрощает разметку.

Тестирование в центре внимания. Angular тщательно протестирован и поддерживает юнит тесты и сквозное тестирование с помощью инструментов типа Jasmine и Protractor.

Angular подготовлен к мобильным устройствам и десктопу – один фреймворк под множество платформ.

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

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

Что было до Angular и других SPA-фреймворков

Angular рабо­та­ет по прин­ци­пу SPA, single-page application. Что­бы понять, что это такое, надо сна­ча­ла понять, чем это не является. 

Тра­ди­ци­он­ный под­ход к веб-приложениям был при­мер­но такой: 

1. Поль­зо­ва­тель пере­хо­дил на сайт. 
2. Бра­у­зер отправ­лял сер­вер­ный запрос на поиск нуж­но­го адреса. 
3. Сер­вер нахо­дил стра­ни­цу и пере­да­вал её на сайт. 
4. Поль­зо­ва­тель смот­рел на эту стра­ни­цу и нажи­мал на какую-то ссылку.
5. Бра­у­зер фор­ми­ро­вал повтор­ный запрос, сер­вер соби­рал новую стра­ни­цу и сно­ва воз­вра­щал её на сайт. Цикл повто­рял­ся после каж­до­го дей­ствия пользователя. 

Это мож­но срав­нить с зака­зом еды в ресто­ране, с той лишь раз­ни­цей, что зака­зать мож­но толь­ко одно блю­до за один раз. Зака­зал салат, съел, толь­ко потом зака­зал горя­чее. Теперь сидишь ждёшь, пока тебе его при­не­сут. Съел горя­чее — зака­зал чай. Ждёшь, пока вски­пит чай­ник. При­нес­ли чай — зака­зал десерт. Ждёшь, когда под­ни­мут­ся кор­жи. Вот то же самое, толь­ко в тыся­чу раз быстрее. 

Мед­лен­ные сай­ты всех раз­дра­жа­ли, и раз­ра­бот­чи­ки при­ду­ма­ли SPA — сна­ча­ла появи­лась тех­но­ло­гия, а затем Angular и дру­гие инстру­мен­ты для её реализации. 

Компоненты платформы

Angular-приложения состо­ят из неза­ви­си­мых эле­мен­тов. Эти эле­мен­ты назы­ва­ют­ся ком­по­нен­та­ми, и у каж­до­го ком­по­нен­та своё поведение. 

Напри­мер, лен­та ново­стей — один ком­по­нент. Отве­ча­ет за отоб­ра­же­ние спис­ка ново­стей на стра­ни­це. Кноп­ка «Про­чи­тать» — дру­гой ком­по­нент. Отве­ча­ет за пере­ход со стра­ни­цы спис­ка ново­стей к выбран­ной новости. 

Обыч­но ком­по­нент про­грам­ми­ру­ют так, что­бы он отоб­ра­жал эле­мент на экране и выпол­нял какое-то дей­ствие. Ком­по­нент может реа­ги­ро­вать на клик, сво­ра­чи­вать­ся, раз­во­ра­чи­вать­ся, скры­вать­ся, пере­бра­сы­вать на дру­гую стра­ни­цу и так далее. 

Ком­по­нен­ты под­чи­ня­ют­ся жиз­нен­ным цик­лам — меня­ют­ся и рабо­та­ют по несколь­ким запро­грам­ми­ро­ван­ным сце­на­ри­ям. Возь­мём ситу­а­цию, когда мы пере­хо­дим со стра­ни­цы спис­ка ново­стей к одной ново­сти. В этом слу­чае ком­по­нент «Лен­та ново­стей» уни­что­жа­ет­ся и при необ­хо­ди­мо­сти созда­ёт­ся повтор­но. Жиз­нен­ные цик­лы раз­гру­жа­ют память и уско­ря­ют приложение.

Стра­ни­ца с шап­кой, лен­той ново­стей и тре­мя кноп­ка­ми. Каж­дый эле­мент — неза­ви­си­мый ком­по­нент, кото­рый выпол­ня­ет какое-то дей­ствие внут­ри приложения 

Модули

Все ком­по­нен­ты под­клю­ча­ют­ся к глав­но­му или допол­ни­тель­ным моду­лям. Моду­ли управ­ля­ют ком­по­нен­та­ми. Глав­ный модуль кон­тро­ли­ру­ет всё при­ло­же­ние, а допол­ни­тель­ные моду­ли сле­дят за рабо­той отдель­ных элементов. 

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

Вза­и­мо­связь ком­по­нен­тов и моду­лей. К глав­но­му моду­лю мож­но под­клю­чить любое чис­ло допол­ни­тель­ных моду­лей, а к допол­ни­тель­ным моду­лям — любое чис­ло компонентов 

Сервисы

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

Напри­мер, мы можем под­клю­чить сер­вис «Таб­ли­цы». Это помо­жет отсле­жи­вать стра­ни­цы с боль­шим коли­че­ством дан­ных, кото­рые после обнов­ле­ний меня­ют содер­жи­мое сай­та. Ника­ких дру­гих дей­ствий сер­вис «Таб­ли­цы» выпол­нять не будет.

Директивы

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

Этот зна­чок мож­но полу­чить с помо­щью ком­по­нен­тов и дирек­тив. Ком­по­нен­ты про­став­лять дол­го — если на сай­те 1 000 пози­ций с ценой, то воз­ле всех нужен ком­по­нент со знач­ком дол­ла­ра. Дирек­ти­вы упро­ща­ют про­цесс — вы созда­ё­те один новый блок, и он будет отве­чать за зна­чок дол­ла­ра воз­ле всех цен на сайте.

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

Формы

Прак­ти­че­ски в любом при­ло­же­нии есть фор­мы с поля­ми и кноп­ка­ми — отпра­вить, сохра­нить, оста­вить номер теле­фо­на и так далее. В Angular для этих форм не нуж­но про­ду­мы­вать логи­ку и тра­тить вре­мя на раз­ра­бот­ку — доста­точ­но выбрать бло­ки с под­хо­дя­щи­ми фор­ма­ми и под­клю­чить их к глав­но­му модулю.

Вза­и­мо­связь ком­по­нен­тов, моду­лей, сер­ви­сов, дирек­тив и форм в Angular-приложениях 

Когда использовать

Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними.

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

Окончательный результат демо-приложения Tour of Heroes из Angular документации.

Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular — не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно.

Angular также хорошо подходит для приложений, которые должны работать в нескольких средах разработки. Если приложение должно работать на веб, а также на Windows или Maс, вы можете придерживаться одного из многочисленных туториалов для запуска Angular-приложений с популярным Electron project.

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

Кто поддерживает

Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

AngularJS против Angular

AngularJS относится ко всем версиям 1.x фреймворка. Он преобразует фиксированный HTML в динамический HTML. Angular — это обновление до AngularJS, которое работает быстрее, предлагает модульную структуру, использует интерфейс командной строки и, помимо других преимуществ, упрощает создание динамических SPA.

Согласно опросу разработчиков StackOverflow 2020 года, более 41% разработчиков используют версию Angular или AngularJS для разработки веб-интерфейсов и мобильных интерфейсов. Многие разработчики AngularJS осознают преимущества перехода на Angular, но, поскольку процесс миграции сложен, они не решаются сделать переход. Несмотря на это, множество новых функций, добавленных в каждую версию Angular, делают обновление правильным решением для большинства организаций.

Сложности

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

Рекомендуется писать приложения Angular на TypeScript, поэтому его нужно понимать. Можно писать код на современном JS (ES6), но я редко вижу такое.

TypeScript – надстройка JS. Поэтому ее тоже нужно знать.

Чтобы еще сильнее ускорить процесс разработки, нужно понять Angular CLI.

Для установки Angular и других компонентов активно используется npm. Его также нужно знать.

Умение настраивать таск раннеры типа Gulp или Grunt также может пригодиться. С их помощью можно много чего сделать перед развертыванием приложения в продакшене.

Сейчас широко используются минификаторы типа UglifyJS и упаковщики типа Webpack.

Во время разработки приложения очень важно иметь возможность отлаживать код. Нужно уметь работать в инструментах отладки типа Augury.

Очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования — Jasmine (фреймворк для тестирования) и Protractor (используется для сквозного тестирования).

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

Стоит отметить, что иногда использовать Angular для приложения будет излишне. Если проект маленький или средний без сложного UI и взаимодействия, возможно, лучше взять старый добрый JS. Поэтому очень важно оценить все требования, функции нового приложения и дедлайны перед принятием решения об использовании JS фреймворка.