Angular — это супергероический JavaScript-фреймворк для создания фронтенд веб-приложений. Angular был создан и выпущен компанией Google в сентябре 2016 года, его не следует путать с Angular JS, который является приквелом Angular. Angular и Angular JS — это два совершенно разных способа делать одно и то же. Angular JS — это первая версия фреймворка для разработки веб-приложений MVC (Model View Controller), в то время как Angular используется для коллективного обозначения последующих релизов фреймворка, начиная со второй версии Angular JS. Переход от Angular JS к Angular представляет собой серьезный отход от первой версии, и команде Google пришлось переписывать фреймворк с нуля.
Что такое Angular?
Angular — это JavaScript-фреймворк для создания веб-приложений на стороне клиента, это супергероический фреймворк, который позволяет пользователям создавать очень надежные приложения, он построен на TypeScript и имеет встроенную поддержку TypeScript. Angular имеет очень сильное мнение о том, как должно быть построено и структурировано ваше веб-приложение. Он реализует подход MVC к построению веб-приложения. Angular поставляется с мощным CLI, который можно использовать для создания новых приложений, генерирования компонентов, сервисов, маршрутных ограждений и т. д. CLI также позволяет нам тестировать, запускать и создавать наши приложения. Angular имеет встроенную поддержку Test Driven Development (TDD), которая настраивается с помощью Jasmine и Karma. Он также поддерживает сквозное тестирование с помощью Cypress. Angular — это полноценный фреймворк, в котором есть все необходимое для создания фронтенд веб-приложений.
В нем есть мощный маршрутизатор, он реактивен по умолчанию и поддерживает двустороннюю привязку данных, а поскольку он построен на TypeScript, вы получаете все дополнительные возможности, которые появляются при использовании TypeScript, Angular также имеет встроенное решение для управления состоянием. В Angular есть компонент, который представляет собой класс, украшенный декоратором @Component, который инкапсулирует логику компонента и считается controller, есть пользовательский интерфейс, построенный с помощью ручек, который известен как view, а наши данные — это model.
Особенности Angular
Angular — это очень мощный фреймворк, который каждую неделю используют 2 миллиона разработчиков. Приложения, построенные с использованием Angular, реализуют подход MVC, и это очень хорошо с архитектурной точки зрения, поскольку архитектура приложений является довольно сложной проблемой для начинающих разработчиков и больших команд. Вы можете быть уверены в том, чего ожидать, получив в управление существующий проект Angular, но это не означает, что все проекты, построенные с использованием Angular, являются первоклассными. Строгая архитектура приложений может стать довольно ограничивающей по мере того, как мы открываем для себя другие архитектурные паттерны, и это, пожалуй, один из подводных камней, связанных с Angular. Чем больше вы строите на нем, тем глубже вы застреваете в нем, а IMHO быть ограниченным одним способом делать вещи — не самое приятное чувство. Давайте подробно рассмотрим некоторые особенности Angular.
Поддержка TypeScript
Angular построен на TypeScript и имеет его полную поддержку, на самом деле я еще не видел приложения Angular, построенного на обычном JavaScript, и это одна из лучших особенностей Angular. Поскольку мы используем TypeScript, мы уверены, что большинство нервных ошибок, которые мы получаем при использовании JavaScript, можно избежать. Мы получаем хорошую поддержку IDE и автозавершение, а благодаря поддержке TypeScript опыт разработки становится просто превосходным. TypeScript — это супернабор JavaScript, созданный компанией Microsoft. Он расширяет JavaScript, добавляя в него типы. TypeScript привносит в JavaScript все возможности сильного объектно-ориентированного языка и статической типизации. Если вы уже умеете использовать TypeScript, то вы получите хороший опыт работы с ним, однако для новичков окажется, что для того, чтобы полностью освоить Angular, необходимо изучить TypeScript.
Двустороннее связывание данных и реактивность по умолчанию
По умолчанию angular отслеживает изменения в наших данных и перерисовывает пользовательский интерфейс при каждом изменении состояния приложения. Подход MVC в angular позволяет пользовательскому интерфейсу быть правильным отражением данных или состояния, поэтому при каждом изменении данных angular автоматически определяет это изменение и перерисовывает для него правильный пользовательский интерфейс, что весьма впечатляет, учитывая, что некоторые фреймворки не смогли этого достичь.
Мощный CLI
Angular CLI — еще одна сильная сторона Angular, этот CLI поставляется с полной мощью Angular и позволяет нам выполнять некоторые команды в терминале, что значительно сокращает количество повторяющихся задач, например, ng new angular-app для создания нового приложения angular, также ng g component folder/Name для генерации новых компонентов angular, ng test для тестирования нашего приложения и множество других команд, которые в совокупности помогают нам значительно упростить некоторые мудацкие задачи и сконцентрироваться на создании нашего приложения.
Инъекция зависимостей
Это шаблон проектирования, который позволяет классу запрашивать модули, от которых он зависит, из внешнего источника, а не создавать эти зависимости самому. Инъекция зависимостей позволяет Angular быть очень гибким и повышает модульность нашей кодовой базы, что помогает обновлять наши приложения и добавлять в них новые функции. С помощью angular CLI можно создать провайдер или сервис ng g service folder/Name, который украшается декоратором @Inejectable. Этот декоратор определяет, что сервис может быть инжектирован в наши компоненты, он также помогает нам ограничить область применения сервиса и модули или компоненты, которые могут иметь к нему доступ.
Директивы
Angular расширяет HTML путем добавления пользовательских директив для упрощения некоторых общих операций, которые нам необходимо выполнить. Эти директивы представляют собой простые классы, которые расширяют поведение определенных элементов в нашем приложении Angular. Существует множество встроенных директив, которые мы можем использовать для управления формами, списками и многим другим. Некоторые примеры встроенных директив включают [NgIf] для условного рендеринга шаблона, [NgFor] для повторения узла для каждого элемента в списке. [ngClass] условные классы или [ngStyle] для добавления встроенной условной стилизации, [ngModel] для привязки к элементу формы.
MVC
Я лично считаю, что подход MVC, который внедряет Angular, также является одним из преимуществ использования фреймворка. Это решает большую проблему, с которой сталкивается большинство разработчиков при создании приложений, неопытные разработчики часто испытывают трудности с выбором структуры приложения, поэтому это дополнительное преимущество, когда эта проблема уже решена за вас. Даже некоторые опытные разработчики ценят такой подход, поскольку он помогает достичь уровня последовательности при работе с командой, поскольку все находятся на одной волне, и вы имеете представление о том, чего ожидать.
Поддержка Rxjs
Я учился использовать Angular для создания пользовательских интерфейсов, когда мне пришлось изучить библиотеку Rxjs. Это не то, что я использую довольно часто, но я ценю эту библиотеку и ее подход к обработке асинхронных событий, происходящих в нашем приложении. Позволяя нам рассматривать наши данные как поток, Observables позволяет нам продолжать выдавать значения, и любая подписка на эту Observable будет получать уведомления о новых данных, что позволяет нашему приложению быть реактивным. Одна Observable может быть совместно использована различными компонентами нашего приложения, таким образом разделяя единый источник данных, что практически устраняет необходимость внедрения пользовательского решения для управления состоянием.
Стоит ли использовать Angular
Мы рассмотрели некоторые из очевидных особенностей фреймворка Angular, но стоит ли вам его использовать? Это важный вопрос, который необходимо задать разработчикам фронтенда. Давайте обсудим некоторые моменты, которые необходимо учитывать, если вы планируете изучать или использовать Angular;
-
Все преимущества, которые дает использование angular, могут быть достигнуты с помощью большинства фреймворков. Кривая времени, необходимая для освоения фреймворка, не оправдана IMHO, сначала вы должны научиться использовать TypeScript, затем научиться работать с Observables, и все это в то время, когда вы учитесь использовать фреймворк, с точки зрения новичка это может стать слишком сложным.
-
Подход MVC ограничивает вас при проектировании архитектуры приложения, вы должны придерживаться этого подхода даже тогда, когда он явно не подходит к ситуации или когда другой подход более практичен. Я ненавижу ограничивающее чувство, которое возникает при работе с Angular, мне нравится свобода выбора того, что имеет смысл для меня, вместо того, чтобы быть привязанным к одному подходу.
-
Мне кажется, что с Angular создание приложения не совсем простое, есть так много ненужных вещей, которые нужно учитывать, когда вы хотите создать приложение с помощью Angular, я думаю, что фреймворк мешает вам и не позволяет просто идти вперед к созданию приложения.
-
Приложения, созданные с помощью Angular, печально известны своими большими размерами пакетов, вы будете удивлены размерами пакетов очень маленького приложения, это не идеально, поскольку мы хотим, чтобы JavaScript, который мы отправляем в браузер, был как можно меньше, это помогает нашим приложениям быть более совершенными. С помощью angular я создавал приложения размером до 5 МБ, а это приложение было до смешного простым.
-
В 2022 году появилось множество фреймворков, которые делают то же, что и Angular, хотя и с меньшими ограничениями, более дружелюбным интерфейсом для новичков и простотой, большинство фреймворков теперь поддерживают разработку на TypeScript. Поэтому вы можете начать с JavaScript и постепенно перейти на TypeScript, когда почувствуете себя более комфортно.
Если вам интересно узнать, как создавать пользовательский интерфейс с помощью Angular, вы можете посетить официальную документацию Angular, чтобы начать знакомство с фреймворком.
При этом данная статья не направлена на то, чтобы отговорить вас от использования Angular или отвлечь от того, чего мы можем достичь с помощью Angular, я просто парень на DEV, который высказывает свое мнение по поводу использования Angular. Angular — это супер героический фреймворк, который может создавать надежные и реактивные приложения, каков ваш опыт использования Angular, что вы думаете об этом? После прочтения этой статьи, считаете ли вы, что в 2022 году создание пользовательского интерфейса с помощью Angular — это отличная идея? Пожалуйста, оставьте свои мысли ниже и, конечно, добавьте все, что, по вашему мнению, я упустил из виду о фреймворке. Буду рад увидеть ваши комментарии ниже, спасибо!