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 серверов

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

    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
                        я просил все таки привести пример, а не материализовать уже сказанное. я вас и тогда прекрасно понял. но пример как надо то есть? даже не ради подтверждения слов, а ради интереса. ведь если сказали, значит что то такое знаете.
                          +3
                          Нет, к сожалению, не знаю. Мой сарказм был не про конкретный фреймворк, который отстает, а скорее про один из важных аспектов фронтэнд-разработки в целом — наличие более-менее нормального выбора рабочих компонентов для типовых задач.

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

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

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

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

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


                              Да нам надо то, как вы сказали, всего лишь input, select, datepicker. Из коробки если уже идут то давно бы уже дали date range picker адекватный, как и сказал комментатор выше :)
                              0
                              Куды перешли, в бэк?
                              И если да, то на чем сейчас пишите?
                        +2

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

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

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

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