Я Фронтенд разработчик со стажем более 10-и лет в HTML, CSS и JS. У меня опыт в самых разных областях: социальные сети, бухгалтерский учет, недвижимость и мессенджер наподобие Телеграм. Технические требования к этим проектам самые разные: адаптивность, сокеты, кэширование сервис воркерами, бесконечные пуш уведомления и даже переиспользуемость кода между Веб версией и React Native.
Все эти задачи можно решать по-разному, и я хочу поделиться своим личным набором лучших практик. Надеюсь, что каждый сможет почерпнуть что-то новое и полезное для себя, а также это вдохновит других разработчиков поделиться своими знаниями на этом канале.
И самое главное, пишите комменты если вы с чем-то не согласны или вы знаете вариант лучше, ведь только в обсуждении рождается истина!
А пока наслаждайтесь нашим культовым плейлистом трюков с react-router
Вопрос по поводу forwardRef. Когда вы сказали что никогда не юзали его, я начал переживать что я что-то делаю не так. Такой юзкейс: Есть кнопка-элемент, который может использоваться в разных списках. Стили в списках должны быть одинаковые, но функциональность может отличаться. К примеру в первом списке я хочу чтобы этот элемент можно было перетаскивать (DnD) и вызывать callback, а в другом списке, чтобы просто вызывался callback, без DND. Для этого соответственно я в первом компоненте просто стилизую компонент (uikit), прокидываю пропсы, а для конкретного списка уже буду его использовать и обвешивать логикой в другом компоненте. Так вот библиотека react-dnd, например, возвращает мне ref, который я должен привязать к элементу, который будет перетаскиваться. Как можно ещё помимо forwardRef прокинуть ref в мой первый компонент, который находится в uikit? Я действительно возможно не знаю более правильного и простого способа, буду рад научиться
[14:13 ] Пожалуй это сгодится для анимаций. Например легко сделать анимацию появления, но чтобы сделать какой-нибудь фейд-аут приходится либы для анимаций подключать, либо морочиться самому с тем чтоб фейд-аут отработал до того как компонент целиком не был убран из дома. Спасибо за видос, актуально)
Не понял прикол первого доклада что RN использует майкрософт в Windows 11 и в M Word? Разве RN каким то образом связан с нативным воспроизведением на винде?
Сама реактивность как таковая данным не сильно нужна. Особенно в вебе. Основная проблема, которую решает реактивность - это починка раеакт. Реакт максимально кривое подели. С убогим дизайном и реализацией. С нерабочими концепциями типа вдома и прочими фантазиями. Если реакт обновлять не таргентно - он будет тормозить совсем до невозможного уровня. Обновить его в принципе невозможно. Он никак не связывает отображение и данные из которых был построен. Точно так же как твой код в пример на 11:41 Поэтому его нужно как-то обновлять. Нужны средства связывания данных/отображения вопреки всем палкам в колёса, которые вставляет реакт. Если максимально упрощать проблему - имея id пользователя и изменения - ты можешь найти этого пользователя и применить изменения. Найти же какой компонент/дом связан с этим элементом не представляется возможным и потому все проблемы.
Я не знаю на основании чего rx-поделку называют реактивной. Это обычный калбек к которому прикрутили цепочку преобразований. Реактивности там ровно ноль. Подобного подходу тысячи лет он используется в sh. Твой пример с ручной лапшой ничего не делает. Вопроса в инициализации вообще никакой нет. Инициализация в рамках динамической реактивной модели выделяется лишь потому что она строит зависимости между данными и инициализирует связи между ними. Твоя код ничего этого не делает. Вот добавился новый чат - что ты будешь с этим делать? Вызывать эту функцию заново и выкачивать всё?
К этому видео понравились комментарии, как автора, так и других разработчиков. Интересные размышления, которые помогают лучше оценить нужно ли или нет в каждом конкретном случае использовать данный паттерн. Спасибо!
Вечное глюкалово этот их RN, никогда он не заменит нативно написанное приложение. Хороший пример это апп инсты и фесбука, которые глючат то тут, то там. А поддерживать эту помойку еще хуже, выйдет новая версия RN и оно уже не собирается.
@@it-sin9k это да) выходит что данный роутер актуален только юзая Реакт как отдельную библиотеку. Если юзать как советуют гуру-разрабы внутри фреймворка, то значит роутером 7 не пользуешься. Хотя я не знаю как там в Ремиксе и др с роутерами.
6:09 "Это стоит посмотреть, чтобы набить руку". 6:46 "рекомендую посмотреть 2ую часть доклада". Вот только посмотреть не удаётся - трансляции на канале React Conf скрыты и ни с VPN, ни с настройкой страны в Ютубе под США, посмотреть не получается. Надеюсь, они временно скрыли, чтобы нарезать на отдельные видео и скоро выложат на канал. Пока что у них в плейлисте только React Conf 2021
Не использовал useQuery, но отметил бы несколько моментов из видео: 5:20 - автор лукавит, он упаковал запрос и его обработку в отдельную функцию loadBookmarks, которая не является универсальной. Поэтому получается, что строки её кода нужно учитывать при сравнении количества строк. 7:35 предполагаю, что данные не стали undefined. Хук обратился к кэшу второй страницы, которого не было, поэтому в данные вернулся undefined. Аналогично, когда автор вернулся на первую страницу, хук посмотрел кэш первой страницы, увидел, что данные есть и вернул их. После этого данные перезапросились в лучших традициях swr
По поводу первого момента, я сравнивал прод код один, с продовским кодом альтернативным. useQuery под капотом тоже включает тьму кода. Второй момент, вы хорошо объяснили. Спасибо!)
@@it-sin9k не согласен,. useQuery - это универсальное решение, его код можно будет поменять везде по проекту, а вот специфическую функцию loadBookmarks так использовать вряд ли получится. Поэтому useQuery не включается в объём кода, а loadBookmarks стоит включить. Надеюсь, что смог донести свою мысль правильно 😂
"Если вы не работали с sentry", то и начинать не надо. Представьте, что пакет для отправки логов на сервер раздувает ваш прод бандл в два раза. Это и есть sentry.
За видео спасибо! По поводу RN - использовал версию 0.59. И это был мой ХУДШИЙ девелопер експириенс, особенно в плане обновлений зависимостей, несоответствий между Android и iOS версиями пакетов и постоянных траблов со сборкой приложения под обе платформы. Flutter показался мне на порядок лучше. Может в RN что-то и поменялось с тех пор, но проверять нет никакого желания. Никому не советую.
круто что RN так развивается, трогал его в году 2019-ом, он тогда не часто обновлялся я всегда хотел попробовать сделать десктопное приложение, это очень интересно)
интересно, смогу ли я обернуть свою игру на Phaser обернуть в RN и сделать десктоп думаю что такая возможность есть, пошел читать (я знаю что Electron с этим уже справляется)
Если пилишь просто desktop web, css module просто очень круто работает, очень удобно. Но когда есть mobile, desktop, планшет…. Как же просто невероятно удобно это делать например с sx пропсом из MUI
мы пилили Web + Android + iOS. На React + React Native. Мы оставили верстку у каждого свою, а вынесли только бизнес логику) В итоге CSS Modules был на вебе, и очень похоже хранили стили на RN рядом с компонентом)
@@it-sin9k На RN очень удобно делать переопределение стилей извне (потому что они а-ля инлайн стили веба), а как это делать на CSS Modules - инлайн стилями?
Спасибо за видео! Смотреть гораздо интереснее, чем саму конфу. Стоит сделать звук перехода между анимированным аватаром и фото с конфы тише и менее навязчивым.
Офигеть, RN Frameworks... Надеюсь, они не затащат туда SSR с серверными компонентами😅 <10 seconds later> - АйтиСиняк: "...писать серверный код прямо внутри RN приложения..." - Я: "Где там моя ракушка? Меня это пугает" и одновременно "Всё, теперь надо срочно запилить пет на RN!"
ахахах) да) противоречивость наше все) новое и пугает и вдохновляет одновременно) я сам честно говоря не знаю, как теперь начинать новые проект, если кто спросит рекомендацию)
