Comments 60
Не часто видишь статью, которая не уделила внимания sagas/thunk в контексте redux.
Думаю, что про react-router стоило добавить о недавном мажорном релизе, значительно поменявшем данную библиотеку.
По поводу управления состоянием, для меня откровением стал Recoil: в своих проектах выбрал для себя его окончательно - минималистичный, очень соответствует духу React и отлично без проблем вписывается в React-проекты без значительных доработок под него.
Спасибо 👍
Отличное дополнение, которое я упустил.
По поводу управления состоянием, для меня откровением стал Recoil
Это который Mobx, только без фатального недостатка?
Это который Mobx, только без фатального недостатка?
О каком фатальном недостатке речь?
Существует только один фатальный недостаток, разумеется.
Смеяться после слова лопата или в чем вообще смысл данного ответа?
Смысл ответа — разумеется в ссылках на материалы, из которых вы можете почерпнуть историю этого термина.
Смысл ответа — разумеется в ссылках на материалы, из которых вы можете почерпнуть историю этого термина.
Смысл в том, что ответа на вопрос по поводу вашего изначального комментария:
Это который Mobx, только без фатального недостатка?
Нет до сих пор. Чушь в виде ссылок которые вы прикрепили это чистой воды бред и не имеет ничего общего с ответом на вопрос.
React это ок ) он на своем месте. У него сообщество, компоненты, ui-kits ) в целом лидер без спора.
Если деать какой то большой продукт про систему Enterprise или Trello - все ок.
А что думаешь про SvelteJS? Он быстрее, легче, для классических сайтов он дешевле, проще, быстрее )
Интересно мнение )
Все что ты сказал про SvelteJS, со всем согласен и это отличный инструмент. Но для меня сейчас больший интерес вызывает SolidJS.
После реакта он имеет нулевую сложность входа, он даже быстрее чем SvetleJS и необходимые библиотеки адаптировать(переписывать) проще. Он тоже Trully Reactive и без VirtualDOM. Поэтому смотрю именно в его сторону для своих мини проектов.
В Svelte есть довольно неприятная зависимость от компилятора. А легкий и быстрый код можно писать и без него.
Сорри, промахнулся комментом, это ответ на уровень выше, но хабр не даёт исправить...
У создателя солида есть подпроект. Mobxjsx из названия понятно, что это только mobx и только jsx. То же очень быстрая штука, жаль создатель решил развиваться в сторону солида.
И не только в сторону Солида. Его уже почти год как захантил на фулл-тайм Ebay, где он трудится над https://markojs.com/
Отсутствие virtualDOM недостаток, самый быстрый фреймворк на рынке, по тестам, hyperapp, естественно на virtualDom. Батчинг решает
Самый быстрый фреймворк на рынке — VanillaJS. А в нем никакого батчинга нет абсолютно.
Весь портал на $mol
Есть ссылочка на портал?
Который раз к вам туда захожу и, наконец, понял, что меня отталкивает.
Вы не показываете инструмент, так, как это делают остальные. Не хочу обидеть, но интерфейс сайта выглядит морально устаревшим: напоминает narod.ru. Что не позволяет воспринимать его как серьёзный и взрослый.
Структура отличается от других, это не плохо, но не способствует: новый паттерн для восприятия информации. И я так и не смог перейти в репу фреймворка: за минуту не смог, а дальше - не настолько мне это нужно в нояи с телефона. Хотя и интересно посмотреть на issue, discussions, PR.
Сразу видно, что это личный проект. Когда как очень важным критерием, определяющим выбор технологий, является сообщество. И независимость от конкретного человека. Вы же, наоборот подчеркиваете влияние своей личности. Это было бы хорошо, если бы у Вас был бы значимый вес(пиар?) на мировой арене.
Выбор домена тоже немаловажен. mol.dev смотрелся бы гораздо лучше. А так, у вас уж сабдомен в .ru, но много всего на английском. Но и русский есть. Не очень логично. Как продвигаться на мир? А ещё есть ссылка mol.js.org в репе сайта, которая ведёт на страницу "mol примеры", с которой непонятно как работать. Да и продвижение в гугле страдает. По запросу "mol js" - первые две ссылки на Хабр.
Ну и писать $ неудобно, будем объективны.
С позиции маркетинга (пиара?), я вижу множество направлений для улучшения.
Я бы очень хотел увидеть, как mol захватывает нишу рынка
я так и не смог перейти в репу фреймворка
В левом верхнем углу иконка гитхаба. Ну и все ссылки во введении тоже ведут пока что на гитхаб.
Вы же, наоборот подчеркиваете влияние своей личности.
Я упоминаюсь там лишь как автор статей и докладов.
А ещё есть ссылка mol.js.org в репе сайта
Так вы всё же нашли репу?
"mol примеры", с которой непонятно как работать
Что именно не понятно?
По запросу "mol js" - первые две ссылки на Хабр.
я вижу множество направлений для улучшения
Не хотите этим заняться?
Ссылка на репу портала, а не фреймворка. https://github.com/hyoo-ru/mol.hyoo.ru
Каждая статья в разделе "статьи" с каких слов начинается? Вы автор всех статей, которые там есть. Давайте не будем в формальности, Вы прекрасно понимаете о чем я говорю.
В mol примеры непонятно как выйти из неё на уровень выше, например. Да и сама структура.. ну не серьезно это.
Что $mol, что mol - первые ссылки на Хабр у меня. Но наличие "$" - это уже ваша проблема нейминга, зачем людям писать этот лишний символ, когда можно не писать?
Ну и я не нашёл репы с названием $mol. Что тоже добавляет вопросов.
Оговорюсь, что я захожу с телефона.
--
Я бы может и занялся бы ещё с год назад, но сейчас работаю по 14-16 часов в сутки.
Ссылка на репу портала, а не фреймворка.
А, точно, поправил. Изначально это была просто демка портала, но она разраслась до сайта фреймворка.
Вы автор всех статей, которые там есть.
Есть наброски статей и от других авторов, но они пока не финализировались.
Вы прекрасно понимаете о чем я говорю
Понятия не имею.
В mol примеры непонятно как выйти из неё на уровень выше, например.
Крестиком или свайпом. В некоторых разделах не хватало крестиков - добавил.
Что $mol, что mol - первые ссылки на Хабр у меня.
Интересно, на мобилке у меня тоже Хабр на вервом месте. А на декстопе - нет. Скорее всего Гугл шибко умный и для мобилок ставит более локальные ресурсы (в данном случае не русском языке) выше. Можете попробовать $hyoo_search - он такой самодейтельностью не занимается.
зачем людям писать этот лишний символ, когда можно не писать?
Зачем искать по оригинальному названию, когда можно придумать своё? Ну не знаю.. чтобы таки найти?
Я бы может и занялся бы ещё с год назад, но сейчас работаю по 14-16 часов в сутки.
А перешли бы на $mol - делали бы тот же объём работы за 4-6 часов и осталось бы ещё немного времени на пожить.
Как ни крути, текущее положение вещей - проект одного человека. И это слишком видно. Как по-другому сказать.. не вижу маркетингового production ready. Серьёзности.
Свайп не работал. iOS. Я честно пробовал.
Думаете, получилось бы продуктивнее на $mol? Честно, рассматривал для нового проекта. Но у меня mobile first и ssr: для поисковиков и важной части аудитории на слабых/древних мобилок. Вторая проблема: баги на mol.hyoo.ru с мобилки.
Ну вот сейчас я пытался открыть магазин игрушек: у меня перестал работать скроллинг в первом столбце, частично обрезался контент во втором, а третий загрузился, но после пары свайпов влево-вправо пропал контент - одно поле отображалось, а телефон стал греться как печка.
Пысы: сейчас сайт перестал открываться вообще на минуту.
Свайп не работал. iOS. Я честно пробовал.
К сожалению, это проект одного человека, у котого нет iPhone, для отладки на iOS.
Ну вот сейчас я пытался открыть магазин игрушек
Это старая демка с кучей данных и выключенной виртуализацией.
К сожалению, я об этом не знал. Было бы не плохо иметь какой-нибудь лейбл :)
Может приведёте в пример что-то актуальное, с кучей форм, селекторов (filterable, creatable, clearable), окнами(модальными и не модальными) и в современном дизайне? Возможно, что-нибудь с валидацией, конструктором форм. Да ещё и под мобилки :)
Но необходимость отдельной "отладки под chrome в ios" поднимает вопросы. Что там такого в простом магазине?
Ну, можно глянуть, например, $hyoo_case, но он ещё в на стадии прототипа.
докину: захотел посмотреть $mol_select_list. У меня отображаются просто два неинтерактивных плюса (иконки).
Повторное нажатие на этот пункт меню подскролило влево и скрыло экран контента. Ещё один тап: у меня перестал отображаться контент уже при тапе на любой пункт примеров.
Плюс непонятна мне навигация свайпами: то в рамках одного экрана ререндеринг, то перекидывает на левое меню. Учитывая, что свайп - это ещё и навигация в рамках браузера - сильные неудобства.
У меня отображаются просто два неинтерактивных плюса (иконки).
Серого цвета? Первый должен быть интерактивный. Хз, что не так.
Повторное нажатие на этот пункт меню подскролило влево и скрыло экран контента.
Ссылки действую как чекбоксы - если по активному разделу закрывает этот раздел. Это позволяет сс клавиатуры открывать и закрывать разделы не ищя кнопку закрытия. Возможно стоит делать это по эскейпу, надо подумать.
Ещё один тап: у меня перестал отображаться контент уже при тапе на любой пункт примеров.
Похоже всё сломалось. Мне не удалось воспроизвести.
Плюс непонятна мне навигация свайпами: то в рамках одного экрана ререндеринг, то перекидывает на левое меню.
При погружении справа открываются панели. При всплытии они закрываются и выезжает доступная слева.
Учитывая, что свайп - это ещё и навигация в рамках браузера - сильные неудобства.
Ну, свайпить тут надо не от края.
А у вас есть какой-нибудь канал в слаке, где можно скидывать баги?
Лучше, конечно, в баг-трекер. Ну или в телеграм чат, но там они скорее всего потеряются, если не будут решены сразу.
Рекомендую переводчику ознакомиться вот с этим видео.
Babel также является основным инструментом, который может транспайлить наш код в старые синтаксисы, добавлять полифилы, кешировать результат и прочее.
Babel - это инструмент, позволяющий заменять путем транспиляции новые языковые конструкции старым, поддерживаемым синтаксисом, добавлять при необходимости полифилы, кешировать результаты и многое другое...
По поводу UI кита, на сегодняшний день лидером все-таки ИМХО является Chakra UI
Платные компоненты у нее вооще огонь.
на сегодняшний день лидером все-таки ИМХО является Chakra UI
А почему вы так считаете? Какие критерии сравнения?
Мы довольно долго сравнивали и остановились на Ant, например.
Я не говорю, что она лучше, просто она все время на слуху :)
Мне Ант показался немного громоздким, документация не очень структурированная и постоянно натыкаешься на стаьи на китайском :)
С чакрой можно начать работать через 5 минут после ознакомления, а купив за относительно недорого проф компоненты, можно вообще сайты клепать пачками и никто не придерется :)
Минус для меня - немного запутанная система каких-то вертикальных и горизонтальных разметок, но я обхоужсь обычным Флексом.
Бывают баги или просто непонтяное поведение, но посколько кит популярный все основные проблемы уже решены, надо просто погуглить.
У меня есть демка с Чакрой, если интересно - https://github.com/slava-lu/enterprise-react-2022
А что вам в Анте приглянулось?
А мне больше понравился https://primefaces.org/primereact/
Спасибо за подборку! Было бы еще интересно посмотреть про тренды в тестировании React приложений
У Next.js вроде SSR из коробки идет
С тех пор как в js появились классы typescript вообще непонятно зачем существует. Да и раньше все нормально через прототип решалось, проблему и разрыв шаблона это только у дотнетчиков вызывало. Собственно ts и появился там, где дотнетчиков больше всего, вот откуда ноги и растут. Он дал только больше запутанности в код. Если раньше я мог объект просто расширить своими данными и стриггерить новый ивент не задумываясь, теперь надо огород городить. Когда у кого была проблема из-за динамической типизации в js? Брейкпойнты в TS воткнуть получается через строку. Тот факт что что в 8 или 9 ангуляр не помню уже, нельзя воткнуть распоследний TS, это как вообще?
Вы видимо действительно большие приложения не пилили. Тот факт, что вы где-то меняете интерфейс, и она вам подсвечивает места его неправильного применения - это благо, которое вам поможет избежать ошибок.
Типы хорошо помогают разбираться в чужом коде. Особенно с библиотеками. Имхо, возможность прямо в IDE посмотреть, какие поля содержит возвращаемый функцией объект и их типы дорогого стоит.
Когда у кого была проблема из-за динамической типизации в js?
Да разумеется ни у кого не было. И мемчики про падающие спутники из-за "undefined is not a function" просто так придумали, от делать нечего.
Тот факт что что в 8 или 9 ангуляр не помню уже, нельзя воткнуть распоследний TS, это как вообще?
Да, в проблемах ангуляра пусть тоже будет виноват TS. И в глобальном потеплении заодно.
Я б даже вместе с вами посмеялся, если б в данный момент не работал бы вынужденно с ангулярским стеком четырехлетней давности.
Но поскольку таки работаю, то мне не смешно.
А расскажете, что вам в ангуляре не нравится?
Это тянет на огромнейшую статью, которую я конечно же не буду писать (сложно и мало толку).
Но если очень-очень сжато, то — ангуляр катастрофически не успевает за эволюцией техстека фронта. В нем полно прекрасных (на момент их появления) идей, которые на 2022 страшно неудобны в их ангулярской инкарнации, от собственного нескучного механизма DI, который нормальный только когда работает, а вот проблемы в нем чинить — полный ад. До вещей типа рендеринга компонентов по принципу all or nothing, который на текущий год уже архаичен.
Ну и отдельные лучи добра за фиксацию версий тайпскрипта сверху и снизу. Все люди, которые по любым причинам вынуждены работать со старым ангуляром (а мир кровавого энтерпрайза может не обновляться годами), вынуждены так же и работать с устаревшим тайпскриптом.
Как ни странно, со всем соглашусь. Правда, для ререндеринга конкретного компонента есть detectChanges(), который может периодически спасать, когда на ровном месте начинаются тормоза, но все равно все эти ручные вызовы change detection'а напрягают, конечно.
А если не затруднит, не могли бы привести примеров, какие у вас были проблемы с DI, когда было больно?
Правда, для ререндеринга конкретного компонента есть detectChanges()
Ну так это всё равно all or nothing, просто вручную. Я к тому, что в 2022 году уже много что умеет (Svelte и т.д.) в точечные локальные изменения DOM именно в местах привязки данных.
А если не затруднит, не могли бы привести примеров, какие у вас были проблемы с DI, когда было больно?
Да в общем-то любые поломки в ангулярских модулях (и DI, соответственно) всегда болезненны, в основном потому, что примерно никогда не могут показать вменяемое сообщение об ошибке, а не просто упасть с каким-то там стектрейсом.
Ну и конечно во всех нетривиальных случаях падает оно только в рантайме, а не при транспиляции. Хоть и тайпскрипт вроде как везде.
Ни в одном фреймворке/либе кроме углового до сих пор нету DI
Ну конечно, больше ни в одном:
По вашей первой ссылке я вижу IoC контейнер, который является тем же контекстом окружения. Более того, в последнем коде вы можете наблюдать ту самую "хуиту" с прямым поиском зависимости в контексте (скоупе). И к резолву зависимостей при компиляции это всё никакого отношения, разумеется, не имеет.
Ну а то, что вы хотите именно инъекции в конструктор - это вам просто мозг промыли евагелисты. У этого подхода есть довольно очевидные проблемы:
При наследовании надо не просто знать все зависимости всех предков, но и повторить их ещё раз. А при рефакторинге бегать их всех обновлять.
Время жизни зависимостей строго больше времени жизни зависимого, в то время как время использования строго меньше. Это приводит к повышенному потреблению ресурсов при инициализации, даже если они фактически не будут использованы. И даже ленивые прокси не сильно спасают положение, но ещё больше всё усложняют.
Нет возможности указать параметры зависимости, специфичные для конкретного зависимого. Тут начинаются либо костыли с созданием 100500 классов, отличающихся лишь именами, либо таки инъектится лишь провайдер, через который уже делается лукап.
TS - это не про классы, камон.
Запутанность? Думаю, здесь не в ts дело.
Я сейчас пишу сложную систему с нуля, в ней есть, например, сложные вложенные модели с разворачиванием в плоские, чтобы передать в конструктор форм.
Как только типизировал модели и все связи: сразу всплыло множество багов и потенциально узких мест.
Любое обновление контракта: обновил модель и видишь все места, где что-то сломалось.
Процесс кодирования сложных преобразований данных не требует предельной концентрации, многие "детские" ошибки сразу видны, что позволяет думать об алгоритме, не удерживая в голове все детали.
В 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 не занимает вечность, а шутки про ноутбуки, взлетающие как вертолёт при запуске проекта, можно наконец-то забыть.
Я бы ещё хотел добавить про управление состоянием https://github.com/pmndrs/zustand
А по роутингу https://github.com/tanstack/react-location
А по GraphQL + React я дичайшим образом советую https://github.com/facebook/relay
Экосистема React в 2022 году