company_banner

Встречаем Angular 10

Автор оригинала: Stephen Fluin
  • Перевод
Вышел Angular 10.0.0! Это — мажорный релиз, который затрагивает всю платформу, включая сам фреймворк, библиотеку компонентов Angular Material и инструменты командной строки. Размер этого релиза меньше, чем обычно. Дело в том, что с момента выхода Angular 9 прошло всего 4 месяца.

Мы стремимся к тому, чтобы выпускать каждый год по два мажорных релиза. Делается это по разным причинам. Во-первых — чтобы Angular шёл бы в ногу со временем и соответствовал бы современному состоянию экосистемы JavaScript. Во-вторых — чтобы у Angular был бы предсказуемый график выхода новых релизов. Angular 11 мы планируем выпустить этой осенью.



Поговорим о том, что нового появилось в Angular 10.

Новый компонент для выбора диапазонов дат


Angular Material теперь включает в себя новый компонент, предназначенный для выбора диапазонов дат.


Новый компонент

Для того чтобы им воспользоваться, вам понадобятся компоненты mat-date-range-input и mat-date-range-picker.

Вот пример его применения.

Здесь можно узнать подробности о нём.

Предупреждения об использовании CommonJS-импортов


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

Начиная с Angular 10 система будет выдавать предупреждения в том случае, если в сборках используются подобные бандлы. Если вы столкнётесь с такими предупреждениями, касающимися ваших зависимостей, перенастройте проект, указав, что вы предпочли бы ESM-бандл (ECMAScript Module).


Применение CommonJS- или AMD-зависимостей может приводить к необходимости принимать меры, помогающие оптимизации проекта

Особый режим, в котором применяются более строгие параметры проекта


Angular 10 предлагает разработчику более строгий вариант настроек проекта, применяемый при создании нового рабочего пространства командой ng new. Вот как это выглядит:

ng new --strict

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

  • Включается строгий режим в TypeScript.
  • Включается строгий режим при проверке типов в шаблонах.
  • Стандартные ограничения размеров различных частей бандла становятся примерно на 75% строже.
  • Включается использование правил линтинга, предотвращающих объявление сущностей типа any.
  • Приложение настраивается так, чтобы его код был бы лишён побочных эффектов, что позволяет эффективнее применять механизм tree-shaking.

Поддержка возможностей Angular в актуальном состоянии


Как это обычно делается в новых релизах Angular, в этот раз мы внесли некоторые изменения в зависимости. Это позволяет Angular использовать самые современные решения из экосистемы JavaScript.

  • Используемая версия TypeScript увеличена до 3.9.
  • Библиотека TSLib обновлена до версии 2.0.
  • Обновлён, до версии 6, линтер TSLint.

Мы, кроме того, поменяли структуру проекта. Начиная с Angular 10 вы сможете работать с файлом tsconfig.base.json. Этот дополнительный tsconfig.json-файл лучше поддерживает механизмы разрешения типов и настроек пакетов, используемые IDE и средствам для сборки проектов.

Новая стандартная конфигурация браузеров


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

Вот параметры браузеров, применяемые по умолчанию в Angular 9.


Параметры браузеров, используемые в Angular 9

Вот что используется в Angular 10.


Параметры браузеров, используемые в Angular 10

У этого шага есть побочный эффект, который заключается в том, что теперь в новых проектах, по умолчанию, отключаются ES5-сборки. Для того чтобы включить ES5-сборки и дифференциальную загрузку для браузеров, которым это нужно (для таких, как IE или UC), достаточно просто добавить в файл .browserslistrc те браузеры, которые требуется поддерживать.

Улучшение взаимодействия с сообществом любителей Angular


Мы серьёзно занялись улучшением работы с сообществом любителей Angular. Так, за последние три недели список открытых задач в трекерах уменьшился примерно на 700 записей. Речь идёт о задачах, имеющих отношение к фреймворку, к инструментам командной строки и к компонентам. Мы, так или иначе, провели работу по двум тысячам задач и планируем наращивать темпы в ближайшие месяцы. А взаимодействие с сообществам позволит нам сделать ещё больше всего полезного.

Удалённые возможности и возможности, пользоваться которыми не рекомендуется


В Angular 10 мы кое-что убрали, а кое-какие возможности отнесли к разряду запланированных к удалению.

Так, теперь в Angular Package Format больше не входят бандлы ESM5 или FESM5. Это экономит примерно 119 Мб трафика при выполнении команд yarn или npm install для пакетов и библиотек Angular. Эти форматы больше не нужны, так как преобразования, необходимые для поддержки ES5, выполняются в конце процесса сборки.

Мы, основываясь на серьёзном обсуждении с сообществом, решили отказаться от поддержки устаревших браузеров, включая IE 9, 10, а так же Internet Explorer Mobile.

Подробности о том, что удалено из Angular 10, и о том, что признано устаревшим, можно почитать здесь.

Обновление до Angular 10


Для того чтобы узнать подробности об обновлении Angular — посетите ресурс update.angular.io. Для того чтобы в ходе обновления всё шло бы хорошо, мы рекомендуем, за один шаг обновления, всегда обновляться лишь до одного мажорного релиза.

Если описать процесс обновления буквально в двух словах, то выглядеть это будет так:

ng update @angular/cli @angular/core

Здесь можно найти подробные сведения об обновлении Angular до версии 10.

А вы уже обновились до Angular 10?



RUVDS.com
RUVDS – хостинг VDS/VPS серверов

Комментарии 27

    0
    с сообществом любителей Angular

    звучит как кружок по интересам)
      –1

      Отличные новости.
      Angular — лучик света в мире фронтенда.

        0
        vue? не?)
          0

          Из которого в 3 версии делают реакт?

            0
            Ну во-первых старый апи никуда не изчезнет. А во-вторых, Эван Ю, держит руку на пульсе и перенимает лучшие практики из других фреймворков. Да и композишн апи — крайне полезная штука для крупных проектов.
              0
              Я думал Боб Мартин еще лет 10 назад написал что хорошо для крупных проектов
              Например DI, декомпозиция, продуманный нейминг переменных и классов, изменяемый код и так далее.
              Вместо этого нам предлагают писать функции в функциях
              Теперь посмотрим на супер новое апи, что читабельнее, функции в функциях:
              export default {
                setup() {
                  const state = reactive({
                    count: 0,
                    double: computed(() => state.count * 2)
                  })
              
                  function increment() {
                    state.count++
                  }
              
                  return {
                    state,
                    increment
                  }
                }
              }
              


              Обычный класс

              export class TestComponent {
                count = 0;
                double = 0;
              
                increment() {
                  this.count++;
                  this.double = this.count * 2;
                }
              }
              


              Что читабельней?
              А теперь представьте что функций будет больше 1
                0
                удалено
                  0
                  Да, писал в браузере пока разговаривал по телефону)
                  Исправил
                  Синтаксис может и проще, но от невнимательности (криворукости) ничего не спасёт.


                  Только вот этот синтаксис существует в angular с 2 версии с кучей других плюшек
                  Но почему-то реактеры стараются придумать свое, лишь бы не так как у других, при этом выдавая это за конфетку, а разработчики vue повелись на хайп и подхватили.
                  Изначально придумали синтаксис с кучей mounted, computed, bind this и так далее, потом переписали это на хуки которые не сильно улучшили читабельность и выдают это за прорыв.
                    +2
                    Мне тоже казалось странным, что реактщики любят своебразный синтаксис придумывать. Который и так есть в классах, например. Но оказывается, краткость — экономия пары символов, имеет значение.

                    На своём опыте убедился, что компонент React рефакторится одной командой IDE — extract function. В Angular нужно создать 3+ файла, и перетаскивать руками html, ts. Удобство — это немаловажный фактор.

                    Мне кажется, что стоит рассматривать React компоненты со всеми хуками как самостоятельный язык для рисования интерфейса. Как прокачанный HTML. Но отсюда следует, что логики в этих компонентах должно быть как можно меньше.
                      0
                      angular тоже позволяет писать все в 1 файле.
                        0
                        я знаю… но одной командой вы не разобьёте компонент на два.

                        Angular Language Service — постоянно тормозит для VSCode.

                        Короче, я считаю Angular прекрасным фреймворком. В нём заложено много здравых вещей — ReactiveForms, HttpInterceptors, RouteGuards, стили инкапсулируются для компонента автоматически, CLI прекрасно справляется со своими обязанностями, всё однообразно и со вкусом.

                        Но в плане удобства написания/сопровождения компонентов — он жёстко уступает React.

                        Я бы с радостью писал на React, в котором есть все основные фишки из Angular. Или наоборот, с радостью писал бы на Angular, если бы компоненты можно было так же легко писать/рефакторить.

                        Короче, жду Angulareact/Reangular. И поддерживаю сторонников обоих фреймворков.
                          –1
                          Angular Language Service — постоянно тормозит для VSCode.


                          Думаю это проблема vs code, в webstorm все летает.

                          с радостью писал бы на Angular, если бы компоненты можно было так же легко писать/рефакторить.

                          Признаю, что в jsx есть удобные фишки типа передачи компонента в параметры
                          Но рефакторить и писать компоненты в angular мне намного проще.
                          Ide рефакторит селектор компонента по всему проекту в пару кликов, то же самое и с названием класса и файла.
                          1 команда в cli генерирует компонент, дальше пишется только логика.
                          Может компонент кнопочки и проще писать в react, но все что больше кнопочки — наоборот.
                  0
                  удалено
              0
              react? не?)
                0
                Не вижу смысла использовать React, когда во Vue есть все то же самое + дополнительные удобства. Хотя бы взять изоляцию стилей, которая реализуется всего одним словом scoped из коробки, и сравнить хитровыдуманную css-модульность (которая при необходимости во Vue тоже есть).

                HTML-шаблоны так же в разы удобнее для небольшого проекта, вместо JSX-а от которого меня воротит, хотя и допускаю использования в отдельных проектах. В том же Vue по желанию и TS и JSX можно использовать, если хочется.
                И, думаю, сейчас популярность React-а обусловлена теперь только тем, что по инерции разрабы продолжают его использовать, с тех времен, когда ему научились, а Vue был еще неизвестен, + поддержкой Фейсбуком.

                Еще полезно изучать React чисто для улучшения знаний в JS, но в реальных проектах использовать — так себе удовольствие.
            0
            Во-первых — чтобы Angular шёл бы в ногу со временем и соответствовал бы современному состоянию экосистемы JavaScript.

            Обновлён, до версии 6, линтер TSLint.


            TSLint has been deprecated as of 2019
              0

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

              0
              Обновлён, до версии 6, линтер TSLint.

              Странно, что в новой версии так и не отказались от TSLint в пользу ESLint, а ведь уже года полтора TSLint является deprecated.
                0
                Побежал обновлять свой pet project до десятки. Спасибо за статью. В целом тренд развития Ангуляра мне нравится.
                  +1
                  О боже, наконец-то в production-ready фреймворке появился штатный (из коробки!) компонент для выбора диапазонов дат! Не прошло и десятилетия! Наконец-то frontend-разработчики перестанут, пыхтя и чертыхаясь, подпиливать напильником сторонние библиотеки или городить свои кривые велосипеды для выбора периода времени — функционала, который в веб-приложениях используется чуть менее, чем везде, где требуется настраивать фильтр по дате. Это прям эпохальный сдвиг, ящитаю.
                    0
                    Справедливости ради — приведите пример, где это уже реализовано из коробки 100 лет назад.
                      0
                      ну так об этом и речь, что двигатель и трансмиссию постоянно обновляют, а колеса как были велосипедные, так и остались
                        0
                        я просил все таки привести пример, а не материализовать уже сказанное. я вас и тогда прекрасно понял. но пример как надо то есть? даже не ради подтверждения слов, а ради интереса. ведь если сказали, значит что то такое знаете.
                          +2
                          Нет, к сожалению, не знаю. Мой сарказм был не про конкретный фреймворк, который отстает, а скорее про один из важных аспектов фронтэнд-разработки в целом — наличие более-менее нормального выбора рабочих компонентов для типовых задач.

                          Сам я ушел из фронтэнда пару лет назад. Ушел в том числе потому, что устал пилить велосипеды для задач вроде «нам нужно поле для выбора даты и времени» и «нам нужен выпадающий список тэгов с возможностью добавить новый тэг». Каждый раз приходилось много шаманить, городить костыли, подпиливать шершавым напильником сторонние решения или писать свой косой велосипед — и все это забирало ресурсы у бизнес-задачи, для которой такой компонент нужен. Думал, что-то поменялось за это время.

                          «Разбуди меня через 10 лет и спроси, что делают фронтэндеры, и я отвечу: перелопачивают код под новую версию фреймворка и пишут кастомные select'ы и datepicker'ы».
                            0
                            Полностью согласен!

                            Но у меня есть предположение о том, что создать всеобъемлющую библиотеку компонентов невозможно. Всё равно каждый проект/дизайнер требует тюнинга того или иного элемента. Причём зачастую затюнить сложнее, чем написать свой велосипед. Мы зациклились на компонентах.

                            Мне кажется, что следующим шагов в эволюции фронта должен быть инструмент, который позволяет на высоком уровне решать рутинные задачи, связанные с UX. Под UX я подразумеваю поведение элементов. Эдакий конструктор для создания input, select, datepicker, который предоставляет разработчику полную кастомизацию HTML, CSS. Но сохраняет основное поведение.

                            Дело в том, что UI меняется от проекта к проекту. А вот UX остаётся примерно одним и тем же. Но наши любимые фреймворки оперируют только UI-компонентами, и заточены только под это.
                      +2

                      материал в принципе не богат на компоненты и их функционал.
                      недавно для себя https://github.com/primefaces/primeng открыл. довольно богатый ui функционал

                      0
                      Интересный тренд, но хотелось бы более развёрнутого описания

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

                      Самое читаемое