Всем привет! Мы — Алекс и Алёна делаем видеоподкаст про рефакторинг. У нас 20+ лет во фронтенде на двоих, и мы решили делиться опытом на youtube.
Алёна: я senior frontend developer, тимлид Доки, автор, переводчик, спикер, эдьюкейтор. Работаю как с экосистемой React и Next.js, так и с vanilla-стеком. Мой опыт в образовании помогает нам объяснять вещи простым языком.
Алекс: я senior software engineer, бывший яндексоид, работал и в сервисе на 50+ фронтендеров, и делал фронтенд в соло. Фронтенд-стек тоже вокруг реакта. Мой опыт работы в разных командах помогает подмечать проблемы и варианты их решения.
Мы хотим показывать, как можно писать код проще и надёжнее. Пока пробуем формат и очень ориентируемся на ваш фидбек!
Алёна: я senior frontend developer, тимлид Доки, автор, переводчик, спикер, эдьюкейтор. Работаю как с экосистемой React и Next.js, так и с vanilla-стеком. Мой опыт в образовании помогает нам объяснять вещи простым языком.
Алекс: я senior software engineer, бывший яндексоид, работал и в сервисе на 50+ фронтендеров, и делал фронтенд в соло. Фронтенд-стек тоже вокруг реакта. Мой опыт работы в разных командах помогает подмечать проблемы и варианты их решения.
Мы хотим показывать, как можно писать код проще и надёжнее. Пока пробуем формат и очень ориентируемся на ваш фидбек!
Смотрите наш первый эпизод!
Разбираемся, как избавиться от
Постарались, чтобы было не слишком затянуто, но при этом понятно. Получилось? Расскажите в комментариях!
https://youtu.be/JdMGSgh9uHA
Разбираемся, как избавиться от
useState в формах с помощью новых фишек React 19, и обсуждаем, когда это не прокатит.Постарались, чтобы было не слишком затянуто, но при этом понятно. Получилось? Расскажите в комментариях!
https://youtu.be/JdMGSgh9uHA
YouTube
Code Cleanup Ep 1: Refactoring forms with React 19 features
In this first episode of Code Cleanup, Alena and Alex refactor a simple contact form using new features from React 19. Together, we replace boilerplate `useState` logic with native form behavior. The result is shorter, cleaner, and faster code with fewer…
🔥2
Привет!
Нам указали, что в эпизоде #1 мы забыли добавить
Исправили свою ошибку в этом пулреквесте.
Мы не заметили это в процессе записи потому что начиная с React 19.1
Спасибо, что внимательно смотрите ♥️
Нам указали, что в эпизоде #1 мы забыли добавить
ref для form, хотя используем его в коде.Исправили свою ошибку в этом пулреквесте.
Мы не заметили это в процессе записи потому что начиная с React 19.1
ref вовсе не нужен. Форма сама очищается после отправки.Спасибо, что внимательно смотрите ♥️
👍3
Неужели мы выпустили видео? Конечно выпустили!
Ну и шляпу там нам AI нагенерил, сортировка пузырьком. Рефакторим по TDD, максимально упрощая логику. Объясняем, в чём прикол разных локалей при сортировке.
Улучшили качество видео. Пока мы ещё не супер-блоггеры, но стремимся!
Энджой, лайк, подписка
https://youtu.be/rTbZ38qX_6Q
Ну и шляпу там нам AI нагенерил, сортировка пузырьком. Рефакторим по TDD, максимально упрощая логику. Объясняем, в чём прикол разных локалей при сортировке.
Улучшили качество видео. Пока мы ещё не супер-блоггеры, но стремимся!
Энджой, лайк, подписка
https://youtu.be/rTbZ38qX_6Q
YouTube
Code Cleanup Ep 2: Building Bidirectional Sorting with Locale Support
Learn how to replace inefficient O(n²) bubble sort with JavaScript's built-in Timsort algorithm for better performance and cleaner code. In this episode, we refactor a contact sorting function using test-driven development and modern JavaScript best practices.…
❤4
Привет, а вот и новое видео!
В прошлой серии мы залезли в одну функцию сортировки и улучшали её. В этот раз смотрим шире — почему так больно работать с компонентом и откуда берутся данные.
А конкретно:
— выносим бизнес-логику из React компонента
— разбираемся с концепцией derived state
— используем селекторы в Zustand
— пишем тесты 💚 на стор без React и DOM
— и даже ловим классическую ошибку с
Постарались сделать формат более живым, много обсуждений, сомнений и реальных решений по ходу.
Получился почти час 😅 наливайте чайку и залетайте к нам
https://youtu.be/oKbi-K2kj4Q
В прошлой серии мы залезли в одну функцию сортировки и улучшали её. В этот раз смотрим шире — почему так больно работать с компонентом и откуда берутся данные.
А конкретно:
— выносим бизнес-логику из React компонента
— разбираемся с концепцией derived state
— используем селекторы в Zustand
— пишем тесты 💚 на стор без React и DOM
— и даже ловим классическую ошибку с
getSnapshot в Next.jsПостарались сделать формат более живым, много обсуждений, сомнений и реальных решений по ходу.
Получился почти час 😅 наливайте чайку и залетайте к нам
https://youtu.be/oKbi-K2kj4Q
YouTube
Code Cleanup #3: Stop Putting Business Logic in React Components (Zustand Selectors Explained)
Managing state in React often leads to components full of business logic — filtering, sorting, pagination, and other derived data living directly in the UI.
In this video, we refactor a real React application using Zustand and show how to move business logic…
In this video, we refactor a real React application using Zustand and show how to move business logic…
🔥4👍1