Angular: состояние дел в 2019 году

Автор оригинала: Giancarlo Buomprisco
  • Перевод
Сейчас лето — то время года, когда во всём мире проводятся различные конференции и другие мероприятия. Программистов в эту пору буквально заваливает новой информацией, которую обычно бывает довольно непросто усвоить.

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



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

О росте масштабов применения Angular


В соответствии с данными, предоставленными на ng-conf 2019 членом команды разработки Angular Брэдом Грином, масштабы применения Angular выросли за год примерно на 50%!

Понятно, что на эти данные могло повлиять то, что множество проектов находится в процессе перехода с Angular 1.X на более свежие версии фреймворка. Но 50% — это, всё равно, впечатляющий показатель.

Angular растёт не так быстро, как Svelte или Vue. Этот фреймворк используется не так широко, как React. Но, в отличие от того, что можно читать о других фреймворках на ресурсах вроде Reddit или Twitter, Angular пребывает в добром здравии и используется миллионами разработчиков и команд.

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


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

Вместе с базовым фреймворком можно использовать массу интересных средств. А именно, речь идёт о следующем:

  • Глубокая интеграция с отличными, динамично развивающимися инструментами. Среди них можно отметить TypeScript и RxJS. Развитие этих технологий оказывает непосредственное положительное влияние и на Angular.
  • Различные виды библиотек для управления состоянием приложений.
  • Средства для анализа и улучшения качества кода. Такие, как Codelyzer.
  • Библиотеки элементов пользовательского интерфейса, компонентов, директив, конвейеров и так далее.
  • Большой выбор плагинов для различных IDE.
  • Библиотеки и фреймворки для тестирования приложений.
  • Высококачественная подробная документация, работой над которой занимаются и члены сообщества, и команда Angular. Сюда входят практические рекомендации, руководства, учебные материалы, книги, видеокурсы. Хотя это и последний пункт в данном списке, он, тем не менее, так же важен, как и другие.

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

Angular CLI


▍Angular CLI и чрезвычайно простой процесс обновления Angular


Это — не пустые слова. Здесь можно найти хороший рассказ о том, как проект BlueWeb, обслуживающий ежегодно полмиллиарда пользователей, был обновлён с Angular 7 до Angular 8 за один рабочий день. Это — внушительное достижение, учитывая то, что переход со второй на четвёртую версию Angular занял у того же проекта 30 дней.

Это доказывает огромную ценность Angular CLI. Использование данного инструмента способно поднять производительность работы до такого уровня, с которым лично я раньше не встречался.

В наши дни становится очень сложно представить себе работу без Angular CLI.

▍Средство Schematics


Инструмент Angular Schematics представляет собой нечто такое, что Angular-разработчики, вероятно, используют на ежедневной основе. Например, я уверен, что вы часто пользуетесь такой командой:

ng generate component my-component

Она основана на инструменте Schematics, встроенном в Angular CLI.

Возможно, для вас будет новостью то, что у разработчиков есть возможность создавать собственные правила Schematics. Их применение облегчает работу с часто используемыми фрагментами кода.

▍API Builders


API Builders позволяет расширять или дополнять существующие команды. Например, можно создать команду, которая выполняет тесты с помощью Jest и Cypress, а не с помощью Jasmine и Protractor. Можно и, например, воспользоваться альтернативным линтером.

Новые интересные возможности фреймворка


В момент написания этого материала уже вышла 8 версия Angular, содержащая различные улучшения и новые возможности.

Тут нет ничего такого, что серьёзным образом изменило бы то, как используется этот фреймворк. Подобное утверждение, касающееся новой версии некоего инструмента, обычно воспринимается как хорошая новость. Но в Angular 8 имеется множество улучшений, которые не видны, так сказать, «невооружённым глазом». Благодаря им Angular-проекты становятся меньше и быстрее. Эти улучшения делают процесс разработки Angular-приложений ещё более приятным, чем раньше. Кроме того, в новой версии фреймворка имеется почти готовая к полноценному использованию новая система рендеринга.

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


«Дифференциальная загрузка», если судить по названию этой технологии, может показаться чем-то очень сложным, но на самом деле это не так. Если в двух словах, то благодаря этой возможности компилятор генерирует два бандла. Один — для современных браузеров. В нём нет кода полифиллов. Второй — для более старых версий браузеров.

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

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

▍Веб-воркеры


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

▍Набор инструментов CDK


CDK — это набор инструментов, выпущенный командой, которая занимается разработкой компонентов Angular. В нем можно найти абстракции, используемые Angular Material, которые независимы от стилей.

Например, благодаря CDK в распоряжении разработчика оказываются директивы, которые позволяют реализовать следующие возможности:

  • Работа с объектами в стиле «Drag-and-Drop».
  • Использование текстовых областей, автоматически меняющих размер.
  • Всплывающие окна.
  • Виртуальная прокрутка.

CDK — это чрезвычайно полезный инструмент из-за того, что большинство приложений может использовать качественные широко распространённые абстракции, каждая из которых реализует лишь ограниченный функционал. Это гораздо лучше, чем повсеместное и не всегда оправданное применение полномасштабных компонентов. Angular Material — это замечательный набор компонентов, но сила CDK в том, что это средство позволяет разработчику создавать собственные компоненты из базовых строительных блоков.

▍Движок рендеринга Ivy


Ivy — это весьма интересная новая разработка, представляющая собой движок рендеринга. Работа над Ivy пока ещё не завершена, по умолчанию этот движок пока отключён. Но, начиная с Angular 7, его уже можно включить и использовать. Ожидается, что Ivy будет основным движком рендеринга в Angular 9.

Вот чего можно ожидать от полнофункционального движка Ivy:

  • Уменьшение размеров бандлов.
  • Отлаживаемые шаблоны.
  • Более быстрая сборка проектов, ускорение их тестирования.
  • Исправление существующих ошибок.

Если говорить об отладке, то вот скриншот, на котором можно видеть срабатывание точки останова в консоли Chrome.


Отладка кода

Как видите, директива ngForOf даёт нам сведения о переданном значении.

Angular и мобильные платформы


▍Ionic


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

▍NativeScript


NativeScript — это фреймворк для разработки нативных мобильных приложений, похожий на React Native. Он отличается глубокой интеграцией с Angular — наряду с поддержкой Vue и с возможностью пользоваться им для разработки на чистом JavaScript. К несчастью, мой опыт работы с ним оказался не особенно удачным. Я не могу поставить его на один уровень с React Native. Однако если вы серьёзно занимаетесь разработкой мобильных приложений — испытайте NativeScript.

Тестирование


▍Jasmine и Protractor


Jasmine и Protractor в представлении не нуждаются. Это стандартные средства для тестирования Angular-приложений. Они отлично проверены временем, их регулярно обновляют, и с Angular они работают замечательно.

▍Jest и Cypress


Тестирование Angular-приложений с помощью Jest и Cypress стало возможным благодаря новым средствам, основанным на API Builders, входящим в состав Angular CLI.

Jest — это фреймворк для модульного тестирования, основанный на Jasmine. Он разработан в Facebook. Это — стандартный фреймворк для тестирования React-проектов, он широко распространён благодаря его скорости. Многие предпочитают использовать его, а не Jasmine. Если вы тоже склоняетесь к Jest — теперь вы можете пользоваться им для тестирования Angular-приложений.

Cypress — это весьма уважаемый фреймворк для проведения сквозного тестирования приложений. Сообщество разработчиков не случайно относится к нему очень хорошо. Он не зависит от Selenium или WebDriver. Cypress позволяет работать с журналами команд, умеет управлять сетевым трафиком. Он довольно-таки стабилен, поэтому можно ожидать, что результаты, полученные с его помощью, окажутся достаточно понятными и предсказуемыми.

▍Набор инструментов Angular Testing Library


Angular Testing Library — это набор инструментов для тестирования компонентов пользовательского интерфейса с ориентацией на воспроизведение действий пользователя.

Это означает, что данная библиотека подталкивает программиста к тому, чтобы он не работал бы с компонентами программно. Она направлена на тестирование поведения компонентов. Библиотека выполняет те действия, которые обычно выполняют пользователи.

Например, при работе с инструментами из этой библиотеки подобные конструкции не используются:

myComponent.onClick();

Вместо этого имитируется естественное поведение пользователя:

const { getByText, click } = await render(CounterComponent, {
    componentProperties: { counter: 5 }
});
click(getByText('+'));

Управление состоянием


▍NgRx


NgRx — это библиотека для управления состоянием приложений, созданная под влиянием идей, заложенных в Redux. NgRx, вероятнее всего, является самой распространённой в Angular-разработке библиотекой для управления состоянием. Название библиотеки позволяет предположить то, что в ней серьёзно используются потоки RxJs.

▍NGXS


NGXS — это альтернативная библиотека для управления состоянием в Angular-приложениях, похожая на Redux. Если сравнить NGXS и RxJS, то окажется, что особенности NGXS заключаются в том, что здесь используется множество классов и декораторов. Делается это для уменьшения объёмов шаблонного кода. Вероятно, эта особенность NGXS может стать решающей при выборе библиотеки для управления состоянием в том случае, если тот, кто ищет подобную библиотеку, привык пользоваться классами.

▍Akita


Akita — это библиотека для управления состоянием, разработанная компанией Datorama. Данная библиотека тоже основана на RxJS. Если сравнить её с предыдущими двумя библиотеками, то окажется, что её особенность заключается в том, что применять её можно и в проектах, в которых Angular не используется. Это значит, что выбор библиотеки Akita, в долгосрочной перспективе, может привести к улучшению возможностей по повторному использованию кода проектов.

▍Может — просто взять RxJs?


Я могу дать положительный ответ на вопрос, вынесенный в заголовок этого раздела. Тут всё зависит от того, нравятся ли вам библиотеки, напоминающие Redux, и в том, нуждается ли проект в библиотеке для управления состоянием. При желании можно создавать сервисы, хранящие состояние с помощью стандартных средств RxJS.

Библиотеки компонентов пользовательского интерфейса


▍StoryBook


StoryBook — это, на самом деле, не библиотека UI-компонентов. Это — инструмент, который позволяет создавать изолированные компоненты и даёт возможность исследования компонентов и их вариантов.

Это — отличный инструмент. Раньше он был доступен лишь React-разработчикам. Я им тогда завидовал. Но теперь пользоваться им могут и Angular-разработчики, поэтому я просто не могу о нём не упомянуть.

▍Angular Material


Тут мы скажем пару слов о небезызвестной библиотеке Angular Material, которая даёт в руки современного разработчика приятный набор компонентов, предназначенных для самой свежей версии Angular.

Бэкенды для Angular-приложений


▍Firebase


Firebase — это платформа для разработки приложений, которой владеет Google. Следствием этого является то, что существует официальная библиотека для Firebase и Angular — AngularFire. Эта библиотека использует наблюдаемые объекты RxJS для организации потоковой передачи данных. Она глубоко и качественно интегрирована с Angular.

▍GraphQL


Возможно, вы думаете, что удовольствие от работы с GraphQL доступно лишь React-программистам. Если так — то вы ошибаетесь. Существует версия библиотеки Apollo и для Angular. То, что можно создать с помощью этой библиотеки, является отличной альтернативой Firebase. Apollo подойдёт тем, кто предпочитает работать с GraphQL.

▍NestJS


NestJS — это веб-фреймворк для Node.js, предназначенный для разработки серверных приложений. Из примеров к нему можно сделать вывод о том, что большое влияние на него оказали базовые концепции Angular. Это — модули, контроллеры, конвейеры, и так далее. Если вам нравится Angular, то вам, вероятно, понравится и NestJS.

Если вы пользуетесь Nx Workspaces, то создание каркаса фуллстек-приложения, основанного на Angular и NestJS, это вопрос выполнения одной команды в консоли.

Итоги


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

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

Уважаемые читатели! Что вам больше всего нравится (или не нравится) в Angular 8?

RUVDS.com
821,62
RUVDS – хостинг VDS/VPS серверов
Поделиться публикацией

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

    +2
    Надо такую же статью, но про реакт.
      +2
      Это точно.
        +3

        а вам мало статей про реакт? Мне кажется только ленивый не писал про реакт

        +1
        Статья обо всем, и не о чем.
        Документация — говно,
        Devtools — говно, вернее нормальных нет(кроме как Redux DevTools), Augury — ущербная, бажная.
        Обновление angular cli это позор — так как она обновляет лучше бы ее и не было.
        live reload — просто жесть.
        Размер приложения после сборки — ужас
        Режимы компиляции — ад(в дев режиме может все работать а в билде нет).
        и т.д.

        ЗЫ: У меня вопрос к фанатам angular — за что вы так любите этот «филиал ада»? Хотелось бы услышать аргументированные четкие ответы.
          +1
          Devtools — говно, вернее нормальных нет(кроме как Redux DevTools), Augury — ущербная, бажная.
          Обновление angular cli это позор — так как она обновляет лучше бы ее и не было.

          А что вы такое делаете, что вас не устраивает дебагер в шторме?


          Обновление angular cli это позор — так как она обновляет лучше бы ее и не было.

          Почему? Аргументы?


          live reload — просто жесть.

          Аргументы?


          Размер приложения после сборки — ужас

          200кб, о да, ужас


          Режимы компиляции — ад(в дев режиме может все работать а в билде нет).
          и т.д.

          Режимы компиляции настраиваются пользователем, элементарно билд мог быть в production, в котором jslint в строгом режиме


          За что любим?
          Удобство, скорость разработки
          удобная архитектура из коробки
          поставил и у тебя 99% функционала есть
          ts, rxjs
          не надо 3 дня выбирать роутер или какой-то костыль ввиде redux есть хороший роутер который умеет в lazyload
          надо хранить состояние? rxjs из коробки
          надо сделать запрос на бекенд? constructor(private httpClient:HttpClient) {}
          Надо сгенерировать большую динамическую форму со сложной валидацией? private formBuilder:FormBuilder
          этот список можно продолжать вечно, можно конечно самому по крупицам собрать на вью или риакте все это, но пока я буду выбирать из сотни посредственных плагинов — за это время можно набросать прототип на ангуляре, в котором это удобно сделано + в каждом проекте будет один набор хорошо вылизанных инструментов, а не каждый раз разбираться в нравах предыдущего разработчика
          Да, может чуть выше порог входа, но оно того стоит и пока не напишешь хотя-бы один большой проект на ангуляре этого не поймешь, пробовал я на вью писать, вроде все просто и быстро, но пока не надо что-то сложнее todolist, дальше ничем не легче и не меньше кода чем на angular со всеми минусами описанными выше

            0
            Сразу скажу по поводу больших проектов — мы разрабатываем приложения для энергетики, это не todo далеко, это сложные приложения с кучей реалтайм данных. Мы пишем как на angular так и на vue

            Почему дока говно — потому как в ней не все описано, и не для людей.
            Почему devtools говно — потому как кроме state ничего нормально нельзя отследить, хотя Augury и позволяет некоторые вещи отслеживать но пользоваться им крайне сложно.(Хотелось бы отслеживать, видеть — состояние компонентов, событий, роутинга, стэйта(хоть тут нет проблем))
            Обновление angular cli это позор — тут 2 вещи
            1. обновление приложения — при переходе на новую версию angular возникают проблемы(хотя само cli помогает) приходиться дописывать\править ручками где не справился cli
            2. обновление пакетов, cli обновляет зависимости фреймворка и не затрагивает сторонние пакеты, но при этом при обновлении сторонних пакетов(npm up) обновляются зависимости фреймворка, что приводит к не работоспособности приложения(как пример зависимость typescript для angular 8 должна быть 3.4 а на текущий момент 3.5)

            live reload — просто жесть. Потому как он каждый раз перезагружает страницу и состояние теряется после изменения и это сильно напрягает — пример хорошего live reload у vue.

            Размер приложения после сборки — ужас — где вы видели 200кб? просто по дефолту сгенерированного приложения измеряется в MB
            image

            Режимы компиляции — ад(в дев режиме может все работать а в билде нет).
            Дело не в tslint а в самом типе компиляции, по умолчанию dev режим и product режим работают в различных режимах jit и aot в этом весь косяк, и без разруливание не поймешь.

            Не надо говорить про пороги входа, и большого набора компонентов и плагинов, этого добра полно и для других фреймворков.

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

            можно конечно самому по крупицам собрать на вью или риакте все это, но пока я буду выбирать из сотни посредственных плагинов — за это время можно набросать прототип на ангуляре,…

            Тут вы не правы, или просто не владеете информацией.

            PS: Прежде чем минусовать — аргумент в студию
              0
              Почему дока говно — потому как в ней не все описано, и не для людей.
              Это субъективно. На мой взгляд там все вполне хорошо. Вы сравниваете ее с докой Vue, но Vue в принципе проще, потому, вероятно, дока вам кажется лучше.
              состояние компонентов, событий, роутинга
              я скинул в предыдущем комменте ссылку на хром экстеншен, который прекрасно показывает состояние компонентов. С событиями роутинга вполне справляется enableTracing: true.

              По поводу Cli — сталкивался с подобными проблемами до 8 версии. С 7 на 8 лично у меня все проходило на ура.

              Live reload на Vue — прекрасен, до тех пор, пока не столкнулся с ситуацией, когда он обновляет не полностью. По запаре убиваешь из-за этого кучу времени, пока не допрешь в чем дело. Я сталкивался неоднократно.

              По поводу размера бандла на вашем скрине — вы неправильно билдите, других вариантов для HelloWorld быть не может.

              С режимами компиляции не возникает никаких проблем, если все делать по доке. Если нет, хотелось бы увидеть примеры =)
                0
                Это субъективно. На мой взгляд там все вполне хорошо. Вы сравниваете ее с докой Vue, но Vue в принципе проще, потому, вероятно, дока вам кажется лучше.

                Я сравниваю не только со vue. Но дока должна отвечать на вопросы программиста и не вызывать вопросов и гуглинья сторонних ресурсов.

                я скинул в предыдущем комменте ссылку на хром экстеншен, который прекрасно показывает состояние компонентов. С событиями роутинга вполне справляется enableTracing: true.

                Я посмотрю предложенное расширение — но что то оно не внушает доверия, но поглядим.

                Live reload на Vue — прекрасен, до тех пор, пока не столкнулся с ситуацией, когда он обновляет не полностью. По запаре убиваешь из-за этого кучу времени, пока не допрешь в чем дело. Я сталкивался неоднократно.

                Так прелесть в том что обновляется не все, а только часть.

                По поводу размера бандла на вашем скрине — вы неправильно билдите, других вариантов для HelloWorld быть не может.

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

                С режимами компиляции не возникает никаких проблем, если все делать по доке. Если нет, хотелось бы увидеть примеры =)


                =) то есть вы не встречали проблем, а статьи в интернетах по этому поводу вы не читали видимо.

                  0
                  Так прелесть в том что обновляется не все, а только часть.

                  Я понял, что вы имели в виду. Объясню суть.
                  По долгу службы я вынужден периодически ковыряться в нескольких однотипных вьюшных проектах. И не раз сталкивался с ситуацией, когда ты ожидаешь, что без перезагрузки страницы у тебя обновится как раз таки нужный компонент/часть логики, следишь, когда в консоли появится надпись "Hot module reload все обновил" (не помню, как там оно точно сформулировано), но на деле то, что ожидалось не обновлено. Я не спец по Vue, но тот факт, что мне не удалось найти никакой закономерности в таком поведении вроде как намекает на то, что дело не в кривых руках.


                  то есть вы не встречали проблем, а статьи в интернетах по этому поводу вы не читали видимо

                  Читал, в хейтерских комментариях =)

                0

                Я понимаю, что для полноценного пруфа проект маловат, но все же. Весь процесс обновления с 7 на 8 https://github.com/gothinkster/angular-realworld-example-app на двух скриншотах:


                1. https://monosnap.com/direct/3gIvAZ1mXR2kYurcE7EBRncCrCGLg8
                2. https://monosnap.com/direct/UzjLm0VOqfb6y8db93eWtcIFYglKx8

                Обратите внимание на размер бандла, пожалуйста.

                  0
                  для маленького проекта это не актуально. я выше написал, что cli помогает но не решает проблемы и нужно руками делать, и там описаны 2 типа обновления.

                  по поводу размера бандла, сборка делается с настройками по дефолту, я кажется выше указал.
                    0
                    Я не понимаю, как вы билдите, и где вы берете эти дефолтные настройки?
                    Я же правильно понимаю, что HelloWorld — это просто пустой ангуляровский проект?
                    1. monosnap.com/direct/yISJygtXM0MKv4CCSOZ2zSAezK0sY1
                    2. monosnap.com/direct/0NsGq8EkDCpnPfdNiTHhAe4JpSPR3z

                    250kb.

                      0
                      Я не понимаю, как вы билдите, и где вы берете эти дефолтные настройки?

                      $ng new app
                      $ng build

                      Я же правильно понимаю, что HelloWorld — это просто пустой ангуляровский проект?

                      да

                      фото с результатом вы видели
                        0
                        $ng build
                        Вот выдержка из «говняной» доки angular.io/cli/build
                        A «production» configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the --configuration=«production» or the --prod=«true» option.
                          +2
                          я еще раз повторюсь, это настройки которые генерит angular cli
                          $ ng new app
                          Это еще раз доказывает мой довод что у angular есть проблемы, так как нужно как то, где то, помнить, догадаться о том что нужно где то что то дописать|изменить
                          А как же довод того что просто взял и работаешь?!
                            0
                            Так я тоже говорю о настройках, которые генерит cli при ng new app.
                            Но если вы работаете над проектами даже чуть-чуть больше todo, то, наверное, вы должны знать, что при билде вы должны указать конфигурацию.
                            К примеру локально вы делаете -c dev, на альфе -c alpha. Вполне логично, что для продакшена вы тоже должны указать конфигурацию (и да, за вас ее подготовил cli при создании проекта).
                            Я правда не могу понять, к чему тут претензия. Вы хотите, чтобы cli читал ваши мысли, и понимал, какую конфигурацию вы хотите сбилдить?
                          0
                          есть dev-build — это просто
                          ng build
                          и prod-build — это уже
                          ng build --prod
                          0
                          я выше написал, что cli помогает но не решает проблемы и нужно руками делать, и там описаны 2 типа обновления.

                          А с чем вы в данном случае сравниваете cli?

                      0
                      просто по дефолту сгенерированного приложения измеряется в MB
                      Вы бы хоть в названия файлов вчитались…
                      Во-первых — половина файлов — это отладочные sourcemap-ы
                      Во-вторых — все фалы в 2-х вариантах, для нормально JS и для старого
                      В-третьих — дефолтный билд делается на быстрых настройках, без оптимизаций, закидывая используемые пакеты целиком

                      Как уже выше советовали, прочитайте доки чуть дальше 1-й страницы, сделайте билд в production-режиме, можно даже без AOT, и будет вам счастье.
                        0
                        Во-первых — половина файлов — это отладочные sourcemap-ы

                        какие половина это sourcemap'ы глаза раскройте, говорилось о 200кб размера бандла, там vendor весит больше МБ.

                        Во-вторых — все фалы в 2-х вариантах, для нормально JS и для старого

                        Да какая мля разница — для нормального или нет размер больше 200кб

                        В-третьих — дефолтный билд делается на быстрых настройках, без оптимизаций, закидывая используемые пакеты целиком

                        что это меняет? Выше было сказано другим оратором, что ты просто берешь и делаешь, все настроено и готово. Я вам говорю что это не нормально, что чтобы сбилдить нормально приложения я должен пойти отыскать в доки что нужно поставить флаг. Хотя мне фреймворк из коробки предлагает подготовленные команды, но их еще нужно довести до ума, так же как и настройки(так как с дефолтными работать нельзя). Я в среднем делаю 1 проект в 3 месяца и каждый раз мне нужно помнить что нужно добавить вот сюда вот это а вот тут подкрутить чтобы было это — классное решение из коробки!!!..

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

                        И хватит уже этих упреков — ты мля не умеешь готовить его, почитай доку… читали, читаем(и вы читайте коменты выше) есть что сказать говори но по делу
                          0

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

                            –2
                            вы что троллите? или вам делать нефиг?
                            прочтите комменты
                              +2

                              я читаю и что я там вижу?
                              Вижу как человек пишет, что режимы сборки неочевидно и фреймворк работает галимо, но конкретики об этом "галимо" нет, а когда появляется конкретика о других вещах так сразу становится ясно, что кто-то не разобрался в вопросе

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

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


                            Если бы дефолтной сборкой был прод, то вы бы сейчас, наверное, кричали, что: "почему я должен для дев сборки дописывать какие-то аргументы, чтобы мне нормальный бандл сделало, с соурсмапами и прочим"?

                              +1

                              В webpack, кстати, по умолчанию запускается именно production сборка. Так что это уже angular-cli внутри себя решил установить свои порядки.

                                0
                                Так что это уже angular-cli внутри себя решил установить свои порядки.

                                angular-cli, вообще говоря, отвязан от вебпака, по-этому нет причин на вебпак оглядываться.

                                  0

                                  Я привел это как пример инструмента в котором production режим включен по умолчанию. Можно еще привести react-scripts, где дефолтный react-scripts build тоже собирает продакшен вариант, со всеми оптимизациями.

                                    0

                                    Попробовал еще и vue-cli, там тоже команда build собирает продакшен вариант по умолчанию. Получается, это в angular-cli какая-то левая резьба.

                                      0
                                      Я привел это как пример инструмента в котором production режим включен по умолчанию. Можно еще привести react-scripts, где дефолтный react-scripts build тоже собирает продакшен вариант, со всеми оптимизациями.

                                      Если что-то везде сделано нелогично, это не повод делать в новом инструменте столь же нелогично. Можно как раз сделать правильно.


                                      Кстати, а не подскажете — как мне в react-scripts запустить дев билд? И со ссылкой на доки, желательно.

                                        0

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


                                        Для девелопмента есть отдельная команда start – https://facebook.github.io/create-react-app/docs/getting-started#npm-start-or-yarn-start

                                          0
                                          Для девелопмента есть отдельная команда start –

                                          Это не то, это аналог ng serve. А как сделать аналог ng build (без --prod)? Сбилдить в дев моде?


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

                                          Ну то есть это дискуссионный вопрос, с-но разработчики могут выбирать любой вариант.

                                            0

                                            Как обычно строится разработка:


                                            • запускаем локальный сервер с dev-сборкой, которая пересобирается при сохранении
                                            • собираем оптимизированные файлы для прода

                                            Где в этом процессе требуется dev-сборка, но без сервера?

                                              0
                                              Где в этом процессе требуется dev-сборка, но без сервера?

                                              Много где, на самом деле. Но это нерелевантно теме разговора. На мой вопрос вы можете ответить? Как в react-scripts сделать дев-билд, и где можно увидеть описание этого процесса в документации?

                                                0

                                                Нет, собрать в dev-режиме без запуска сервера не получится. Только если eject сделать.


                                                Вопрос где это используется как раз очень релевантен теме разговора. Нужно же понять сценарии использования этой фичи.

                                                  0
                                                  Нет, собрать в dev-режиме без запуска сервера не получится.

                                                  Ок, то есть, CLI:
                                                  автоматически делаются дев/прод билды, которые легко выбираются и запускаются одной командой, поведение четко прописано в доках в ожидаемом месте


                                                  react-scripts:
                                                  делается только прод билд, дев билд сделать нельзя без костылей, в документации костыли не прописаны


                                                  Но проблемы, почему-то, у CLI.

                                                    0

                                                    Можно посмотреть на ситуацию с другой стороны:


                                                    angular-cli дает пользователю возможность выстрелить в ногу, причем еще и делает это по умолчанию, если пользователь явно не откажется


                                                    react-scripts стрелять в ногу не дает. А если по каким-то причинам вам все-таки нужно выстрелить в ногу, то вы настраиваете webpack или другой сборщик самостоятельно, и стреляете куда хотите.

                                                      0
                                                      ngular-cli дает пользователю возможность выстрелить в ногу

                                                      Эм. Не дает. В чем стрельба в ногу заключается? Сборка дев билда — это обычный вариант использования, а не стрельба в ногу. Стрельба в ногу — это когда делается что-то ошибочное.


                                                      А если по каким-то причинам вам все-таки нужно выстрелить в ногу, то вы настраиваете webpack или другой сборщик самостоятельно, и стреляете куда хотите.

                                                      Замечательный инструмент, шаг вправо/влево — настраивайте все сами.

                                        0
                                        В ангуляре режимы сборки еще и разную конфигурацию в environments файлах используют. Это не просто флаг включения оптимизации.
                                        И правильно там dev по дефолту стоит.
                                          0
                                          • ng serve – запускает локальный сервер для разработки, с dev-environment, все хорошо
                                          • ng build – собирает файлы для деплоя, зачем здесь dev-environment по умолчанию?
                                            0

                                            деплой может быть не только на прод, а и на дев сервер, деплой — это не только сжатие, а и .env в которых могут лежать урлы к бекенду итд

                                              0

                                              Вот именно, а в angular смешали эти две концепции и теперь огребают. Env-переменные не имеют никакой связи с режимом сборки.


                                              Я могу представить ситуацию, когда вам надо локально подключиться к preprod-версии бекенда вместо dev чтобы продебажить какой-то сценарий. Но подебажить не получится, потому что флаг --configuration еще и минификацией управляет

                                                0
                                                флаг управляет выбором конфигурации сборки, а там возможны варианты уже.
                                                  0
                                                  Env-переменные не имеют никакой связи с режимом сборки.

                                                  Как это не имеют? env-переменные входят в режим сборки. Как часть режима сборки может не иметь связи с режимом сборки?

                                                    0

                                                    Env-переменные – это переменные окружения. Можно собрать одну сборку и раскатить ее на разные окружения. В бекенде параметры сборки и окружения четко отделены, это во фронтенде они слиплись, к сожалению.


                                                    P.S. то что в Реакте продакшен режим включается через NODE_ENV я тоже считаю ошибкой. По хорошему это должно задаваться директивами препроцессора вроде #ifdef в C, но фронтенд тулинг на это не способен, к сожалению.

                                                      0
                                                      В Angular нет переменных окружения. То, что называются environment, это конфиг который можно выбрать при сборке и он заменяет собой дефолтный. Там можно вообще любые файлы в принципе заменять, просто Angular говорит — делайте это в environment, так принято.

                                                      Можно конечно читать env'ы и по ним выставлять конфиг при запуске билда, но это же немного другое.
                                                        0
                                                        Env-переменные – это переменные окружения.

                                                        env-переменные — это часть конфигурации билда. Так что они там, где надо.


                                                        По хорошему это должно задаваться директивами препроцессора вроде #ifdef в C

                                                        Это как раз ужас-ужасный, пришедший из дедовских времен. К счастью, сейчас от этого уже отошли (в том числе и на беке, конечно) и используют конфигурации, которые позволят настраивать все, что хочется — от di-контейнера до параметров билда.

                                                  0
                                                  ng build – собирает файлы для деплоя, зачем здесь dev-environment по умолчанию?

                                                  Затем, что сперва деплой идет на девсервер, для которого нужен отдельный environment и которому не нужны оптимизации от --prod ключа.

                                                    0

                                                    Почему не нужны? Предпочитаете ловить баги aot-компилятора и минификатора в продакшене? А для внятных стектрейсов уже давно придумали source-maps.

                                                    0
                                                    angular.io/guide/deployment
                                                    Тут по моему все доступно описано. У меня были проекты, где принято было использовать не serve, а build --watch.
                                                    Более того, serve тоже можно запустить с --prod. Да и вообще добавить еще конфигураций (--prod это алиас к установке build -> configurations, там можно своих добавить).
                                                    Просто так сделали что dev везде по дефолту, он чаще используется разработчиком.
                                                    Не думаю что это важно вообще, никогда не вызывало проблем.
                                                      0

                                                      Я ниже приводил примеры, где разработчики наступали на эти грабли. Использование более подходящих дефолтов предотвратит новичков от стрельбы в ногу, а для тех кому нужно что-то другое, есть возможность перенастроить.

                                                        0
                                                        ну если нужно сделать деплой, я ненароком иду и читаю раздел deploy выбранного фв. Ожидания дефолтов тут уже дело десятое.
                                                        Энивей, это вообще мелочи.
                                                          0
                                                          Использование более подходящих дефолтов предотвратит новичков от стрельбы в ногу, а для тех кому нужно что-то другое, есть возможность перенастроить.

                                                          Выбор дефолтов тут не важен. Если у вас есть дефолты — то всегда найдутся избранные, которые будут ожидать другого дефолта и, не прочитав доки, выстрелят себе в ногу.
                                                          Чтобы исключить выстрелы в ногу есть всего два варианта — либо убрать дефолты в принципе (с-но, билдить только ng build --dev или ng build --prod, но не просто ng build), либо вообще лишить пользователя права выбора. один билд есть? Ну и хорош (с-но, в react-scripts как раз и пошли по этому сценарию). оба варианта, конечно, только ухудшают ситуацию.

                                                  0

                                                  Касательно всего треда в целом, я почитал документацию и узнал про ng build --prod.


                                                  Очень странная это ситуация. На домашней страничке angular-cli написано:


                                                  ng new
                                                  The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

                                                  А теперь внезапно выясняется, что проект после генерации нужно дорабатывать напильником, дополнительные флаги подкидывать. Врет, получается, страница, не следует их шаблон best practices.

                                                    0
                                                    Не надо ничего дорабатывать напильником. Просто консольную команду с правильным (одним) аргументом вызвать.
                                                      0

                                                      В package.json в секции scripts собирают все необходимые команды для работы с проектом. Чтобы не приходилось каждый раз вспоминать, что там в этом конкретном проекте используется, а просто запустить npm run build и получить результат.


                                                      А в этом случае angular-cli генерирует проект, в котором нет команды сборки продакшена. Вот именно это и приходится руками допиливать.

                                                        0

                                                        ну что за бред? Вы думаете о чем пишете? Вы всерьез считаете плохим фреймворк или его окружение потому-что при сборке надо добавить флаг --prod?

                                                          0

                                                          Хороший инструмент обладает «защитой от дурака» и предотвращает типичные ошибки, типа нечаянного деплоя дев-сборки в продакшен.


                                                          Можно, конечно, во всем винить «тупых пользователей», а можно сделать нормальные дефолты

                                                            0
                                                            Можно, конечно, во всем винить «тупых пользователей», а можно сделать нормальные дефолты

                                                            Так и есть нормальные дефолты. Если кто-то что-то собирает, то почти всегда нужна именно дев сборка. А прод сборка нужна, с-но, в исключительных случаях — на прод, либо для специфических тестов.


                                                            И то, что где-то в фреймворке Х это сделано через Ж, и в силу лени разработчиков дефолтная сборка с продом — не повод повторять плохие практики.


                                                            Можно, конечно, во всем винить «тупых пользователей»

                                                            А вы наблюдали в реальности этих "тупых пользователей"? А то пока что все выглядит так, будто они существуют только в фантазиях.

                                                              0
                                                              И то, что где-то в фреймворке Х это сделано через Ж, и в силу лени разработчиков дефолтная сборка с продом — не повод повторять плохие практики.

                                                              В angular-cli тоже не против поменять дефолтное значение. Так что ничего плохого в этой практике нет.


                                                              А вы наблюдали в реальности этих "тупых пользователей"? А то пока что все выглядит так, будто они существуют только в фантазиях

                                                              1. Выше в комментариях человек запутался с конфигурацией.
                                                              2. https://github.com/angular/angular-cli/issues/9016
                                                              3. https://stackoverflow.com/questions/41432673/angular2-cli-huge-vendor-bundle-how-to-improve-size-for-prod
                                                                0
                                                                Выше в комментариях человек запутался с конфигурацией.

                                                                Он не путался, он прекрасно знал, что надо билдить с продом, но намеренно решил закосить под дурочка.

                                          0
                                          это не live reload, это вебпаковский HMR, в ангуляре тоже можно включить
                                        +1
                                        Документация — говно
                                        А это точно объективная оценка?

                                        Devtools — говно
                                        Augury действительно глючная, но есть как минимум два-три других тула, вполне достойных. К примеру Angular State Inspector

                                        live reload просто жесть
                                        А с ним что не так?

                                        Размер приложения после сборки — ужас
                                        А с чем вы сравниваете? Может с реактом? Тогда спешу вас расстроить, вы и тут не правы.

                                        Режимы компиляции — ад
                                        Что с ним не так?

                                        Я бы предложил вам сначала попробовать написать что-нибудь крупнее todo-mvc на Angular, в идеале версии выше 2.0 beta, и потом уже задавать вопросы, на которые вам так нужны аргументированные и четкие ответы.
                                          0
                                            0
                                            два-три тула это какие помимо инспектора?
                                            Angular State Inspector это по факту вызов ng.probe при клике на разметку. Там кода то на десять строк. Удобно, использую его вработе, но хотелось бы большего конечно.
                                            +1
                                            полностью согласен, точно такие же претензии к ангуляру, и большинство из них появилось после работы с другими фремворками
                                              0
                                              Документация — говно
                                              средне, дока нормально описывает что есть, но она неполная. Например недавно не нашел в оф доке как сделать CVA компонент со встроенной валидацией, описано только для директив.
                                              Devtools — говно, вернее нормальных нет(кроме как Redux DevTools), Augury — ущербная, бажная.
                                              нету, факт. Не представляю как их можно сделать, ибо все на rxjs-потоках.
                                              Обновление angular cli это позор — так как она обновляет лучше бы ее и не было.
                                              Не встречался с проблемами
                                              live reload — просто жесть.
                                              Точно такой же, как и везде
                                              Размер приложения после сборки — ужас
                                              Сейчас десяток страниц, два десятка компонентов, Материал, Акита, что-то еще по мелочи — 1.1мб.
                                              Режимы компиляции — ад(в дев режиме может все работать а в билде нет).

                                              Есть такое, в дев моде плохо проверяет сигнатуры в шаблонах.

                                              По последним двум пунктам ожидаются кардинальные улучшения в Angular 9. Посмотрим.
                                              0
                                              множество проектов находится в процессе перехода с Angular 1.X на более свежие версии фреймворка

                                              И фреймворк этот – Vue или React :)

                                                0
                                                перешел с Vue на Анг и доволен, на вьшечку возвращаться не хочу, в реакт — тем более, солянка эта.
                                                Ангуляр сложнее, зато разнообразней и возможностей больше. Отличный, именно фреймворк.
                                                0
                                                а что, собственно нового в Ангуляре?
                                                  –1

                                                  Самое забавное все зацепились именно за то ставим мы параметр prod или нет, конечно же ставим. Посыл был в том что почему это не делается по умолчанию.
                                                  Это конечно ерунда. Но больше удивляет, что по тругим претензиям не возникли вопросов.
                                                  Вы же пишете на нем, неужели все устраивает и вы считаете это нормальным?


                                                  На этом все спасибо за внимание.

                                                    0
                                                    Да как не возникло?
                                                    Мы выяснили, чтением доки вы сильно не заморачивались, но считаете ее плохой.
                                                    Экстеншены для дебага вы не искали, но считаете, что их нет.
                                                    Проблемы с компиляцией у вас были, но примеров нет.
                                                    С размером бандла все понятно.
                                                    По поводу проблем с cli вы тоже ничего толком не сказали.
                                                    Единственный имеющий отношение к реальности ваш аргумент — то, что во Vue чуть более продвинутый хот-релоад.
                                                      0

                                                      Если я начну приводить примеры, это не размер комннта, а размер серии постов.
                                                      Сейчас подготовлено ессе на 14 страниц.
                                                      И почему вы считаете что доку никто ничитал? Читали, делали исследования.
                                                      И можно с уверенностью сказать проблем много. От разворачивания проекта до работы шаблонов, от прощета переменных до роутинга, от типа компиляции до многословности

                                                        0
                                                        И можно с уверенностью сказать проблем много. От разворачивания проекта до работы шаблонов, от прощета переменных до роутинга, от типа компиляции до многословности

                                                        Проблем везде много. В том же реакте, например, банальный PureComponent уже который год пофиксить не могут, и ничего — все браво едят кактус, походу обсуждая, следует ли иголки разжевывать, или лучше глотать так.
                                                        Очевидно, что любой фреймворк проигрывает некоторому сферическому в вакууме идеальному фреймворку (который имеет лишь один недостаток — этого фреймворка не существует), так что абсолютная оценка бесполезна, следует сравнивать с альтернативами.

                                                      0

                                                      по каким другим претензиям? Что документация говно? или что что-то еще говно?

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

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