Выпущено обновление JS-фреймворка Angular 5.0.0
Новости Отредактировано
Краткий перечень крупнейших изменений, реализованных в пятой версии фреймворка Angular.
4К открытий4К показов
Представлена очередная версия JavaScript-фреймворка Angular 5.0.0 Pentagonal Donut — мажорное обновление с новым функционалом и исправлением багов. По словам разработчиков, теперь Angular стал еще компактнее, быстрее и проще в использовании.
Оптимизатор сборки
Теперь продакшн-сборка, созданная при помощи CLI, по умолчанию снабжена оптимизатором — это инструмент, встроенный в командную строку для уменьшения размера приложений с помощью семантического анализа кода.
В первую очередь это позволяет разработчикам помечать части своего приложения как pure
. Удаление лишних кусков кода улучшает tree shaking, предусмотренный в уже существующих инструментах. Также оптимизатор сборки удаляет лишние после компиляции декораторы Angular из кода среды исполнения.
Каждая из этих функций не только сокращает объем кода JavaScript, но и существенно увеличивает скорость работы приложения со стороны пользователей.
Универсальный StateTransfer API и поддержка DOM
Теперь можно легко обмениваться состоянием между серверной и клиентской версиями приложения.
Angular Universal — проект, призванный помочь разработчикам осуществлять рендеринг на сервере (SSR) в Angular-приложениях. Рендеринг приложений на сервере с их последующей загрузкой в сгенерированный HTML существенно облегчает нахождение соответствующего контента поисковыми роботами, что положительно сказывается на производительности.
Наряду с SSR в пятую версию были добавлены ServerTransferStateModule
и соответствующий BrowserTransferStateModule
. Наличие этих модулей устраняет необходимость посылать второй HTTP-запрос клиенту со стороны приложения.
Еще одно примечательное обновление — добавление Domino к platform-server. Оно сделало доступным большее число манипуляций с DOM на стороне сервера, что улучшило поддержку сторонних сервер-не-ориентированных JS-библиотек.
Улучшенный компилятор
Разработчики реализовали поддержку инкрементной компиляции и усовершенствовали декораторы, тем самым ускорив процесс сборки с AOT.
TypeScript Transforms
Компилятор Angular стал еще быстрее, переняв все полезные функции TypeScript transform. По словам разработчиков, переосмысленние стандартного конвейера TypeScript позволило сократить время инкрементной сборки AOT на 95% (2 секунды вместо прежних 40).
Стоит попробовать, не говоря уже о том, что в новой версии CLI программисты обещают сделать это нововведение функцией по умолчанию.
Запуск обновленного компилятора:
Сохранение пробелов
Исторически сложилось, что все символы табуляции, пробелов и переноса строк добросовестно и точно переносятся компилятором прямо в сборку. В новой версии Angular это можно изменить вручную: либо указать в качестве компонента декоратора,
либо применить сразу ко всему приложению через tsconfig.json
:
Теги <pre>
обрабатываются как положено.
Улучшенная поддержка декораторов
В новой версии Angular стали доступными анонимные функции, позволяющие запускать код, не затрагивая d.ts
и открытый API.
Также планируется использование этого приема в качестве составной части useValue
:
“Интернационализированные” конвейеры Date, Number и Currency
Разработчики представили обновленные и более стандартизированные конвейеры Date, Number и Currency, устранив необходимость в использовании полифиллов i18n.
В Angular 5.0.0 конвейеры опираются на CLDR, реализована поддержка широкого спектра локальных стандартов и конфигураций. Про различия в устройстве конвейеров 4 и 5 версий фреймворка можно прочитать тут.
Для возвращения к старой версии конвейеров можно импортировать DeprecatedI18NPipesModule
.
Замена ReflectiveInjector на StaticInjector
Избавиться от еще большего количества полифиллов помогла замена ReflectiveInjector на StaticInjector. Новому injector’у больше не нужен полифилл Reflect, что позволило большинству разработчиков существенно сократить код.
До:
После:
Ускоренная Zone
Zones в Angular по умолчанию стали еще быстрее. Добавлена возможность полностью пропускать их при создании приложений, ориентированных на производительность.
Пропускать zones можно с помощью ngZone:'noop'
:
exportAs
Добавлена поддержка нескольких имен для компонентов/папок проекта. Это поможет пользователям легко переносить компоненты без необходимости вносить какие-либо изменения в код.
Пример:
HttpClient
В Angular 4.3 более компактный, простой и мощный HttpClient был перенесен в @angular/common
. Обновленный инструмент получил широкое признание среди разработчиков, и в новой версии фреймворка он рекомендуется к использованию во всех приложениях. Предыдущий @angular/http library
считается устаревшим.
CLI v1.5
Поддержка Angular v5.0.0 добавлена во все CLI, начиная с версии 1.5. Теперь по умолчанию все проекты генерируются на пятой версии фреймворка.
Также в целях более строгого соответствия новым стандартам TypeScript были обновлены правила использования tsconfig.json
.
Angular Forms и On Blur / Submit
Теперь валидацию и обновление значений можно применять только для blur
или submit
, а не всех событий ввода. Программисты могут определять тайминг и «зону охвата» этих важных процессов самостоятельно. Также asyncValidator
теперь можно определять прямо в объекте options
.
Шаблонные формы
До:
После:
или
Реактивные формы
До:
После:
RxJS 5.5
Поддержка RxJS обновлена до версии 5.5.2+. С новыми «lettable operators» разработчики могут спокойно избегать проблем, связанных со старым механизмом импорта. Устранены все недостатки предыдущего метода patch
, включая проблемы splitting / tree shaking.
Вместо:
Теперь можно:
Новые Router Lifecycle Events
Разработчики теперь могут отслеживать полный цикл маршрутизатора. Это полезно для измерения производительности guards и/или resolvers или при отображении счетчика во время обновления дочернего элемента.
Новые события (последовательно):
GuardsCheckStart
,ChildActivationStart
,ActivationStart
,GuardsCheckEnd
,ResolveStart
,ResolveEnd
,ActivationEnd
,ChildActivationEnd
.
Пример кода для старта/остановки счетчика:
С полным списком нововведений и инструкцией к обновлению можно ознакомиться в документации на Github.
4К открытий4К показов