Можно попробовать постепенно переползти в этом сервисе с js на ts, расставляя типы прямо по ходу работы с тикетами. Я так переводил огромное реактовое приложение с 150K+ строк с flow на typescript через JS. Т.к. не было нормального конвертера flow→typescript, я сначала убрал полностью все типы и потом прямо по ходу работы постепенно переименовывал файлики .js→.tsx и расставлял везде типы. За полгода перелез :)
У нас есть проект, где бэк на Go, где вот так приходит факт, что поле author пустое у объекта { title: "", author: { id: "", firstName: "", lastName: "" } } Или enum'ы приходят так { someEnum: "XXX_UNKNOWN", } опять же потому что "XXX_UNKNOWN" — это дефолтное значение. Очень часто в данных есть огромная разница между 0 и Some(0).
@smelukovА подскажите, как вообще подходить к началу оптимизации уже большого приложения, К примеру, я открываю statoscope для next.js приложения и вижу что в общем entrypoint page/_app 2881 модуль, библиотеки форм и всякое подобное. Как можно ответить на вопрос "почему данный модуль включен в initial chunk данной entrypoint?" если бегать и раскрывать "Reasons", там много лишнего и часто просто непонятно почему именно включен данный модуль.
Насколько я понимаю, в stats файле есть точные ссылки на import statement в конкретных файлах, которые привели к включению данного модуля в chunk. К примеру, у меня в "pages/_app" находится множество initial chunk, в одном из них включена библиотечка "final-form", как мне можно увидеть кусочек графа зависимостей, из которого можно было бы понять какие именно import'ы в каких файлах привели к данному включению? Чтобы можно было понять где делать lazy loading.
Как раз именно в учебном проекте и стоит. А то потом джуны копируют этот код и оно пролазит в продакшен. Т.к. им никто не объяснил как же именно делать правильно.
А можно добавить ссылки на aliexpress на конкретную плату и программатор? Было бы офигенно, а то я, как полный чайник в stm, боюсь чего-нить не то купить :)
Вообще, после небольшого знакомства с mobx у меня такое ощущение, что оно очень плохо идеологически сочетается с react'ом. Постоянные попытки натянуть сову на глобусизнасиловать react :)
Весь раздел доки "MobX and React" выглядит как набор хаков и список граблей, которые надо помнить и обходить.
В этом плане redux/effector, как мне кажется, лучше за счёт явной декларации зависимостей.
А напишите как оно будет выглядеть, если в fetchData нужно передавать параметры? Какой-нить id из props'ов. А то там что-то странное с useState делается — похоже что его вместо useMemo пытаются использовать.
Использование контекста очень сильно бьёт по производительности. Особенно в таких вещах как state manager. Т.к. любое изменение контекста вызывает re-render всего поддерева.
В clippy есть проверка на то, что нельзя просто так брать и вызывать .unwrap(), но она отключена по умолчанию. Наверное, автору библиотеки есть смысл включать эту проверку, а автору приложения — уже на свой выбор github.com/rust-lang/rust-clippy/issues/1921
Нет, я правильно понял. Смысл в том, что для браузера (уже после транспайлера XXX→JS) атрибуты в html/web components это всё еще строки. И их вам самим в компонентах надо парсить. В Svelte атрибуты — это объекты с полями, к которым из шаблона можно получить доступ. В React это еще и куски vdom'а, которые можно вставлять в другие места vdom'а. Лично мне слоты в Svelte или html кажутся костылями из-за того, что нельзя передавать ноды.
Нет, в JSX есть два синтаксиса — нормальный <Component prop={someJSExpression}/> и сокращённый для случаев, когда значение это статическая строка или true — <Component prop=«someString» someBooleanProp />. В нормальном варианте значение property — любое валидное javascript expression, которое можно писать в правой части присваивания.
Попробуйте, откройте babeljs.io/repl, выберите preset «react» и введите следующий код
да, «alert('Clicked')» это таки строка, которую потом браузер интерпретирует как js… Так же как и в web-components, когда я пишу <my-component attr=«myJSVar»/> myJSVar это тоже строка, которую потом интерпретируют как что угодно. Везде свои мелкие DSL'и. stackoverflow.com/a/50416836.
Ну не знаю, как по мне, так вариант Svelte одинаков, или даже чуть хуже по читаемости. В React сразу видно, что это у нас props'ы с определённым содержимым. А в Svelte это div с магическим атрибутом. Причём там магия такая замороченная.
Вот тут я честно запутался в let'ах. какой item чему соответствует… В React как-то идеологически проще, либо через render-props мы вызываем children как функцию, передавая ей item, либо через Children.map + React.cloneElement передаём в props item, чистый javascript.
<div slot="navbar">
Вот этот div render'ится в итоге? А если мне надо без него?
Вообще, если уж лезть в бутылку, то в html атрибутах могут быть ТОЛЬКО строки. Так что тут либо мы чисто в html/web components и у нас в атрибутах только строки, либо мы «крестик снимаем» и передаём в атрибутах что угодно, что возможно в javascript.
Насчёт «неумения передавать несколько children», тут есть момент, «children», это точно такой же атрибут в React как и любой другой. Просто ему присваивается значение body. Для меня было открытием, что можно писать вот так:
Жаль, мне в React нравится то, что компоненты и само дерево компонент являются первоклассными гражданами языка. Этот фокус с сайдбаром, к примеру, позволяет избежать излишнего пробрасывания props'ов. https://twitter.com/dan_abramov/status/1021850499618955272?s=20
Можно попробовать постепенно переползти в этом сервисе с js на ts, расставляя типы прямо по ходу работы с тикетами. Я так переводил огромное реактовое приложение с 150K+ строк с flow на typescript через JS. Т.к. не было нормального конвертера flow→typescript, я сначала убрал полностью все типы и потом прямо по ходу работы постепенно переименовывал файлики .js→.tsx и расставлял везде типы. За полгода перелез :)
.
У нас есть проект, где бэк на Go, где вот так приходит факт, что поле author пустое у объекта
{ title: "", author: { id: "", firstName: "", lastName: "" } }
Или enum'ы приходят так
{ someEnum: "XXX_UNKNOWN", }
опять же потому что "XXX_UNKNOWN" — это дефолтное значение.Очень часто в данных есть огромная разница между
0
иSome(0)
.@smelukovА подскажите, как вообще подходить к началу оптимизации уже большого приложения, К примеру, я открываю statoscope для next.js приложения и вижу что в общем entrypoint page/_app 2881 модуль, библиотеки форм и всякое подобное. Как можно ответить на вопрос "почему данный модуль включен в initial chunk данной entrypoint?" если бегать и раскрывать "Reasons", там много лишнего и часто просто непонятно почему именно включен данный модуль.
Насколько я понимаю, в stats файле есть точные ссылки на import statement в конкретных файлах, которые привели к включению данного модуля в chunk. К примеру, у меня в "pages/_app" находится множество initial chunk, в одном из них включена библиотечка "final-form", как мне можно увидеть кусочек графа зависимостей, из которого можно было бы понять какие именно import'ы в каких файлах привели к данному включению? Чтобы можно было понять где делать lazy loading.
А где срач C++ vs Rust?.. Там обычно столько интересного высказывают!
Как раз именно в учебном проекте и стоит. А то потом джуны копируют этот код и оно пролазит в продакшен. Т.к. им никто не объяснил как же именно делать правильно.
А можно добавить ссылки на aliexpress на конкретную плату и программатор? Было бы офигенно, а то я, как полный чайник в stm, боюсь чего-нить не то купить :)
вот это, кажется, работать не будет — при изменении props'ов новые не подтянутся. Я так понимаю, тут надо что-то типа
А, прошу прощения, не заметил ниже
:)
А в каком смысле он "странный"?.. Это же вроде как раз стандартный общепринятый подход.
Вообще, после небольшого знакомства с mobx у меня такое ощущение, что оно очень плохо идеологически сочетается с react'ом. Постоянные попытки
натянуть сову на глобусизнасиловать react :)Весь раздел доки "MobX and React" выглядит как набор хаков и список граблей, которые надо помнить и обходить.
В этом плане redux/effector, как мне кажется, лучше за счёт явной декларации зависимостей.
Попробуйте, откройте babeljs.io/repl, выберите preset «react» и введите следующий код
В случае webcomponents, значение атрибута это именно строка, которую потом надо парсить, вплоть до варианта с JSON.parse
Вот тут я честно запутался в let'ах. какой item чему соответствует… В React как-то идеологически проще, либо через render-props мы вызываем children как функцию, передавая ей item, либо через Children.map + React.cloneElement передаём в props item, чистый javascript.
Вот этот div render'ится в итоге? А если мне надо без него?
Вообще, если уж лезть в бутылку, то в html атрибутах могут быть ТОЛЬКО строки. Так что тут либо мы чисто в html/web components и у нас в атрибутах только строки, либо мы «крестик снимаем» и передаём в атрибутах что угодно, что возможно в javascript.
Насчёт «неумения передавать несколько children», тут есть момент, «children», это точно такой же атрибут в React как и любой другой. Просто ему присваивается значение body. Для меня было открытием, что можно писать вот так:
и кнопке передадутся дети.
А подскажите еще, как в svelte делается что-то типа
чтобы Tabs реализовывал логику переключения табов, показывая N-го ребёнка? Я в примерах не нашёл как можно детей перебирать.
Жаль, мне в React нравится то, что компоненты и само дерево компонент являются первоклассными гражданами языка. Этот фокус с сайдбаром, к примеру, позволяет избежать излишнего пробрасывания props'ов. https://twitter.com/dan_abramov/status/1021850499618955272?s=20