![senior_zone](/img/default-banner.jpg)
- 14
- 50 461
senior_zone
Приєднався 7 гру 2022
telegram - t.me/senior_zone
Поддержать канал - boosty.to/senior_frontend
Поддержать канал - boosty.to/senior_frontend
React 19. Новые формы и actions на практике. Обзор нововведений
В этом видео мы рассмотрим React 19 RC. На практике разберемся с новыми хуками - useActionState, useFormStatus и useOptimistic и устно пробежимся по остальным нововведениям, таким как прокидывание ref в качестве пропса, React.use API и др.
Telegram - t.me/senior_zone
00:00 - О чем это видео
00:34 - Формы и actions
01:36 - Код примера
02:55 - useActionState
05:43 - useFormStatus
07:57 - useOptimistic
13:41 - Прочие обновления
14:02 - React.use
16:01 - Server Components, Server Actions
16:10 - Ref as a prop
16:50 - hydration errors
16:55 - Context as a Provider
17:36 - useDeferredValue
17:46 - meta, style, scripts
18:07 - preload api
18:19 - errors
18:35 - custom elements
19:08 - итоги
Telegram - t.me/senior_zone
00:00 - О чем это видео
00:34 - Формы и actions
01:36 - Код примера
02:55 - useActionState
05:43 - useFormStatus
07:57 - useOptimistic
13:41 - Прочие обновления
14:02 - React.use
16:01 - Server Components, Server Actions
16:10 - Ref as a prop
16:50 - hydration errors
16:55 - Context as a Provider
17:36 - useDeferredValue
17:46 - meta, style, scripts
18:07 - preload api
18:19 - errors
18:35 - custom elements
19:08 - итоги
Переглядів: 800
Відео
Next 15 - обзор новой версии за 13 минут.
Переглядів 8212 місяці тому
В этом видео мы разберем все нововведения и "quality of life improvement" из нового анонса Release Candidate Next 15. Telegram - t.me/senior_zone 00:00 - О чем это видео 00:46 - Список нововведений 01:05 - Release Candidate 01:42 - React Compiler 03:52 - Hydration Errors 05:18 - Caching 07:44 - Partial Pre-Rendering 08:38 - next/after 10:03 - create-next-app, Turbopack 11:42 - external packages...
Аутентификация. Сессии и JWT
Переглядів 9 тис.6 місяців тому
В этом видео мы разберем, чем аутентификация отличается от авторизации и на практике освоим 2 самых известных подхода к их имплементации. Telegram - t.me/senior_zone 00:00 - Почему это важно понимать 01:00 - Чем авторизация отличается от аутентификации? 01:45 - Регистрация 02:05 - Аутентификация 02:34 - Авторизация 03:08 - Логинизация 03:48 - Сессии / Токены 04:05 - Сессионый подход 05:41 - Сес...
Unknown, any и never в TypeScript простыми словами.
Переглядів 1,5 тис.9 місяців тому
В этом видео постараюсь просто и доступно объяснить в чем отличие между unknown и never, ради каких целей они задумывались и какие задачи решают. А также рассмотреть тип never и практический способ его применения. Telegram - t.me/senior_zone 00:00 - Почему эти типы вызывают проблемы 00:39 - Определение any 01:33 - Определение unknown 01:55 - "Сужение" типов 02:35 - Определение never 03:20 - Пра...
Generics и Utility Types. Продвинутая база TypeScript.
Переглядів 1,3 тис.9 місяців тому
В этом видео мы рассмотрим базовые конструкции по динамическому взаимодействию с типами - Generic'ами и Utility типами. Поймем, как они работают, для чего применяются и познакомимся с интересными, практическими примерами. Telegram - t.me/senior_zone 00:00 - О чем будем говорить 00:28 - Что такое Generics и зачем они нужны 03:00 - Generics. Пример 2 04:03 - Generics. Пример 3 06:55 - Utility тип...
Инициализация состояния на фронтенде. Практика рефакторинга.
Переглядів 3,4 тис.10 місяців тому
Всем привет. В этом видео мы порассуждаем на тему "Как все-таки правильно инициализировать состояние во фронтенд приложении?" на примере React. Я продемонстрирую распространенную ошибку (на мой взгляд), объясню почему я считаю такой подход неверным и приведу более удачные примеры. Код из урока - github.com/senior-frontend/thoughts_init-state Telegram - t.me/senior_zone 00:00 - Что именно я счит...
Next.js 13 App Router - базовый курс за 40 минут.
Переглядів 4,4 тис.Рік тому
В этом видео мы рассмотрим все основные нововведения Next.js 13.4 App Router, их особенности и правила применения. Код из урока - github.com/senior-frontend/next-app-router Серверные компоненты - ua-cam.com/video/0gaXP88yvPc/v-deo.html Telegram - t.me/senior_zone 00:00 - О чем это видео 00:46 - Чем хорош Next.js 02:12 - Инициализация проекта 02:49 - Знакомство со структурой проекта 03:31 - Ч1: ...
React Server Components - разбираемся за 10 минут.
Переглядів 5 тис.Рік тому
В этом видео мы с вами разберем, что такое серверные компоненты, зачем они нужны и чем отличаются от других подходов к разработке гибридных веб-приложений. Код из урока - vercel.com/templates/next.js/react-server-components Полезные материалы: • frendyguo.me/server-component-the-react-way-to-ssr • www.thearmchaircritic.org/mansplainings/react-server-components-vs-server-side-rendering Telegram ...
useState в React. Прикладные нюансы и детали
Переглядів 1,9 тис.Рік тому
Подробно рассмотрим хук useState и нюансы его применения. Код из урока - github.com/senior-frontend/useState Telegram - t.me/senior_zone 00:00 - Почему useState опасен 01:25 - Зачем нужно состояние 03:09 - Нюанс №1 - логирование состояния 05:08 - Нюанс №2 - updater function 07:44 - Нюанс №3 - работа с предыдущим состоянием 09:18 - Батчинг 10:44 - flushSync 11:39 - Итоги
Контекст в React. useContext и вложенные Context.Provider
Переглядів 3 тис.Рік тому
Разберемся что такое prop drilling и как это фиксить, узнаем как работает контекст в React и как избежать лишних ререндеров при его использовании. Код из урока - github.com/senior-frontend/useContext Telegram - t.me/snr_fullstack 00:00 - Анонс последней темы в рамках серии React Hooks 00:33 - Prop Drilling 00:52 - Знакомство с кодом примера без использования контекста 02:39 - Почему Prop Drilli...
useEffect в React. Исправляем частую ошибку
Переглядів 9 тис.Рік тому
В этом видео мы рассмотрим хуки useEffect и useLayoutEffect, разберем их отличия, а также ознакомимся с очень распространенной ошибкой, которая может привести к race conditions и способами ее исправления Telegram - t.me/snr_fullstack 00:00 - Почему важно понимать useEffect 00:45 - Что такое useEffect 03:00 - Сноска про batching 03:45 - fetch запрос внутри useEffect 05:28 - cleanup функция 08:40...
Параллелизм в React. Новые хуки useTransition и useDeferredValue
Переглядів 2,2 тис.Рік тому
Рассмотрим новый механизм Concurrency в React 18 и новые хуки, позволяющие с ним работать. Как всегда, разберем все на примерах. Telegram - t.me/snr_fullstack 00:00 - Concurrent React 00:59 - хук useTransition 03:18 - startTransition 04:49 - isPending 05:29 - нюансы useTransition 06:38 - хук useDeferredValue 09:16 - Итоги
useRef в React. Сохраняем значение между ререндерами
Переглядів 1,8 тис.Рік тому
В этом видео мы разберем как работает хук useRef, узнаем его особенности и кейсы применения. Telegram - t.me/snr_fullstack 00:00 - Введение 00:41 - Сохранение ссылки на html-елемент 01:55 - Особенности useRef 02:38 - Сохранение примитива в useRef, ререндеринг 05:00 - Реальный кейс, сохранение предыдущего значения state
Мемоизация в React. Хуки useMemo, useCallback
Переглядів 6 тис.Рік тому
В этом видео мы разберем принципы мемоизации, ситуации, в которых она применяется и возможности React в виде хуков useMemo и useCallback Telegram - t.me/snr_fullstack 00:00 О мемоизации 00:43 useMemo 06:31 useCallback
когда ждать видео по OAuth и OIDC ? тема супер интересная, особенно если сделать пример через google
Вопросы, которые у меня были, здесь прекрасно освещены! С примерами. Спасибо!
Автор, вернись. Пора!
Добрый день! Скажите, пожалуйста, будет ли продолжение данной серии уроков? Очень интересная тема с вашей подачей.
Очень круто, но обещанного следующего видео нет на канале
Авторизация по JWT не насколько уж и не безопасна. У JWT имеется payload, в котором находится JTI (уникальный идентификатор токена). Ничто не мешает хранить JTI в БД, после чего смотреть имеется ли данный JTI в БД.
Супер! Осталось только применить на практике.
Годный контент, спасибо 🤝
👍👍
а если юзер пароль сменит, токен не инвалидируется?
💅
Супер! Лучшее объяснение новых фич!
Круто, в фронтенде придумали глобалы
хорошо, но масштаб текста\кода лучше увеличить - очень мелко
Хм, уже слышал это замечание, так что в VSCode использовался 16 фонт сайз, в приложении вообще 48й. Про сам блог-пост не подумал, там мб действительно мелко. Или даже код в редакторе сложно разглядеть было?
@@senior_zone в браузере ещё норм, а в редакторе, на мой взгляд, лучше на пару шагов увеличить шрифт
Наверное, лучший разбор React 19: доступные примеры, отсутствие воды 👍
✊🏼🔝
Спасибо за видео, осталось найти время перевести проект с 16.8 реакта :D
17:02 ua-cam.com/video/nuQDEdh1a1E/v-deo.html 😅
У тебя отличный контент, детально разбираешь процесс того, что происходит, а главное доходчиво. Спасибо.
Это лучшее объяснение, что я видел. Подписка
тоесть только в 15 версии реализовали БАЗОВУЮ функциональность, которую обязан реализовывать любой фронтенд фреймворк. возникает вопрос. а для чего нужны были все предыдущие версии ?? корректная перерисовка DOM была реализована еще 10 лет назад во Vue 2.
Было бы полезно увидеть видео о том какие задачи можно/нужно возлагать на бэкенд некста, а какие нужно разрабатывать в рамках большого бэкенда, к примеру на несте. Прост у меня кроме как ssr, а так же какие то доступы к сторонним сервисам и проксирования некоторых запросов на большой бэк больше ничего не приходит в голову. Хотелось бы услышать твоё мнение как правильно готовить эту прослойку. Есть библиотеки для авторизации для некстового сервера, есть призма. А зачем это всё есть, не очень понятно) Некстовый сервак явно не способен заменить полноценный бэк.
Не часто пишу комментарии Но тут захотелось сказать спасибо за твое видео!
В 14 next (AppRouter) меня сильно возмутило что дев сборка и прод сборка неконсистентны. Разработал в дев режиме большой функционал, а чтобы удачно собралось в билд, пришлось половину закомментить в моменте чтобы просто запустить. Поэтому и желания пока что писать на Next не особо много. Хотя плюсы перекрывают все минусы в некоторых ситуациях.
Не прошло и три года, с возвращением)
Спасибо за обзор! Наконец-то ты вернулся)
Лучшее объяснение про виды аутентификации из того, что я видел. Маленькая поправка - base64 это про кодирование, а не шифрование. То что закодировано с помощью base64 любой сможет раскодировать.
Легенда!!
ты супер красавчик! Жду новых видосов.
Супер! Локанично, с примером, всё по делу. Когда следующее видео?
Скоро) Работа и жизнь последние 2 месяца встали впереди канала, но теперь скоро
Спасибо!!
и когда же новое видео ?? о_О
Пересмотрела кучу видео на эту тему. Только после этого стало понятно 👍
Где взять код из видео?
Красава, молодец, все понятно. Умеешь. Могёшь)))
Спасибо большое
гений. спасибо с useLayoutEffect
17:25 рекомендую в случае фейла авторизации запросов всё-таки использовать 403 код. 401 это для ошибки аутентификации.
21:00 я бы еще добавил, что если произойдёт утечка секрета, тогда вся система авторизации станет разоблачена, т.е. любой пользователь сможет сам клепать себе токены и сервер никак не сможет на это повлиять (unless сервер вайпнет секрет и как следствие все токены выданные до станут невалидными). В случае с сессиями, если произошла утечка конкретной сессии, то угроза значительно меньше потому что это касается только одного конкретного пользователя + как ты и сказал, её можно удалить на сервере. Спасибо за видео, очень структурирована и полезно!
Спасибо за отличное изложение темы, четко и без лишней воды! Сразу все улеглось в голове в четкую схему 👍
Очень качественное изложение. Не все преподаватели способны так детально и интересно подать материал. Вопрос, что лучше, сессии или токен возник еще на 10 минуте. И я был счастлив, что автор этот ГЛАВНЫЙ вопрос предусмотрел. Уважение ❤
если в бд миллион сессий, то достаточно её проиндексировать бинарным деревом и вуаля, проблема с сессиями решена ведь сложность бин поиска O(n) = log n. и добавлять сессии в такую бд тоже легко, потому что это бинарное дерево. остаётся только поворачивать дерево раз в час и никаких проблем с производительностью.
Нифига ты. Не пробовал устроиться в Reddit?
@@coryphoenixxx8238 что не так ?
А разве проблема именно в этом? Проблема ведь в памяти. Столько сессий хранить.
@@vladimircreator хранить миллиард сессий стоит копейки
@@404Negative я и не спорю. Просто речь не о производительности шла же
как делать авторизацию без пароля ? именно с подтверждением емейла по коду из почты - это сейчас самый надежный вариант, но каким образом это использовать пока пытаюсь узнать
жаль что реализация не на nest js
Супер подача материала! Жаль так редко новые темы.
Много работы сейчас. Стараюсь разгрузиться, чтобы почаще видео выпускать
14:00 - ошибка. Алгоритм шифрования для JWT-токена можно выбирать HMAC, RSA, RSA-PSS, ECDSA с хеш-функцией SHA-256/384/512. Base64 - не шифрование, а формат кодирования. Формат шифрования можно не указывать в заголовках токена
Самый лучший ролик в ру сегменте по теме нового Next
Один из лучших каналов, все максимально понятно ! Большое спасибо 🙏
Отличная тема, жаль только за кадром остался вопрос безопасности, но наверное тогда бы ролик занял в два раза больше времени
Отличное видео: всё по полочкам. Хоть стал понимать, что за JWT мне тут на новой работе подпихивают ))))) Спасибо. Лайк-подписка ;-)