Архитектура фронтенда

23 главы

На этой странице собраны все главы темы. Используйте поиск и фильтры по типу и сложности, чтобы найти нужный материал внутри раздела.

Сложность:

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

Зачем нужна архитектура фронтендалёгкий

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

Архитектура фронтенд-приложения: оболочка, функциональные модули и общее ядролёгкий

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

Frontend Architecture for Design Systems (short summary)средний

Книга Micah Godbolt о четырёх опорах фронтенд-архитектуры: коде, процессах, тестировании и документации. На примере Red Hat разбираем дизайн-систему, контракты компонентов и проверки качества.

Модели рендеринга фронтенда: SPA, SSR, SSG, потоковый рендеринг и гидратациясредний

Как выбирать модель рендеринга под SEO, задержку, CDN-кэш, персонализацию и продуктовые ограничения: SPA, SSR, SSG, потоковый рендеринг, острова и гидратация.

Слой данных во фронтенде: REST, GraphQL, BFF и оркестрациясредний

Как проектировать слой данных во фронтенде: REST, GraphQL, BFF, загрузчики маршрутов, агрегация, частичные сбои, повторные попытки и эволюция контрактов.

Состояние и кэш во фронтенд-приложениисредний

Как разделять локальное, серверное, URL- и формовое состояние, проектировать клиентский кэш, инвалидацию, оптимистичные обновления и поведение при сетевых сбоях.

Доступность интерфейса, формы и интернационализация как архитектурные ограничениясредний

Как доступность интерфейса, формы, клавиатурная навигация, проверка формы, автосохранение и интерфейс с учётом прав доступа влияют на архитектуру фронтенд-приложения.

Производительность фронтенд-платформысредний

Бюджеты производительности, размер бандла, разделение кода, доставка статических ресурсов, виртуализация, RUM и Core Web Vitals в архитектуре фронтенд-платформы.

Стратегия тестирования сложных фронтенд-приложенийсредний

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

Наблюдаемость, фича-флаги и безопасные релизы во фронтендесредний

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

Безопасность фронтенд-приложений и модель угроз браузерасредний

Как проектировать безопасность фронтенда через модель угроз браузера: XSS, CSRF, CSP, хранение токенов, сторонний код, BFF и риски цепочки поставки.

Модульный фронтенд vs микрофронтенды: когда и зачем делить приложениесредний

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

Building Micro-Frontends (short summary)средний

Luca Mezzalira о масштабировании frontend-команд: четырнадцать глав о принципах, моделях композиции, автоматизации, миграции и внедрении микрофронтендов в организации.

Micro Frontends in Action (short summary)средний

Michael Geers о микрофронтендах: моделях композиции, платформенном слое, автономии команд и миграции с монолитного SPA.

The Art of Micro Frontends - Second Edition (short summary)средний

Florian Rappl о зрелых платформах микрофронтендов: оркестрации во время выполнения, контрактах, управлении изменениями, опыте разработчика и корпоративных практиках.

Frontend system design кейс: Design Instagram Feedсредний

Практический frontend-кейс: проектирование ленты Instagram с акцентом на производительность, кэширование, pagination и UX для мобильных сценариев.

Фронтенд-кейс: коллаборативный редактор в стиле Google Docsсложный

Практический фронтенд-кейс: коллаборативный редактор в стиле Google Docs, синхронизация в реальном времени, OT/CRDT, офлайн-режим, повторное подключение, конфликты и UX при сетевых сбоях.

Фронтенд-кейс: аналитическая панель с высокой плотностью данныхсложный

Практический фронтенд-кейс: аналитическая панель с фильтрами, состоянием в URL, BFF, кэшем запросов, тяжёлыми таблицами, RBAC/ABAC, экспортом и строгими ограничениями производительности.

React.js: The Documentaryлёгкий

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

Angular: The Documentaryлёгкий

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

Svelte Origins: A JavaScript Documentaryлёгкий

История Svelte как компиляторного подхода к интерфейсу: реактивность, сгенерированный код, SvelteKit, гидратация и стоимость клиентского JavaScript.

Vite: The Documentaryлёгкий

Как Vite изменил фронтенд-разработку: сервер разработки, нативные ESM-модули, HMR, плагины, Rollup/Rolldown и скорость обратной связи.

Ember.js: The Documentaryсредний

История Ember.js: соглашения вместо конфигурации, Ember CLI, Ember Data, Glimmer, RFC-процесс, LTS и управляемые обновления.