👩‍💻 Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy

В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.

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

📌 Схема

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #react #docker #cicd #deploy

🆕 Что РЕАЛЬНО надо знать Frontend Разработчику для трудоустройства

Сегодня требования к фронтенд-разработчикам значительно возросли. Откликаться на вакансии, зная только один React — бессмысленно. Вероятность получить работу при таком наборе навыков стремится к нулю. Я даже не говорю о тех, кто, освоив лишь только JavaScript, уже отправляет резюме на позиции фронтенд-разработчика, хотя там требуются фреймворки, и другие технологии.

Меня поражает, когда из 800 откликов на вакансию, более 600 — это резюме с минимальными навыками вроде HTML, CSS и базового JavaScript. Это не серьезный подход. Лучше потратить еще немного времени на изучение необходимых технологий и откликаться, когда вы действительно готовы. Идеально, если перед этим вы поработаете пару месяцев с полным стеком: React, Redux Toolkit, RTK Query, TypeScript. Напишите многостраничное приложение, выполняющее запросы к API.

Если вы уже умеете разрабатывать простые приложения — это сигнал, что можно начинать искать работу. Для более высоких позиций и зарплат важно научиться настраивать проекты, понимать процессы в компаниях, разбираться в архитектуре фронтенд-приложений и освоить различные инструменты и оптимизации. Важно пройти множество практических кейсов: работа с API, пагинация, фильтрация данных, создание модальных окон, слайдеров, виртуальных списков и т.д.

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

На освоение всего пути с нуля уходит от 5 до 8 месяцев, в зависимости от вашего свободного времени и скорости обучения. Вот примерный план:

1️⃣ месяц на верстку,
2️⃣ месяца на изучение JavaScript,
1️⃣ месяц на React,
Затем 2 месяца практики: работа с React, Redux, TypeScript и JavaScript. Пишем приложения, углубляемся в теорию, закрываем пробелы в знаниях и активно готовимся к собеседованиям.

Это рассчитано на среднего человека с нормальными навыками обучения и возможностью уделять 2-3 часа в день плюс немного больше в выходные. Без фанатизма, но с регулярностью. За 5-6 месяцев можно научиться разрабатывать полноценные приложения с полным стеком. Далее идет подготовка к собеседованиям (примерно 1 месяц) и 1-2 месяца поиска работы параллельно с продолжением практики.

Это реальный сценарий. Главное — иметь четкий план обучения, список заданий и тем, которые нужно освоить. Плюс, желательно, ментор или сообщество для вопросов и поддержки.

📌 Итак, ключевые моменты:

✔️ Ты знаешь технологии, которые требуются для вакансии: React, TypeScript, Redux Toolkit, RTK Query.
✔️ Ты можешь самостоятельно разработать проект по ТЗ, используя эти технологии (с гуглением, но без копирования чужого кода).
✔️ Ты интересуешься продвинутыми темами: браузер под капотом, архитектура приложений, сборщики, тестирование и т.д.
✔️ Ты уверенно решаешь базовые задачи по лайвкодингу и знаешь теорию.
✔️ Ты грамотно составил резюме и подготовил самопрезентацию.

#frontend #work #interview

⁉️ Как думаете нормальный сценарий?

Я гуманитарий, у меня всегда были проблемы с математикой, но я смог изучить полный стек за 7 месяцев и найти работу. Всё делал сам, просто было огромное желание поменять жизнь. Каждый день уделял обучению по 3-4 часа, а на выходных даже больше.

Когда дошёл до JavaScript, чуть не сдался. Помню, как хотел бросить — не мог сделать даже простое модальное окно, не понимал логику. Закрыл компьютер и подумал, что это не моё. Но на следующий день вернулся и продолжил.

С ментором я бы справился быстрее, где-то за 4-5 месяцев. И знания, думаю, были бы лучше. Есть ребята, которые вообще очень быстро всё схватывают. Я, к сожалению, не из таких 🥲

🗓 Длительность обучения

Долгое обучение имеет свои преимущества. Как правило, те, кто учился долго и с перерывами, успели встретить больше кейсов и изучить больше тем. Но есть нюанс — не все темы нужны на начальном этапе. Часто студенты тратят время на вещи, которые можно изучить позже, например, классы, каррирование, прототипы, ООП, анимации и тд. Это все хорошо, но лучше сфокусироваться сначала на необходимых навыках, а затем расширять кругозор.

❌ Ошибочно начинать обучение с изучения технических основ, таких как устройство компьютера или работа браузера. На этом этапе вы еще не знаете, хотите ли стать разработчиком и действительно ли вам это интересно. Если начинать с глубокой теории, то эти знания могут показаться абстрактными и бесполезными.

✔️ Сначала лучше научиться писать код и создавать небольшие проекты, чтобы видеть результаты своей работы. Затем, по мере погружения, можно расширять свои знания. Такой подход делает обучение более интересным, так как вы будете понимать, зачем изучаете те или иные темы. После работы с DOM и fetch запросами вам станет любопытно узнать, что стоит "под капотом" у сетевых технологий и браузера, и тогда их изучение пройдет легче.

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

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

Важно определить цель обучения: учитесь ради процесса или для поиска работы. Ключевой навык — это адаптация и умение находить нужную информацию. Никто не знает весь JavaScript, и я не исключение. Но если появится задача реализовать видеочат, я смогу найти решение с помощью WebRTC. Не нужно изучать всё заранее, так как многие знания могут оказаться ненужными.

🌧 Был проведен эксперимент: взяли идеальное резюме олимпиадника с опытом стажировок в Яндексе и начали откликаться на вакансии. В итоге лишь 5% приглашений. Это показывает, что даже самый гениальный технический специалист не нужен, если у него нет практических навыков и опыта. Работодателям нужны не заучки, а специалисты, способные выполнять задачи

#frontend #work

👍 Дорогие коллеги, желаю всем отличных выходных! Предлагаю провести время с пользой и посмотреть видео по архитектуре фронтенд-приложений. Это поможет вам прокачать свои навыки и понять, в каком направлении двигаться дальше. В ходе просмотра мы с учениками разбираем проекты и готовимся к собеседованиям. Часто интервьюеры спрашивают о проектах, над которыми вы работали, о процессе деплоя, настройке сборки, а также о CI/CD. Эти знания необходимы для мидлов, и именно поэтому я выступал с этой темой на митапе и позже записал видео на YouTube.

Также в планах снять видео о процессах в компаниях. Это даст понимание, как создаются приложения и как происходит взаимодействие в команде. Я уже проводил митап на эту тему, и он получил положительный отклик. Планирую выпустить видео в YouTube.

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

Проект будет разрабатываться по GitFlow, основываясь на реальном макете и дизайн-системе, а также с использованием разработанного бэкенда с более чем 80 эндпоинтами. Это будет аналогично продвинутому курсу Ульби, но с менторской поддержкой и ежедневной обратной связью. Большая часть этого курса будет в открытом доступе в YouTube

YouTube канал:
https://youtube.com/@reactify-it

👩‍💻 React Fiber

Ранее React использовал механизм Stack Reconciler для обновления интерфейсов, что приводило к проблемам с производительностью. Одним из главных недостатков было невозможность приостановить и возобновить рендеринг, что могло вызывать "замораживание" интерфейса при выполнении тяжёлых операций. Чтобы устранить этот недостаток, начиная с React 16, была создана новая архитектура — React Fiber.

❓ Что такое React Fiber?

React Fiber — это переработанная структура внутреннего устройства React, которая управляет процессом рендеринга и согласования (reconciliation). Основное нововведение заключается в том, что теперь React разбивает весь процесс обновления на мелкие задачи, которые можно:

1. Приостанавливать.
2. Прерывать для выполнения более важных операций.
3. Возобновлять с того же места.
4. Отменять обновления, если компонент больше не нужен.

Эта архитектура помогает React быть более отзывчивым и гибким в работе с сложными интерфейсами.

📈 В чём ключевая идея Fiber?

Вместо использования традиционного стека для отслеживания состояния компонентов, Fiber создаёт связанную структуру данных для каждого элемента виртуального DOM. Это позволяет React двигаться вперед и назад по компонентному дереву, задавать приоритет задач и управлять состояниями на уровне узлов.

Каждый узел Fiber содержит:
- Тип компонента (функциональный, классовый или элемент DOM).
- Ссылки на дочерние, родительские и соседние узлы.
- Текущее состояние и приоритет выполнения.

Такой подход позволяет React выполнять задачи в соответствии с их приоритетом:
- Высокий приоритет: действия пользователя (клики, ввод текста).
- Низкий приоритет: обновление анимации или загрузка данных.

🖥 Как это работает на практике?

React Fiber использует две основные фазы рендеринга:

📌 Фаза рендеринга (Render Phase):
React создаёт новое дерево Fiber, вычисляя, какие изменения должны быть сделаны.
Эта фаза может прерываться и возобновляться.

📌 Фаза выполнения (Commit Phase):
Все изменения применяются к реальному DOM.
Происходит быстро и синхронно, чтобы интерфейс обновлялся без задержек.

🛡 Особенности React Fiber:

- Time Slicing: React разбивает выполнение задач на короткие промежутки времени, чтобы не блокировать интерфейс.
- Асинхронный рендеринг: позволяет приостанавливать и возобновлять рендеринг компонентов.
- Гибкое управление задачами: React определяет, какие задачи выполнять первыми, а какие можно отложить, чтобы обеспечить плавное взаимодействие с пользователем.

#frontend #react

👩‍💻 Рендеринг в React

В React рендеринг — это процесс, при котором компонент заново отрисовывается на основе новых данных. Этот процесс происходит по нескольким причинам:

📌 1. Изменение состояния (state)
Если состояние компонента меняется, React автоматически запускает его ререндеринг. Например:

const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me {count} times
    </button>
  );
};

Когда мы вызываем setCount, значение count меняется, что приводит к ререндерингу компонента, чтобы отобразить обновлённое число.

📌 2. Изменение пропсов (props)
Пропсы сами по себе не являются первичной причиной ререндеринга, а скорее следствием изменения состояния в родительском компоненте. Если состояние родителя обновляется, он перерисовывается и передает изменённые пропсы дочернему компоненту. Это приводит к ререндерингу дочернего компонента:

// Родительский компонент
const Parent = () => {
  const [text, setText] = useState('Hello');

  return (
    <>
      <Child message={text} />
      <button onClick={() => setText('Hello, World!')}>Change Text</button>
    </>
  );
};

// Дочерний компонент
const Child = ({ message }) => <div>{message}</div>;

Когда setText меняет состояние text, компонент Parent перерисовывается, и передаёт новое значение пропса message в Child, что вызывает ререндеринг дочернего компонента.

Примечание: При использовании React.memo изменения пропсов действительно считаются причиной ререндеринга, если новый пропс отличается от предыдущего.

📌 3. Изменение контекста (Context)
Если компонент использует контекст (useContext или <Context.Consumer>), и его значение меняется, то все компоненты, подписанные на этот контекст, будут перерисованы:

const ThemeContext = React.createContext('light');

const Parent = () => {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme('dark')}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
};

const Child = () => {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
};

Когда значение контекста theme изменяется (например, с 'light' на 'dark'), компонент Child ререндерится, чтобы отобразить новое значение темы.

📌 4. Ререндеринг родительского компонента
Даже если состояние компонента и его пропсы остаются неизменными, он будет перерисован, если родительский компонент ререндерится (даже без видимых изменений). Это связано с тем, что дочерние компоненты автоматически ререндерятся вместе с родительским компонентом. Например:

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child />
    </>
  );
};

const Child = () => <div>I'm a child</div>;

Здесь Child не зависит от состояния count, но каждый раз, когда Parent ререндерится, Child ререндерится тоже. Это можно предотвратить с помощью React.memo.

❓ Как избежать лишних ререндеров?

✔️ React.memo: предотвращает ререндеринг компонента, если его пропсы не изменились.
✔️ Хук useCallback и useMemo: сохраняют функции и значения, чтобы они не создавались заново при каждом ререндеринге.
✔️ Оптимизация контекста: разбивайте контекст на отдельные провайдеры, чтобы уменьшить количество компонентов, реагирующих на изменение его значения.

#react #frontend #memo #render

🖥 Управление состоянием с помощью паттерна Observer

Когда приложение разрастается, работа с состоянием через обычные глобальные переменные становится непрактичной и приводит к хаосу. Чтобы избежать этого, важно использовать более структурированные подходы, такие как паттерн Observer. Он помогает разделить логику обновления и реакцию на изменения, что делает код более гибким и легко масштабируемым.

Рассмотрим, как создать и использовать простую реализацию этого паттерна для управления состоянием.

✏️ Создание Observable
В отдельном файле создадим функцию, которая будет хранить состояние и управлять подписчиками. Назовем её createObservable:

// observable.js
export const createObservable = (initialState = []) => {
  let state = initialState;
  let observers = [];

  // Метод для уведомления всех подписчиков об изменениях
  const notify = () => {
    observers.forEach((observer) => observer(state));
  };

  return {
    // Метод для подписки на изменения
    subscribe: (observer) => {
      observers = [...observers, observer];
    },
    // Метод для отмены подписки
    unsubscribe: (observer) => {
      observers = observers.filter((obs) => obs !== observer);
    },
    // Метод для изменения состояния и уведомления подписчиков
    setState: (newState) => {
      state = newState;
      notify();
    },
    // Метод для получения текущего состояния
    getState: () => state,
  };
};

💭 Создание хранилища (Store)
Теперь вместо использования обычного массива, создадим состояние для списка фильмов, используя наш createObservable. Это позволит нам централизованно управлять состоянием и уведомлять подписчиков об изменениях.

// store.js
import { createObservable } from './observable';

const moviesObservable = createObservable([]);

⌛️ Добавление данных в хранилище
Теперь предположим, что вы загружаете данные о фильмах с API:

const fetchMovies = async (query) => {
  const response = await fetch(`https://api.example.com/movies?search=${query}`);
  const movies = await response.json();
  return movies;
};

// Получаем фильмы и обновляем состояние хранилища
const moviesFromApi = await fetchMovies('Inception');

moviesObservable.setState(moviesFromApi); // Теперь в хранилище у нас массив фильмов

✉️ Подписка на изменения
Когда состояние изменится, нам нужно автоматически отобразить новые данные. Например, создадим функцию displayMovies, которая будет выводить фильмы на экран, и подпишем её на наш moviesObservable:

const displayMovies = (movies) => {
  console.log('Фильмы обновились:', movies);
};

// Подписываемся на изменения в состоянии хранилища
moviesObservable.subscribe(displayMovies);

Теперь каждый раз, когда состояние хранилища изменяется через setState, функция displayMovies будет автоматически вызываться с обновлёнными данными.

🔔 Получение текущего состояния
Для доступа к текущим данным из хранилища можно использовать метод getState:

const currentMovies = moviesObservable.getState();
console.log('Текущие фильмы:', currentMovies);

Преимущества использования паттерна Observer:
- Централизованное управление состоянием — вся логика управления данными сосредоточена в одном месте.
- Гибкость — вы можете легко добавлять новые подписки или отменять их при необходимости.
- Простота тестирования — можно отдельно тестировать логику хранилища и взаимодействие с подписчиками.
- Отделение состояния от представления — подписчики отвечают только за реакцию на изменения, а само хранилище не зависит от реализации компонентов интерфейса.

Этот паттерн можно легко расширить на более сложные состояния: добавить возможность частичного обновления состояния, реализовать логику редукторов для обновления состояния в зависимости от действий, подключить несколько таких хранилищ и организовать обмен данными между ними.

Использование паттерна Observer — это хорошая база для перехода к более сложным инструментам управления состоянием, таким как Redux или MobX.

#javanoscript #store #observer

Привет всем! За последние 6 месяцев в сообществе ОМ я многое переосмыслил и понял одну важную вещь

На рынке каждый борется за свои интересы, и компании — не исключение. У них есть ресурсы и свои уловки, и они используют их в полную силу. Почему ты должен ограничивать себя? Если они оптимизируют процессы, манипулируют данными и фильтруют резюме, то и ты имеешь полное право использовать все доступные инструменты: адаптируй резюме, готовься к собеседованиям, и если надо — накручивай опыт, чтобы пройти фильтры.

📌 Конкуренция — это норма: Если ты не борешься за своё место, тебя обходят другие. Компании делают всё, чтобы держать тебя в неведении, манипулируя предложениями и скрывая реальную причину отказа. Это рынок: либо ты играешь в полную силу, либо остаёшься без работы.

📌 Ты — такой же игрок: Ты имеешь право выбирать лучшие условия, бороться за свои интересы и не чувствовать себя виноватым. Ведь если работодатели могут увольнять и менять правила игры, ты тоже должен быть готов действовать в свою пользу.

🔗 ВСЕ УЛОВКИ КОМПАНИЙ

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

Но важно понимать: ОМ не учит халяве и безделью. Здесь не про то, чтобы накрутить опыт, влезть на мидла и сидеть без дела. В сообществе призывают к трудолюбию — чтобы подготовиться, нужно реально много работать над собой.

ОМ учит ценить себя и своё время. Никакой работы ради «опыта» и печенек. Ты работаешь — ты получаешь достойную оплату. В комьюнити есть гайды, чаты, ресурсы — всё, чтобы ты мог расти и добиваться своих целей.

В это воскресенье (6 октября) подписки для новых участников закроются на неопределённое время. Если хочешь попасть — не пропусти.

🔗 ТУТ ОПИСАНЫ ВСЕ БОНУСЫ
🔗 ФИЛОСОФИЯ СООБЩЕСТВА

ИТ — это не только про технологии и кодирование. Это умение общаться, адаптироваться и взаимодействовать. Эти навыки важны в каждой сфере, поэтому развивайтесь всесторонне!

В комментариях я добавлю ссылку на пробную подписку на 3 дня. За это время вы сможете изучить материалы по созданию резюме, подготовке к собеседованиям, развитию софт-скиллов и многому другому. Если вам понравится, будет возможность оформить полноценную подписку.

🌧 Зона комфорта

Многие начинают свой путь в IT, думая, что достаточно выучить технологии и написать пару проектов, чтобы получить работу. Но реальность такова, что IT — это не просто про код. Это постоянный выход из зоны комфорта.

Если вы сидите и ждете, что вам придет приглашение на работу, то, возможно, так и будете сидеть долго. Мир IT требует от вас инициативы. Здесь важно не только техническое мастерство, но и умение себя подать, показать свою ценность. Вы должны быть активным участником сообщества, искать возможности, стучаться в двери, даже когда кажется, что они закрыты.

Коммуникации и адаптивность не менее важны, чем ваши навыки программирования. Умение презентовать себя на собеседованиях, понимать потребности бизнеса и эффективно взаимодействовать в команде — это те качества, которые работодатели ценят не меньше, чем знания JavaScript или React. Поэтому, если вы думаете, что вас должны звать на работу только потому, что вы закончили курсы или прошли стажировку, вы ошибаетесь.

Выход из зоны комфорта — это встречи с новыми людьми, участие в митапах, коллаборация с другими разработчиками, создание проектов, которые решают реальные проблемы. Это постоянное стремление стать лучше и открытость к изменениям.

Так что не ограничивайтесь только изучением технологий. Развивайтесь как личность, учитесь коммуницировать, берите на себя ответственность. IT — это комплексная сфера, где успех приходит к тем, кто готов преодолевать себя, учиться новому и показывать свою ценность.

Выходите за пределы своей зоны комфорта — и вы увидите, как открываются новые возможности!

Суббота и воскресенье даны для того, чтобы обойти тех, кто отдыхает. У тебя есть два дня преимущества. - Куянец Р.

#it #motivation