Один из самых популярных фреймворков JavaScript - Angular, наконец, выпустил свою последнюю версию Angular 8 23 мая 2019 года. Последний выпуск фреймворка Angular от Google приобрел несколько привлекательных функций, которые сделали Angular 8 уникальным по сравнению с его предыдущими версиями. В этом блоге мы обсудим 10 лучших функций и обновлений Angular 8.

История предыдущих версий angular

Если вы ранее знали историю версий и функций Angular или хотите сосредоточиться только на Angular 8, пропустите эту часть и перейдите к следующей - функциям Angular 8.

Angular - один из самых популярных интерфейсных JavaScript-фреймворков, сравнивающих React и Vue.js для разработки веб-приложений. Его первая версия была выпущена в 2009 году и существует уже 10 лет, и с тех пор она принесла впечатляющий список изменений и улучшений.

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

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

Angular 2 был полностью переписан, это не обновление версии 1. Он был выпущен с Typescript, который представляет собой расширенный набор JavaScript, представленный Microsoft и выбранный командой Angular для разработки. TypeScript - отличный способ написать JavaScript. Angular 2 представил систему иерархического внедрения зависимостей, поскольку в Angular все является классом, поэтому DI достигается с помощью конструктора. Компилятор был обновлен и использовался для оптимизации производства рендеринга шаблонов, что помогает коду выполняться с максимальной скоростью в JVM.

Основная причина пропуска версии 3 заключалась в том, чтобы избежать путаницы, поскольку основные библиотеки Angular были живы в одном репозитории GitHub в @ angular / angular с одинаковым управлением версиями, но распространялись как разные пакеты NPM, что приводило к смещению версии пакета маршрутизатора, которая уже была распространена. как версия 3.3.0, поэтому команда решила пропустить версию 3 и перейти к Angular v4, который выровнял все основные пакеты и поможет избежать путаницы в будущем.

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

Команда Angular представила прогрессивную поддержку веб-приложений для своей Angular версии 5, чтобы получить функции собственных мобильных приложений с мобильными веб-приложениями, а также улучшения и улучшения в Material Design, а также добавила оптимизатор сборки, который делает приложение легче и быстрее, удаляя ненужный запуск. -временной код.

Основными обновлениями в Angular 6 были обновление ng, компилятор Bazel, поддержка Service Worker, элементы Angular, рабочие области CLI, улучшения производительности анимации, ng add и компоненты Angular Material + CDK.

Версия Angular 7 в первую очередь ориентирована на проект Ivy, но они не представили ivy в своей angular 7 и говорят о других важных изменениях, таких как новый интерфейс командной строки, ScrollingModule, DragDropModule, основная настройка производительности путем удаления полифилла метаданных отражения, который автоматически включается в производство. и добавляя по умолчанию пакеты бюджета, которые будут уведомлять вас, когда ваше приложение достигает ограничений по размеру. Angular 7 обновлен до машинописного текста 3.1, RxjS 6.3 и добавлена ​​поддержка Node 10.

Посетите мой блог на тему Сногсшибательная Angular 7 Featu

Что нового в Angular 8

Пришел Angular 8, а вместе с ним - куча рабочего процесса и новый набор мощных функций, которые оценят разработчики Angular, такие как основная структура, библиотека материалов Angular и интерфейс командной строки. Они предоставили основному партнеру по запуску Angular Console для запуска проектов Angular, # angular / fire для интеграции Firebase с Angular, интегрированную IDE StackBlitz и NativeScript для создания собственных мобильных приложений с Angular. давайте рассмотрим и суммируем, какие новые функции представлены в Angular 8, а также как обновить ваши приложения с Angular 7 до Angular 8.

Список 10 лучших функций Angular 8

Предварительный просмотр Ivy

Если вы следовали Angular, то наверняка встречали слово «Ivy». Ivy - это серьезное изменение в истории Angular, это средство визуализации angular, которое радикально отличается от всего остального, поскольку использует инкрементную DOM. Он меняет внутреннюю работу фреймворка без изменения наших приложений Angular. Проект Ivy в основном переписывает компилятор Angular и код времени выполнения, чтобы достичь

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

Как Angular Ivy работает с инкрементальной DOM

Ключевая идея инкрементальной модели DOM состоит в том, что каждый компонент компилируется в серию инструкций. Эти инструкции создают деревья DOM и обновляют их на месте при изменении данных.

@Component({
  selector: 'todos-cmp',
  template: `
    <div *ngFor="let t of todos|async">
        {{t.description}}
    </div>
  `
})
class TodosComponent {
  todos: Observable<Todo[]> = this.store.pipe(select('todos'));
  constructor(private store: Store<AppState>) {}
}

Будут скомпилированы в:

var TodosComponent = /** @class */ (function () {
  function TodosComponent(store) {
    this.store = store;
    this.todos = this.store.pipe(select('todos'));
  }
  TodosComponent.ngComponentDef = defineComponent({
    type: TodosComponent,
    selectors: [["todos-cmp"]],
    factory: function TodosComponent_Factory(t) {
      return new (t || TodosComponent)(directiveInject(Store));
    },
    consts: 2,
    vars: 3,
    template: function TodosComponent_Template(rf, ctx) {
      if (rf & 1) { /** create dom*/ 
        pipe(1, "async");
        template(0, TodosComponent_div_Template_0, 2, 1, null, _c0);
      } if (rf & 2) { /** create dom*/ 
        elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos)));
      }
    },
    encapsulation: 2
  });
  
  return TodosComponent;
}());

Функция шаблона содержит инструкции по рендерингу и обновлению DOM в процессе рендеринга.

Две основные концепции IVY

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

  1. Низкий объем памяти: инкрементальной модели DOM не требуется память для повторной визуализации представления, если она не изменяет модель DOM, поэтому она выделяет память при добавлении или удалении узлов DOM. поскольку большинство вызовов рендеринга / шаблонов ничего не меняют, приводят к огромной экономии памяти.

Дифференциальная нагрузка

Приложения Angular 8 теперь будут более производительными благодаря дифференциальной загрузке современного JavaScript. При дифференциальной загрузке новые приложения, созданные Angular CLI, теперь будут содержать отдельные пакеты для устаревшего JavaScript (ES5) и современного JavaScript (ES2015 +).

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

Обратная совместимость маршрутизатора Angular

Функция Angular 8 добавила режим обратной совместимости в маршрутизатор Angular, который помогает обновить путь для больших проектов и упростит переход на Angular, разрешив ленивую загрузку частей приложений Angular v1.x с использованием API $ route. иметь возможность сразу же обновить наши приложения с Angular 1.x до Angular 2+.

Улучшенное объединение веб-воркеров

Благодаря Angular CLI 8 веб-воркеры включаются при сборке производственных пакетов, которые необходимы для улучшения распараллеливаемости и помогают повысить производительность. Таким образом, Angular 8.0 добавляет поддержку сборки в CLI, который предоставляет один пакет для каждого веб-воркера.

ng g webWorker <name>

Базель Поддержка

Одна из новых функций Angular 8 - это возможность создавать ваше приложение CLI с помощью Bazel. Сама фреймворк Angular построен на Bazel.
Он доступен по подписке, ожидается, что он будет включен в @ angular / cli в Версии 9.

Основные преимущества Bazel:

  • Мы сможем создавать наши серверные и внешние интерфейсы с помощью одного и того же инструмента.
  • Более быстрое время сборки Первая сборка будет мучительно медленной, поскольку Bazel стремится к точно воспроизводимым сборкам, но параллельные сборки будут намного быстрее, и будет полезно, если ваше приложение будет использовать несколько модулей и библиотек.
  • Инкрементальная сборка: Codebase вызовет только самую маленькую возможную перестройку, чтобы создать и развернуть только то, что изменилось, а не все приложение.
  • Вы можете извлечь файлы Bazel, по умолчанию они скрыты.
  • Возможность иметь удаленные сборки (с кешем) на ферме сборки

Ленивая загрузка

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

Поэтому, чтобы преодолеть это, они добавили поддержку динамического импорта в конфигурацию маршрутизатора в последней версии Angular 8, которая позволяет использовать оператор импорта для ленивой загрузки модуля, и это будет понято IDE, веб-пакетом и т. Д.

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

Согласие на совместное использование

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

Улучшения рабочего процесса CLI

Интерфейс командной строки Angular постоянно совершенствуется, и теперь ng-build, ng-test и ng-run могут быть расширены сторонними библиотеками и инструментами.
Например: AngularFire

Builders API

Новая версия позволяет нам использовать Builders API. Он использует компоновщики для основных операций, таких как: обслуживание, сборка, тестирование, lint и e2e. По сути, Builder Builders - это функции, которые реализуют логику и поведение для задачи, которая может заменить команду, которую вы передаете методу createBuilder () из пакета @ angular-devkit / architects, и теперь мы также можем создавать наши собственные построители.

import { BuilderOutput, createBuilder } from '@angular-devkit/architect';
export default createBuilder((options, context) => {
  return new Promise<BuilderOutput>(resolve => {
    resolve({ success: true });
  });
});

Улучшения миграции AngularJS API с помощью $ location service

Команда Angular хочет предоставить поддержку всем разработчикам, использующим AngularJS, чтобы обновить их до последней версии Angular, поэтому были внесены некоторые улучшения для обеспечения лучшей интеграции с сервисом определения местоположения AngularJS $ в гибридных (AngularJS ‹=› Angular) приложениях. Добавлен новый пакет angular/common/upgrade поможет вам

  • Чтобы получить состояние из службы определения местоположения.
  • Чтобы отслеживать все изменения местоположения.
  • Помогите вам получить свойства поиска порта протокола имени хоста, которые были доступны в AngularJS.
  • API MockPlatformLocation добавлен для тестирования службы определения местоположения.

Сервисный работник

Angular поставляется с реализацией сервис-воркера, начиная с версии 5. Благодаря Angular Service Worker и Angular CLI, встроенной в PWA, разработчики angular могут воспользоваться преимуществами этого сервис-воркера и получить выгоду от повышенной надежности и производительности, которые он обеспечивает, без необходимости кодирования. против низкоуровневых API и может обеспечить загрузку и установку приложений, аналогичных нативным.

Машинопись обновлена ​​до версии 3.4.x

В последней версии Angular 8 они обновили зависимости Angular, которые включают такие инструменты, как RxJS и TypeScript, до v3.4 (Angular 7 использует v3.2), а новые приложения, созданные через Angular CLI, также будут использовать новейшую версию TypeScript по умолчанию. .

Угловая Firebase

Angular официально добавили поддержку firebase, и теперь мы можем развернуть наше приложение с помощью Angular CLI.

ng run [PROJECT_NAME]:deploy

Устаревшие API и функции

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

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

  • Интеграция с Web Tracing Framework
  • @angular/platform-webworker и@angular/platform-webworker-dynamic оба пакета устарели
  • Использование для любого в TesBed.get
  • Удален устаревший ДОКУМЕНТ из @angular/platform-browser
  • @ angular / http удален из списка пакетов
  • Селектор элемента ngForm
  • Сервисный работник versionedFiles

Производительность Angular и обновление с Angular 7 до Angular 8

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

Для большинства разработчиков об этом обновлении должна позаботиться одна команда:

ng update @angular/cli @angular/core <name>

Последние мысли об Angular 8

Подводя итог всем вышеупомянутым функциям, команда Angular, безусловно, отлично справилась с фреймворком, сделав работу разработчиков намного проще и проще. Angular версия 8 выглядит гораздо более доступным решением, ориентированным на современные технологические тенденции, добавленные функции, такие как Ivy, конфигурации маршрутов с использованием динамического импорта, новый API построителя в CLI, поддержка веб-воркеров, Unified Angular Location Service и с каждым новым выпуском, фреймворк становится все плавнее и плавнее, что делает платформу Angular лучше.