Что такое Angular

JavaScript ~8 минут

Angular — один из самых популярных фреймворков для разработки приложений на JavaScript и TypeScript. Расскажем о его особенностях, преимуществах и недостатках.

Что такое Angular и SPA (single-page application)

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

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

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

Как SPA-фреймворки изменили разработку

SPA — аббревиатура от английского “single-page application”, что переводится как “приложения в формате одной страницы”. JavaScript, на котором написан их интерфейс, позволяет странице обновляться динамически, без отправки повторного запроса на сервер.

Так было не всегда.

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

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

Современные приложение, работающие по принципу single-page application, действуют иначе. Когда пользователь находится на сайте, сервер подгружает информацию в фоновом режиме.

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

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

Технология SPA стала настоящим прорывом. Она обеспечила:

Создание красочных интерактивных сайтов. Такие ресурсы имеют отзывчивый интерфейс, который взаимодействует с пользователем через всплывающие окна, анимацию и мгновенные сообщения;
Быструю загрузку. Сайты с SPA позволяют пользователям найти нужную информацию без ожидания обновления страниц;
Усложнение разработки. Запросы, которые раньше отправляли на сторону сервера, теперь обрабатывает фронтенд сайта. А значит, он стал тяжелее, сложнее и требует больших знаний от разработчика.

Что такое Angular

Angular — один из самых востребованных фреймворков для создания SPA-приложений.

Этот продукт распространяют бесплатно, а его исходный код хранят в открытом виде на GitHub. У Angular был предшественник — AngularJS, разработанный в 2009 году.

Несмотря на общие корни, у них нет обратной совместимости. У Angular принципиальная другая архитектура и он написан на TypeScript, а не на JavaScript. Хотя его используют для разработки на обоих языках.

А теперь расскажем об основных частях этого фреймворка.

Компоненты

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

Компонентом в Angular может быть какой-то элемент, выполняющий действие. Например, кнопка или шапка сайта.

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

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

Модули

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

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

Сервисы

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

Директивы

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

Например, с помощью директива можно поменять язык или валюту на всем сайте.

Формы

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

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

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

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

По данным «Хабр.Карьеры» Angular входит в топ-3 навыков, которые работодатели ожидают от разработчиков на JavaScript.

Средние зарплаты программистов со знанием Angular:

75 000 — для джунов.
171 000 — для мидлов.
292 000 — для сеньоров.
312 000 — для тимлидов.

А теперь поговорим о сильных сторонах Angular.

Модульность

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

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

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

Справедливости ради, компонентную архитектуру использует не только Angular, но и большинство его аналогов.

Архитектура MVC

Angular использует архитектуру «модель-представление-контроллер». В ней модель получает данные от контроллера, представление — данные от модели, и отправляет пользователю, а контроллер — обрабатывает пользовательские действия, проверяет информацию и передает их модели.

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

Обилие инструментов разработки

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

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

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

Масштабируемость

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

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

Поддержка

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

За счет постоянных обновлений, фреймворк активно развивается, привлекает новые проекты и новых разработчиков в свое комьюнити.

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

Сейчас этот фреймворк хорошо задокументирован и имеет подробный style guide — руководство по разработке.

Недостатки Angular

Но даже у лучших решений есть свои минусы и этот фреймворк не стал исключением.

Сложная структура

В отличие от ближайших конкурентов — React и Vue.js, у Angular есть много дополнительных структур кроме компонентов. Это делает его более сложным в изучении.

Фирменная черта Angular — огромное количество готовых решений и дополнительных возможностей. В них бывает сложно разобраться даже опытным разработчикам.

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

TypeScript

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

Работать с Angular можно и на чистом JavaScript, но для изучения многих материалов также может потребоваться TypeScript. Это ставит дополнительный барьер для начинающих. Однако он вполне преодолимый, поскольку TypeScript — не другой язык программирования, а расширение JS.

Как начать работать с Angular

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

Что нужно знать, прежде чем учить этот фреймворк:

JavaScript и основы TypeScript — нужно уметь писать код и владеть базовыми знаниями в программировании;
HTML и CSS — язык разметки и каскадные таблицы стилей. Нужно знать основы верстки веб-страниц;
Git и GitHub — системы контроля версий используют для хранения кода и совместной работы, необходимо уметь применять эти базовые инструменты разработчика;
Основы веб-разработки — нужно понимать, как работает протокол HTTP и DOM API, из чего состоит архитектура фронтенда.

Для начала работы с этим фреймворком потребуется установить nodejs. Затем рекомендуют скачать и поставить Angular CLI — консольный интерфейс этого фреймворка.

Анастасия Уминская 26 января 2024