Angular 7: обновление и новые функции

Development, Java | Amber | Комментировать запись

Хотя в Angular 7 мало нового, в нем есть несколько очень интересных изменений, которые коснулись инструментов, а также несколько замечательных функций для повышения производительности. И, продолжая тенденцию предыдущих версий, Angular позволяет очень просто выполнить обновление (еще и быстрее, чем когда-либо прежде).

Дополнения и новые функции

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

Командная строка

Команда Angular постоянно сосредоточена на улучшении инструментов для разработчиков, и в этой версии была улучшена командная строка. Обычно, команды типа ng new или ng add запускаются сразу. Забыли включить маршрутизацию? Хотели пропустить ненужные установки? Что ж, можете прервать команду.

Однако в новом интерфейсе командной строки это изменилось. Теперь CLI стала интерактивной. Просто попробуйте запустить

ng new myangular7app

и посмотрите, что вы получите. Появится новый вопрос: хотите ли вы добавить маршрутизацию? Если хотите попробовать другой формат таблицы стилей, интерфейс командной строки позволит вам выбрать между CSS, SCSS, SASS и т.п. Отличная новость: интерфейс командной строки поддерживает пользовательскую настройку. Добавьте файл schematic.json с помощью Schematic CLI, и вы сможете настроить свои пользовательские запросы и подсказки в Angular CLI.

Angular Material CDK

Читайте также: Основы работы с Angular Material 2

Модуль ScrollingModule

Многие мобильные фреймворки начали переходить к динамической загрузке таких данных, как изображения или длинные списки, и Angular последовал их примеру и добавил ScrollingModule – модуль для обеспечения виртуальной прокрутки. Когда элементы появляются или исчезают, они виртуально загружаются и выгружаются из DOM. Производительность такого сайта значительно вырастет в глазах пользователя. В следующий раз, когда у вас будет потенциально большой список элементов для прокрутки, вставьте его в компонент cdk-virtual-scroll-viewport и оптимизируйте производительность своего сайта.

Модуль DragDropModule

Теперь вы можете, оставаясь в модуле Angular Material, реализовать поддержку перетаскивания, включая изменение порядка элементов в списке и перемещение элементов между списками. CDK включает в себя автоматический рендеринг, обработчики перетаскивания и сброса и даже возможность передачи данных. Не нравится стандартная анимация перетаскивания? Не волнуйтесь, в Angular вы можете всё переопределить.

Что касается, собственно, Angular Material, версия 7 поставляет обновления некоторых стилей компонентов, которые следуют новой спецификации Material Design.

Производительность приложений

Во-первых, нужно отметить, что Angular 7 даже быстрее, чем предыдущие версии. Обновление происходит значительно быстрее (занимает менее 10 минут для большинства приложений согласно официальному отчету), фреймворк также работает быстрее, а описанный выше модуль виртуальной прокрутки CDK позволяет приложениям работать с большей производительностью.

Все становится гораздо интереснее в этот момент: Angular не только стремится уменьшить фреймворк, но и уменьшает ваши приложения. Разработчики исправили распространенную производственную ошибку, связанную с включением полифилла Reflect-Metadata в производственную среду. V7 автоматически удаляет его.

Также новые проекты теперь по умолчанию используют Budget Bundles, что уведомит вас, когда размеры приложения достигнут пределов. По умолчанию вы получите предупреждение при достижении 2 Мб и ошибку при 5 Мб. Если вам нужно немного больше места, просто откройте свой angular.json и перенастройте его согласно вашим потребностям.

budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Обновленные зависимости

Поддержка Angular обновлена до Typescript 3.1, RxJS – до 6.3, а также добавлена ​​поддержка Node 10. Ознакомьтесь с примечаниями к выпуску в (ссылка ниже для дальнейшего чтения).

Ivy Renderer

Визуализатор следующего поколения пока еще не готов. Команда Angular не сообщает никаких окончательных сроков и не коммитит новых версий, но разработка все еще активно продолжается. Они отмечают, что начинают проверку обратной совместимости. Хотя ни один официальный член команды не прокомментировал эту информацию, те, кто следит за коммитами, ожидают, что полная бета-версия будет запущена уже в версии 7 (а официальный выпуск, возможно, выйдет вместе с версией 8). Следите за прогрессом разработки самостоятельно на GitHub Ivy Renderer в официальном репозитории Angular.

Обновление

Для обновления подавляющего большинства приложений Angular (при условии, что вы уже используете Angular 6 и RxJS 6) нужно выполнить всего одну команду:

$ ng update @angular/cli @angular/core

Если вы используете Angular Material, запустите эту команду:

$ ng update @angular/material

Если вам кажется, что что-то идет неправильно, проконсультируйтесь с мануалом по обновлению.

Дополнительная литература

Чтобы узнать об Angular 7 больше, изучите следующие ссылки.

• Официальный анонс Angular 7.
• Документация по интерфейсу командной строки Angular 7.
• Введение в схемы.
• Больше о виртуальной прокрутке и перетаскивании.
• Руководство по обновлению Angular.
• Примечания к Typescript 3.1.
• RxJS 6.3 CHANGELOG.
• Поддержка Node 10