Angular является частью экосистемы JavaScript и одним из самых популярных инструментов разработки программного обеспечения на сегодняшний день. Он был представлен Google в 2009 году и получил высокую оценку от сообщества разработчиков. Согласно исследованию StackOverflow 2018 года, 36,9% разработчиков программного обеспечения в настоящее время используют AngularJS и новую версию Angular 2+ для создания пользовательских интерфейсов. Давайте поговорим об основных особенностях этих инструментов и рассмотрим их преимущества и недостатки с точки зрения передового проектирования.
Что такое Angular
Angular – это платформа для разработки программного обеспечения с открытым исходным кодом, используемая для создания пользовательских интерфейсов (front-end). Ее история начинается в 2009 году, когда Миско Хевери и Адам Абронс, инженеры Google, разработали фреймворк, в настоящее время известный как AngularJS, и официально выпустили его в 2010 году.
AngularJS
В 2010 году основным преимуществом AngularJS было то, что он позволял вам превращать документы на основе HTML в динамический контент. До AngularJS HTML, язык веб-разметки, всегда был статичным. Это означало, что пользователи имели ограниченное взаимодействие с интерфейсами на страницах HTML. Существовало несколько способов создания динамических одностраничных приложений (SPA), но они были слишком сложными для удобного проектирования. Архитектура AngularJS сократила объемы работ, необходимых для создания динамического контента, и пользователи получили веб-страницы с динамическими формами и элементами.
Angular 2+
В сентябре 2016 года Google выпустила Angular 2. Они полностью переписали фреймворк, стараясь идти в ногу с растущими требованиями современного интернета. И разница между AngularJS 1.x и новым Angular была настолько радикальной, что вы не смогли просто так обновиться с одной версии на другую. Принятие новой технологии потребовало полной переработки приложений. В 2017 году появилось еще одно крупное обновление, Angular 4. Оно внесло несколько существенных улучшений в версию 2, но осталось тем же продуктом в своей основе. С тех пор Google регулярно выпускает обновления. Чтобы избежать путаницы в терминологии, мы просто будем называть новую платформу Angular.
MEAN
Angular относится к так называемому стеку MEAN. Акроним описывает четыре технологии, которые охватывают основные аспекты разработки программного продукта.
- M – MongoDB, база данных noSQL (нереляционная);
- E – Express, промежуточное программное обеспечение;
- A – Angular, каркас приложений на стороне клиента;
- N – Node.js, среда выполнения.
Хотя инженеры могут использовать Angular независимо от других технологий, они всегда могут положиться на существующую фирменную экосистему, в которой также есть разработчики из всего стека (специалисты, охватывающие все аспекты разработки программного обеспечения).
Инструменты и настройка Angular
Здесь мы рассмотрим 2 основных инструмента, которые инженеры обычно используют с Angular, чтобы в полной мере воспользоваться преимуществами этой среды.
- RxJS. Маловероятно, что вы сможете работать с Angular без RxJS, библиотеки реактивного программирования, предназначенной для обработки асинхронных данных с несколькими событиями. Она в основном позволяет инженерам настроить несколько каналов обмена данными, чтобы облегчить потребление ресурсов;
- Angular CLI. Интерфейс командной строки (CLI) используется для создания проектов, добавления файлов, выполнения обновлений, обработки отладочных тестов и развертывания.
Важно: В настоящее время многие популярные продукты для редактирования кода поддерживают Angular. Наиболее распространенные из них, и принятые сообществом, включают код Visual Studio, Sublime text и, что удивительно, не включают Angular IDE и WebStorm. Однако проверьте, подходит ли ваш любимый редактор кода для Angular перед началом проекта.
Плюсы и минусы AngularJS
Давайте кратко напомним основные преимущества, которые сделали оригинальный AngularJS ярче других сред разработки интерфейса, а также опишем основные недостатки этого инструмента.
Плюсы AngularJS
Директивы. Эта функция фактически способствовала развитию HTML, упомянутого выше. Директивы позволили разработчикам назначать особые варианты поведения объектной модели документов (DOM), позволяя инженерам создавать динамический и насыщенный контент с помощью HTML.
Внедрение зависимостей. Зависимости определяют, как разные части кода взаимодействуют друг с другом и как изменения в одном компоненте влияют на другие. Обычно зависимости определяются непосредственно в самих компонентах. Так что каждое изменение в зависимости также требует изменения компонентов. С AngularJS вы можете использовать инжекторы, которые определяют зависимости как внешние элементы, отделяющие компоненты от их зависимостей. Внедрение зависимостей сделало компоненты более пригодными для повторного использования, более простыми в управлении и тестировании.
Сообщество. С самого начала AngularJS стал чрезвычайно популярным среди инженеров. Обширное сообщество сделало возможным появление достаточного количества учебных материалов, обсуждений и сторонних инструментов для начала использования AngularJS. А также помогало найти решение практически для любой возникающей проблемы.
Минусы AngularJS
Производительность. Динамические приложения не всегда работают хорошо. Сложные SPA (одностраничные приложения) могут быть медлительными и неудобными в использовании из-за их размера.
Сложность освоения. Поскольку AngularJS – это универсальный инструмент, всегда есть несколько способов выполнения одной и той же задачи. Это вызывало некоторую путаницу у инженеров. Тем не менее, изобилие учебников и обсуждений позволило решить большинство насущных проблем.
После выпуска Angular 2, а затем и обновления Angular 4, использование оригинального AngularJS 1.x начало постепенно снижаться. Хотя новые версии по-прежнему имеют те же функции, которые описаны в разделе Преимущества, в них они были полностью переработаны.
Механизм обнаружения изменений
Механизм обнаружения изменений в Angular намного прозрачнее и проще понятен, чем его аналог в Angular 1. Но все еще существуют ситуации (например, при оптимизации производительности), когда нам действительно нужно знать, что происходит «под капотом».
Как реализовано обнаружение изменений?
Angular может обнаруживать изменения данных компонента, а затем автоматически повторно отображать представление, чтобы отразить это изменение. Но как это можно сделать после такого низкоуровневого события, как нажатие кнопки, которое может произойти где угодно на странице?
Чтобы понять, как это работает, нам нужно начать с понимания того, что в Javascript вся среда выполнения может быть переопределена проектом. Мы можем переопределить функции в String или Number, если захотим.
Переопределение стандартных механизмов браузера
Angular во время запуска исправляет несколько низкоуровневых API-интерфейсов браузера, таких как, например, addEventListener, который является функцией браузера, используемой для регистрации всех событий браузера, включая обработчики щелчков. Angular заменяет addEventListener новой версией, которая добавляет больше функциональности к любому обработчику событий: вызывается не только зарегистрированный обратный вызов, но и Angular дает возможность запускать обнаружение изменений и обновлять пользовательский интерфейс.
Низкоуровневые исправления
Низкоуровневое исправление API-интерфейсов браузеров выполняется библиотекой Angular под названием Zone.js. Поэтому важно иметь представление о том, что такое это “zone”.
Zone – это так называемый контекст выполнения, который переживает несколько поворотов выполнения виртуальной машины Javascript. Это общая система, которую мы можем использовать для расширения функционала и его последующего добавления в браузер. Angular использует Zones для запуска обнаружения изменений, но другим возможным вариантом будет профилирование приложений или отслеживание длинных трасс стека, которые проходят через несколько витков виртуальных машин.
Самые распространенные ошибки при разработке в AngularJS
Возвращение к jQuery
jQuery – это обычная библиотека для обработки событий и упрощения манипуляций с DOM. Однако AngularJS, с другой стороны, является фреймворком, который используется для создания масштабируемых приложений, тестирования и разработки приложений, и, следовательно, его нельзя использовать для усиления HTML-документов. AngularJS обладает достаточным количеством функций, поэтому разработчик должен знать обо всех доступных возможностях, прежде чем привлекать jQuery к разработке. Даже если вам нужны манипуляции с DOM, это не обязательно означает, что вы должны использовать jQuery.
Неправильное использование Batarang
Batarang – это необычное расширение Google Chrome, которое используется для отладки и разработки приложений AngularJS. Батаранг может быть полезен при работе с областями абстрагирования, где аргументы ограничены. Избегайте распространенной ошибки – используйте этот инструмент в полной мере.
Игнорирование $applyAsync
Поскольку существует функция опроса для вызова $digest() в AngularJS, она просто реализована из-за существующих директив. $applyAsync очень помогает в сохранении разрешения выражения для следующего цикла $digest(). Существует как автоматический, так и ручной способ использования $applyAsync.
Прямое манипулирование DOM
Это самая распространенная ошибка, которую совершает каждый новый разработчик AngularJS. Вне зависимости от того, касается ли дело рендеринга SVG или обновления заголовка веб-страницы при изменении контекста, разработчик решает выбрать более легкий путь и вносит изменения в DOM напрямую. Однако это может привести к большим проблемам в будущем, так что воздержитесь от подобных действий.