diff --git a/interview/README.md b/interview/README.md index a63cf0d..b99fc8a 100644 --- a/interview/README.md +++ b/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) diff --git a/interview/sections/platform-web.md b/interview/sections/platform-web.md index db70cd8..1bb04f4 100644 --- a/interview/sections/platform-web.md +++ b/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) diff --git a/interview/sections/system-design-backend.md b/interview/sections/system-design-backend.md index b488ca9..1055ad1 100644 --- a/interview/sections/system-design-backend.md +++ b/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. diff --git a/interview/sections/system-design-web.md b/interview/sections/system-design-web.md index 820ef02..c0cead7 100644 --- a/interview/sections/system-design-web.md +++ b/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 и описанием формата - Книга "Чистая архитектура. Искусство разработки программного обеспечения | Мартин Роберт"