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

Мы рассмотрим язык, библиотеки для различных use-кейсов и инструменты которые удобны, полезны, а иногда и необходимы для разработки фронтенда в 2022 году.

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

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

JavaScript → TypeScript

Последние пару лет TS плотно лег в список необходимых инструментов для создания веб приложений. Он окончательно снял с наших плеч метание между babel плагинами, которые позволяют включить тот или иной синтаксис в JS, а также дал нам больше строгости в код. Теперь мы просто везде пишем на TS и я рад, что рынок веб разработки не свернул с тропы типизации. Сейчас очень редко мы слышим, что TypeScript удоражает и замедляет разработку.

IE11 всё

Вторая отличная новость, что мы наконец таки перешагнули бездонную пропасть между Internet Explorer 11 и текущими браузерами. Microsoft официально прекратит поддержку браузера летом 2022 года. Хотя естественно он никуда не изчезнет и будет еще доступен в специальных сборках Windows, а также браузер Edge будет иметь режим IE11, для отображения старых сайтов, но в любом случае крупные проекты уже начали отказ от поддержки IE и это очень радует.

Этот шаг нам дает возможность полноценно пользоваться новыми спецификациями и функциями, а также новыми версиями библиотек, которые основаны на API, не поддерживаемом IE (Mobx, Bootstrap и пр).

Сборщики

Webpack

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

Он обновился до пятой версии, привнеся нам большую производительность и крутые фичи такие как Module Federation

Babel

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

Но текущие лидеры сильно отстают в скорости таким инструментам как ESBuild, Vite и SWC. Vite в свою очередь претендует на конкуренцию Webpack, называя себя инструментом для фронтенда нового поколения. Поэтому смею предположить, что в скором времени лидерские позиции в сфере сборщиков могут поменяться.

Create React App

Приближаясь все ближе к Реакту нельзя забывать основной инструмент для создания проектов - Create React App. Он все также полностью снимает с нас вопрос о настройке проекта и конфигурировании сборки и вам действительно достаточно выполнить одну команду в терминале и можно сразу начать работу. Последний релиз версии 5.0, добавил нам возможность использовать Tailwind без изменения конфигурации, которая кстати говоря была возможна только с использованием сторонних библиотек (пр. Craco)

React

Ну а теперь давайте пройдемся по текущей ситуации с экосистемой Реакта.

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

Грядущая 18ая версия реакта привнесет полезное обновление для работы хуков - автоматический батчинг всех вызовов сеттера useState, что позволит избежать лишних рендеров:

const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);

function handleClick() {
  fetchSomething().then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // React перерисует компонент только один раз
  });
}

React фреймворки

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

Решают эту проблему фреймворки, которые основаны на React и из коробки привносят более широкий функционал для разработки масштабных проектов.

NextJS / Gatsby

Лидерами в этой нише являются NextJS и Gatsby. Они привносят возможность серверного рендеринга и статическую генерацию страниц с очень простой настройкой. Также они обладают рядом готовых к использованию оптимизаций, которые позволяют добиться высокой скорости работы приложения.

NextJS в конце 2021 года получил обновление до 12 версии. В ней команда разработчиков как и прежде сконцентрирована на оптимизации скорости работы приложения. Были представлены Middleware для страниц, позволяющие выполнять действия с запросом в момент его исполнения, что дает возможность авторизовывать пользователя и делать редиректы, еще до выполнения логики страницы. Также NextJS получил Rust compiler (SWC), который в разы увеличивает скорость сборки бандлов приложения.

Gatsby обновился до 4 версии и привнес улучшенное решение статической генерации сайтов, которая не требует пререндера в момент сборки проекта.

Remix

Но самым важным событием конца 2021, в нише фреймворков, стал open source релиз проекта под названием Remix. Это SSR фреймворк, который обладает функционалом в виде вложенных роутов, что дает возможность загружать контент страницы параллельно, а также и обрабатывать ошибки на каждый роут. Еще одним интересным подходом является работа с формами, которая реализована как в старые времена через браузерный API форм, это позволяет реализовывать простые страницы с формами, которые могут работать вообще JS на стороне браузера.

Как вывод этого раздела, то лично для меня развитие и существование фреймворков на Реакте имеет огромный плюс для как нас, так и для индустрии. Фреймворки всегда создавались с целью упрощения и ускорения разработки проектов, предоставляя готовые к работе инструменты, уменьшая нашу работу. Знание этих фреймворков в 2022 я считаю обязательным, так как они продолжают заходить в enterprise и многие крупные компании создают проекты именно на реакт фреймворках.

React библиотеки

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

Роутинг

В нише SPA приложений лидером был и остается react-router. Он удобен, прост в освоении и предоставляет хуки на все необходимые случаи.

С последним мажорным обновлением react-router предложил нам кардинально новый подход к организации роутов, который также был интегрирован в Remix. Более подробно можно ознакомиться на главной странице проекта reactrouter.com
(Спасибо за комментарий @Amper)

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

Менеджмент состояния

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

Главным игроком на рынке состояний все также остается Redux. Хоть и хайп вокруг него утих, но за время своей славы он успел попать в enterprise и сложный продакшн. Поэтому мы долго теперь будем иметь с ним дело. Да и вакансий требующих его знание подавляющее большинство.

Стоит заметить, что Redux развивается в сторону решения основных спорных моментов и с релизом Redux Toolkit появилась возможность сократить количество boilerplate кода и мутировать состояние, если кому-то было это важно делать.

Вторым по популярности менеджером состояний является Mobx, за счет простоты использования и реализации реактивности через наблюдаемые объекты (observable).

Формы

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

В случае когда в проекте большое количество сложных форм, нам на помощь приходят библиотеки, которые уменьшают объем повторяемого кода и упрощают нам работу:

  • react-hook-form - По моему мнению лучший инструмент для создания форм. Используя хуки, можно легко создавать формы, обрабатывать и валидировать данные. Библиотека отличается еще тем, что хранит стейт форм с помощью самого браузера, что позволяет достичь практически нулевого количества пере-рендеров форм в процессе работы с ней.

  • formik - Еще одна популярная библиотека для работы с формами. Реализована она через компоненты, но также возможно использовать хуки.

Стилизация

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

  • Чистый CSS или препроцессоры (SCSS, LESS)

  • Tailwind

  • styled-components

  • UI библиотеки

    • Material UI

    • Ant Design

    • React-Bootstrap

Запрос данных с сервера

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

  • fetch / axios - для работы с REST API

  • Apollo GraphQL

  • swr, react-query - библиотеки, которые по мимо работы с запросами предоставляют возможность кеширования запросов с ревалидацией, показа состояния загрузки и обработку ошибок.

Предлагаю поделиться своим видением текущей экосистемы реакта. Буду рад прочесть другие мнения в комментариях. Всем удачи и не болейте! ????

Комментарии (50)


  1. Ilusha
    31.01.2022 19:23
    +2

    Не часто видишь статью, которая не уделила внимания sagas/thunk в контексте redux.


    1. sakhnyuk Автор
      31.01.2022 19:29
      +2

      Я если честно уже считаю их одним целым с Redux =) Не помню даже встречал ли я когда-то проект, где был redux, но не было sagas или thunk.

      Но упомянуть наверное стоило бы. Спасибо!


  1. Amper
    31.01.2022 19:28
    +2

    Думаю, что про react-router стоило добавить о недавном мажорном релизе, значительно поменявшем данную библиотеку.

    По поводу управления состоянием, для меня откровением стал Recoil: в своих проектах выбрал для себя его окончательно - минималистичный, очень соответствует духу React и отлично без проблем вписывается в React-проекты без значительных доработок под него.


    1. sakhnyuk Автор
      31.01.2022 20:03

      Спасибо ????

      Отличное дополнение, которое я упустил.


    1. JustDont
      31.01.2022 21:11
      +1

      По поводу управления состоянием, для меня откровением стал Recoil

      Это который Mobx, только без фатального недостатка?


      1. markelov69
        01.02.2022 11:36
        +1

        Это который Mobx, только без фатального недостатка?

        О каком фатальном недостатке речь?


        1. JustDont
          01.02.2022 13:24
          +1

          1. markelov69
            01.02.2022 13:39
            -2

            Существует только один фатальный недостаток, разумеется.

            Смеяться после слова лопата или в чем вообще смысл данного ответа?


            1. JustDont
              01.02.2022 14:11
              +1

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


              1. markelov69
                01.02.2022 16:21
                -3

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

                Смысл в том, что ответа на вопрос по поводу вашего изначального комментария:


                Это который Mobx, только без фатального недостатка?

                Нет до сих пор. Чушь в виде ссылок которые вы прикрепили это чистой воды бред и не имеет ничего общего с ответом на вопрос.


  1. uptimizt
    31.01.2022 20:39
    +1

    React это ок ) он на своем месте. У него сообщество, компоненты, ui-kits ) в целом лидер без спора.

    Если деать какой то большой продукт про систему Enterprise или Trello - все ок.

    А что думаешь про SvelteJS? Он быстрее, легче, для классических сайтов он дешевле, проще, быстрее )

    Интересно мнение )


    1. sakhnyuk Автор
      31.01.2022 20:52
      +2

      Все что ты сказал про SvelteJS, со всем согласен и это отличный инструмент. Но для меня сейчас больший интерес вызывает SolidJS.

      После реакта он имеет нулевую сложность входа, он даже быстрее чем SvetleJS и необходимые библиотеки адаптировать(переписывать) проще. Он тоже Trully Reactive и без VirtualDOM. Поэтому смотрю именно в его сторону для своих мини проектов.


      1. i360u
        31.01.2022 22:04

        В Svelte есть довольно неприятная зависимость от компилятора. А легкий и быстрый код можно писать и без него.

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


      1. ogregor
        01.02.2022 00:17

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


        1. Andy_Francev
          03.02.2022 14:10

          И не только в сторону Солида. Его уже почти год как захантил на фулл-тайм Ebay, где он трудится над https://markojs.com/


      1. IvanIvanc
        03.02.2022 12:57
        +1

        Отсутствие virtualDOM недостаток, самый быстрый фреймворк на рынке, по тестам, hyperapp, естественно на virtualDom. Батчинг решает


        1. JustDont
          03.02.2022 12:58

          Самый быстрый фреймворк на рынке — VanillaJS. А в нем никакого батчинга нет абсолютно.


  1. nin-jin
    31.01.2022 21:48
    -4

    TL DR
    TL DR


    1. bjornd
      01.02.2022 15:26

      Весь портал на $mol

      Есть ссылочка на портал?


      1. nin-jin
        01.02.2022 16:47

        1. Ilusha
          02.02.2022 02:56
          +1

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

          Вы не показываете инструмент, так, как это делают остальные. Не хочу обидеть, но интерфейс сайта выглядит морально устаревшим: напоминает narod.ru. Что не позволяет воспринимать его как серьёзный и взрослый.

          Структура отличается от других, это не плохо, но не способствует: новый паттерн для восприятия информации. И я так и не смог перейти в репу фреймворка: за минуту не смог, а дальше - не настолько мне это нужно в нояи с телефона. Хотя и интересно посмотреть на issue, discussions, PR.

          Сразу видно, что это личный проект. Когда как очень важным критерием, определяющим выбор технологий, является сообщество. И независимость от конкретного человека. Вы же, наоборот подчеркиваете влияние своей личности. Это было бы хорошо, если бы у Вас был бы значимый вес(пиар?) на мировой арене.

          Выбор домена тоже немаловажен. mol.dev смотрелся бы гораздо лучше. А так, у вас уж сабдомен в .ru, но много всего на английском. Но и русский есть. Не очень логично. Как продвигаться на мир? А ещё есть ссылка mol.js.org в репе сайта, которая ведёт на страницу "mol примеры", с которой непонятно как работать. Да и продвижение в гугле страдает. По запросу "mol js" - первые две ссылки на Хабр.

          Ну и писать $ неудобно, будем объективны.

          С позиции маркетинга (пиара?), я вижу множество направлений для улучшения.

          Я бы очень хотел увидеть, как mol захватывает нишу рынка


          1. nin-jin
            02.02.2022 03:32
            +2

            я так и не смог перейти в репу фреймворка

            В левом верхнем углу иконка гитхаба. Ну и все ссылки во введении тоже ведут пока что на гитхаб.

            Вы же, наоборот подчеркиваете влияние своей личности.

            Я упоминаюсь там лишь как автор статей и докладов.

            А ещё есть ссылка mol.js.org в репе сайта

            Так вы всё же нашли репу?

            "mol примеры", с которой непонятно как работать

            Что именно не понятно?

             По запросу "mol js" - первые две ссылки на Хабр.

            Фреймврк называется $mol.

            я вижу множество направлений для улучшения

            Не хотите этим заняться?


            1. Ilusha
              02.02.2022 15:44

              Ссылка на репу портала, а не фреймворка. https://github.com/hyoo-ru/mol.hyoo.ru

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

              В mol примеры непонятно как выйти из неё на уровень выше, например. Да и сама структура.. ну не серьезно это.

              Что $mol, что mol - первые ссылки на Хабр у меня. Но наличие "$" - это уже ваша проблема нейминга, зачем людям писать этот лишний символ, когда можно не писать?

              Ну и я не нашёл репы с названием $mol. Что тоже добавляет вопросов.

              Оговорюсь, что я захожу с телефона.

              --

              Я бы может и занялся бы ещё с год назад, но сейчас работаю по 14-16 часов в сутки.


              1. nin-jin
                02.02.2022 17:53

                Ссылка на репу портала, а не фреймворка.

                А, точно, поправил. Изначально это была просто демка портала, но она разраслась до сайта фреймворка.

                Вы автор всех статей, которые там есть.

                Есть наброски статей и от других авторов, но они пока не финализировались.

                Вы прекрасно понимаете о чем я говорю

                Понятия не имею.

                В mol примеры непонятно как выйти из неё на уровень выше, например.

                Крестиком или свайпом. В некоторых разделах не хватало крестиков - добавил.

                Что $mol, что mol - первые ссылки на Хабр у меня.

                Интересно, на мобилке у меня тоже Хабр на вервом месте. А на декстопе - нет. Скорее всего Гугл шибко умный и для мобилок ставит более локальные ресурсы (в данном случае не русском языке) выше. Можете попробовать $hyoo_search - он такой самодейтельностью не занимается.

                зачем людям писать этот лишний символ, когда можно не писать?

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

                Я бы может и занялся бы ещё с год назад, но сейчас работаю по 14-16 часов в сутки.

                А перешли бы на $mol - делали бы тот же объём работы за 4-6 часов и осталось бы ещё немного времени на пожить.


                1. Ilusha
                  02.02.2022 21:59

                  Как ни крути, текущее положение вещей - проект одного человека. И это слишком видно. Как по-другому сказать.. не вижу маркетингового production ready. Серьёзности.

                  Свайп не работал. iOS. Я честно пробовал.

                  Думаете, получилось бы продуктивнее на $mol? Честно, рассматривал для нового проекта. Но у меня mobile first и ssr: для поисковиков и важной части аудитории на слабых/древних мобилок. Вторая проблема: баги на mol.hyoo.ru с мобилки.

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

                  Пысы: сейчас сайт перестал открываться вообще на минуту.


                  1. nin-jin
                    02.02.2022 22:08

                    Свайп не работал. iOS. Я честно пробовал.

                    К сожалению, это проект одного человека, у котого нет iPhone, для отладки на iOS.

                    Ну вот сейчас я пытался открыть магазин игрушек

                    Это старая демка с кучей данных и выключенной виртуализацией.


                    1. Ilusha
                      02.02.2022 22:18

                      К сожалению, я об этом не знал. Было бы не плохо иметь какой-нибудь лейбл :)

                      Может приведёте в пример что-то актуальное, с кучей форм, селекторов (filterable, creatable, clearable), окнами(модальными и не модальными) и в современном дизайне? Возможно, что-нибудь с валидацией, конструктором форм. Да ещё и под мобилки :)

                      Но необходимость отдельной "отладки под chrome в ios" поднимает вопросы. Что там такого в простом магазине?


                      1. nin-jin
                        03.02.2022 01:40

                        Ну, можно глянуть, например, $hyoo_case, но он ещё в на стадии прототипа.


                1. Ilusha
                  02.02.2022 22:06

                  докину: захотел посмотреть $mol_select_list. У меня отображаются просто два неинтерактивных плюса (иконки).

                  Повторное нажатие на этот пункт меню подскролило влево и скрыло экран контента. Ещё один тап: у меня перестал отображаться контент уже при тапе на любой пункт примеров.

                  Плюс непонятна мне навигация свайпами: то в рамках одного экрана ререндеринг, то перекидывает на левое меню. Учитывая, что свайп - это ещё и навигация в рамках браузера - сильные неудобства.


                  1. nin-jin
                    03.02.2022 00:05

                    У меня отображаются просто два неинтерактивных плюса (иконки).

                    Серого цвета? Первый должен быть интерактивный. Хз, что не так.

                    Повторное нажатие на этот пункт меню подскролило влево и скрыло экран контента.

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

                    Ещё один тап: у меня перестал отображаться контент уже при тапе на любой пункт примеров.

                    Похоже всё сломалось. Мне не удалось воспроизвести.

                    Плюс непонятна мне навигация свайпами: то в рамках одного экрана ререндеринг, то перекидывает на левое меню.

                    При погружении справа открываются панели. При всплытии они закрываются и выезжает доступная слева.

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

                    Ну, свайпить тут надо не от края.


                1. Ilusha
                  02.02.2022 22:09

                  А у вас есть какой-нибудь канал в слаке, где можно скидывать баги?


                  1. nin-jin
                    02.02.2022 23:56

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


  1. marshinov
    31.01.2022 22:20
    +1

    Рекомендую переводчику ознакомиться вот с этим видео.

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

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


  1. slaval_ch
    31.01.2022 23:01
    +1

    По поводу UI кита, на сегодняшний день лидером все-таки ИМХО является Chakra UI
    Платные компоненты у нее вооще огонь.


    1. Vorchun
      01.02.2022 08:44

      на сегодняшний день лидером все-таки ИМХО является Chakra UI

      А почему вы так считаете? Какие критерии сравнения?

      Мы довольно долго сравнивали и остановились на Ant, например.


      1. slaval_ch
        01.02.2022 11:12

        Я не говорю, что она лучше, просто она все время на слуху :)
        Мне Ант показался немного громоздким, документация не очень структурированная и постоянно натыкаешься на стаьи на китайском :)
        С чакрой можно начать работать через 5 минут после ознакомления, а купив за относительно недорого проф компоненты, можно вообще сайты клепать пачками и никто не придерется :)
        Минус для меня - немного запутанная система каких-то вертикальных и горизонтальных разметок, но я обхоужсь обычным Флексом.
        Бывают баги или просто непонтяное поведение, но посколько кит популярный все основные проблемы уже решены, надо просто погуглить.
        У меня есть демка с Чакрой, если интересно - https://github.com/slava-lu/enterprise-react-2022

        А что вам в Анте приглянулось?


    1. mopsicus
      01.02.2022 22:35

      А мне больше понравился https://primefaces.org/primereact/


  1. vital_pavlenko
    31.01.2022 23:21
    +2

    Спасибо за подборку! Было бы еще интересно посмотреть про тренды в тестировании React приложений


  1. zartdinov
    01.02.2022 06:50

    У Next.js вроде SSR из коробки идет


  1. pavelsc
    01.02.2022 10:12
    -4

    С тех пор как в js появились классы typescript вообще непонятно зачем существует. Да и раньше все нормально через прототип решалось, проблему и разрыв шаблона это только у дотнетчиков вызывало. Собственно ts и появился там, где дотнетчиков больше всего, вот откуда ноги и растут. Он дал только больше запутанности в код. Если раньше я мог объект просто расширить своими данными и стриггерить новый ивент не задумываясь, теперь надо огород городить. Когда у кого была проблема из-за динамической типизации в js? Брейкпойнты в TS воткнуть получается через строку. Тот факт что что в 8 или 9 ангуляр не помню уже, нельзя воткнуть распоследний TS, это как вообще?


    1. serginho
      01.02.2022 10:29
      +7

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


    1. vsh797
      01.02.2022 10:41
      +4

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


    1. JustDont
      01.02.2022 13:31
      +3

      Когда у кого была проблема из-за динамической типизации в js?

      Да разумеется ни у кого не было. И мемчики про падающие спутники из-за "undefined is not a function" просто так придумали, от делать нечего.


      Тот факт что что в 8 или 9 ангуляр не помню уже, нельзя воткнуть распоследний TS, это как вообще?

      Да, в проблемах ангуляра пусть тоже будет виноват TS. И в глобальном потеплении заодно.


      1. Kuraudo
        03.02.2022 13:00

        У angular нет проблем, он прекрасен.


        1. JustDont
          03.02.2022 13:19

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


          1. Nikitakun1
            03.02.2022 13:47

            А расскажете, что вам в ангуляре не нравится?


            1. JustDont
              03.02.2022 14:43

              Это тянет на огромнейшую статью, которую я конечно же не буду писать (сложно и мало толку).


              Но если очень-очень сжато, то — ангуляр катастрофически не успевает за эволюцией техстека фронта. В нем полно прекрасных (на момент их появления) идей, которые на 2022 страшно неудобны в их ангулярской инкарнации, от собственного нескучного механизма DI, который нормальный только когда работает, а вот проблемы в нем чинить — полный ад. До вещей типа рендеринга компонентов по принципу all or nothing, который на текущий год уже архаичен.


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


              1. Nikitakun1
                03.02.2022 15:14

                Как ни странно, со всем соглашусь. Правда, для ререндеринга конкретного компонента есть detectChanges(), который может периодически спасать, когда на ровном месте начинаются тормоза, но все равно все эти ручные вызовы change detection'а напрягают, конечно.

                А если не затруднит, не могли бы привести примеров, какие у вас были проблемы с DI, когда было больно?


                1. JustDont
                  03.02.2022 15:25

                  Правда, для ререндеринга конкретного компонента есть detectChanges()

                  Ну так это всё равно all or nothing, просто вручную. Я к тому, что в 2022 году уже много что умеет (Svelte и т.д.) в точечные локальные изменения DOM именно в местах привязки данных.


                  А если не затруднит, не могли бы привести примеров, какие у вас были проблемы с DI, когда было больно?

                  Да в общем-то любые поломки в ангулярских модулях (и DI, соответственно) всегда болезненны, в основном потому, что примерно никогда не могут показать вменяемое сообщение об ошибке, а не просто упасть с каким-то там стектрейсом.
                  Ну и конечно во всех нетривиальных случаях падает оно только в рантайме, а не при транспиляции. Хоть и тайпскрипт вроде как везде.


  1. kubk
    02.02.2022 10:12
    +1

    В 2021-2021 тренд на тулинг для JS, написанный не на JS. И это не просто поделки энтузиастов, а уже работающий в продакшене код. Например тот же esbuild (написан на Go) уже используется в Vite и даже Angular: https://blog.ninja-squad.com/2021/08/04/angular-cli-12.2/
    А Next.js использует SWC (написан на Rust): https://nextjs.org/docs/advanced-features/compiler

    Мы большинство проектов уже перевели на Vite и удивились тому, что фронтенд может быть быстрым, CI не занимает вечность, а шутки про ноутбуки, взлетающие как вертолёт при запуске проекта, можно наконец-то забыть.