19 концепций, которые нужно изучить для того, чтобы стать эффективным Angular-разработчиком

TODO-приложение во фронтенд-разработке — это то же самое, что «Hello world» в обычном программировании. При создании TODO-приложений можно изучить выполнение CRUD-операций средствами того или иного фреймворка. Но часто подобные проекты лишь весьма поверхностно касаются того, что на самом деле умеет фреймворк.

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



Для освоения Angular нужно очень много всего изучить. Многие разработчики застревают на начальных этапах освоения Angular. Происходит это из-за того, что они не знают о том, куда им двигаться, или не знают того, по каким ключевым словам им искать информацию, которая позволит им сделать шаг вперёд. Автор этого материала говорит, что ей, когда она начинала осваивать Angular 2+, хотелось бы, чтобы ей попалось бы руководство по данному фреймворку, похожее на это.

1. Модульная архитектура Angular

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

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

Существует множество способов структурирования модулей в пределах приложения. Кроме того, изучение различных архитектурных паттернов помогает понять то, как организовать структуру приложения с прицелом на его масштабирование в ходе его роста. Кроме того, разумное использование модулей помогает изолировать код и предотвратить дублирование кода в проекте.
В следующем подразделе будут приведены примеры запросов, по которым можно поискать дополнительные материалы по этой теме. Такие подразделы встретятся вам и в других разделах этого материала.

▍Поисковые запросы

• Angular architecture patterns (Архитектурные паттерны Angular).
• Scalable Angular application architecture (Масштабируемая архитектура Angular-приложений).

2. Односторонний поток данных и иммутабельность

Многим разработчикам, использовавшим Angular 1, пришлась по душе концепция двустороннего связывания. Это, на самом деле, было одним из привлекательных качеств Angular. Но со временем, по мере усложнения Angular-приложений, стало понятно, что двустороннее связывание создаёт проблемы с производительностью.

Оказалось, что двустороннее связывание, на самом деле, нужно не так уж и часто.
В Angular 2+ всё ещё можно пользоваться двусторонним связыванием, но лишь тогда, когда разработчик явно выражает намерение задействовать эту возможность. Такой подход заставляет тех, кто пишет код приложений, задумываться о направлении потоков данных. Это, кроме того, позволяет более гибко работать с данными. Гибкость достигается благодаря возможности настройки того, как именно данные должны перемещаться в приложении.

▍Поисковые запросы

• Angular data flow best practices (Рекомендации по работе с потоками данных в Angular).
• Uni-directional flow in Angular (Односторонний поток данных в Angular).
• Advantages of one way binding (Преимущества одностороннего связывания).

3. Атрибутивные и структурные директивы Angular

Директива — это расширение HTML посредством пользовательских элементов. Атрибутивные директивы, или атрибуты, позволяют изменять свойства элементов. Структурные директивы позволяют влиять на содержимое страниц, удаляя элементы из DOM или добавляя их в DOM.
Например — ngSwitch и ngIf — это структурные директивы, так как они оценивают передаваемые им параметры и определяют, должны или нет некие части DOM присутствовать в документе.

Атрибуты представляют собой механизмы изменения стандартного поведения элементов, настраиваемые программистом.

Изучение того, как пользоваться этими двумя видами директив, поможет расширить возможности вашего приложения и сократить объём дублирующегося кода. Атрибутивные директивы, кроме того, могут помочь в выделении неких шаблонов изменения элементов, которые используются в разных местах приложения.

▍Поисковые запросы

• Angular attribute directives (Атрибутивные директивы Angular).
• Angular structural directives (Структурные директивы Angular).
• Angular structural directive patterns (Паттерны структурных директив Angular).

4. Методы жизненного цикла компонентов

Каждый фрагмент кода имеет собственный жизненный цикл, который определяет то, как нечто создаётся, выводится на экран, а затем исчезает. В Angular есть такое понятие, как «жизненный цикл компонента». Он выглядит примерно так:

• Создание.
• Рендеринг.
• Рендеринг дочерних компонентов.
• Проверка на изменение свойств, связанных с данными.
• Уничтожение.
• Удаление из DOM.

У программиста есть возможность вмешиваться в работу компонента в ключевые моменты данного цикла, ориентируясь, например, на некие события. Это позволяет настроить то, как программа ведёт себя в различные моменты жизненного цикла компонентов.

Например, может понадобиться загрузить некие данные до вывода страницы на экран. Сделать это можно в методе жизненного цикла компонента ngOnInit(). Или, возможно, в определённый момент работы с приложением нужно отключиться от базы данных. Сделать это можно в методе ngOnDestroy().

▍Поисковые запросы

• Angular life cycle hooks (Методы жизненного цикла компонентов Angular).
• Component life cycle (Жизненный цикл компонента).

5. HTTP-сервисы и Observable-объекты

То, о чём мы тут говорим, относится, скорее, не к особенным возможностям Angular, а к ES7. Просто получилось так, что в Angular работа с Observable-объектами реализована на уровне фреймворка. Похожие механизмы есть и в React, и в Vue, и в других библиотеках и фреймворках, основанных на JavaScript.

Observable-объекты — это паттерны, которые помогают эффективно работать с данными в системах, основанных на событиях. Для того чтобы эффективно разрабатывать Angular-приложения, нужно знать о том, как пользоваться HTTP-сервисами и Observable-объектами.

▍Поисковые запросы

• JavaScript observable patterns (Шаблоны работы с Observable-объектами в JavaScript).
• Angular HTTP and observables (HTTP и Observable-объекты в Angular).
• ES7 observable feature (Observable-объекты в ES7).

6. «Умные» и «глупые» компоненты

Многие, разрабатывая Angular-приложения, стремятся к тому, чтобы помещать в некие компоненты всё, что нужно для работы этих компонентов. Правда, это не совсем то, что можно было бы рекомендовать к практическому применению. Идея использования в Angular «умных» и «глупых» компонентов — это та концепция, о которой, пожалуй, стоило бы говорить чаще, чем о ней говорят сейчас, особенно — в кругах начинающих разработчиков.

То, является ли компонент «умным» или «глупым», определяет его роль в общей схеме устройства приложения. «Глупые» компоненты часто не имеют состояния, они отличаются простым, предсказуемым и понятным поведением. Рекомендуется всегда, когда это возможно, ориентироваться на создание и использование «глупых» компонентов.

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

▍Поисковые запросы

• Smart/dumb Angular components (Умные и глупые компоненты Angular).
• Stateless dumb components (Глупые компоненты без состояния).
• Presentational components (Презентационные компоненты).
• Smart components in Angular (Умные компоненты в Angular).

7. Структура приложения и практические рекомендации по её формированию

Если говорить о структуре приложения и о применении при её создании практических рекомендаций, то тут хоть какую-то помощь программисту способны оказать средства командной строки Angular. Разработка Angular-приложения (или любого другого приложения) похожа на строительство дома. А именно, речь идёт о практических методиках, годами вырабатываемых и оптимизируемых сообществом разработчиков. Применение таких методик структурирования приложений приводит к появлению качественных проектов. Собственно говоря, это относится и к Angular.

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

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

▍Поисковые запросы

• Single repo Angular apps (Angular-приложения, размещаемые в одном репозитории).
• Angular libraries (Библиотеки Angular).
• Angular packages (Пакеты Angular).
• Angular bundles (Бандлы Angular).
• Angular micro apps (Микро-приложения Angular).
• Monorepo (Монорепозитории).

8. Синтаксис привязки данных и шаблоны

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

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

▍Поисковые запросы

• Angular property binding (Привязка свойств в Angular).
• Angular event binding (Привязка событий в Angular).
• Angular two-way binding (Двусторонняя привязка данных в Angular).
• Angular interpolation (Интерполяция в Angular).
• Angular passing constants (Передача констант в Angular).

9. Feature-модули и маршрутизация

Feature-модули в Angular — это недооценённая технология. Такие модули, на самом деле, предоставляют разработчику фантастический способ организации и обособления наборов бизнес-требований к приложениям. Они помогают ограничивать ответственность фрагментов кода и предотвращать, в долгосрочной перспективе, загрязнение кода.

Существует пять типов Feature-модулей (Domain, Routed, Routing, Service, Widget), каждый из них отвечает за реализацию определённого функционала. Изучение того, как пользоваться Feature-модулями совместно с маршрутизацией, может помочь в создании отдельных блоков функционала. Это поможет и реализовывать в приложениях качественную и понятную схему разделения ответственности.

▍Поисковые запросы

• Angular feature modules (Feature-модули в Angular).
• Shared feature structures in Angular (Структуры Angular, реализующие возможности, предназначенные для совместного использования).
• Feature module providers (Провайдеры Feature-модулей).
• Lazy loading with routing and feature modules (Ленивая загрузка с маршрутизацией и Feature-модули).

10. Формы и валидация данных (реактивные формы и валидаторы)

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

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

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

▍Поисковые запросы

• Angular form validation (Валидация форм в Angular).
• Template driven validation (Валидация, основанная на шаблонах)
• Reactive form validation (Валидация реактивных форм).
• Sync and async validators in Angular (Синхронные и асинхронные валидаторы в Angular).
• Built-in validators (Встроенные валидаторы).
• Angular custom validators (Пользовательские валидаторы в Angular).
• Cross-field validation (Перекрёстная валидация).

11. Проекция контента

В Angular есть механизм, называемый проекцией контента. Он позволяет организовывать эффективную передачу данных от родительских компонентов дочерним компонентам. Хотя идея проекции контента и может показаться сложной, её суть заключается в том, что для построения некоего элемента, выводимого на экран, одни элементы помещают в другие.

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

Понимание этой концепции помогает понять особенности движения потоков данных внутри приложения, и того, где именно происходят мутации этих данных.

▍Поисковые запросы

• Angular content projection (Проекция контента в Angular).
• Angular parent-child view relationship (Взаимоотношения родитель-потомок и визуальные компоненты Angular).
• Angular view data relationships (Взаимоотношения данных визуальных компонентов в Angular).

12. Стратегия обнаружения изменений onPush

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

Если речь идёт о маленьких приложениях, то на их производительность это особо не влияет. Но после того как приложение дорастёт до определённого размера, его скорость, особенно при запуске в старых браузерах, может ухудшиться.

Стратегия обнаружения изменений onPush позволяет серьёзно ускорить приложение. Дело в том, что при её использовании проверки производятся только при наступлении определённых событий. Это куда лучше, чем постоянные проверки.

▍Поисковые запросы

• Angular onPush change detection (Стратегия обнаружения изменений onPush в Angular).

13. Ограничение доступа к маршрутам, предварительная загрузка, ленивая загрузка

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

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

▍Поисковые запросы

• Angular route guards (Ограничение доступа к маршрутам в Angular).
• Angular authentication patterns (Паттерны аутентификации в Angular).
• Angular preloading and lazy-loading modules (Предварительная загрузка и ленивая загрузка модулей в Angular).
• Angular secured route patterns (Паттерны безопасной работы с маршрутами).

14. Пользовательские конвейеры

Конвейеры Angular значительно облегчают форматирование данных. Существует множество встроенных конвейеров, которые позволяют решать широкий спектр стандартных задач. Среди них — задачи форматирования дат, валютных сумм, процентных значений, а также, например, работа с регистром символов. Однако всегда найдётся задача, для которой нет стандартного конвейера.
Именно в подобных случаях и нужны пользовательские конвейеры. Этот механизм позволяет программисту создавать собственные фильтры и описывать необходимые ему преобразования данных. Пользоваться всем этим несложно, поэтому данную концепцию можно рекомендовать к изучению.

▍Поисковые запросы

• Angular custom pipes (Пользовательские конвейеры в Angular).

15. Декораторы @viewChild и @ContentChild

Компоненты могут общаться друг с другом благодаря декораторам @viewChild и @ContentChild. Суть применения Angular заключается в том, чтобы создаваемые с помощью этого фреймворка многокомпонентные приложения напоминали бы пазл. Но от такого пазла не будет особого толку в том случае, если его фрагменты будут изолированными друг от друга.

Для связи фрагментов пазла друг с другом и используются декораторы @viewChild и @ContentChild. Изучение особенностей их использования даст вам возможность работать с компонентами, связанными с другими компонентами. Это упрощает задачу организации совместного использования данных различными компонентами. Это позволяет передавать между компонентами данные и сведения о событиях, возникающих в этих компонентах.

▍Поисковые запросы

• Angular decorators (Декораторы в Angular).
• Viewchild and contentchild in Angular (Декораторы @viewChild и @ContentChild в Angular).
• Angular component data sharing (Совместное использование данных компонентами Angular).

16. Динамические компоненты и директива ng-template

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

Статические компоненты, в отличие от динамических, создают заранее. Делается это в тех случаях, когда не ожидается, что на компоненты может что-либо повлиять. Они предсказуемы, заранее определённым образом выполняя преобразования поступающих в них данных.

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

▍Поисковые запросы

• Dynamic components in Angular (Динамические компоненты в Angular).
• Dynamic components and ng-templating (Динамические компоненты и директива ng-template).

17. Декораторы @Host, @HostBinding и директива exportAs

Декораторы @Host, @HostBinding и директива exportAs используются в Angular для управления тем, к чему они применяются. Они, кроме того, дают возможность создавать лаконичные шаблоны для экспорта сущностей, которые можно использовать в приложении.

Если вышесказанное кажется вам не особенно понятным — рекомендуется поближе познакомиться с директивами и узнать о том, зачем они нужны. Декораторы @Host, @HostBinding и директива exportAs — это то, что помогает Angular быть тем, что он есть.

▍Поисковые запросы

• Angular directives patterns (Паттерны работы с директивами в Angular).
• @Host, @HostBinding and exportAs in Angular (Декораторы @Host, @HostBinding и директива exportAs в Angular).

18. Управление состоянием приложения с помощью RxJs

Состояние приложения определяет то, что видит пользователь. Если в состоянии приложения царит беспорядок, это может говорить о том, что структуры данных, используемые в нём, плохо приспособлены к изменениям. Такие изменения может понадобиться внести в структуры данных по мере роста и развития приложения.

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

В Angular есть собственная система управления состоянием. Однако существует одна технология, RxJs, которая позволяет поднять управление состоянием приложений на более высокий уровень. В частности, например, данные могут потеряться при передаче их между множеством компонентов-родителей и компонентов-потомков. А RxJS позволяет создать централизованное хранилище и избавиться от этой проблемы.

▍Поисковые запросы

• Angular RxJs (Применение RxJS в Angular).
• Flux/Redux principles (Принципы Flux и Redux).
• Angular state management principles (Принципы управления состоянием приложения в Angular).

19. Внедрение зависимостей и зоны

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

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

▍Поисковые запросы

• Angular zones (Зоны в Angular).
• Dependency injections (Внедрение зависимостей).
• Angular DI (Внедрение зависимостей в Angular).

Итоги

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

Уважаемые читатели! На что вы посоветовали бы обратить внимание начинающим Angular-разработчикам?