Обзор ng-conf 2022. Прошлое настоящее и будущее Angular.
Это перевод краткого изложения 1-часового выступления команды Angular на ng-conf 2022, которое вы можете найти на YouTube. Вы также можете найти слайды в Интернете.
Этой осенью прошла конференция по Angular ng-conf 2022. В течение трех дней были доклады и тренинги. Среди докладчиков были Минко Гечев, Сара Драснер, Мадлейна Шайдеггер.
Записывайтесь на курсы школы ИТ лидеров https://growleader.ru
Основные моменты:
- Строго типизированные формы доступны с14 версии
- Улучшение сообщений об ошибках и сотрудничество с fireship.io
- Тришейкинг в сообщения об ошибках
- Автокомплит Angular CLI
- Standalone компоненты выйдут из превью в 15 версии
- API директив позволяет делать наследование от нескольких компонентов
- Улучшен раутер: доступна ленивая загрузка компонентов, улучшенное встряхивание дерева с уменьшением размера пакета на 11%.
- В CDK включено еще больши примитивов для создания собственных компонентов. Например, Listbox.
Открытие конференции
Минко Гечев открыл выступление, представив новых членов команды.
Среди высококлассных участников я упомяну двоих из них, потому что они выступят с частью основного доклада.
- Мадлейна Шайдеггер — сотрудник Google с более чем 15-летним опытом. Она является техническим менеджером всей платформы Angular.
- Сара Драснер — из Netlify, сейчас технический директор всей основной веб-организации разработчиков Google.
Сара Драснер показывает нам, что любая крупная инновация на самом деле является продуктом объединения различных технологий и совместной работы множества людей.
Мы не можем указать точный момент, когда ребенок становится взрослым. Точно так же инновации — это не просто момент озарения.
У Сары невероятно обширный опыт работы с фреймворками и библиотеками, начиная с React, Vue и Angular.
Прошлое
Не одна технология не появляется сама по себе. Предыдущие, текущие и перспективные решения вдохновляют создателей Angular для внедрения тех или иных подходов. В свою очередь Angular вдохновляет создателей других инструментов. Ниже представлена схема влияния инструментов друг на друга.
Невозможно предсказать будущее. Сейчас есть несколько интересных технологий, например — Solid, Qwik, Next, Nuxt.
Что разработал Angular?
Кем вдохновлялась команда Angular?
Фокус последних лет
Последние годы команда Angular работала над Ivy рендером и отложила другие улучшения. Несмотря на это Ivy имеет важные преимущества для дальнейшего развития.
Что сделали после Ivy?
Настоящее
Сегодня у Angular есть два приоритета: расширенные возможности фреймфорка и упрощение разработки (опыт разработчика).
Дополнительные возможности
Дополнительные возможности — строго типизированные формы
Использование TypeScript для некоторых типизированных форм и проверки было добавлено в Angular 14.
Вот пример, предложенный спикером
Дополнительные возможности — обновления и обработка ошибок
Команды ng update и схематики ng улучшены и показывают больше полезной информации.
Увеличено количество новых кодов ошибок во время выполнени. Это позволяет найти ссылки по коду. Хорошо, я не смог найти NG0903, но взгляните на NG0100!! оптимизатор сборки может отображать сообщения об ошибках при тришейкинге.
Angular CLI предлагает автокомплит
Дополнительные возможности — оптимизированный заголовок страницы A11y
Начиная с версии 13.2 Angular router предлагает новое оптимизированное свойство заголовка, которое позволяет людям со вспомогательными технологиями понимать содержимое, заголовок и цель страницы.
Стратегия заголовков может быть дополнительно расширена для включения более сложной логики.
Что мы можем ожидать в ближайшем будущем Angular
Будущее
Мадлейна Шайдеггер рассказала о том, куда движется Angular.
Решения сфокусированы на основе постоянном обратной связи из разных источников:
- Сообщество. Команда Angular начала уделять больше внимания отзывам сообщества. В опросе приняли участие почти 25 000 разработчиков.
- Приоритет проблем — еще одним источником идей была сортировка функций. За последние 18 месяцев команда Angular сократила количество проблем в бэклоге более чем на 60%.
- Пользователи, которые не используют Angular. Команда Angular узнает больше о том, как люди и компании делают выбор в отношении фреймворков.
Изучив эти данные и получив непосредственный опыт работы с другими фреймворками и библиотеками, команда Angular решила сосредоточиться на опыте разработчиков.
Уменьшить кривую обучения
Идея состоит в том, чтобы сгладить кривую обучения и сформировать успешный опыт. Вот первые результаты такого подхода.
- Автономные компоненты сокращают объем кода, который вам нужно написать, и откладывают изучение NgModule, когда вы впервые начинаете изучать Angular. Автономные компоненты больше не будут предварительными версиями для разработчиков в v15.
- В некоторых случаях API композиции директив позволяет наследовать от нескольких компонентов.
- Улучшения маршрутизатора включают упрощение ленивой загрузки компонентов, улучшенное встряхивание дерева с уменьшением размера пакета на 11%, функциональные средства защиты маршрутизатора, упрощенную и типобезопасную функцию вставки.
- Больше примитивов CDK, например. Listbox.
Сократить барьеры
Упростить работу разработчиков, когда им нужно уйти со строго подхода разработки продиктованные Angular. Улучшение опыта разработчиков будут направлены на упрощение документации и повышение согласованности материала.
Партнерства и сотрудничество
Во время основного доклада были заявлены следующие партнеры:
Aurora — Chrome Browser
Команда Aurora уже работала с Angular для оптимизации производительности во время выполнения:
- Оптимизация времени сборки
- Улучшения в рендеринге на стороне сервера
- Оптимизация директивы изображения. Доступно в предварительной версии версии 14.2.
Firebase
Работа ведется по направлениям
- развертывание с рендерингом на стороне клиента
- развертывание SSR
- развертывание с предварительным рендерингом (например, создание статического сайта). Последний находится в стадии разработки.
Работа со сборщиком Vite
Google любит эксперименты. Сборка с использованием esbuild показала следующие результаты — холодная сборка для ваших производственных ресурсов выполняется на 57 % быстрее.
Вы можете попробовать это в своих проектах v14+, обновив angular.json и заменив сборщик браузера на browser-esbuild.
"builder": "@angular-devkit/build-angular:browser""builder": "@angular-devkit/build-angular:browser-esbuild",Bug Bounty
Они ввели программу вознаграждения за уязвимости программного обеспечения, и, короче говоря, вы можете заработать немного денег, сообщая об уязвимостях программного обеспечения в Angular.
Сколько? До 31 337 долларов! Вы можете найти больше на goo.gle/ng-vrp.
Внешнее партнерство
Стоит отметить следующие партнерские отношения
- Firebase.io — Партнерство с firebase.io направлено на создание большего количества контента.
- Rangle.io — Партнерство с Rangle.io направлено на улучшение инструментов разработки и особенно на получение более подробной информации об обнаружении изменений.
Инструменты разработчика
- Также можно предварительно просмотреть зависимости компонента из инструмента разработки благодаря новому улучшению инструментов разработки в режиме предварительного просмотра для разработчиков.
- Улучшенная структура трассировки стека упрощает чтение и понимание сообщений об ошибках. Следующее изображение является предварительным просмотром того, что грядет. Он должен быть доступен с версии v15.
Дальнейший путь
Вот краткий список улучшений в конвейере. Некоторых из них следует ожидать в версии 15, а некоторые из них представляют собой исследования, которые могут дать, а могут и не дать ощутимые результаты
- Более легкий и упрощенный API, включая управление состоянием
- Модернизация системы реактивности
- Улучшена производительность: компонент изображения, загрузка скрипта, CWV
- Улучшение гидратации для SSR
- Улучшенная трассировка стека
- Улучшение a11y: больше многоразовых безголовых примитивов ARIA
- Обновление документации
- Улучшенный API для кастомизации Angular Material
- Исследования по гидратации: улучшенная документация, интеграция SC, частичная гидратация
- Исследования реактивности: Angular без зон, обнаружение изменений для каждого компонента, хранилища для управления состоянием, вычисляемые свойства
Оригинал обзора — https://levelup.gitconnected.com/summary-of-angular-team-keynote-ng-conf-2022-18875b750637
Мой телеграм канал о фронтенде https://t.me/front_ui_ux
