skillswiki.
Профессии/Frontend-разработчик/Senior
Подборка материалов · Senior

126 статей для Senior Frontend-разработчика: большая подборка

Инженерные разборы для работы с большими приложениями: архитектура, микрофронтенды, SSR, производительность, мониторинг, миграции, дизайн-системы и процессы команды.

126 статей · 10 тем · материалы на русском языке

Архитектура и границы модулей

  1. Верхнеуровневая архитектура фронтенда. Лекция Яндекса

    Чтобы принимать устойчивые архитектурные решения.

  2. Архитектура фронтенда и какой она должна быть

    Чтобы принимать устойчивые архитектурные решения.

  3. Domain-Driven Design: чистая архитектура снизу доверху

    Чтобы принимать устойчивые архитектурные решения.

  4. Как создать архитектуру фронтенд-приложения, если ее нет от слова «совсем»

    Чтобы принимать устойчивые архитектурные решения.

  5. Архитектура фронтенда, к которой мы пришли

    Чтобы принимать устойчивые архитектурные решения.

  6. Чистая архитектура фронтенд приложений. Часть первая

    Чтобы принимать устойчивые архитектурные решения.

  7. Архитектура фронтенд-приложений на React. (Нам не нужен FSD)

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  8. Чистая архитектура фронтенд приложений. Часть вторая

    Чтобы принимать устойчивые архитектурные решения.

  9. Просто о сложном: архитектура фронта для техлида

    Чтобы принимать устойчивые архитектурные решения.

  10. Архитектура фронтенда. Навеяно болью от использования FSD

    Чтобы принимать устойчивые архитектурные решения.

  11. От хаоса к структуре: как FEOD помогает упорядочить архитектуру фронтенд-приложений

    Чтобы принимать устойчивые архитектурные решения.

  12. Почему архитектура важнее выбора стейт-менеджера в React

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  13. Универсальный Backend for Frontend для всех платформ RUTUBE

    Чтобы принимать устойчивые архитектурные решения.

  14. От хаоса к системе: как мы создавали корпоративный фронтенд-фреймворк

    Чтобы принимать устойчивые архитектурные решения.

  15. Фронтенд и бэкенд больше не будут общаться как прежде: создаём конструктор сценариев на базе Backend Driven UI

    Чтобы принимать устойчивые архитектурные решения.

  16. Хороший код, но плохая архитектура

    Чтобы принимать устойчивые архитектурные решения.

  17. Как разделить фронтенд на модули и связать их между собой: на примере маркетплейса

    Чтобы принимать устойчивые архитектурные решения.

  18. Внутри Mailion: как устроен фронтенд почты на миллион пользователей

    Чтобы принимать устойчивые архитектурные решения.

Микрофронтенды

  1. Микрофронтенды в hh.ru

    Чтобы независимо развивать части большого интерфейса.

  2. Микровселенная безумия, или Как устроены микрофронтенды в Dodo

    Чтобы независимо развивать части большого интерфейса.

  3. Микрофронтенды с Module Federation: истории внедрения в готовый проект и создания с нуля

    Чтобы независимо развивать части большого интерфейса.

  4. Микрофронтенды — универсальное решение всех проблем или просто удобный подход?

    Чтобы независимо развивать части большого интерфейса.

  5. Готовим микрофронтенды на чистом JS без фреймворков

    Чтобы независимо развивать части большого интерфейса.

  6. Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде

    Чтобы независимо развивать части большого интерфейса.

  7. Микрофронтенды в SSR: опыт Авито

    Чтобы независимо развивать части большого интерфейса.

  8. Банки.ру: от монолита до микрофронтендов

    Чтобы независимо развивать части большого интерфейса.

  9. Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»

    Чтобы независимо развивать части большого интерфейса.

  10. Микрофронтенды: зачем дробить фронтенд и почему это может быть хорошо

    Чтобы независимо развивать части большого интерфейса.

  11. Микрофронтенды: прихоть разработчиков или реальная польза для бизнеса

    Чтобы независимо развивать части большого интерфейса.

  12. Build-time микрофронтенды, или делай проще

    Чтобы независимо развивать части большого интерфейса.

  13. Создание микросервисной архитектуры с использованием single-spa (миграция существующего проекта)

    Чтобы независимо развивать части большого интерфейса.

SSR и стратегии рендеринга

  1. Производительность фронтенда: большое приложение на реактивном SSR-топливе

    Чтобы ускорить первую загрузку и улучшить SEO.

  2. Масштабирование SSR-приложений

    Чтобы ускорить первую загрузку и улучшить SEO.

  3. CSR, SSG, SSR — про рендеринг приложений на примерах

    Чтобы ускорить первую загрузку и улучшить SEO.

  4. Утечки памяти в SSR: причины, поиск, устранение

    Чтобы ускорить первую загрузку и улучшить SEO.

  5. Собираем свою библиотеку для SSR на React. Роутинг

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  6. Он вам не SSR. Nuxt — больше, чем Server-Side Render фреймворк

    Чтобы ускорить первую загрузку и улучшить SEO.

  7. Выбор стека для веб‑сайта: обзор типов рендеринга — SSR, SSG, CSR и другие

    Чтобы ускорить первую загрузку и улучшить SEO.

Производительность и память

  1. Управление памятью

    Чтобы находить узкие места и ускорять систему.

  2. Производительность веб-приложений в бизнесе

    Чтобы находить узкие места и ускорять систему.

  3. Оптимизация производительности фронтенда. Часть 1. Critical Render Path

    Чтобы находить узкие места и ускорять систему.

  4. Долг оптимизацией красен: как мы в МойОфис объединили борьбу с легаси и увеличение производительности таблиц

    Чтобы находить узкие места и ускорять систему.

  5. Производительность React‑приложений: от лишних ререндеров до виртуализации списков

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  6. Используем JS Self-Profiling API для профилирования фронтенда на клиентах

    Чтобы находить узкие места и ускорять систему.

  7. Web Workers в JavaScript: Параллельные вычисления и улучшение производительности

    Чтобы находить узкие места и ускорять систему.

  8. Web Workers и React: как разгрузить UI и ускорить приложение

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  9. Код на React и TypeScript, который работает быстро. Доклад Яндекса

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  10. Сколько памяти ест ваша вкладка

    Чтобы находить узкие места и ускорять систему.

  11. React Update Lifecycle: что происходит при обновлении компонента

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  12. Как уменьшить размер бандла раз и навсегда: приемы, метрики, мониторинг

    Чтобы находить узкие места и ускорять систему.

  13. LCP под микроскопом: как выжать максимум из самой важной метрики Google

    Чтобы находить узкие места и ускорять систему.

  14. Влияние service worker'ов на web-приложения

    Чтобы находить узкие места и ускорять систему.

  15. Service Workers против медленного интернета: Кэширование и улучшение UX

    Чтобы находить узкие места и ускорять систему.

Мониторинг и эксплуатация

  1. Строим систему для мониторинга качества frontend-проектов

    Чтобы быстро находить причины сбоев.

  2. Как и зачем проводить интегральный мониторинг SSR-приложений

    Чтобы быстро находить причины сбоев.

  3. Сбор данных мониторинга из Frontend JS приложений используя Grafana Faro

    Чтобы быстро находить причины сбоев.

  4. Мониторинг и SLA на фронтенде: где брать метрики и как не высасывать из пальца SLI

    Чтобы быстро находить причины сбоев.

  5. Observability в финтехе: связываем клик пользователя с падением интеграции

    Чтобы быстро находить причины сбоев.

  6. Путь к ошибке: зачем нужны «Breadcrumbs» во frontend-мониторинге

    Чтобы быстро находить причины сбоев.

  7. Логирование во фронтенд-приложениях. Опыт Звука

    Чтобы быстро находить причины сбоев.

  8. RUM на Prometheus: пишем за вечер свой простой и надёжный фронтенд-мониторинг

    Чтобы быстро находить причины сбоев.

Монорепозитории, сборка и релизы

  1. Разработка в монорепозитории. Доклад Яндекса

    Чтобы автоматизировать проверки и выпуск изменений.

  2. Как мы сетапили монорепозиторий с SSR и SPA для Otus.ru

    Чтобы автоматизировать проверки и выпуск изменений.

  3. Angular Libs как монорепозиторий: начало, настройка, работа с assets

    Чтобы автоматизировать проверки и выпуск изменений.

  4. Angular Libs как монорепозиторий 2: tree shaking и сборка клонов

    Чтобы автоматизировать проверки и выпуск изменений.

  5. Монорепозиторий с pnpm и typescript для фронтенда на React и бэкенда на Node.js

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  6. Пример процесса внесения глобальных изменений в большой монорепозиторий

    Чтобы автоматизировать проверки и выпуск изменений.

  7. Как мы во фронтенд-команде ПСБ прокачали релизный цикл npm-пакетов

    Чтобы автоматизировать проверки и выпуск изменений.

  8. Релизим фронтенд несколько раз в день

    Чтобы автоматизировать проверки и выпуск изменений.

  9. Пишем интеграционные тесты на фронтэнд и ускоряем релизы

    Чтобы автоматизировать проверки и выпуск изменений.

Миграции и развитие кодовой базы

  1. Миграция на Vue 3 начинается не с кода: как донести важность и подготовить проект

    Чтобы обновлять кодовую базу без поломок.

  2. Бесшовная миграция монолитного фронтенда для критически важного бизнес-продукта

    Чтобы обновлять кодовую базу без поломок.

  3. Typescript в hh.ru

    Чтобы находить ошибки типов до запуска.

  4. Как перенести на TypeScript большую кодовую базу React UI-компонентов

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  5. Опыт перевода большого проекта с Flow на TypeScript

    Чтобы находить ошибки типов до запуска.

  6. Вдали от Webpack, или Как мы в Dodo микрофронтенды на Vite переводили

    Чтобы обновлять кодовую базу без поломок.

  7. Performance и оптимизация TypeScript-типов в больших проектах

    Чтобы находить ошибки типов до запуска.

  8. Как я ускорил TypeScript-типы в 15.7 раза

    Чтобы находить ошибки типов до запуска.

  9. О миграции с Angular на React в деталях

    Чтобы собирать интерфейс из переиспользуемых компонентов.

Дизайн-системы и библиотеки компонентов

  1. Переход от UI-кита к дизайн-системе в QIWI

    Чтобы сохранять единообразие интерфейсов.

  2. Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

    Чтобы сохранять единообразие интерфейсов.

  3. Тёмная сторона дизайн-системы и что с ней делать

    Чтобы сохранять единообразие интерфейсов.

  4. Основные трудности и ошибки при разработке дизайн-системы

    Чтобы сохранять единообразие интерфейсов.

  5. Подход, который помог нам точно оценить трудозатраты на разработку дизайн-системы

    Чтобы сохранять единообразие интерфейсов.

  6. Автостопом по дизайн-системе. Путеводитель с оглавлением

    Чтобы сохранять единообразие интерфейсов.

  7. Дизайн-система: от страдания к звездам

    Чтобы сохранять единообразие интерфейсов.

  8. UI-дзен: как мы познали гармонию, обновив библиотеку компонентов для дизайн-системы Shoelace

    Чтобы сохранять единообразие интерфейсов.

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

    Чтобы сохранять единообразие интерфейсов.

  10. Банка для интерфейсов: как дизайн‑система превратилась в самостоятельный продукт

    Чтобы сохранять единообразие интерфейсов.

  11. Дизайн-система в Додо: почему модуль компонентов – это еще не система

    Чтобы сохранять единообразие интерфейсов.

  12. Архитектура дизайн-системы для нескольких продуктов

    Чтобы сохранять единообразие интерфейсов.

  13. Дизайн-система IVI. Взгляд изнутри. Часть 2

    Чтобы сохранять единообразие интерфейсов.

  14. Дизайн-система: что пошло не так и как мы это исправили

    Чтобы сохранять единообразие интерфейсов.

  15. Рабочий процесс команды дизайн-системы

    Чтобы сохранять единообразие интерфейсов.

  16. Как я правил контраст и базовую палитру в дизайн-системе

    Чтобы сохранять единообразие интерфейсов.

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

    Чтобы сохранять единообразие интерфейсов.

  18. Как контролировать токены дизайн-системы: поиск ошибок, версионирование и графы в едином дашборде

    Чтобы сохранять единообразие интерфейсов.

Безопасность и доступность

  1. Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом

    Чтобы интерфейсом могли пользоваться все.

  2. Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений

    Чтобы интерфейсом могли пользоваться все.

  3. Веб-безопасность 201

    Чтобы интерфейсом могли пользоваться все.

  4. Веб-безопасность 202

    Чтобы интерфейсом могли пользоваться все.

  5. Frontend Security: о чем вы хотели бы забыть, но не сможете

    Чтобы интерфейсом могли пользоваться все.

  6. Подробная настройка Content Security Policy (CSP)

    Чтобы интерфейсом могли пользоваться все.

  7. Content Security Policy (CSP) защитит от js-снифферов и утечек?

    Чтобы интерфейсом могли пользоваться все.

  8. Неудовлетворительно. Результаты исследования безопасности российских frontend-приложений Q2 2025

    Чтобы интерфейсом могли пользоваться все.

  9. От localStorage к HttpOnly Cookie. Как меняется архитектура авторизации в SPA

    Чтобы интерфейсом могли пользоваться все.

  10. Картинка грузится, а fetch к тому же хосту — нет: как CSP тихо сломала три интеграции

    Чтобы загружать данные без перезагрузки страницы.

  11. Доступность и frontend: стандарты разработки продуктов для незрячих и слабовидящих людей

    Чтобы сайтом могли пользоваться все.

  12. Как обеспечить цифровую доступность по всем правилам: опыт Яндекс Капчи

    Чтобы интерфейсом могли пользоваться все.

Ревью, технический долг и наставничество

  1. Практики хорошего code review, или что такое code review за 15 минут. Доклад Никиты Соболева на DUMP в Казани

    Чтобы улучшать код без остановки разработки.

  2. Code Review – зачем и как использовать в команде?

    Чтобы улучшать код без остановки разработки.

  3. Code Review. 80 lvl

    Чтобы улучшать код без остановки разработки.

  4. Code review: почему мы до сих пор его используем и какие альтернативы?

    Чтобы улучшать код без остановки разработки.

  5. Простые шаги к эффективному code review

    Чтобы улучшать код без остановки разработки.

  6. Почему Code Review тормозит разработку и что с этим делать

    Чтобы улучшать код без остановки разработки.

  7. Технический долг на проекте или выбраться из черной дыры

    Чтобы улучшать код без остановки разработки.

  8. Как не позволить техническому долгу одолеть вас

    Чтобы улучшать код без остановки разработки.

  9. Мини-гайд по погашению технического долга

    Чтобы улучшать код без остановки разработки.

  10. Управление техническим долгом

    Чтобы улучшать код без остановки разработки.

  11. Технический долг — тихий убийца

    Чтобы улучшать код без остановки разработки.

  12. Как найти управу на технический долг

    Чтобы улучшать код без остановки разработки.

  13. Как мы научились эффективно работать с техническим долгом

    Чтобы улучшать код без остановки разработки.

  14. Как устроены технические стажировки Авито

    Чтобы улучшать код без остановки разработки.

  15. Я не Бог, не оракул и не гугл. Менторство глазами ментора и менти

    Чтобы улучшать код без остановки разработки.

  16. Как развиваться программисту, не меняя работу

    Чтобы улучшать код без остановки разработки.

  17. Что такое Загруженность команды: как использовать и для чего

    Чтобы улучшать код без остановки разработки.

Все подборки для Frontend-разработчика →