×Закрыть

Базовые понятия Angular. Теория и примеры для новичков

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Привет! Меня зовут Александр Ларченко, я Senior Software Engineer в компании Innovecs. В этой статье расскажу об особенностях Angular, зачем и как его применять, а также поделюсь личным опытом работы с фреймворком. Материал будет интересен прежде всего тем, кто только начинает свое знакомство с Angular и хотел бы узнать больше о его преимуществах и сложностях.

Сегодня Angular — один из самых популярных инструментов разработки программного обеспечения. В 2009 Google представил фреймворк как часть экосистемы JavaScript. Angular тепло приняло сообщество разработчиков. Согласно опросу StackOverflow 2019 года, 30,7% разработчиков ПО применяют AngularJS и новую версию Angular 2+ для создания пользовательских интерфейсов. С начала 2019 года комьюнити Angular выросло на 50% по сравнению с 2018 годом, как указано в NG-Conf 2019.

В чем секрет такой привлекательности фреймворка? Рассмотрим природу Angular, его особенности и преимущества — это и будет ответом на вопрос.

Что такое Angular

До появления фреймворка у сайтов была одна общая проблема: каждый раз, когда пользователь переходил на новый раздел, происходила перезагрузка всего сайта. Это занимало много времени и, соответственно, пользовательский опыт оставлял желать лучшего. Так появилась концепция single page application. Она предполагает, что пользователь изначально загружает один сайт, а его подразделы и блоки — элементы, которые можно загружать отдельно. Проблема стала катализатором разработки различных фреймворков, одним из которых был Angular.

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

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

Angular помогает запускать одностраничные приложения, а возможность model-view-controller (MVC) делает разработку и тестирование приложений максимально простой и быстрой. Веб-приложения на основе Angular обычно без проблем масштабируют продукт.

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

США, Россия и Тайвань — лидеры по разработке сайтов на Angular. Computers Electronics & Technologies — вертикаль, где чаще всего используют фреймворк.

Источник: Similartech

Многие глобальные бренды оценили удобство Angular. Приложения Gmail, YouTube, Upwork, Lego и PayPal — всего несколько корпораций, которые работают с фреймворком.

Особенности и преимущества Angular

Главная особенность Angular в том, что он содержит в себе много правил. Их соблюдение при написании кода помогает большим компаниям, в которых большие команды разработчиков работают над разными частями кода. Среди примеров таких правил — весь проект должен быть структурирован в модулях и компонентах, доступ к back end осуществляется через сервисы, а не компоненты и так далее.

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

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

Преимущества Angular включают в себя:

  • Подробная документация. Разработчики могут быстро находить технические решения и решать возникающие проблемы.
  • Поддержка Google. Тот факт, что Angular разработал Google — преимущество само по себе. Для многих разработчиков это знак качества и надежности фреймворка.
  • Богатая экосистема сторонних компонентов. Популярность Angular привела к появлению тысяч дополнительных инструментов и компонентов, которые можно использовать в приложениях. Благодаря этому получить дополнительную функциональность и повысить производительность.
  • Компонентная архитектура. Во второй версии Angular перешел от MVC к компонентной архитектуре. Согласно нее, приложения делятся на независимые логические и функциональные компоненты. Их можно легко заменить и разъединить, а также повторно использовать в других частях приложения. Такая независимость упрощает тестирование веб-приложения и гарантирует бесперебойную работу всех компонентов.
  • Компилятор Angular AOT. Он конвертирует TypeScript и HTML в JavaScript в процессе сборки. Это означает, что код компилируется до того, как браузер загружает веб-приложение, поэтому он отображается намного быстрее. Компилятор AOT также намного безопаснее, чем компилятор JIT.
  • Angular Universal. Это метод генерации HTML-шаблонов на сервере, что в свою очередь дает несколько преимуществ. Во-первых, он помогает веб-краулерам повысить рейтинг приложения в поисковых системах. Во-вторых, сокращает время загрузки страницы и повышает производительность на мобильных устройствах. Эти плюсы приводят к росту количества пользователей.
  • Инфраструктура CLI. Она автоматизирует весь процесс разработки, максимально упрощая инициализацию, настройку и разработку приложений. Интерфейс командной строки Angular позволяет создавать новый проект Angular, добавлять в него функции и запускать модульные и сквозные тесты с помощью нескольких простых команд. Это не только повышает качество кода, но и значительно облегчает разработку.
  • Ivy Renderer. Функция Ivy Renderer переводит компоненты и шаблоны приложения в код JavaScript, который может отображаться в браузере. Основная характеристика этого инструмента — техника «встряхивания дерева». Во время рендеринга Ivy удаляет неиспользуемый код, уменьшая размер пакета. В результате веб-приложения загружаются быстрее.

Сложности фреймворка

У Angular высокий порог вхождения — его не так просто освоить из-за его сложности. Хотя архитектура на основе компонентов делает код более читаемым, по-прежнему трудно управлять зависимостями между компонентами. TypeScript только подливает масла в огонь, так как вам нужно дополнительное время, чтобы изучить и его.

Несмотря на то, что разработчики Angular делают все возможное, чтобы оптимизировать его SEO, многие все еще жалуются на плохую доступность для поисковых роботов. Это объясняется тем, что одностраничные приложения часто изменяют контент и метатеги с помощью JavaScript. Кроме того, разработчики не могут напрямую переключаться с AngularJS на Angular.

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

Кому нужен Angular (а кому — нет)

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

Приложения с динамическим контентом. Поскольку основной целью Angular было создание одностраничных веб-приложений, он имеет широкий набор инструментов для разработки single page application или SPA. Более того, это идеальный вариант для веб-сайтов, где контент должен динамически меняться в зависимости от поведения и предпочтений пользователя. Внедрение зависимостей гарантирует, что в случае изменения одного компонента другие связанные с ним компоненты будут изменены автоматически.

Прогрессивные веб-приложения (PWA). Google разработал PWA в 2015 году. К ним относятся приложения, в которых определенные технологии обеспечивают надежность, быстроту и привлекательность. Angular позволяет разработчикам легко превращать нативные веб-приложения в прогрессивные.

Следовательно, можно выделить те проекты, которым не нужен Angular. К ним относятся: легковесные сайты со статичным контентом, SEO-оптимизированные сайты, краткосрочные проекты, а также приложения, созданные с помощью архитектуры микросервисов.

Личный опыт с фреймворком

Самим запоминающимся для меня был первый опыт. В одной компании к нам поступил проект по управлению задачами для сотрудников. Каждая задача устанавливалась менеджерами для подчиненных, и уровней подчинения могло быть около десяти. Все это визуализировалось на диаграммах, самая крупная из которых могла включать несколько сотен задач. Проект пришел к нам как полностью back end решение. Заказчику не нравилось то, что порой при создании новой задачи приходилось ждать 10-20 секунд на обновление диаграммы.

Тогда наша команда только начинала использовать две версии Angular. Мы сделали небольшой proof of concept, получили одобрение. В итоге благодаря Angular и правильному использованию стратегий ChangeDetection у нас получилось сократить время на обновление самой крупной диаграммы до 1-2 секунд. Более того, по словам наших менеджеров, проект удалось реализовать в два раза быстрее, чем другие аналогичные проекты без SPA.

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

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

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

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

👍НравитсяПонравилось4
В избранноеВ избранном3
Подписаться на автора
LinkedIn

Похожие статьи

Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Из своего опыта работы с Ангуляр, я бы рекомендовал разобраться как работает change detection механизм, какие в нём есть ловушки и как не убить производительность приложения не осознавая, что творится под магией обнаружения изменений. Это то, что must have для новичков.

Про Ivy renderer, ещё неплохо было бы упомянуть, что он использует Incremental DOM. Вот про виртуальный DOM в реакте все знают, слышали, используют его в маркетинговых целях для продвижения библиотеки, а вот про инкремантальный DOM как-то мало говорят, а то вообще считают, что HTML темплейты рендерятся вот прямо так в лоб.

А где теория и примеры?

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

До этого был ajax. Не нужно из анлгуляра делать панацею от всех проблем.

developer.mozilla.org/en-US/docs/Glossary/AJAX

Нагадаю вам що завантаженя частини контенту не являє собою завантаження сторінки! І мова була про те що сучасні фреймворки мають механізм навігації без перезавантаження апки, а раніше потрібно було ліпити свій фреймворки для цього.

Стаття заради статті. Таких текстів в інтернеті тисячі і всі плюс мінус по такому ж шаблону — що це таке, скільки скачувань, і загальна інфа про використання. Нащо таке плодити — для мене загадка

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

Последняя версия, Angular 10, была выпущена в июне 2020 года.

Angular 11 вийшов в листопаді 2020, в травні вже 12 буде.

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

Як мікросервіси на бекенді впливають на сумісність з Angular?

Мікросервіси бувають і на фронті

нуууу деколи в них є критична необхідність, але тут головна проблема це правильно побудувати.

Схоже що саме це ТС мав на увазі

Подписаться на комментарии