Artyom Arutyunyan
Artyom Arutyunyan
  • Видео 14
  • Просмотров 8 501
Инкрементальные вычисления на примере reatomLinkedList
Материалы по теме:
- код примера: github.com/artalar/reatom/tree/v3/examples/reatom-jsx
- signia.tldraw.dev/docs/incremental
- portal.gitnation.org/contents/beyond-virtual-lists-how-to-render-100k-items-with-100s-of-updatessec-in-react
- github.com/artalar/reatom/blob/d1a557453400021ecea5129dfd7f3907b093544b/packages/jsx/src/index.ts#L53
Просмотров: 429

Видео

Как решить главную проблему управления состояния раз и навсегда с Reatom.
Просмотров 1,3 тыс.Месяц назад
Разберем как найти золотой баланс между локальными стейтами вьюшки и глобальными стейтами отдельного менеджера состояния. Код: stackblitz.com/edit/reatom-computed-factory-pattern-example?file=src/app.tsx,src/pages/Search.tsx,src/pages/Search/model.ts 0:32 пример модели страницы 4:12 использование onDisconnect 07:30 использование фабрики 13:12 использование компьютед фабрики 17:30 заметка о сасп...
reatom/jsx
Просмотров 216Месяц назад
Смотрим на новый релиз reatom/jsx с поддержкой css-prop. www.reatom.dev/package/jsx/ github.com/artalar/reatom/tree/v3/examples/reatom-jsx
Атомизация табличных данных с Reatom
Просмотров 3743 месяца назад
github.com/artalar/reatom/tree/v3/examples/react-table-atomization
tanstack/react-query ИЛИ reatom/async ?
Просмотров 1,1 тыс.3 месяца назад
github.com/artalar/reatom/tree/v3/examples/tanstack-vs-reatom
Ключевые слова в JavaScript
Просмотров 3038 месяцев назад
Небольшой разбор ключевых слов в JavaScript. t.me/artalog/1005 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
Изучаем proposal AsyncContext
Просмотров 8110 месяцев назад
Изучаем github.com/tc39/proposal-async-context/ Материалы: Отменить нельзя продолжить (моя статья) - habr.com/ru/companies/ruvds/articles/725208/ The Road to Async Context - James M Snell, Node Congress 2023 - ruclips.net/video/8Tkpxv_DA0Y/видео.html Слайды: docs.google.com/presentation/d/1LLcZxYyuQ1DhBH1htvEFp95PkeYM5nLSrlQoOmWpYEI/ docs.google.com/presentation/d/19P-06rk263L1xcPsjGAx6qld0b62i...
Разработка новой версии stylerun
Просмотров 46110 месяцев назад
github.com/artalar/stylerun/tree/next
Работа над reatomDynamicUndo
Просмотров 170Год назад
У нас уже есть пакет для пользовательского таймтревела (истории изменений) @reatom/undo (www.reatom.dev/packages/undo), но withUndo и reatomUndo принимают только статический набор атомов, что не позволяет реализовать историю над атомизацией. Новая утила в 30 строк reatomDynamicUndo решает эту проблему. Попробовать: codesandbox.io/s/reatom-react-atomization-undo-wcu6qu?file=/src/model.ts
Быстрый разбор SharedWorker
Просмотров 848Год назад
Исходники: github.com/artalar/shared-worker-test Мой канал: t.me/artalog
Асинхронные конкурентные цепочки запросов и Reatom
Просмотров 709Год назад
В этом видео мы в общем разберем насущную для всех веб-разработчиков проблему обработки нескольких асинхронных запросов и расскажем как новая версия Reatom позволяет отказаться от rxjs и redux-saga. Текстом: habr.com/ru/companies/ruvds/articles/725208/ 5:00 - решение с инивидуальной отменой каждого запроса 9:47 - решение с отменой всей цепочки запросов 17:10 - существующие библиотеки 24:30 - до...
Атомизация (reatom)
Просмотров 409Год назад
Поговорим об атомизации (www.reatom.dev/guides/atomization) - патерне упрощения работы с иммутабельными списками. Вне контекста реатома это может еще называться "ref-pattern" (от "reference"), например sebastienlorber/status/1620385689853661185 0:28 - проблема иммутабельных списков 4:35 - атомизация 14:20 - пример Сайт: www.reatom.dev/ Чат: t.me/reatom_ru Новости: t.me/reatom_ru_news
Имя компонента в логах useAtom (reatom/npm-react)
Просмотров 121Год назад
Краткое представление новой версии reatom/npm-react (3.2.0), в которой добавилось автоматическое вычисление имени компонента для useAtom и useAction, что значительно улучшает дебаг. Сайт: www.reatom.dev/ Чат: t.me/reatom_ru Новости: t.me/reatom_ru_news
Общее введение в Reatom и экосистему, компонент поиска на React.
Просмотров 2 тыс.Год назад
00:00 - Hello, World! 11:10 - пример с загрузкой данных 25:50 - использование @reatom/framework Это туториал для знакомства с reatom.dev и его биндингами к React. Базовый темплейт: replit.com/@artalar/reatom-react-ts?v=1 Результат: replit.com/@artalar/reatom-react-ts-search-example#src/App.tsx Сайт: www.reatom.dev/ Чат: t.me/reatom_ru Новости: t.me/reatom_ru_news

Комментарии

  • @_Black_Mirror_
    @_Black_Mirror_ Месяц назад

    Откуда ростут ноги у страха завязываться на реакт?

    • @artalar
      @artalar 29 дней назад

      От того что у него просто нет АПИ для эффективного управления состоянием. Куча избыточных ререндеров лишь мешают дебажить что от чего поменялось и вызывают лишние тормоза. Реакт - библиотека для работы с DOM, остальное - натягивание совы на глобус.

  • @eldr0n
    @eldr0n Месяц назад

    я конечно все понимаю, но столько кода ради 2 ссылок это капец.. куда мы движемся...

    • @artalar
      @artalar Месяц назад

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

  • @dessleonid
    @dessleonid Месяц назад

    И нахуя мне RUclips въебал мне в рекоммендации данный ролик?? Вообще никогда не занимался програмированием, тут вот пожалуйста. Ебанутся!

  • @kaifaty
    @kaifaty Месяц назад

    Классное решение! Спасибо

  • @michailshcherbakov
    @michailshcherbakov 2 месяца назад

    Что за шрифт используете?

    • @artalar
      @artalar 2 месяца назад

      Iosevka Term (weight 500) typeof.net/Iosevka/

  • @user-ys6my4ov1i
    @user-ys6my4ov1i 2 месяца назад

    надеюсь ребенок покакал

  • @andreiepachev3897
    @andreiepachev3897 3 месяца назад

    Подскажи плз название темы в вскоде?

  • @Fs-xj2gu
    @Fs-xj2gu 3 месяца назад

    почему нельзя это все локально написать в редакторе и залить в репозиторий, зачем этот реплит??) и хотя бы смонтировать видео, обрезать не нужные куски

    • @artalar
      @artalar 3 месяца назад

      Потому что это все требует времени, которое я лучше потрачу на разработку новых фич :) Реплит на момент записи набирал популярность, но что-то не взлетело, да.

  • @user-yj6tk7bx3h
    @user-yj6tk7bx3h 3 месяца назад

    Спасибо)

  • @TipAnswer
    @TipAnswer 3 месяца назад

    На 2:42 они давно или не давно, надо чекать сделали пропс notifyChangeProps чтобы можно было подписаться только на то что ты хочешь. Артём ты не раз уже говорил об этом и на стримах у блогеров и не только, что хуки будут вызываться и куча рирендоров, но это пропс решает эту проблему, если я правильно тебя понимаю, чекни сам оно ли это, если да, то больше не говори что это проблема.

  • @kaifaty
    @kaifaty 3 месяца назад

    keepPreviousData: true и при новом фиче не будет сброса данных

    • @artalar
      @artalar Месяц назад

      Перечитайте документацию ;)

  • @delite378
    @delite378 3 месяца назад

    а что за браузер

  • @dkfire7636
    @dkfire7636 3 месяца назад

    Отличное видео! А не подскажите, какая тема используется в VSCode?

    • @artalar
      @artalar 3 месяца назад

      Тема nord

  • @sno-oze
    @sno-oze 3 месяца назад

    Не, я точно останусь на react-query, т.к. он мега популярен, а значит куча типичных возникающих проблем уже решена, куча на гитхабе различных примеров, где можно что-то подсмотреть, понять, куча блогов, где есть best practices. Он очень простой в освоении, те, кто видит его первый раз, разбираться там 20 минут. p.s. 1. у нас на проекте с initialdata проблем не возникало, хз почему здесь так. 2. devtools у tanstack - это просто сказка, в сравнении с логами какими-то. 3. для персиста там можно кэш задать infinity, тогда данные не должны обновляться, проблем со стандартным временем кэша не возникало. смотрю, у reatom есть компонет обёртка reatomComponent, который и прокидывает ctx в дочерний компонент, который и содержит всю дату и т.д., т.е. вроде как всё и не в компоненте находится, но вот эта обёртка - это стрёмно (ппц, когда уже избавитесь от этого адового костыля ctx, который пихается везде и всюду). ctx - вообще смотрится как глобальный объект, который содержит все существующие атомы

  • @izzy7541
    @izzy7541 4 месяца назад

    2 года сидим на react-query, реально неудобно когда надо хуки объявлять по несколько раз в компонентах и прибивать их гвоздями. Реатом интересный, но кажется что потребуется время, чтобы в нём освоиться. Всё таки подходы очень разные, в rq даже обезьяна разберётся. Наверное по этому и так популярен

  • @melodystic
    @melodystic 6 месяцев назад

    Очень полезно, спасибо!)

  • @sleepstream9433
    @sleepstream9433 11 месяцев назад

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

  • @Jhon_2142
    @Jhon_2142 11 месяцев назад

    Спасибо большое 🙏)

  • @miloman1995s
    @miloman1995s Год назад

    0:58, а зачем писать анонимную функциб в onChange инпута? это же bad practice, почему не вынести в функцию наверх?

    • @artalar
      @artalar Год назад

      Согласен, на проекте лучше именно так и делать. Тут сыграли три фактора: 1) Для нативных элементов колбеки можно не мемоизировать 2) Если функцию можно записать в одну строку - не страшно сделать это "инлайн" 3) Это код примера

  • @yourfriend-bc1hr
    @yourfriend-bc1hr Год назад

    вау

  • @user-xo5hy6cp1r
    @user-xo5hy6cp1r Год назад

    Приятный голос, приятная подача и reatom прекрасен

  • @TheStafflo
    @TheStafflo Год назад

    Здорово 👍

  • @proofit404
    @proofit404 Год назад

    Огнище 🎉

  • @dmitryvakhnenko2759
    @dmitryvakhnenko2759 Год назад

    Афигенно! Спасибо :-)

  • @user-qz8hz4es5c
    @user-qz8hz4es5c Год назад

    Привет, если с бека приходит большое состояние, лучше сохранять его целиком через конструкцию withDataAtom и использовать конкретные части атома через ctx.spy в useAtom, или же вместо withDataAtom сохранять респонс в несколько атомов?

    • @artalar
      @artalar Год назад

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

    • @user-qz8hz4es5c
      @user-qz8hz4es5c Год назад

      @@artalar Это понятно, вопрос больше был в том, можно ли использовать атом в качестве слайса, и доставать из него поля используя ctx.spy в качестве селектора?

    • @artalar
      @artalar Год назад

      @@user-qz8hz4es5c конечно!

  • @kusov4748
    @kusov4748 Год назад

    Выглядит интересно. Видно, что немало исследовал. Спасибо!