Вступление
Angular — одна из самых популярных платформ JavaScript. Действительно, Angular уже используется миллионами разработчиков и компаний по всему миру, и его распространение растет.
В этой статье мы узнаем о последних функциях, представленных в версиях 8 и 9, как в ядре Angular, так и в инструментах Angular: новый рендеринг Ivy, API-интерфейсы Schematic и Builder, новый инструмент построения и тестирования оркестровки Bazel, дифференциальная нагрузка и т. д. Мы также обсудим, что нас ожидает в будущем Angular. Оповещение о спойлере: речь идет об облегченном и быстром времени выполнения, быстродействующих и более быстрых приложениях и инструментах для разработчиков, а также о совместимости.
Растущие темпы усыновления
Чтобы узнать, сколько разработчиков используют Angular, и понять степень принятия платформы, группа Angular использует количество ежедневных активных посетителей официального сайта документации по адресу angular.io . Логическое обоснование этого показателя заключается в том, что многие компании используют Angular для создания приложений, которые используются внутри или за брандмауэром, или для создания приложений, которые не предоставляются напрямую в открытый Интернет (например, панели мониторинга для подключенных автомобилей). Единственным жизнеспособным показателем, оставшимся для измерения усыновления, являются уникальные ежедневные посетители.
Несколько месяцев назад команда Angular объявила о том, что число уникальных посетителей официального сайта документации превысило 1,5 миллиона, и я уверен, что этот показатель со временем будет расти.
Полная и интегрированная структура
Почему разработчики любят использовать Angular? Одна из причин, по которой они продолжают возвращаться, заключается в том, что Angular — это фреймворк, в отличие от библиотеки, что означает, что он предлагает полный набор API и инструментов. Будь то управление маршрутами, построение и проверка форм, интернационализация (i18n), рендеринг на стороне сервера, модульное тестирование, инструменты для разработчиков с помощью Angular CLI, анимация или компоненты пользовательского интерфейса, Angular интегрирует все необходимые API строительных блоков для создания современных веб-приложений, от создания прототипа до развертывания.
Цикл выпуска
Angular принял 6-месячный цикл выпуска, основанный на стандарте семантической версии . Это поможет как можно быстрее вводить новые инновации и исправлять ошибки, предоставляя пользователям четкую повестку дня, чтобы они могли планировать свои обновления. Этот цикл выпуска выглядит следующим образом:
-
От 1 до 3 минорных версий для каждого основного выпуска.
-
Патч версия почти каждую неделю для исправления ошибок.
Обратите внимание, что команда также предлагает политику долгосрочной поддержки (LTS):
-
Активная поддержка в течение 6 месяцев основной версии.
-
LTS с исправлениями ошибок и исправлениями безопасности на 12 месяцев.
Если вы хотите опробовать следующую версию в любое время с ее документацией, вы можете найти ее по адресу next.angular.io
Процедура автоматического обновления
Вы можете легко использовать Angular CLI для обновления зависимостей вашего приложения до последней версии Angular, используя следующую команду:
ng update \@angular/cli \@angular/core
Вы также можете использовать следующий тег, чтобы попробовать следующую (т.е. предварительную) версию Angular и предоставить обратную связь команде:
ng update @angular/cli@next @angular/core@next
Вы можете прочитать больше об этих автоматических обновлениях на update.angular.io .
Новые возможности Angular 8
Дифференциальная нагрузка
Это была одна из основных функций, представленных в Angular 8. Дифференциальная загрузка — это метод, при котором браузер решает, какую версию JavaScript (ES5 или ES2015 +) загружать, анализировать и выполнять, основываясь на его (браузерных) возможностях. Фактически, большинство современных браузеров (мы называем их вечнозелеными браузерами) изначально поддерживают некоторые из новейших функций ECMAScript. Одной из функций, которые играют главную роль в дифференциальной нагрузке, являются ES-модули.
Основываясь на этом простом наблюдении, мы затем предоставляем браузеру два набора файлов JavaScript:
-
Набор файлов перенесен в ES2015, для современных браузеров.
-
Набор файлов, перенесенных в ES5, для устаревших браузеров.
Как работает дифференциальная нагрузка? Когда мы создаем наше приложение с помощью Angular CLI, оно проверяет наш файл tsconfig.json, чтобы проверить, на какую версию JavaScript мы нацеливаемся. Если наша цель ES2015, CLI запускает две сборки: одну для ES2015 и одну для ES5. Давайте возьмем следующий tsconfig.json для примера:
{
"compilerOptions": {
"module": "esnext",
"moduleResolution": "node",
"target": "es2015"
}
}
Наша цель здесь — ES2015, поэтому CLI выведет следующий index.html:
<!-- For modern browsers -->
<script type="module" src="polyfills-es2015.js"></script>
<script type="module" src="runtime-es2015.js"></script>
<script type="module" src="style-es2015.js"></script>
<script type="module" src="vendor-es2015.js"></script>
<script type="module" src="main-es2015.js"></script>
<!-- For Legacy browsers -->
<script nomodule src="polyfills-es5.js"></script>
<script nomodule src="runtime-es5.js"></script>
<script nomodule src="style-es5.js"></script>
<script nomodule src="vendor-es5.js"></script>
<script nomodule src="main-es5.js"></script>
Обратите внимание, что в Angular 8 функция дифференциальной загрузки включена по умолчанию, и вам не нужно об этом беспокоиться. Однако, если у вас возникнут какие-либо проблемы, связанные с этой функцией, вы все равно можете вернуться к цели ES5.
Команда Angular использовала эту технику на angular.io и сумела сохранить до 40 КБ файлов, загружаемых современными браузерами. Также, согласно отзывам членов сообщества, они заметили улучшения, варьирующиеся от 7-20%.
Динамический импорт
Ленивая загрузка частей приложений всегда была одной из рекомендаций для лучшего времени загрузки. Это может быть достигнуто путем настройки углового маршрутизатора с помощью следующего кода:
{
path: 'home',
loadChildren: 'home/home.module#HomeModule'
}
Однако этот синтаксис специфичен для Angular и не является частью какого-либо веб-стандарта. Теперь, поскольку большинство современных браузеров изначально поддерживают модули ES, новый синтаксис отложенной загрузки использует стандарт Dynamic Imports:
{
path: 'home',
loadChildren: () => import('home/home.module')
.then(m => m.HomeModule)
}
Редакторы кода, такие как VSCode и WebStorm, теперь могут проверять и предоставлять вам завершение кода для путей вашего модуля.
Обратите внимание, что при обновлении через ng update command CLI ваш старый синтаксис автоматически обновится до нового.
API Builder
Подобно API Schematics , что позволяет нам настроить сгенерированный код при использовании CLI, с помощью команд , таких как ng new, ng generate, ng add, и ng update, а также добавлять новые команды , новый Builder API позволяет настраивать поведение сборки команды , такие как ng build, ng test, и ng run. Таким образом, мы можем выполнять задачи, которые могут выполняться до, во время или после процесса сборки.
Некоторые облачные провайдеры уже начали создавать своих собственных сборщиков, чтобы помочь своим пользователям легко и без проблем развернуть свое приложение Angular. Например, теперь вы можете легко выполнить развертывание в Firebase с помощью @ angular / fire или в Microsoft Azure с помощью @ azure / ng-deploy .
Поддержка веб-работников
Если в вашем приложении есть какая-то логика, которая выполняет сложные вычисления, вы уже должны выполнять эти рабочие нагрузки на веб-рабочих . С помощью Angular CLI вы можете автоматически добавлять и настраивать веб-работников для ваших компонентов:
ng generate web-worker <existing-component-name>
Обратите внимание, что код, работающий внутри Web Worker, — это логика вашего приложения, а не среда выполнения Angular!
Узнайте больше о Web Workers и Angular из официального руководства .
телеметрия
Версия 8 CLI добавляет новую функцию телеметрии, которая помогает команде Angular понять, как разработчики используют CLI и устранять критические проблемы. Эта функция телеметрии по умолчанию отключена, и пользователи должны включить и включить ее , чтобы делиться анонимными данными об использовании с командой Angular. Этот новый API позволяет пользователям также подключать свой собственный аналитический сервер и получать те же собранные данные. Информация, такая как использование ОЗУ и ЦП, размер пакетов и команды CLI, затем регистрируется. Вы можете прочитать о полном списке измерений здесь .
Угловые элементы
Angular использует стандарт Web Components благодаря Elements. С помощью этой новой функции можно будет упаковать любой угловой компонент как пользовательский элемент .
Существует много вариантов использования этого нового подхода к отправке приложений. Вы можете использовать угловые компоненты внутри:
-
Серверные технологии, например ASP.NET.
-
Статические веб-страницы и веб-сайты, например, CMS.
-
Другие интерфейсные технологии, например Vue.js.
Вот быстрый пример:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HelloComponent } from './hello.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
entryComponents: [HelloComponent]
})
export class AppModule {
constructor(injector: Injector) {
const element = createCustomElement(
HelloComponent, { injector });
customElements.define('x-hello', element);
}
}
Затем просто используйте ваш элемент в качестве веб-компонента:
<x-hello></x-hello>
Bazel: новый инструмент для построения и тестирования оркестровки
В настоящее время CLI использует webpack и ng-packagr для создания наших приложений и библиотеки (и это скоро не изменится). Однако эти инструменты могут показывать некоторые проблемы с производительностью при попытке создания очень больших приложений. Начиная с версии 8, CLI интегрировал новый инструмент экспериментальной сборки под названием Bazel .
Вкратце, Bazel — это инструмент для построения и тестирования оркестровки, созданный Google, который более десяти лет использовался внутри компании для создания более 86 ТБ данных в гигантском моно-хранилище Google до того, как они открыли его в 2015 году. Вот некоторые из Преимущества Bazel:
-
Он поддерживает бэкэнд, интерфейс и мобильные технологии.
-
Он может выполнять задачи параллельно, локально и на машинах распределенной фермы.
-
Он поддерживает инкрементные сборки и кэширование.
-
Узнайте о других преимуществах .
В контексте Angular интеграция Bazel (в рамках инициативы ABC ) призвана дать инструментам сборки и тестирования Angular значительное повышение производительности.
Базель уже помогла команде Angular сократить сборку Angular с 1 часа до почти семи минут!
Вы можете начать экспериментировать сегодня с Bazel в CLI с помощью следующей команды, если вы запускаете новое приложение:
npm install -g @angular/bazel
ng new my-app --collection=@angular/bazel
Если вы хотите добавить Bazel в существующее приложение CLI, используйте следующее:
ng add @angular/bazel
Обратите внимание, что, поскольку вы используете CLI, все конфигурации будут автоматически управляться CLI. Таким образом, теоретически вам даже не нужно узнавать о Базеле. Тем не менее, Bazel — это увлекательная технология, и я настоятельно рекомендую потратить некоторое время и изучить ее, если вам нужно использовать ее с другими технологиями!
Плющ: новый рендерер
В прошлом году команда Angular Framework начала работу над новой реализацией рендерера и компилятора шаблонов под названием Ivy. Основными целями этого полного переписывания являются:
-
Уменьшите размер создаваемых пакетов.
-
Сократите время компиляции.
-
Обеспечить лучшую отладку.
-
Улучшение статической проверки типов внутри шаблонов HTML (благодаря языковой службе TypeScript).
Чтобы иметь наименьший возможный размер, все общедоступные API теперь могут быть расшатаны по дереву : хуки жизненного цикла, каналы, запросы, DI и т. Д. Кроме того, следует отметить, что с Ivy все будет компилироваться в режиме AOT .
В Angular версии 9 Ivy будет включен по умолчанию. Однако, если вы используете Angular версии 8, вы уже можете поэкспериментировать с Ivy, используя следующую команду:
ng new shiny-ivy-app --enable-ivy
Для существующих приложений вы можете вручную обновить следующие файлы:
- Включите Ivy в вашем файле tsconfig.json:
{
"compilerOptions": { ... },
"angularCompilerOptions": {
"enableIvy": true
}
}
- Включите режим AOT в вашем основном файле angular.json:
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
...
"aot": true,
}
}
}
}
}
}
Будущее Angular
Отказ от ответственности: следующие мнения основаны на некоторых гипотетических идеях и взглядах, которыми Миско Хевери поделился на NgConf 2019. *
С новым рендерером Ivy и тем, как внутреннее ядро Angular было переработано, это откроет целый мир новых технологий для оптимизации еще большего числа приложений Angular. Мы можем представить, что NgModule стали необязательными и загружаем компоненты напрямую (при условии, что Zone.js больше не потребуется!). Другое возможное решение, которое можно исследовать, — это рендеринг на стороне сервера, позволяющий приложениям Angular полностью рендерить серверную часть с состоянием и распространять и возобновлять это состояние из браузера вместо того, чтобы заново создавать состояние показа на клиенте! С помощью этих методов можно было бы значительно увеличить время взаимодействия и, таким образом, очень быстро загружать приложения Angular.
Со всеми новыми функциями (и некоторыми другими) будущее Angular будет заключаться в более легком и быстром времени выполнения, быстродействующих и более быстрых приложениях и инструментах разработки, а также совместимости.
Оставайтесь в курсе.
Эта статья была первоначально опубликована в нашем отчете о тенденциях JavaScript. Чтобы прочитать больше подобных статей, загрузите отчет сегодня!