Руслан Куянец | Reactify

Наблюдатель

Наблюдатель (Observer) — это поведенческий паттерн проектирования, который обеспечивает создание механизма подписки, благодаря которому объекты могут получать уведомления о событиях, происходящих в других объектах. Этот механизм улучшает взаимодействие между компонентами системы, делая их взаимосвязь гибкой и минимизируя их зависимость друг от друга.

В архитектуре паттерна "Наблюдатель" выделяют два основных типа участников: "субъект" и "наблюдатели". Субъект — это объект, за состоянием которого следят наблюдатели. Когда состояние субъекта меняется, он автоматически оповещает об этом все подписанные на него объекты-наблюдатели. Наблюдатели, в свою очередь, реагируют на эти изменения, выполняя определенные действия.

Примером реализации паттерна Наблюдатель может служить Стейт менеджер. Когда при изменении какого-то значения, наш интерфейс должен отреагировать.

#patterns #observer

Feature-Sliced Design - Лучшая Frontend архитектура

Вышло новое видео на канале! Давайте обсуждать, как вы используете FSD.

Писать с нуля, учитывая особенности архитектуры, легче чем переписывать готовый проект. FSD развивает правильно мышление сущностями, заставляет более тщательно продумывать компоненты. В дальнейшем мы отрефакторим код и сформируем правильный подход.

Вот самый ближайший по духу пример из документации:
https://github.com/noveogroup-amorgunov/nukeapp/tree/main/src

Распространение события

Распространение события (Event Propagation) – это механизм в веб-разработке, описывающий порядок, в котором события обрабатываются в DOM (Document Object Model). Когда событие возникает на элементе, оно проходит через три стадии: погружение, целевую фазу и всплытие.

Этот процесс позволяет определить, как и в каком порядке элементы DOM реагируют на различные события (например, клики или нажатия клавиш). Понимание этого механизма важно для правильной организации обработки событий в приложениях.

Фаза Погружения (Захвата): Событие начинается от Window и движется вниз к целевому элементу, проходя через всех его предков.

Целевая Фаза: Событие достигает целевого элемента.

Фаза Всплытия: Событие возвращается к Window, всплывая через всех предков целевого элемента.

Управление распространением событий:

event.stopPropagation(): Вызов этого метода в обработчике событий предотвращает дальнейшее распространение события. Это означает, что событие не будет продолжать всплывать или погружаться.

#event #stopPropagation #dom

Димыч по нашим стопам решил пойти😄

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

Только он берет за это деньги с новичков. Вообще это круто, Димыч много годного делает. Многие платят за Буткемпы и тд, а тут прям реальный стартап. Хороший опыт.

Только у нас это бесплатно. Вы можете пройти отбор и практиковаться👌

Этот проект будет жить в любом случае. Хотя бы просто как место для практики. Но мы нацелены на результат.🏆

#teams #yeahub

YeaHub Новости

В нашей команде теперь 5 дизайнеров! Наш проект растет.

Еще определились с дизайном, какой стиль и цвета хотим видеть на нашей платформе.

Как будут первые наброски покажу вам. Активно продумываем идеи, что будет на нашей платформе. Уже хочется начать разработку.

Еще мы в поиске опытного бекендера. Который будет TeamLead для разработчиков. Чтобы участвовал в продумывании архитектуры. Я думаю мы легко найдет. Ведь наш проект как магнит!

#teams #yeahub

React Новости и FSD (Архитектура Frontend)

Всю эту неделю готовил видео о FSD😱 Такого видео в YouTube точно нет. Все примеры обычно легкие, а у нас уже большое приложение. Было сложно, но я сделал это! Если хотите прокачаться в FSD (самая популярная архитектура на данный момент) то точно стоит посмотреть видео. Буду пару дней монтировать.

В этом видео мои мысли и рассуждения. Логика FSD как ее вижу я (не побоюсь сказать САМАЯ ПРАВИЛЬНАЯ).

Видео подойдет и для опытных и для новичков. Длится будет 1,5 часа.

YeaHub

Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪

Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.

Hub: "hub" означает центральное место для соединений и взаимодействий. Это подчеркивает, что наша платформа является ключевой точкой сбора для IT-сообщества.

А ты зареган на ехаб? Кинь ссылку на ехаб! Я сижу на ехабе!

По мне так оригинально. Приедается. Запоминается.

Наша платформа только в начале пути будет для поиска специалистов. В дальнейшем - это центр IT сообщества, где есть все для обучения, работы, общения.

Как вам? А какое название вы бы придумали?

#teams #yeahub

Фидбек

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

Все большие молодцы, много всего знают. Хочу в дальнейшем записать видео, поделится ошибками и советами.

- Нужно практиковаться и изучать актуальный Стек технологий.
- Нужно обучаться по плану.
- Не нужно учить в глубину на начальном этапе

Я много раз говорил, что проект не для обучения стека, а для практики. Поэтому, почти все кандидаты были высокого уровня. Выбирали долго, после каждого собеса переделывали рейтинг.

Изначально я хотел собрать команду 10-12 человек вместе с бекендерами и дизайнерами. Для Фронтов я выделял 6 мест примерно. Но так как были ребята с опытом, то я поступил следующим путем: 5 человек с опытом и 5 человек без опыта. В нашей команде 10 Фронтов.

Ребята с опытом усилят наш проект и подготовят почву к следующему набору. Чтобы мы могли брать менее опытных ребят. У нас грандиозные планы!

Всем спасибо! Если кому то не написал фидбек, напишите мне плиз, мог пропустить, столько людей.

#teams

Мост

Мост (Bridge Pattern) - это структурный дизайн паттерн, который разделяет один или несколько классов на две отдельные иерархии — абстракцию и реализацию, позволяя им развиваться независимо друг от друга. Это достигается за счет создания композиционной связи между абстракцией (чаще всего интерфейсом пользователя) и её реализацией (конкретной платформой или технологией). Такой подход позволяет избежать постоянной привязки абстракции к одной реализации, облегчая тем самым масштабирование и адаптацию к новым требованиям.

Вот когда стоит использовать паттерн Мост:

1️⃣ Когда нужно избежать "жесткого" связывания абстракции и её реализации: Это особенно важно в ситуациях, где абстракция и реализация могут развиваться независимо друг от друга, или когда реализация должна быть выбираема или переключаема во время выполнения программы.

2️⃣ Когда изменения в реализации не должны влиять на клиентов: Использование паттерна Мост позволяет изолировать изменения в реализации от кода клиента, который использует абстракцию.

3️⃣ Когда необходимо разделять и управлять большим набором классов: В случаях, когда существует множество классов, образующих иерархии абстракций и реализаций, паттерн "Мост" помогает упорядочить и упростить структуру.

Примером реализации паттерна Мост в контексте React и функционального программирования может служить ситуация, где компонент React (абстракция) делегирует некоторые из своих задач другому JavaScript объекту (реализация). Это может быть, например, компонент интерфейса, который взаимодействует с разными источниками данных. Вместо того, чтобы интегрировать логику работы с данными напрямую в компонент, можно использовать паттерн Мост, чтобы отделить эту логику.

#patterns #bridge

Всем привет! Понедельник день тяжелый.

Сегодня добавил всех Фронтенд Разработчиков в чат проекта. Решил для начала взять 10 человек. Через месяц думаю нужно будет набирать еще. Но главное начать разработку.

Наша команда фронтендров 🎉🎉🎉

@denispereloma @AleksanderIazev @SSA146 @A_Kaz @crypto_bubblezz @perfect1onnnn @Ykant @maxkpacific @buffik_1989 @ShaArtur

Долго решали кого выбрать, ведь было много крутых ребят. В итоге сошлись на таком выборе. Все кто проходил собеседования молодцы! Спасибо, за ваше время, я постараюсь на неделе каждому написать и дать обратную связь.

ВСЕ КТО ПРОХОДИЛ СОБЕСЕДОВАНИЯ БУДУТ В ПРИОРИТЕТЕ В СЛЕДУЮЩЕМ НАБОРЕ

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

#teams

Знакомлю вас с участниками проекта.

Дизайн важная часть любого приложения. Над дизайном у нас работают @bubuzlya и @brandonbetterdays

Как нам делать платформу для HR без HR. Консультировать и помогать нам будет HR специалист @HR_Zalifa

Опытные люди нам нужны, особенно если умеют тестировать и работали в больших компаниях @r0mavin

Опытный Frontend Разработчик с почти 10-летним опытом, работал в Ozon, Ростелеком, Сбер, будет помогать в организации @gzennurov

Универсальный солдат, DevOps, Frontend, Backend, который будет на подхвате @rofflion

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

#teams

Сегодня впервые писал Техническое задание проекта для дизайнеров. Сложное однако дело. Оказывается если у тебя в голове есть идея и план, то этого недостаточно(очевидно).

Продолжаем набирать команду. В чате уже 7 человек, потихоньку продвигаемся вперед.

В понедельник уже отберем всех Frontend Разработчиков и начнем обсуждать архитектуру, правила внутри команды, стиль кода и тд. Ждите результатов💪

За следующую неделю планирую сформировать полную команду дизайнеров и бекендеров.

Приступим к написанию кода либо 5 февраля, либо 12 февраля. Организационные моменты конечно затягивают все😁. Но собесы закончились и свое свободное время теперь буду тратить на проект.

#teams

Кстати, слежу почти каждый день за вакансиями. Для меня ориентир - Москва, Frontend разработчик

Количество восстановилось как было до нового года 1800 - 1860💪🏻

В моменте в январе вакансий было 1300😢

Теперь все в норме. Как вообще сейчас на рынке дела? Вас зовут на собеседования?

Сегодня добавил уже первых участников в чат проекта.

1. Завтра проводим собеседования у Бекендеров.
2. Начал писать ТЗ для дизайнеров.
3. На следующей неделе уже будем отбирать Фронтендеров. Все собеседования провели, будем говорить кто прошёл💪

Подготовка идет полным ходом. Название проекта и логотип будем выбирать всем сообществом👌

Скоро вас буду знакомить с участниками😎🚀

Жизненные циклы компонентов в React

Это последовательность этапов, через которые проходит компонент в течение своего существования.

В функциональных компонентах React, которые стали более популярны после введения хуков в версии 16.8, управление жизненными циклами осуществляется по-разному по сравнению с классовыми компонентами.

useEffect: Это ключевой хук для управления побочными эффектами в функциональных компонентах. Он объединяет возможности методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount.

1️⃣ Монтирование (componentDidMount):
useEffect с пустым массивом зависимостей [] как вторым аргументом запускается один раз после первого рендеринга компонента.

2️⃣ Обновление (componentDidUpdate):
Если массив зависимостей содержит переменные, useEffect будет запускаться при изменении этих переменных.

3️⃣ Размонтирование (componentWillUnmount):
Возврат функции из useEffect будет выполнен перед удалением компонента из DOM, что можно использовать для очистки (например, отмены подписки).

#react #useEffect

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

Времени вообще не было. Сегодня к сожалению без постов. Но завтра расскажу вам новости.

К нам добавляется все больше людей, и это хорошо! Я рад, что у нас в сообществе много активных людей, желающих творить и развиваться💙

Полезно иметь канал на котором часто выходят полезные посты.

Рекомендую @code_ready

До завтра!🤝

Руслан Куянец | Reactify pinned «Все процессы запущенны и заднюю давать уже не вариант У нас есть дизайнер, HR-специалист и тестировщик. В данный момент мы проводим собеседования с фронтенд-разработчиками, а несколько бекенд-разработчиков также выразили желание присоединиться к нам. Кроме…»