- 118
- 709 805
Евгений Паромов | Front-end
เข้าร่วมเมื่อ 16 ก.พ. 2016
a8ae1dfb-f88a-4b89-8776-efdcb4c80c2c
Fullstack разработка с нуля на Next 15, React 19, FSD, Prisma, RabbitMQ
Подробнее о сообществе:
paromovevg.ru/evolution-community
Карта контента:
evocomm.space/map
Мой telegram канал:
t.me/cleanfrontend
Исходники:
github.com/EvgenyParomov/tik-tak-toe-online-next
В этом видео мы с нуля разработаем игру крестики нолики онлайн.
С поддержкой, регистрации и авторизации, подписки на список игр.
Всё это будем писать использованием FSD подобной архитектуры
00:00:00 - 0 Введение
00:04:57 - 1 Next.js на конец 2024
00:07:35 - 2 Сетап проекта. Архитектура и shadcn
00:18:11 - 3 Поднимаем базу данных
00:37:03 - 4 prettier
00:38:17 - 5 Модель игры вывода списка игр
01:42:55 - 6 Создание игры
02:39:27 - 7 Вёрстка страниц входа и регистрации
03:07:06 - 8 Реализации логики регистрации и входа
04:24:58 - 9 Ограничение доступа
04:37:57 - 10 Вёрстка игры
05:10:40 - 11 Используем Server sent events с Next
05:41:17 - 12 Получение игры через SSE (Server sent events)
05:55:00 - 13 Заменяем строки на routes
06:04:17 - 14 Делаем старт игры
06:32:14 - 15 подключаемся к RabbitMQ
06:42:13 - 16 Вот зачем нужен репозиторий. Меняем структуру хранения игрока
07:06:15 - 17 Завершение игры на отключение
07:20:04 - 18 Логика хода
07:48:42 - 19 Оптимистичный ход
08:03:26 - 20 Прослушивание списка игр
08:30:42 - 21 Выводы
paromovevg.ru/evolution-community
Карта контента:
evocomm.space/map
Мой telegram канал:
t.me/cleanfrontend
Исходники:
github.com/EvgenyParomov/tik-tak-toe-online-next
В этом видео мы с нуля разработаем игру крестики нолики онлайн.
С поддержкой, регистрации и авторизации, подписки на список игр.
Всё это будем писать использованием FSD подобной архитектуры
00:00:00 - 0 Введение
00:04:57 - 1 Next.js на конец 2024
00:07:35 - 2 Сетап проекта. Архитектура и shadcn
00:18:11 - 3 Поднимаем базу данных
00:37:03 - 4 prettier
00:38:17 - 5 Модель игры вывода списка игр
01:42:55 - 6 Создание игры
02:39:27 - 7 Вёрстка страниц входа и регистрации
03:07:06 - 8 Реализации логики регистрации и входа
04:24:58 - 9 Ограничение доступа
04:37:57 - 10 Вёрстка игры
05:10:40 - 11 Используем Server sent events с Next
05:41:17 - 12 Получение игры через SSE (Server sent events)
05:55:00 - 13 Заменяем строки на routes
06:04:17 - 14 Делаем старт игры
06:32:14 - 15 подключаемся к RabbitMQ
06:42:13 - 16 Вот зачем нужен репозиторий. Меняем структуру хранения игрока
07:06:15 - 17 Завершение игры на отключение
07:20:04 - 18 Логика хода
07:48:42 - 19 Оптимистичный ход
08:03:26 - 20 Прослушивание списка игр
08:30:42 - 21 Выводы
มุมมอง: 4 339
วีดีโอ
Что учить, чтобы стать КРУТЫМ разработчиком
มุมมอง 4.1Kวันที่ผ่านมา
Подробнее о сообществе: paromovevg.ru/evolution-community Карта контента: evocomm.space/map Мой telegram канал: t.me/cleanfrontend Расскажу, какие ошибки делают люди при обучении программированию. И как научиться писать "поддерживаемый" код
Tanstack query (react-query) полный курс 2024
มุมมอง 13Kหลายเดือนก่อน
Подробнее о сообществе: paromovevg.ru/evolution-community Карта контента: evocomm.space/map Мой telegram канал: t.me/cleanfrontend Исходники: github.com/EvgenyParomov/tanstack-query-course Это самый полный курс по tanstack query на русскоязычном youtube. В этом видео мы разберём: Как делать запросы, пагинацию, infinity scroll, optimistic update, обновлять после мутаций, как интегрировать с Redu...
Selfhosted замена Vercel | Деплой React/Express приложения на VPS
มุมมอง 2.7Kหลายเดือนก่อน
Подробнее о сообществе: paromovevg.ru/evolution-community Карта контента: evocomm.space/map Мой telegram канал: t.me/cleanfrontend В этом видео мы задеплоим на VPS простое приложение состоящее из Express сервера и клиента на React. Посмотрим как с помощью coolify можно сделать тестовый деплой на pull request и деплой на пуш в main с помощью пары кликов мышью
React, Typescript | Senior комментирует 3 реализации todo-list
มุมมอง 3.9K2 หลายเดือนก่อน
Подробнее о сообществе: paromovevg.ru/evolution-community Мой telegram канал: t.me/cleanfrontend В этом видео я посмотрю 3 реализации тудулиста от junior и middle разработчиков. И прокомментирую основные моменты, как можно было сделать лучше. Это видео мы записали с ребятами из сообщества 📗evolution-community.
Архитектура на паттернах FSD | Пробуем evolution-design linter
มุมมอง 2.8K2 หลายเดือนก่อน
Следи за развитием проекта evolution design: github.com/ep-community/evolution-design Инструмент находится в альфе. Будем рады любым issues Вступить в сообщество: paromovevg.ru/evolution-community Мой telegram канал: t.me/cleanfrontend Не хочется использовать все слои fsd, но хочется использовать линтер архитектурных правил? Смотри пример, как evolution-desing linter может тебе помочь)
Почему FSD/SOLID/ООП не работает? Как писать хороший код?
มุมมอง 6K2 หลายเดือนก่อน
Следи за развитием проекта evolution design: github.com/ep-community/evolution-design Вступить в сообщество: paromovevg.ru/evolution-community Мой telegram канал: t.me/cleanfrontend В этом видео поговорим о том, почему стандартные правила "хорошего" кода, очень часто приводят не туда. Выбрал FSD и зашёл не в ту дверь И как я предлагаю решить эту проблему
Правильная интеграция React query + Mobx | Объединяй, а не выбирай
มุมมอง 3.2K2 หลายเดือนก่อน
Исходники урока в моём сообществе t.me/welcome_paromovevg_bot Мой telegram канал: t.me/cleanfrontend В этом видео мы рассмотрим лучшую интеграцию двух мощных стейт менеджеров. react-query и mobx. Их можно и нужно интегрировать вместе. И здесь я покажу самый удобный и правильный способ это делать
Скажи НЕТ власти бэкендеров | Пишем swagger сами | Лучший процесс работы с REST API
มุมมอง 7K3 หลายเดือนก่อน
Мой telegram канал: t.me/cleanfrontend Miro с полезными ссылками и код снипетами: miro.com/app/board/uXjVKxoy3aM=/?share_link_id=758895689263 Исходники: github.com/EvgenyParomov/api-first В этом видео мы посмотрим на практике самый удобный процесс разработки приложений с REST API. Сначала мы напишем Open API (Swagger) схему руками, с использованием swagger editror Потом мы сгенерируем client на...
3 Главные Проблемы Redux и их решения | Продвинутый полный курс | Часть 3
มุมมอง 4.7K4 หลายเดือนก่อน
Курс по Архитектуре Redux paromovevg.ru/redux-architecture 🙂 Курс по FSD paromovevg.ru/courses/fsd 🙂 Исходники: github.com/EvgenyParomov/redux-fundamental/tree/video-3 Мой telegram канал: t.me/cleanfrontend Это третья заключительная часть моего фундаментального курса по Redux. В ней мы изучим самые болезненные части Redux и научимся их исправлять. Посмотрим как делать модульный Redux, как выстр...
Правила быстрого обучения, которые ТЕБЕ НЕ ПОНРАВЯТСЯ
มุมมอง 9K4 หลายเดือนก่อน
По менторингу пиши сюда: t.me/paromovevg Мой telegram канал: t.me/cleanfrontend Мои курсы: micro-courses.ru/map В этом видео я расскажу тебе секрет быстрого развития. Да, это будет не просто. Но будет быстро)
RTK Query, Thunk, createAsyncThunk | Продвинутый полный курс | Часть 2
มุมมอง 12K5 หลายเดือนก่อน
Мое сообщество evolution community: paromovevg.ru/evolution-community Курс по Redux доступен в сообществе Исходники: github.com/EvgenyParomov/redux-fundamental/tree/video-2 Мой telegram канал: t.me/cleanfrontend Это вторая часть моего фундаментального курса по Redux. В ней мы рассмотрим основные способы работы в API в Redux. Начнём от самых основ и проследим эволюцию работы с API в Redux. 00:00...
Redux + Redux Toolkit | Продвинутый полный курс | Часть 1
มุมมอง 37K5 หลายเดือนก่อน
Мое сообщество evolution community: paromovevg.ru/evolution-community Курс по Redux доступен в сообществе Исходники: github.com/EvgenyParomov/redux-fundamental/tree/video-1 Мой telegram канал: t.me/cleanfrontend Это первая часть моего фундаментального курса по Redux. В ней мы с нуля разберём базовые концепции Redux и Redux-toolkit, и дойдём до концепции slice. По пути изучим основы архитектуры ...
Full-stack билдер Админки за 2.5 часа | Next.js | Drizzle | shadcn
มุมมอง 8K6 หลายเดือนก่อน
Реализуем генерацию на основе схемы: - Структуру базы - Миграции - Серверные экшоны - Интерфейс админки Подписывайтесь на мой telegram канал: t.me/cleanfrontend Моя библиотека Tiny Invert: www.npmjs.com/package/tiny-invert Курсы: Redux - micro-courses.ru/course/redux... FSD - micro-courses.ru/course/fsd-full 00:02:33 - Инициализация проекта 00:09:46 - Структура билдера 00:27:34 - Генерация схем...
Dependency Inversion - главный инструмент Архитектора
มุมมอง 6K6 หลายเดือนก่อน
Что такое Dependency Inversion Примеры реализации Почему, ты обязан понимать DI Подписывайтесь на мой telegram канал: t.me/cleanfrontend Моя библиотека Tiny Invert: www.npmjs.com/package/tiny-invert Курсы: Redux - micro-courses.ru/course/redux-architecture FSD - micro-courses.ru/course/fsd-full 00:00:26 - Что такое DI 00:03:20 - Пример реализации DI 00:10:35 - Зачем нужен DI 00:16:52 - Почему т...
Как Zod лечит РОДОВУЮ травму Typescript
มุมมอง 7K8 หลายเดือนก่อน
Как Zod лечит РОДОВУЮ травму Typescript
Мощная CMS на Next.js 14, yaml, json-schema, mdx и git
มุมมอง 7K9 หลายเดือนก่อน
Мощная CMS на Next.js 14, yaml, json-schema, mdx и git
Авторизация и профиль на Next.js | server actions, OAuth, отправка email, s3, тёмная тема
มุมมอง 18K10 หลายเดือนก่อน
Авторизация и профиль на Next.js | server actions, OAuth, отправка email, s3, тёмная тема
Next.js setup: Деплой на VPS | Jest | Playwright | CI/CD | Sentry
มุมมอง 33K11 หลายเดือนก่อน
Next.js setup: Деплой на VPS | Jest | Playwright | CI/CD | Sentry
React Todo list с P2P синхронизацией на Yjs и WebRTC
มุมมอง 2.8Kปีที่แล้ว
React Todo list с P2P синхронизацией на Yjs и WebRTC
Разбираем частый вопрос учеников | event loop
มุมมอง 2.7Kปีที่แล้ว
Разбираем частый вопрос учеников | event loop
Весь современный стек в одном видео! | Блок сайт на Nest.js, Next.js и FSD
มุมมอง 48Kปีที่แล้ว
Весь современный стек в одном видео! | Блок сайт на Nest.js, Next.js и FSD
Как использовать useDeferredValue и useQuery вместе. Показываю на практике
มุมมอง 2.6Kปีที่แล้ว
Как использовать useDeferredValue и useQuery вместе. Показываю на практике
Zod: Защищаем приложение от пользователя и нерадивых бекендеров
มุมมอง 4.9Kปีที่แล้ว
Zod: Защищаем приложение от пользователя и нерадивых бекендеров
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!
มุมมอง 2.4Kปีที่แล้ว
Как не страдать, когда пришёл заказчик | OCP самый главный принцип SOLID!
Куда положить типы? Простые советы | При чём здесь DDD
มุมมอง 3.1Kปีที่แล้ว
Куда положить типы? Простые советы | При чём здесь DDD
connect лучше useSelector. Почему connect более SOLID ное решение. (Объясняю на примерах)
มุมมอง 1.5Kปีที่แล้ว
connect лучше useSelector. Почему connect более SOLID ное решение. (Объясняю на примерах)
Когда DRY не работает! Копируй по SOLID (Показываю на примере)
มุมมอง 1.7Kปีที่แล้ว
Когда DRY не работает! Копируй по SOLID (Показываю на примере)
супер приложение спасибо
Евгений, поздравляю с закрытием гештальта по курсу крестики-нолики🎉😅
Подскажите что делать, если после перезапуска контейнеров strapi удаляет все таблицы из БД? то есть все созданные content types и components до этого удаляются..
На первый взгляд очень хорошо , послезавтра точно скажу))
объяснение на высочайшем уровне. спасибо за твой труд, Жень!
мне курс очень понравился, спасибо большое. но в 8:04 это че за бредятина?) проверяем, как работает написанный код, и Женя показывается вообще уже новый код, который даже не был в видео. откуда взялся getCellIsWinner? Откуда toggleCell??? некоторые данные заменились другими) у меня лично код написан 1в1, но сами клеточки не закрашиваются значками X и О. Почему об этом никто не написал?)) У всех все работает, хотя код изменился неожиданным образом перед самой проверкой ахах
Все не смотрел, но классная подача и контент! Успехов
Женяяя,, у тебя там в миро эффектор, курс по нему тоже пишешь? Этот видос топ, с удовольствием посмотрел весь на проекторе под вечер, вместо анимэ
Я не знаю. Иметь Женю в ютубе и не научиться программировать - это надо постараться. Отличная подача и просто клад информации. Как успевать все схавать, непонятно, но будем! Спасибо!
Классное видео. А ты фуллстак разработчик?
Лучший! Спасибо тебе! Очень крутой материал. Просмотрел на одном дыхании, но однозначно будет пересмотрен ни раз! Продолжай 🎉
Огонь! Евгений, а с какого года вообще прогать начал? Интересно🤔
Женя спасибо большое за твой труд, твой канал определенно топ 1 в контексте фронт разработки, ну просто нигде нету такого материала, такого глубокого раскрытия важных тем, особенно архитектурных. Желаю удачи в продвижении канала и во всех начинаниях.
Лучший ментор на Ютубе <3
один из лучших каналов по next/react и в целом ФРОНТУ. западное коммунити такой калич пишут, обмажутся библиотеками, и показывают это в массы, и получается кучка недопрогеров которые не понимают элементарных вещей в построении и логике работы приложений, а Евгений прям элегантно всё делает и без лишних пакетов и тд, если сталивается с ошибкой - показывает как он её решает. затрагивает какие-то смежные темы(.env, npx и какие-то термины, работа с авторизацией и т.д.) я сам вьюшник, но всегда интересуюсь смежными либами и фрейморками и подчёрпываю какие-то реально годные советы по проектированию и т.д. и т.п. респект Евгений, успехов
То ли дело наше комьюнити, которое продвигает мусор типа Effector и FSD))
Бэк призма звучит смешно))
Лучший. Спасибо!
зашел на 5 минут видосик посмотреть так сказать...
Не LaranaJS?(
8:45 Будь здоров!
а плейлист по крестикам ноликам уже не актуален?
Ошибка в ссылке на исходники
Чуть позже поправлю
Поправил!
Спасибо, Женя!
еще не смотрел, но сразу лайк, это же Евгений Паромов )
Это просто праздник какой-то! 🎉🎊🎈
Вот на заставке в точности мое лицо когда увидел. Очень круто, безмерная благодарность!
Как курс по архитектуре досмотрю, то обязательно вернусь к этому видео. Спасибо за такой труд
Привет. Вопрос по "перекладыванию данных из одного стейт менеджера в другой" . А как тогда правильно поступать в ситуации: 1) На странице приложения есть форма 2) Значения полей и доступность полей для редактирования приходят с бэкенда. То есть при определенных условиях то одни поля доступны для редактирования, то другие. 3) При редактировании полей, происходят какие-то сайд эффекты (например запросы на бэк для сёрч хелпа) - то есть требуется контролировать изменение полей. 4) Отправка на бэкенд измененной формы происходит по клику на кнопку На первый взгляд кажется, что при получении данных из tanstackQuery требуется переместить их в локальное состояние компонента, ну либо в условный redux. А потом уже отслеживать изменения при редактировании для вызова различных сайд эффектов. А как пользователь нажал на кнопку "сохранить" - уже использовать мутацию, с последующей инвалидацией. Но получается, что такой подход неверен?
Да, по опыту такой подход вызывает много проблем и багов. Я пришёл к подходу когда в tanstack хронятся только дефолтные значения полей. Когда пользователь что то вводит то это записывается в локальное состояние и в поле уже это значение отображается На сабмит мерджим дефолты с введёнными значениями и отправляем на бек Такой подход очень стабильный, и в нём максимум контроля
@@paromovevg Интересно.. Надо подумать в эту сторону. Спасибо за ответ!
Есть у кого рекомандации или статьи по правильной декомпозиции кода компонентов в React не на примере простейшего todo list ? Допустим, у нас есть страница пользователя UserPage которая внутри использует много компонентом которые и не зависят друг от друга и зависят, требующих управления состоянием, обработка кликов и изменения состояний по типу handleClick, toggle, переключатели, selects, фильтры, check-функции и так далее, а также нам нужно получать данные для этой страницы. Стоит ли создавать несколько отдельных кастомных хуков (например, useCustomHooks) для каждой логики и разделять если по сути она нудна только для конкретной страницы? Такой подход может показаться излишним в некоторых случаях и, вместо упрощения компонента, приводит к чрезмерному использованию кастомных хуков. Или стоит создать один хук, скажем useUsers, который будет обрабатывать и получение данных, и фильтрации и управление состоянием в одном хуке и уже с useUsers всякие фильтры\данные будем передавать в дочерние компоненты? Или же наоборот делать всю логику по типу useFilters, useFetch и так далее ? Тогда постает вопрос , а можно ли использовать кастомные хуки внутри других кастомных хуков? Так же, второе что действительно интересует, какая правильная реализация поиска в каком-то небольшом интернет-магазине? Что имею ввиду, допустим у нас есть страница с телефонами, внутри страницы у нас есть поиск с debounce где собственно делаем поиск и запрос к API получая данные с url и после получения нужных данных меняем UI, или же функкционал поиска должен находится допустим в Header на уровне Layout и переиспользуем Layout с поиском на каждей страницы где он нужен и где у нас будет состояние поиска которое мы будем передавать и в Layout для визуального отображения и в кастомный хук для получения новых данных или фильтрации. В чем вообще или есть ли отличие таких подходов?
Декомпозировать нужно когда нужно. То есть когда количество логики становится слишком большим. В зависимости от ситуации все варианты которые ты описал могут использоваться, более того даже все вместе. Кастомные хуки не гнушайся делать. Используй сколько хочешь и друг из друга спокойно. Как раз в курсе первом в сообществе прям пример декомпозиции по твоему кейсу есть
Вот слушаю твои истории когда джуеом был, и понимаю что у меня что-то не так, поставили самого на проект, да ещё и задачу дали явно не уровня джуна а какого-то мидл разраб, даже особо спросить у кого-то нету возможности, тем более ещё и изучаю реакт (до этого был на трейни на ангуляре) Что делать я не понимаю
Удалил редух, скопировал весь проект в App.js, щас норм.
смотрю это видео сразу после обзора useMemo useRef useCallback и react.memo, настрой такой... боевой, а тут начало видео такая музыка медитирующая, пхпхп, в общем забавно) и спасибо за контент! на самом деле выделила для себя пару человек которые хорошо объясняют, но в первую очередь стараюсь найти материал у вас
Странно что так мало лайков. Видимо не понимают люди насколько ценный материал тут изложен плюс отфильтрованный через собственный опыт автора! Евгений силен конечно :)
как-то мало видео осталось, как будто курс не закончен(, надеюсь хоть мультиплеер успеем сделать.
А обязательно создавать организацию в гитхабе?
круто придумано и выглядит довольно просто в использовании
вау, действительно спасибо, я много чего пыталась смотреть, но понимала, что там какое-то мыло и выключала, у вас в начале действительно было немного сложно, я раз 7 перемотала все послушала и посмотрела( ну у меня еще внимание рассеянное) но к концу я все полностью поняла и в целом даже наверное теперь понимаю жизненный цикл юзэффектов
Насчёт chatGPT не совсем согласен, это в первую очередь инструмент, собственно его и надо использовать как инстрмент, не будем же мы молотком яму копать?) Естественно если ты просто скинул ему код, сделай мне то и другое, он возмоно (смотря как ты описал задачу) сделает все правильно, но если ты сам потом не будешь разбираться как он это сделал и почему именно так оно работает, то да, это тебе только навредит. Я в своё время таким образом стал лучше (намного) понимать ангуляр имея только базовое понимание как он работает. Вывод, используйте chatGPT но только с таким подходом, иначе ничего не будете знать, если у вас кто-то попросит обьяснить то что скажете, chatGPT так сказал сделать?) А я пока пошел искать лопату xD
Жаваскрипт фронтендеры обсуждают архитектуру и бизнес логику на примере туду-листа. Буквально самое смешное, что я видел за последний год)))
расскажите, какие перспективы у rust в вебе
thank's a lot
signal видел, а как с этим работать и для чего не понятно. И не кто про это не рассказывал. Спасибо!
Класс
В первых видео Евгений говорит, что самое главное чтобы код был читаем. В этом видео бац: result &&= cells[indexes[i]] === cells[indexes[i - 1]]; И читай это как хочешь :)
А зачем ты ищешь влево от найденного символа? Ты циклом идёшь слева направо. Всегда! На примере поиска последовательности горизонтальной, ты всегда первый крестик найдёшь самый левый из последовательности. Значит тебе нужно проверить есть ли СПАВА от него ещё 4 крестика. То есть sequencesSize-1 штук. Всё профит! Зачем ты переусложнил это действие проверяя слева и справа от найденного? Кроме того, что ты бeдешь делать, если sequencesSize нужен чётный? К примеру 4 в ряд. Тогда там просто физически отсутсвует центральный элемент и твой алгоритм перестаёт работать, а значит не является алгоритмом в общем случае. Ну этот алгоритм глючит. Он не видит края поля. Если поставить 3 крестика в конце первой строки а потом 2 крестика в начале второй строки, то фактически 5 в ряд не будет, но алгоритм решит что будет.
Ну кстати, а нельзя ли прописать через дот нотацию все actions, которые могут быть переданы в чилды карточки? Такая же композиция
очень рад что всё же решил посмотреть нашёл ответы на вопросы о которых сам раньше задумывался, но бросил это дело, потому-что моё решение выглядело уродливо "как бы нам всё ещё использовать RTK-Query, но при этом писать код не внутри компонента, а именно в коде стора"
сделай по вью видос базовый хоть, по архитектуре
мы называем это "make it work, make it right"
Крутой разработчик - это не про "что учить", а про опыт в бигтехе. В аутсорсе только время потеряете, про веб-студии и фриланс вообще молчу. В нынешних реалиях способность писать работоспособный код - это максимум trainee, junior уже должен хорошо знать архитектуру и сразу выдавать качественный код. И да, автор говорит про некие 3 года для сениора - большинство после 3х лет даже на миддла не тянут.
Это ваше мнение, и ваша оценка грейдов Я слышал много историй, как человек в бигтехе стал просто "винтиком" и без развития делает тасочки из джиры, по лекалам, без возможности научиться принимать хоть маломальски серьёзные решения Я бы не стал так обобщать