Angular 17: что нового

На официальном YouTube-канале Angular вышло видео, в котором разработчики рассказывают о новых фичах фреймворка в 17 версии.

Вот, о чём идёт речь в видео:

1. Последняя версия Angular включает улучшения такие как управление потоком, отложенные представления и более быструю сборку.
2. На мероприятии для разработчиков Angular V17 был представлен новый сайт Angular.dev, который станет будущим домом для разработчиков Angular.
3. Angular.dev предлагает обновленную документацию, новую систему учебных пособий в браузере и площадку для кодирования, где можно изучать Angular, работая в браузере.
4. Angular обновил свою визуальную идентичность и логотип, отражающий текущие усилия и приоритеты в будущем.
5. Гидратация (hydration) в Angular, представленная в предварительной версии в v16, теперь стабильна и готова к использованию в производственных приложениях.
6. Введены важные обновления для гибридного рендеринга в Angular, позволяющие рендерить приложения на стороне клиента, сервера или предварительно рендерить их (SSG).
7. С версии v17 можно создавать приложения с гибридным рендерингом с помощью команды ng new и нового флага SSR.
8. Поддержка ESM для серверных сборок, ускорение сборок для серверных пакетов и улучшения для сервера разработки SSR.
9. Новый синтаксис управления потоком в шаблонах находится в предварительном просмотре и позволяет использовать встроенные конструкции if, for и switch.
10. Использование нового синтаксиса for может значительно увеличить производительность, в некоторых случаях до 90% быстрее.
11. Выпущены новые миграции для облегчения перехода на новый синтаксис.
12. Приложения, созданные с помощью CLI, по умолчанию будут независимыми, без необходимости использования флага.
13. ESBuild и Vite теперь включены по умолчанию, что обеспечивает улучшение производительности ‘из коробки’ для новых приложений.
14. Некоторые партнеры сообщили об улучшении времени сборки на 67%.
15. Сочетание SSR и SSG может привести к улучшению скорости сборки ngBuild на 87% и ускорению цикла редактирования-обновления для ngServe на 80%.
16. DevTools получили долгожданную функцию – возможность проверки графа внедрения зависимостей.
17. Теперь можно выполнять пользовательские преобразования ввода, а также доступны некоторые встроенные преобразования, такие как Boolean attribute и number attributes.
18. Добавлены новые свойства styles и styleUrls для принятия строк, так как разработчики редко используют более одного стилевого файла.
19. Для получения дополнительной информации можно обратиться к заметкам о выпуске и блогу Angular на blog.angular.io.
20. Команда Angular призывает разработчиков оценить новые функции и поделиться своими отзывами.

Ниже представлен транскрибированный перевод ролика на русский язык.

Подождите, что? Управление потоком, виды, отложенные представления, быстрые сборки. Я не могу поверить, я не могу поверить, что вы получаете все это и еще намного больше в последней версии Angular.

Новый сайт для Angular

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

Теперь, что если я вам скажу, что есть еще? Надеюсь, вы мне поверите, потому что, ну, Angular стремительно развивался за последние несколько лет, и мы решили отразить это современным визуальным стилем и логотипом. Теперь этот новый четкий логотип отражает наши текущие усилия и будущие приоритеты. Чтобы узнать больше, зайдите на angular.dev, но, слушайте, не трогайте стены.

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

Гибридный рендеринг Angular 17

Но подождите, вот что действительно потрясающе. Мы также внесли важные обновления в опыт гибридного рендеринга Angular. Гибридный рендеринг позволяет вам рендерить ваши приложения на стороне клиента, рендерить их на сервере или предварительно рендерить. Это также известно как SSG. Начиная с v17, вы можете создавать приложения с гибридным рендерингом с самого начала, используя ng new и новый флаг SSR.

Но мы не остановились на этом. Если вы забыли использовать флаг, не волнуйтесь, мы также обновили CLI, чтобы подсказать вам. Также добавлена поддержка ESM для серверных сборок. Сборки становятся быстрее для серверных пакетов, и мы не можем забыть, что мы даже проявили немного любви к dev-серверу для SSR.

Изменения в синтаксисе

Готовьтесь взять управление потоком в ваших шаблонах на новый уровень с новым синтаксисом управления потоком, который сейчас находится в режиме предварительной версии. Разработчики Angular теперь могут использовать встроенный синтаксис для if, for и switch. Хотя ничего не нужно импортировать, просто готово к использованию в ваших шаблонах. Теперь, что здесь еще потрясающе, это то, что использование нового синтаксиса for может значительно увеличить производительность, серьезно, до 90% быстрее в определенных случаях. Мы также выпустили новые миграции, чтобы облегчить ваш путь к использованию этого нового синтаксиса.

Запустите ng generate в angular forward slash core colon control dash flow. Подождите, что? Есть еще. Есть еще функции, о которых нужно рассказать.

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

Прочие улучшения

Не требуется флаг. ESBuild и Vite теперь включены по умолчанию, так что вы сразу получаете преимущества производительности для ваших новых приложений. Некоторые корпоративные партнеры сообщили о 67% улучшении времени сборки. Это действительно потрясающе, верно?

Я тоже так думаю. Но подождите, в сочетании с SSR и SSG, вы можете получить до 87% улучшения скорости в ngBuild и 80% более быстрый цикл редактирования и обновления для ngServe.

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

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

Мы добавили новое свойство styles и style URL для принятия строк, потому что, ну, разработчики редко используют более одной таблицы стилей. Но мы сохраняем оба формата на всякий случай, если вам понадобится.