Angular (также известный как Angular 2, 4, 5, 6…) - это новый фреймворк, полностью переписанный с нуля, заменяющий хорошо известный фреймворк AngularJS. (также известный как Angular 1.x).

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

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

Начиная

Новичок

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

Ветеран AngularJS

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

Шпаргалка

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

Гид по стилю

Хорошие новости, есть официальное Руководство по стилю Angular, написанное командой.

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

часто задаваемые вопросы

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

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

Углубляясь

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

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

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

Реактивное программирование

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

Angular использует RxJS для реализации паттерна Observable.

Observable - это поток асинхронных событий, которые можно обрабатывать с помощью операторов, подобных массиву.

От обещаний к наблюдаемым

В то время как AngularJS в значительной степени полагался на Promises для обработки асинхронных событий, Observables теперь используются в Angular. Несмотря на то, что в определенных случаях, например, для HTTP-запросов, Observable можно преобразовать в Promise, рекомендуется принять новую парадигму, поскольку она может делать гораздо больше, чем Обещания с гораздо меньшим количеством кода. Этот переход также объясняется в Руководстве по Angular. Как только вы переключитесь, вы больше никогда не будете оглядываться назад.

Справочные материалы по обучению

Однонаправленный поток данных

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

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

Подождите, тогда почему в документации Angular есть упоминание о синтаксисе двусторонней привязки?

Если вы присмотритесь, новый синтаксис двусторонней привязки - это просто синтаксический сахар для объединения двух односторонних привязок (привязка свойство и привязка событие ), сохраняя поток данных однонаправленным.

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

Хотя Angular пытается оставаться независимым от шаблонов и может использоваться с обычными шаблонами MV *, он был разработан с учетом реактивного программирования и действительно эффективен при использовании с реактивными шаблонами потока данных, такими как
redux , Флюкс или МВИ .

Централизованное государственное управление

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

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

Этот подход был впервые популярен в React с появлением архитектуры Flux. Затем возникло множество библиотек, пытающихся адаптировать и усовершенствовать исходную концепцию, и одна из них приобрела огромную популярность, предоставив более простую и элегантную альтернативу: Redux.

Redux является одновременно библиотекой (с большим R) и шаблоном проектирования (с маленьким r), причем последний не зависит от фреймворка и очень хорошо работает с Угловой.

Шаблон проектирования redux основан на следующих трех принципах:

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

Основные концепции, лежащие в основе этих принципов, прекрасно объяснены в этом примере (3 мин.).

Для тех, кто заинтересован, шаблон redux был вдохновлен Архитектурой Вяза и шаблоном CQRS.

Какую библиотеку использовать?

Вы можете заставить Angular работать с любой библиотекой управления состоянием, которая вам нравится, но лучше всего использовать NGXS или @ngrx. Обе работают так же, как популярная библиотека Redux, но с тесной интеграцией с Angular и RxJS, с некоторыми хорошими дополнительными утилитами для разработчиков.

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

Некоторые ресурсы для начала:

Когда это использовать?

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

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

Оптимизация производительности

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

Вот список ключевых моментов, которые нужно проверить в своем приложении, чтобы убедиться, что вы предоставляете своим клиентам наилучшие впечатления:



mgechev / angular-performance-checklist
angular-performance-checklist - Cheatsheet для разработки« молниеносных прогрессивных приложений Angular. github.com»



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

Поддержание Angular в актуальном состоянии

Разработка Angular продвигается быстро, и обновления основных библиотек и инструментов выпускаются регулярно.

К счастью, команда Angular предоставляет инструменты, которые помогут вам следить за обновлениями:

  • npm run ng update позволяет обновлять ваше приложение и его зависимости
  • Веб-сайт обновления Angular проведет вас через изменения и миграции Angular, предоставляя пошаговые инструкции от одной версии к другой.

Это руководство входит во все проекты Angular, созданные с помощью ngX-Rocket. Если вы ищете расширяемый, хорошо документированный стартовый комплект корпоративного уровня, вам следует проверить это!