Forwarded from HolyJS — канал конференции
#доклады
React-query VS reatom/async — конфигурация против композиции
Сегодня расскажем о новом хардкорном докладе на HolyJS 2023 Autumn.
Постоянный спикер HolyJS и создатель библиотеки Reatom Артем Арутюнян устроит баттл между react-query и reatom/async. Посмотрим, что лучше применять в рабочих задачах — специализированную библиотеку или библиотеку общего назначения с набором хелперов.
Подробности и билеты на HolyJS 2023 Autumn.
React-query VS reatom/async — конфигурация против композиции
Сегодня расскажем о новом хардкорном докладе на HolyJS 2023 Autumn.
Постоянный спикер HolyJS и создатель библиотеки Reatom Артем Арутюнян устроит баттл между react-query и reatom/async. Посмотрим, что лучше применять в рабочих задачах — специализированную библиотеку или библиотеку общего назначения с набором хелперов.
Подробности и билеты на HolyJS 2023 Autumn.
🔥15🤡6👍4❤1
В чатике спросили как сделать горизонтальный скролл на wheel попроще. Я знаю такой хак - css only!
CodeSandbox
css-only-horizontal-scroll - CodeSandbox
css-only-horizontal-scroll by artalar using loader-utils, react, react-dom, react-scripts
🔥9❤5
Экспериментирую с отображением лога операций реатома. Читать сверху вниз, как таймлайн или git-log.
Оказалось, рисовать на SVG достаточно просто и интересно. Особенно радует, что его можно вставить напрямую в DOM и легко навесить интерактивность на узлы.
Но сейчас я рисую этот лог прям в консоль браузера. Очень не удобно для использования, но прикольно что так можно делать :)
По поводу простоты лога. Обычно, граф реактивных связей рисовать очень сложно, потому что мы имеет граф типа DAG или, вообще, двунаправленный (циклический). Как такой граф визуально сбалансировать (расположить ноды относистельно друг друга) что бы получилось понятно - нерешенная впринципе задача, ни у кого. Это можно сделать только с какими-то компромисами.
Но я вот понял что отображение всех связей и не нужно, это слишком верхнеуровневая картина, которая не имеет большого смысла вне контекста реальных данных и логики того как и что отвечает бекенд. Лучше сфокусироваться на дебаге конкретных пользовательских сценриев с реальными данным - что происходит в фиче над которой сейчас работаешь.
В JS, при этом, все просто - операции синхронны и поэтапны, мы можем вывести стройный одноуровневый лог последовательных операций - история того что происходило в реальности шаг за шагом. А потом построить между ними связи, что от чего зависит - спасибо реатомовскому ctx. Просто, понятно, эффективно.
Связи, кстати, расчитывать очень легко, посмотрите код. Я просто ищу расстояние (количество промежуточных операций) между причиной и следствием и использую это как коэффициент отдаления линии. Визуально это может лагать на долгих операциях (черту будет за границей видимости), но это отдельно можно фиксить.
Отображение, пока что, максимально упрощенное, но общий смысл мне уже очень нравится. А вам? :)
Оказалось, рисовать на SVG достаточно просто и интересно. Особенно радует, что его можно вставить напрямую в DOM и легко навесить интерактивность на узлы.
Но сейчас я рисую этот лог прям в консоль браузера. Очень не удобно для использования, но прикольно что так можно делать :)
По поводу простоты лога. Обычно, граф реактивных связей рисовать очень сложно, потому что мы имеет граф типа DAG или, вообще, двунаправленный (циклический). Как такой граф визуально сбалансировать (расположить ноды относистельно друг друга) что бы получилось понятно - нерешенная впринципе задача, ни у кого. Это можно сделать только с какими-то компромисами.
Но я вот понял что отображение всех связей и не нужно, это слишком верхнеуровневая картина, которая не имеет большого смысла вне контекста реальных данных и логики того как и что отвечает бекенд. Лучше сфокусироваться на дебаге конкретных пользовательских сценриев с реальными данным - что происходит в фиче над которой сейчас работаешь.
В JS, при этом, все просто - операции синхронны и поэтапны, мы можем вывести стройный одноуровневый лог последовательных операций - история того что происходило в реальности шаг за шагом. А потом построить между ними связи, что от чего зависит - спасибо реатомовскому ctx. Просто, понятно, эффективно.
Связи, кстати, расчитывать очень легко, посмотрите код. Я просто ищу расстояние (количество промежуточных операций) между причиной и следствием и использую это как коэффициент отдаления линии. Визуально это может лагать на долгих операциях (черту будет за границей видимости), но это отдельно можно фиксить.
Отображение, пока что, максимально упрощенное, но общий смысл мне уже очень нравится. А вам? :)
👍7❤5👎2
Есть популярный на западе стейт менеджер Jotai, у него пол миллиона скачиваний в неделю - это очень много. Меня частенько спрашивают, чем реатом отличается от него, типа и там и там “атомы”? В Jotai “атом” - это просто базворд, сейчас бы примитив они назвали сигналом. А в реатоме все идет от ACID и кложи, нейминг обоснован. Не то что бы это сильно важно… Про практические отличия я тут рассказывал.
Но к чему это я. Вот у них вышел релиз с пачкой фиксов корневой механики, да этого времени в некоторых кейсах либа работала не правильно - данные / отображение ломались.
Баг существует, примерно, с начала года. Повторюсь, пол ляма скачиваний. 14к звездочек на гихабе. Активное камьюнити и гитхаб. А толку? 🙂
И надо понимать, что это не Jotai такой ужасный, это норма в современном софте, к сожалению. Баги есть везде, даже, казалось бы, у популярных и проверенных временем либ.
Но к чему это я. Вот у них вышел релиз с пачкой фиксов корневой механики, да этого времени в некоторых кейсах либа работала не правильно - данные / отображение ломались.
Баг существует, примерно, с начала года. Повторюсь, пол ляма скачиваний. 14к звездочек на гихабе. Активное камьюнити и гитхаб. А толку? 🙂
И надо понимать, что это не Jotai такой ужасный, это норма в современном софте, к сожалению. Баги есть везде, даже, казалось бы, у популярных и проверенных временем либ.
🤡20👍11
Через 5 минут сделаю стрим в котором расскажу о проблемах написания биндингов в разным UI либам.
Вы заиспользовали все компоненты and.design на одной странице и теперь она рендерится 10 секунд. В конце рендера вы написали `Promise.resolve().then(some)`, но до этого, во время рендера, пользователь нажал на кнопку. Что отработает раньше?
Anonymous Quiz
52%
some
48%
onclick
🤪14
#не_вопросы_для_собеседований
Что и где сломается при попытке запустить этот код?
Что и где сломается при попытке запустить этот код?
async => async
await => await
async <= async
await <= await🥴35👎15💩4🤡4😁3
artalog
#не_вопросы_для_собеседований Что и где сломается при попытке запустить этот код? async => async await => await async <= async await <= await
YouTube
Ключевые слова в JavaScript
Небольшой разбор ключевых слов в JavaScript.
https://t.me/artalog/1005
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
https://t.me/artalog/1005
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
Учились в ВУЗе (больше двух лет хотя бы)?
Anonymous Poll
61%
Да и НЕ жалею
18%
Да и жалею об этом
21%
Не учился
CleanShot 2023-09-03 at 17.41.19@2x.png
5.4 MB
Купил себе Pixel 6A ради хороших фото. Оказалось фокусное расстояние достаточно большое и макро делать нереально. Сначала я подумал.
Но вот вам фото кузнечика на 3x зуме, встроенные алгоритмы достаточно хорошо повышают резкость.
Вот еще два сравнения фото с 4x зумомом в RAW (слева) и в JPEG (справа). Цвета на сырую выглядят хорошо, но хуже на обработанном фото, зато резкость значительно лучше - мне вся эта грязь теперь сниться будет)
Но вот вам фото кузнечика на 3x зуме, встроенные алгоритмы достаточно хорошо повышают резкость.
Вот еще два сравнения фото с 4x зумомом в RAW (слева) и в JPEG (справа). Цвета на сырую выглядят хорошо, но хуже на обработанном фото, зато резкость значительно лучше - мне вся эта грязь теперь сниться будет)
🤡5
This media is not supported in your browser
VIEW IN TELEGRAM
А ТС подрос! Вычисления на типах можно делать еще сложнее 🙂
Когда я последний раз тестировал трамплины, еле-еле считало “300+1”.
Сейчас попробовал на node: v20.5.1, TypeScript: v5.2.2, подумав справляется с “1000+1”.
Да и сама величина рекурсии подросла. Раньше на 30 сваливалось, а сейчас 90 может съесть.
Когда я последний раз тестировал трамплины, еле-еле считало “300+1”.
Сейчас попробовал на node: v20.5.1, TypeScript: v5.2.2, подумав справляется с “1000+1”.
Да и сама величина рекурсии подросла. Раньше на 30 сваливалось, а сейчас 90 может съесть.
🔥11
artalog
А ТС подрос! Вычисления на типах можно делать еще сложнее 🙂 Когда я последний раз тестировал трамплины, еле-еле считало “300+1”. Сейчас попробовал на node: v20.5.1, TypeScript: v5.2.2, подумав справляется с “1000+1”. Да и сама величина рекурсии подросла.…
999 сейчас лимит на глубину рекурсивного типа :)
👍5