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

Offer Man 😁

👩‍💻 Как работает CI/CD в Production: GitHub Actions, Docker, ArgoCD и GitOps Как выглядит CI/CD в настоящем проекте? В этом видео разберем полный pipeline от Git Push до Production: GitHub Actions, Docker, ArgoCD и GitOps. Покажу весь путь от изменения кода до деплоя в production: — как устроен CI/CD процесс; — как работает GitHub Actions; — сборка и запуск Docker контейнеров; — автоматизация проверок и деплоя; — как используется ArgoCD; — что такое GitOps и как он применяется на практике. Мы не будем просто рисовать схемы — я покажу еще весь процесс на живом проекте: ✅ трекер задач; ✅ GitHub Actions; ✅ Docker; ✅ структура проекта; ✅ pipeline; ✅ deployment flow. Это видео подойдет frontend, backend и fullstack разработчикам, которые хотят понять, как реально работает DevOps-процесс в команде. Видео уже на канале Reactify! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

Так, ребята Если я захочу перейти во фуллстек, то как называть канал? Fullstackify? Есть идеи?

Вчера побывал на «Профсоюзная Конференция». Хочу сказать следующее: «Если интернешенал - это праздник доты, то профсоюзная - это праздник айти» Ни на одной другой конфе/митапе я так много не общался. Зарядился энергией от самых разных людей. Хардворк ✊🏼 В комментарии пришлю немного видео/фото с конфы

Как устроены ИИ-агенты, которые умеют программировать сами? 27 августа в 19:00 встречаемся в кампусе Центрального университета на митапе про кодинговых ИИ-агентов. На митапе: ⚫️ узнаем, почему кодинговые агенты превращаются в отдельные сервисы и как устроены распределенные агентные системы; ⚫️ разберем протоколы ACP и A2A и посмотрим, как разные агенты и клиенты могут взаимодействовать между собой; ⚫️ на практическом мастер-классе создадим собственного автономного агента с помощью Deep Agents от LangChain — с планированием, управлением контекстом, файловой системой и параллельной работой сабагентов. Мастер-класс — с ноутбуками, так что получится не только посмотреть, но и попробовать собрать агента своими руками. Спикеры: ⚫️Денис Артюшин — технический владелец продукта агентской платформы в Т-Банке ⚫️Полина Реброва — ведущий инженер по разработке, Сбер ⚫️Александр Шахов — инженер-преподаватель и академический руководитель направления «Разработка» в Центральном университете 📍 27 августа, 19:00 📍 Кампус Центрального университета, Москва Зарегистрироваться по ссылке

Видео по CI/CD готово Такого вы не видели еще На следующей неделе... скоро..

ИИ эпидемия Уже не первый раз слышу такой фидбек

Все готово Завтра сниму видео про CI/CD, в понедельник опубликую Потом сниму видео по инфраструктуре Все это я буду показывать на примере YeaHub https://github.com/YeaHubTeam/yeahub-platform

💪 Как я довожу Frontend-разработчиков до оффера (показываю всю систему) https://www.youtube.com/watch?v=ZIl3kHEL0XQ Разошелся я с контентом, но мои гайды по менторству устаревают очень быстро за счет добавления новых ритуалов 😁 Плюс решил окончательно на схеме отбить все вопросы по процессу обучения. Один раз провести презентацию и отправлять это видео в приветственном сообщении, чтобы экономить 15–20 минут на каждой консультации на вопросы вроде: «А с чего начнем?», «Как всё проходит?», «А что такое стажировка?» и т. д. В общем, видос уже на YouTube. Держим качество. Улучшаем всё. Скоро видео по инфраструктуре, CI/CD и деплою. 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

Задания с собеса Задание 1 (код с Promise):

let counter = 0;
const increment = new Promise(resolve => {
    counter++;
    resolve(0);
});
await increment;
await increment;
console.log(counter);

Вопрос: Чему будет равен counter? Задание 2 (React-компонент с Counter A и Counter B):

import React, { useState } from "react";
import "./styles.css";

console.log = (...args) => {
    const node = document.createElement("div");
    node.innerHTML = args.join(" ");
    document.getElementById("log").appendChild(node);
};

const Counter = (props) => {
    console.log(`Counter ${props.name} rendered`);
    return (
        <div>
            Counter {props.name} : {props.count}
        </div>
    );
};

export default function App() {
    const [countB] = useState(0);
    const [countA, setCountA] = useState(0);
    const handleCountA = () => {
        setCountA(countA + 1);
    };

    return (
        <div className="App">
            <Counter name="A" count={countA} />
            <Counter name="B" count={countB} />
            <button onClick={handleCountA}>Count A</button>
        </div>
    );
}

Задача: Counter A и Counter B рендерятся вместе, нужно чтобы Counter B не ре-рендерился при клике на Counter A. Оптимизировать компонент. Задание 3 (сравнение функций):

const test = 0 => test()
const test1 = async 0 => await test1()
const test2 = async 0 => await Promise.resolve(0).then(test2)
const test3 = 0 => setTimeout(test3, 1)

Вопрос (по контексту собеса): С чем можно столкнуться (например, переполнение стека, бесконечный цикл, таймаут и т.д.)? Вопрос про переполнение стека вызовов и разницу между синхронной/асинхронной рекурсией. 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

🖥 20 вопросов с жесткого Frontend собеседования: V8 / JS engine / React Fiber Почему один JavaScript-код работает быстро, а другой тормозит? Что происходит внутри V8, когда мы запускаем наш код? В этом видео разбираем оптимизации JavaScript под капотом: — как работает JIT-компилятор — что такое Hidden Classes в V8 — почему структура объектов влияет на производительность — что такое мономорфизм и deoptimization — как работает Garbage Collector и поколенческий сборщик мусора — почему создание лишних объектов может замедлять приложение — когда использовать Object, а когда Map Это вопросы, которые часто встречаются на собеседованиях Frontend Senior уровня, но самое важное — понять не термины, а логику работы JavaScript-движка. После этого видео станет понятнее: - почему V8 любит предсказуемый код - почему один и тот же JS может работать в 100 раз быстрее в разных условиях - какие привычки в коде помогают движку оптимизировать приложение JavaScript — это не просто язык, который выполняется в браузере. Внутри работает сложный движок, который постоянно анализирует наш код и пытается сделать его быстрее. Видео уже на канале Reactify! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

Айти уходит на дно 😭

👩‍💻 Эволюция Frontend Архитектуры: от Монолита до Microfrontends (Monorepo, Multirepo) В этом видео разберём эволюцию больших frontend-систем: Monolith → Modular Monolith → Monorepo → Multirepo → Microfrontends. На примере роста большой платформы посмотрим: — почему один frontend начинает не справляться с ростом команды; — зачем переходят от монолитного приложения к модульной архитектуре; — чем отличаются Monorepo и Multirepo; — когда появляются отдельные приложения и бизнес-контуры; зачем нужны Microfrontends; — как независимые команды получают свои релизы, CI/CD и жизненный цикл. Разберём: — Frontend Architecture — Microfrontend Architecture — Monorepo vs Multirepo — Modular Monolith — Frontend Scaling — Large Scale Frontend Applications Видео будет полезно frontend-разработчикам, архитекторам и техническим лидерам, которые строят масштабируемые веб-приложения. Видео уже на канале Reactify! Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение. 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

Скоро возвращение на YouTube 💪🏼 1. Разбор самого душного собеса: V8, Hidden classes, JIT, TS, Garbage Collector и другие необычные темы на собесе 🤯 2. Архитектура Frontend: Monorepo, Multirepo, Microfrontends, Monoliths Схема эволюция на примере больших компаний Видео в монтаже 💪 Так же много сценариев написал, буду контент машину запускать 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube

👩‍💻 CI/CD для фронтендера часть 3 В прошлый раз мы остановились на моменте, когда Pull Request прошел ревью, получил аппрув и попал в ветку develop. Теперь начинается самое интересное — что происходит после merge и как код оказывается в Kubernetes. Разберем путь от merge до деплоя. Итак, разработчик сделал merge:

feature/YH-1422 → develop

С этого момента обычно запускается новый workflow. Первый этап — сборка. CI/CD система берет свежий код из ветки develop и выполняет примерно такие шаги: — скачивает репозиторий; — устанавливает зависимости; — собирает приложение; — запускает необходимые проверки; — создает артефакты сборки. Для фронтенда результатом обычно будет набор статических файлов:

dist/
 ├── index.html
 ├── assets/
 ├── javascript bundles
 └── styles

Но часто в современных проектах дальше появляется Docker. Вместо того чтобы просто отправлять файлы на сервер, приложение упаковывается в Docker image. Например:

код приложения

↓

npm install

↓

npm run build

↓

Docker image

↓

Container Registry

Docker image — это готовая версия приложения вместе с необходимым окружением. Например:

frontend-app:1.25.0

Эта версия уже сохранена в Registry, откуда ее сможет забрать Kubernetes. Следующий этап — Kubernetes. Kubernetes сам по себе не знает, какую версию приложения нужно запускать. Ему нужно описать желаемое состояние: — какой image использовать; — сколько запустить копий приложения; — какие ресурсы выделить; — какие настройки применить. Обычно это описывается через Kubernetes manifests или Helm charts. Например:

frontend:
  image: frontend-app:1.25.0
  replicas: 3

То есть мы говорим Kubernetes: "Мне нужно 3 экземпляра фронтенда версии 1.25.0" И Kubernetes делает все необходимое: — скачивает Docker image; — создает контейнеры; — запускает приложение; — проверяет, что оно работает; — заменяет старую версию новой. В GitOps подходе мы обычно не отправляем команды напрямую в Kubernetes. Вместо этого есть отдельный репозиторий с описанием состояния инфраструктуры. Например:

application-config

frontend:
  image: frontend-app:1.25.0

Изменили версию в Git → система увидела изменение → обновила Kubernetes. И здесь появляется ArgoCD. ArgoCD постоянно сравнивает: что написано в Git vs что реально запущено в Kubernetes. Если есть различия — он выполняет синхронизацию. Например: В Git: frontend-app:1.25.0 В Kubernetes: frontend-app:1.24.0 ArgoCD увидит расхождение и обновит приложение. В итоге весь путь выглядит примерно так:

Merge в develop

↓

CI/CD workflow

↓

Build приложения

↓

Docker image

↓

Container Registry

↓

Обновление конфигурации в Git

↓

ArgoCD

↓

Kubernetes

↓

Новое приложение работает

И вот этот процесс обычно скрыт от фронтендера. Разработчик сделал merge — через несколько минут новая версия уже доступна на стенде. Но за этим стоят несколько систем, которые работают вместе: Git → CI/CD → Docker → Registry → GitOps → ArgoCD → Kubernetes Первые 4 шага можно изучить в нашем репозитории: https://github.com/YeaHubTeam/yeahub-platform/blob/main/Dockerfile В следующей части можно разобрать уже сам Kubernetes: что такое Pod, Deployment, Service, Ingress и как вообще фронтенд приложение живет внутри кластера 🙂 🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube