Updates react and wa description

interview/README.md

@@ -35,7 +35,7 @@
 #### Frontend-разработка
 * [Секция по Web платформе и фреймворкам](./sections/platform-web.md)
 * [Алгоритмы](./sections/programming.md)
-* [Системный дизайн](./sections/system-design-web.md) (для кандидатов senior-уровня)
+* [Архитектурная секция](./sections/system-design-web.md) (для кандидатов уровня middle+ и выше)
 
 #### SRE
 * [Проверка общих инженерных компетенций](./sections/platform-sre.md)

interview/sections/platform-web.md

@@ -1,41 +1,37 @@
 # Секция по Web платформе
 
+## Как проходит секция
 В рамках секции идет обсуждение различных аспектов Web платформы и фреймворков. Также на секции проверяем знание JavaScript.
 
-## Как проходит собеседование
+На собеседованиях мы стараемся не задавать абстрактных теоретических вопросов. Вместо этого мы предлагаем решить несколько практических задач. Для лайвкодинга мы будем использовать сервис https://codeinterview.io/ — online-IDE с возможностью запуска кода в онлайне. Шаринг экрана не потребуется.
 
-Обычно план собеседования выглядит так:
+Продолжительность секции — 90 минут.
 
-1. Знакомство.
-2. Общие вопросы по Web платформе и JavaScript
-3. Вопросы по фреймворку, на котором специализируется кандидат.
+## Этапы секции
+Собеседование состоит из двух частей:
 
-Фидбэк кандидату может быть предоставлен как во время собеседования интервьюером, так и после через рекрутера.
+1. [Общие вопросы по Web платформе и JavaScript](#javascript)
+2. Вопросы по фреймворку, на котором специализируется кандидат. В Тинькофф используются два основных стека:
+   1. [Angular](#angular)
+   2. [React](#react)
    
-В конце собеседования у вас будет время, чтобы пообщаться с интервьюером и задать свои вопросы.
+В конце собеседования у тебя будет время, чтобы пообщаться с интервьюером и задать свои вопросы. Фидбек по секции, как правило, предоставляется уже после собеседования через рекрутера.
 
-## Материалы для подготовки к вопросам по Web платформе и JS
+## Материалы для подготовки
+
+### Javascript
 
 1. [Современный учебник JavaScript](https://learn.javascript.ru/). Состоит из трех больших частей:
-   a. Язык JavaScript.
-   b. Браузер: документ, события, интерфейсы.
-   с. Тематические разделы. Содержат важные темы, например, про сетевые запросы и хранение данных в браузере.
+   1. Язык JavaScript.
+   1. Браузер: документ, события, интерфейсы.
+   1. Тематические разделы. Содержат важные темы, например, про сетевые запросы и хранение данных в браузере.
 2. [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS). Серия книг про deep diving в JS.
 3. [Asynchronous JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous)
 
-## Вопросы по фреймворкам
-
-Эта часть секции призвана определить умение и понимание основных концепций фреймворка. На данный момент в Тинькофф используются два основных:
-
-- [Angular секция](#angular)
-- [React секция](#react)
-
 ### Angular
 
 В рамках обсуждения Angular часть задач будет посвящена знанию RxJS.
 
-#### Материалы для подготовки
-
 1. [Официальная документация](https://angular.io/docs)
 2. Change Detection:
    - [NgZone](https://angular.io/guide/zone)
@@ -55,4 +51,10 @@
 
 ### React
 
-WIP
+1. [Официальная документация](https://reactjs.org/docs/getting-started.html)
+1. [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/)
+1. [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318)
+1. [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture) - здесь неплохо написано про reconciliation в целом, часть про детали реализации (fiber) опциональна.
+1. [React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov](https://www.youtube.com/watch?v=dRo_egw7tBc)
+1. [Getting to know React DOM's event handling system inside out](https://medium.com/the-guild/getting-to-know-react-doms-event-handling-system-inside-out-378c44d2a5d0)
+1. [Новый контекст React в деталях](https://blog.csssr.ru/2018/04/06/new-react-context)

interview/sections/system-design-backend.md

@@ -5,8 +5,6 @@
 ## Как проходит секция
 Вам будет предложен набор функциональных требований к системе. В течение часа Вам предстоит формализовать задачу, спроектировать API системы, оценить нагрузку и необходимые мощности, спроектировать модели и потоки данных.
 
-В зависимости от направления Вашей деятельности, акцент может быть сделан на различные аспекты системы — например, на архитектуру веб-интерфейса в случае, если Вы — фронтенд-разработчик.
-
 Для визуализации процесса проектирования используется онлайн-доска [Sketchboard](https://sketchboard.io). Для упрощения работы с обширной палитрой данного инструмента в ходе секции рекомендуется пользоваться только элементами раздела Software Sketching.
 
 Один из наших сотрудников [выступил](https://www.youtube.com/watch?v=Cth-B4r_pf4) на конференции ArchDays 2021 с докладом "Дизайн секции как проверка навыков проектирования систем на собеседованиях", в котором он подробно рассказал про то, как выглядит интервью по дизайну систем, что на нем оценивается и зачем все это надо. Расшифровка выступления доступна в [статье](https://apolomodov.medium.com/system-design-interview-at-tinkoff-7bd97c20d082) на Medium.

interview/sections/system-design-web.md

@@ -1,22 +1,27 @@
 # Секция по дизайну для WEB направления
-## Формат секции
-- Продолжительность: 60 минут
-- Формат: Будет использоваться сервис похожий на https://excalidraw.com/ в котором можно будет "порисовать" систему
-- Кто проходит секцию: синьоры или выше
+## Как проходит секция
+Данную секцию мы проводим для разработчиков уровня middle+ и выше. Цель интервью — узнать твой опыт проектирования и сопровождения веб-приложений, а также твои способности решать задачи связанные с проектированием систем. 
 
-На этой секции мы хотим узнать ваш опыт проектирования и сопровождения Web приложений, а так-же как вы можете решить задачи связанные с проектированием систем. Фокус секции будет на Web приложении.
+Для визуализации процесса проектирования используется онлайн-доска [Sketchboard](https://sketchboard.io). Для упрощения работы с обширной палитрой данного инструмента в ходе секции рекомендуется пользоваться только элементами раздела Software Sketching. К сожалению, у данного сервиса нет демо-версии, но если хочется познакомиться с подобными инструментами поближе, можно попробовать [excalidraw.com](https://excalidraw.com/) — он очень близок по функциональности. Шаринг экрана не потребуется.
 
-### Этапы секции
-- Сбор требований - будет дана задача и на этом этапе проверяем как кандидат может собрать требования. Можно и нужно задавать вопросы и выяснить основные, критичные момент которые потребуются дальше
-- Проработка верхнеуровнего дизайна - оцениваем опыт в организации инфрастуктуры для WEB приложений. Какие системы используются, чтобы пользователь мог увидеть результат в браузере?
-- Проработка структуры приложения - оцениваем опыт в проектировании приложения на выбранных кандидатом технологий. Как будет приложение разбито на компоненты/модули
-- Проработка данных - оцениваем опыт в организации общения между клиентом и сервером, а так-же где и как будут храниться данные в приложении.
-- Производительность/Безопасность - оцениваем опыт в улучшении производительности приложений, так и исправления/учитывания особенностей связанных с безопасностью
+Постарайся записывать или схематически зарисовывать (если это возможно) всё, что говоришь вслух.
+
+Продолжительность секции — 60 минут.
+
+## Этапы секции
+В ходе интервью тебе будет будет предложен набор функциональных требований к системе. Тебе нужно будет:
+
+* Формализовать задачу: уточнить требования, выяснить основные сценарии работы системы. Что требуется от системы? В каких условиях будет существовать система?
+* Наглядно описать компоненты системы и их взаимодействие между собой: схематически изобразить компоненты, показать связи между ними. Схема должна наглядно показывать, какие системы будут использованы для того, чтобы пользователь мог увидеть результат в браузере. При этом нет необходимости глубоко погружаться в бекенд.
+* Спроектировать компонентную структуру фронтового приложения, формализовать API, спроектировать модель данных. По итогу должно быть понятно, как, где и какие данные хранятся и передаются между фронтовым приложением и бекендом.
+* Идем глубже:
+    * Оценить узкие места в системе, рассказать, какие оптимизации можно применить для снижения нагрузки на бекенд, для ускорения доставки данных до клиента, для улучшения performance-метрик.
+    * Критически оценить систему на предмет безопасности, убедиться, что закрыты все основные уязвимости.
+    * Прочие моменты — UX, a11y, i18n, поддержка различных устройств и так далее.
+
+Как правило, часа не хватает для того, чтобы полностью и всеобъемлюще обсудить задачу — это нормально. 
 
 ## Материалы для подготовки
-- Подумайте о том, как устроены внутри типичные сайты/сервисы средних или крупных компаний
-    - Подумайте о верхнеуровнем дизайне сервиса и какие системы участвуют, когда заходит пользователь на сайт?
-    - Как разбита логика внутри и какие есть челенжи? (часто можно найти доклады в которых разработчики рассказывают о своем проекте и как он устроен)
-    - Как разбивают логику на компоненты, чтобы можно было поддерживать и реиспользовать?
-- [Front-End Engineer](https://www.youtube.com/channel/UC6YpkaZsAcAvPNt4rLiS7dg) - хороший канал с разбором базовых задач, с описанием формата
+- [Front End Interview Handbook](https://www.frontendinterviewhandbook.com/ru/front-end-system-design/) — сайт с описанием похожего формата собеседований, много ссылок на полезные статьи и материалы
+- [Front-End Engineer](https://www.youtube.com/channel/UC6YpkaZsAcAvPNt4rLiS7dg) - канал с разбором базовых задаx и описанием формата
 - Книга "Чистая архитектура. Искусство разработки программного обеспечения | Мартин Роберт"