Angular 9 тепер доступний — Ivy прибув

Alex Alex 07 лютого 2020
Angular 9 тепер доступний — Ivy прибув
Вийшла 9 версія Angular, це основний реліз, що охоплює всю платформу, включаючи сам фреймворк, angular material та CLI. У цьому релізі програми за замовчуванням переключаються на компілятор і рантайм Ivy і, а також представляються поліпшені способи тестування компонентів.

Це одне з найбільш великих оновлень Angular за останні 3 роки, і команда розробників рада можливостям, що дозволяє розробникам створювати кращі програми і вносити свій внесок в екосистему Angular.

Як оновитися до 9 версії


Пройлите на update.angular.io для отримання докладної інформації. Щоб оновлення пройшло гладко, рекомендується спочатку оновитися до останньої версії Angular 8.

Оновлення до останньої версії 8

ng update @angular/[email protected] @angular/[email protected]

ng update @angular/cli @angular/core

Щоб ознайомитися з основними змінами, внесеними даному оновленні, включаючи застарілі API, ознайомтеся з Оновлення до 9 версії Angular в документації Angular.

Ivy


Версія 9 переводить всі додатки на компілятор і рантайм Ivy за замовчуванням. Крім сотень виправлених багів, компілятор і середовище виконання Ivy пропонують безліч переваг:

  • Менші розміри пакету
  • Більш швидке тестування
  • Краща налагодження
  • Поліпшений байндинг CSS-класів і стилів
  • Покращена перевірка типів
  • Поліпшені повідомлення про помилки при складанні
  • Покращено час складання, AOT включається за замовчуванням
  • Поліпшення інтернаціоналізації

Розглянемо детально деякі поліпшення

Менші розміри пакету


Компілятор Ivy був розроблений для видалення частин Angular, які не використовуються з допомогою treeshaking, і для зменшення кількості коду, що генерується для компонент Angular.

Завдяки цим удосконаленням програми можуть отримати значне зменшення розміру.

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



Більш швидке тестування


Також оновилася реалізація TestBed в Ivy, ставши більш ефективною.

Раніше TestBed перекомпилировал всі компоненти між запусками кожного тесту, незалежно від того, чи були внесені які-небудь зміни в компоненти (наприклад, через перевизначення).
В Ivy TestBed не перекомпилирует компоненти, якщо компонент не було перевизначено вручну, що дозволяє уникнути перекомпіляції між більшістю тестів.

З цією зміною основні тести фреймворку проходять приблизно на 40% швидше. Очікується, що користувачі помітять приріст швидкості тестування їх додатків на рівні 40-50%.

Покращений debugging


Ivy надає додаткові інструменти для налагодження додатків. При запуску програми в режимі розробки з допомогою середовища виконання Ivy, тепер пропонується новий об'єкт для налагодження ng.

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

image

Ivy також покращує stack trace для налагодження таких проблем, як ExpressionChangedAfterItHasBeenCheckederror. Раніше стек був не дуже корисний:

image

З допомогою Ivy ви бачите більш корисну інформацію, яка дозволяє перейти безпосередньо до інструкції шаблону з зміненим виразом.

image

Наприклад, якщо ви натиснете на AppComponent_Template в стеці, наведеному вище, ви можете побачити конкретну рядок у створеному коді, де виникає помилка:

image

Якщо хочете, ви також можете перейти до будь-якої з цих інструкцій фреймворку, щоб відстежити, як фреймворк створює або оновлює ваші компоненти.

Поліпшений байндинг стилів CSS класів


Ivy надає поліпшення для обробки стилів. Раніше, якщо додаток містив конкуруючі визначення стилів, ці стилі могли замінювати одна одну. З Ivy стилі зливаються передбачувано.

Розглянемо наступні фрагменти шаблону і компоненти:

<my-component style="color:red;" [style.color]="myColor" [style]="" myDirective></div>

@Component({
host: {
style: "color:blue"
},...
})
...

@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
...

Раніше застосовувалася та прив'язка, яка обчислювалася останньої, і це могло залежати від часу внесення змін у ці вирази. Якби myColor і myOtherColor були невизначеними, статичний «червоний» стиль був би проігноровано.

У версії 9 ви можете керувати своїми стилями за допомогою чіткого пріоритету, який не залежить від часу. Найбільш специфічні стилі мають вищий пріоритет. Наприклад, прив'язка до [style.color] перевизначає пересічну прив'язку [style].

Однак з міркувань зворотної сумісності ми залишили поведінку [ngStyle] і [ngClass] таким же, як і раніше. При оновленні значень прив'язок, нові значення будуть ігнорувати будь-які перетинаються прив'язки.

Детальніше про правила пріоритету стилів можна прочитати у посібнику синтаксису шаблону в документації.

В якості побічного ефекту рефакторінгу стилів можна прив'язуватися до CSS змінним (CSS custom properties).

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Покращена перевірка типів


Компілятор Angular може перевіряти більше типів програми і застосовувати більш суворі правила. Ці функції допоможуть вам виявляти помилки на ранніх стадіях розробки.

Підтримується два основних прапора для додаткових перевірок типу на додаток до стандартних.:

  • fullTemplateTypeCheck — включення цього прапора вказує компілятору, перевіряти все, що знаходиться у вашому шаблоні (ngIf, ngFor, тп-template, і т. д)
  • strictTemplates — активація цього прапора застосує найсуворіші правила для перевірки типів.

Більше про перевірку типів шаблонів

Виправлені помилки збірки


Новий компілятор Ivy не тільки швидше і забезпечує більш високу безпеку типів, але і спрощує читання повідомлень про помилки.

У версії 8 або View Engine типова помилка компіляції буде виглядати наступним чином:

image

У версії 9 з Ivy та ж помилка виглядає так:

image

Покращено час складання, за замовчуванням включений AOT компілятор.


Завдяки архітектурі Ivy значно підвищилася продуктивність компілятора.
Виміряна продуктивність компілятора з точки зору накладних витрат на простої компіляції TypeScript програми. Для нашого проекту документації (angular.io), накладні витрати зменшилися з 0,8 х 0, х з Ivy, поліпшення становило майже 40%.

Ці значить, що складання AOT можуть бути помітно швидше. Завдяки цьому можна використовувати AOT навіть в режимі dev. Це означає, що «ng serve» тепер має ті переваги, що і релизные складання, покращуючи досвід розробника для Angular.

Завдяки змінам в компіляторі і середовищі виконання, також більше не потрібні entryComponents. Ці компоненти будуть виявлені і скомпільовані автоматично при їх використанні.

Покращена інтернаціоналізація (i18n)


Інтернаціоналізація була особливістю Angular, де ви могли побудувати додаток один раз для однієї локалі і отримувати високо оптимізовані і локалізовані програми. У версії 9.0 прискорився процес, перемістивши підстановки i18n пізніше в процесі складання. Це зміна дозволило зробити його в 10 разів швидше.

Детальніше про новий i18n: angular/localize і новому angular.json.

Більше надійний ng update


Внесені зміни в роботу ng update, щоб зробити його більш надійним і інформативним.

  • Завжди використовуйте останню версію CLI. Починаючи з 8.3.19 CLI, ми тепер використовуємо CLI з цільової версії оновлення. В подальшому поновлення завжди будуть оброблятися останнім CLI.
  • Більш чіткий прогрес оновлення. ng update тепер дає більше інформації про те, що відбувається під капотом. Для кожної міграції ви побачите інформацію про неї.
  • Більш проста налагодження оновлень. За замовчуванням ng update запускає всі міграції і залишає сукупні зміни на диску для перевірки. Оновлення версії 9 також вводить новий прапор — create-commits. Коли ви запускаєте ng update — create-commits, інструмент фіксує стан вашої кодової бази після кожної міграції, так що ви можете покроково виконувати і налагоджувати зміни, які зносяться в ваш код.

Нові можливості «providedIn»


Коли ви створюєте сервіс @Injectable в Angular, ви повинні вибрати, де він додається до інжектору. На додаток до попередніх опцій «root» і «module», у з'явилися дві додаткові опції.

  • platform — вказівка providedIn: 'platform' робить сервіс доступним в спеціальному singleton інжекторі платформи, яка спільно використовується всіма додатками на сторінці.
  • any — надає унікальний екземпляр для кожного модуля (включаючи lazy модулі)

Детальніше про providedIn

Обв'язка компонент


Тестування компонентів історично спиралося на використання деталей реалізації, таких як CSS-селектори, для пошуку компонентів і запуску подій. Це означало, що всякий раз, коли бібліотека компонентів змінювалася, всі тести, засновані на цих компонентах, повинні були оновлюватися.

У версії 9 з'явилися обв'язки компонент, які пропонують альтернативний спосіб тестування. Абстрагуючись від деталей реалізації, ви можете бути впевнені, що ваші тести правильно визначені і менш крихкі.

Більшість компонентів Angular Material тепер можна перевірити з допомогою цих обв'язок, і вони також доступні для будь-якого автора компонент у складі (CDK).

Ось приклад тесту раніше:


it("should switch to bug report template", async () => {
expect(fixture.debugElement.query("bug-report-form")).toBeNull();
const selectTrigger = fixture.debugElement.query(
By.css(".mat-select-trigger")
);
selectTrigger.triggerEventHandler("click", {});
fixture.detectChanges();
await fixture.whenStable();
const options = document.querySelectorAll(".mat-select-panel mat-option");
options[1].click(); // Click the second option, "Bug".
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

І те ж саме тепер:


it("should switch to bug report template", async () => {
expect(fixture.debugElement.query("bug-report-form")).toBeNull();
const select = await loader.getHarness(MatSelect);
await select.clickOptions({ text: "Bug" });
expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Нові компоненти


Тепер ви можете включати в свої додатки можливість з YouTube і Google Maps.

  • Ви можете вбудувати плеєр YouTube в ваш додаток з допомогою нового програвача youtube.
  • Ми також представляємо компоненти google-maps. Ці компоненти дозволяють легко візуалізувати Google Maps, відображати маркери і підключати інтерактивність таким чином, щоб вона працювала як звичайний angular компонент, позбавляючи вас від необхідності вивчати API Google Maps.

IDE & поліпшення language service


Значні поліпшення були внесені до розширення Angular language service на платформі Visual Studio Marketplace. Поряд з капітальним архітектурним ремонтом для вирішення проблем продуктивності та стабільності, були виправлені багато давні помилки.

  • Граматика TextMate для синтаксису шаблонів тепер дозволяє виділяти синтаксис як вбудованих, так і зовнішніх шаблонах
  • «Перейти до визначення» для templateUrl і styleUrls
  • Інформація про типи і NgModule у спливаючій підказці

Підтримка TypeScript 3.7


Angular оновлений для роботи з TypeScript 3.6 і 3.7, включаючи надзвичайно популярну функцію опціонального зв'язування в TypeScript 3.7. Щоб залишатися актуальними екосистемі, ми також відновили версії інших залежностей, таких як zone.JS і RxJS.

Source: habr.com

Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.