Вот очищенный и структурированный транскрипт:

[00:00:00] Интервьюер: Короче, вот что в качестве дополнительных условий: цена и доступность билетов могут изменяться, некоторые от API могут учить несколько секунд, результаты поиска могут содержать сотни или тысячи вариантов. Пользователь может заходить как на десктоп, так и на мобайл, и сервис может работать в нескольких странах. Так, хорошо, давай еще раз быстрее пробегусь по точке Авиасейлс: город отправления, город назначения, дата, количество пассажиров, выполнить поиск, получить 50-сотни вариантов полета, использовать сортировку. Так, а мы сейчас говорим только про сторону пользователя? Про сторону того, кто, ну вот типа водка Аэрофлота, там менеджер со стороны этих авиакомпаний — про них мы сейчас не говорим?

[00:00:56] Кандидат: Он по звучит к счастью только пользовательскую часть. Так, хорошо, если мы не даром прогмем, агон будет — это настройка. Так, хорошо, давай тогда начнем с заполнения нефункциональных требований. Давай.

[00:01:37] Интервьюер: Давай тогда мы поговорим про нефункциональные требования в таком контексте. А вообще есть предположение, какое количество там пользователей будет уникальных в день или еще что-то? Какое вот, есть какое значение предположительно?

[00:01:59] Кандидат: Хотя давай 1000 пользователей может в течение дня заходить, что-то смотреть, заказывать.

[00:02:06] Интервьюер: Хорошо. Так у нас получается сколько примерно запросов в день? Ну то есть, наверное, пользователи, но вот я, например, захожу, ищу, ну наверное, может два-три поиска сделаю. Это так или у тебя какое-то другое число может быть? Вот именно сколько в день?

[00:02:38] Кандидат: Ну слушай, в течение дня можно заходить, смотреть, отслеживать билет. Ну давай пусть будет 10 раз в течение дня заходов.

[00:02:42] Интервьюер: Так, третье у нас. Смотри, я так понимаю, что как раз вот у нас пользователи могут не только там в одном городе сидеть. Это, я понимаю, программа, наверное, на СНГ или что-нибудь типа такого? Ну то есть пользователи только один город какой-то или мы какой охват?

[00:03:17] Кандидат: Нет, сервис работает в нескольких странах.

[00:03:24] Интервьюер: Дополнительно, поскольку указал просто для себя, у нас получается какая-то сезонность здесь будет?

[00:03:44] Кандидат: Нет, сезонности нет. Пользователи летают круглый год.

[00:03:55] Интервьюер: Зимой и летом, или зимой нагрузка не будет увеличиваться летом, ближе к Новому году?

[00:04:06] Кандидат: Ну, по крайней мере, не предполагается, и ну да, не предполагается, что это как-то равномерно распределено, потому что все время пользователи куда-то заходят, куда-то летят.

[00:04:16] Интервьюер: Так, хорошо. У нас получается, должны это я здесь видеть про браузеры. А вот десктоп — это какой-то Chrome предполагается или еще что-то? Поддержка — это снова мобильный браузер пользователя, но еще окей. Давай так, пользователи с айфонов могут заходить, часто плохой браузер. Да, но у нас предполагается там SEO-оптимизация?

[00:04:50] Кандидат: Но хотелось бы, да, конечно, чтобы была оптимизирована, потому что хочу, чтобы сайт попадался пользователям.

[00:05:13] Интервьюер: Это нефункциональные требования. Собственно, нефункциональные. И вот такой вопрос по поводу безопасности: у нас какие-то есть предположения, что ну какие-то требования к защите есть там?

[00:05:39] Кандидат: Нет, конечно, да. Ну конечно, конечно, безопасность точно. Мы планируем, что всякие потенциальные атаки с внедрением каких-то скриптов и так далее — ну то есть это все хочешь сканировать, это мне кажется должно быть. У нас здесь предполагается какой-то UI-кит свой или мы будем использовать что-то существующее?

[00:06:11] Интервьюер: Так, давай так, у нас есть дизайнер, он делает дизайн. Если какой-то UI-кит готовый под это?

[00:06:24] Кандидат: Да нет, вопрос в целом можно, наверное, обсудить и взять готовые компоненты без дизайнера.

[00:06:42] Интервьюер: Так, хорошо. У нас на этот проект предполагается большая команда? Ну вот именно в части фронтенда, это буквально там 1-2 разработчика сделать там, не знаю, за месяц, например?

[00:07:04] Кандидат: Ну это пока пытаемся запустить этот проект, но планируем, что у нас будет 1000 пользователей, да, такой некий, наверное, MVP-стартап. Но хотим, чтобы был не только в одной стране, но и у нас эти наш, чтобы увеличить также конверсию.

[00:07:22] Интервьюер: Дима, извини, пожалуйста, не услышал, разработчиков предполагается много здесь? Ну то есть большая команда здесь будет работать?

[00:07:34] Кандидат: Ну да, наверное, то какое количество необходимо, если это все будет успешным, то какое-то количество, чтобы доразвивать проект.

[00:07:46] Интервьюер: Так, ну давай, наверное, пока с этим, с нефункциональными требованиями вроде все. У меня вроде все.

[00:08:11] Кандидат: Просил, все просил. Давай тогда быстренько посчитаем нагрузочку, просто для прикидки, для того чтобы понять, что у нас там с CDN-ами, что у нас с серваками, с SSR. Буквально так: первое, у нас получается, что у нас 1000 вот этих вот DAU, и у нас получается среднее количество запросов в день — ну где-то вот получается 10 раз, 10 000 может получиться. Кто-то может на 10 там делится на секунду в день, я не помню эту цифру, я просто поделю на 100 000. Если нет, на 100 000, там 86 с какими-то копейками, и у нас получается, что примерно эта нагрузка — это буквально один RPS. Давай еще раз, если не ошибся в расчетах. Раз, два, три, 4, 5, раз, два, три, 4. Да, то есть у нас нагрузка вот небольшая.

[00:09:38] Интервьюер: Второе, у нас получается, что раз у нас RPS небольшой, и мы тогда буквально на коленке можем примерно прикинуть трафик. Что у нас здесь получается? А трафик у нас получается будет тогда, мы попробуем прикинуть трафик. У нас получается на запрос, ну больше всего на запрос будет уходить. То есть, ну скорее, в среднем где-то, наверное, больше всего, скорее всего, будет идти на загрузку именно бандла нашего. Вот, то скорее всего примерно, ну судя по тому, где работа, может быть мегабайт 10 может. Хотя нет, это на микрофронтах. Давай прикинем, что пускай будет мегабайт 20 бандл, тогда на сборку грузится. Это нормально или, наверное, не очень? Давай попробуем так. Так у нас там получается, сейчас я на калькуляторе пересчитаю, у нас это грубо говоря получается что, так если 20 мегабайт, 20 000 килобайт.

[00:11:34] Кандидат: Так, хорошо, нагрузочку мы оценили примерно, то есть один RPS получается.

[00:11:38] Интервьюер: То есть один поток, поток, поток, поток, поток, поток, поток. То есть один поток, а не то что один запрос в секунду?

[00:12:11] Кандидат: Да, да, да, да. Ну то есть у нас всего 1000 пользователей уникальных, он один примерно заходит 10 раз в день, то есть мы делим на... там не 86, там с какими-то копейками, я просто округлил до 100 000. А если вот смотри, если потенциально же может быть такая ситуация: у нас 1000 активных пользователей, они могут все одновременно сделать запрос, у тебя все сразу упадет, потому что ты рассчитываешь нагрузку 1 RPS, а у тебя будет не один RPS.

[00:12:46] Интервьюер: Хорошо, ну давай какой-то процент возьмем. Я вот как раз вот на пике, ну на пике сезон спрашивал, будет ли таков, но ну то есть где 1000 пользователей нам говорит о том, что они могут и одновременно сделать запросы. То есть они даже меньше 1000, 1000 активных пользователей могут прийти на сайт одновременно. Да, это вероятность такого события маленькая, но она есть, и мы не должны упасть в этот момент. Мы должны с этой тысячи справиться в моменте.

[00:13:24] Кандидат: Так, хорошо, давай тогда я тебя услышал. Давай тогда поставим, что у нас пускай будет 1000 RPS нагрузка, но это прямо только в самый пик. Это, ну да, такой пик теоретически может быть. Понятно, что в течение дня какой-то там условно 10 процентов всех этих пользователей входит на сайт, они могут не пересекаться, а могут и пересекаться. Но в целом мы должны понимать, что если они вдруг все одновременно придут на сайт и захотят что-то поискать, например, мы устроим какую-то акцию, отправим всем уведомление о том, что у нас ниже на скидке, и в этот момент мы можем ожидать, что они все придут гипотетически.

[00:14:11] Интервьюер: Хорошо, и вот да, да, не хотелось бы в этот момент, однако хотелось бы предвидеть это. Опять же, это сейчас 1000, потом будет больше, но масштабирование.

[00:14:29] Кандидат: Да, так хорошо. Один, хорошо, давай тогда сейчас нагрузка будет небольшая, но мы понимаем, что она будет увеличиваться, и какой-то действительно пиковый сезон у нас случится, может быть там они все придут на скидочки. И так, хорошо, нагрузку посчитали, это посчитали, поехали тогда по верхнеуровневой архитектуре. Сделаем так, что у нас тут есть... вот так вот сделаем, а тут нельзя сразу? Можно клиент. Так у нас в общем, грубо говоря, будет клиент. Так как у нас предполагается то, что сервис работает с несколькими странами, у нас предполагается какой-то CDN. Ты где-то пишешь? У меня ничего не пишется.

[00:15:23] Интервьюер: А я рисую под картинкой, ничего еще нет.

[00:15:41] Кандидат: Вот и сейчас, да, вот сейчас прямо на моем CDN-е сидишь, ничего нет, ничего нет. Так, делать так, шестая, попробуем обновить, уже стремится после обновления, чего появится. А вот чего появилось, есть, супер. Тогда еще какой-то квадратик нарисую. Давай тогда нарисую SSR, видишь квадратик этот появился?

[00:16:19] Интервьюер: Вижу.

[00:16:33] Кандидат: Так, CDN, клиента со стороны не учился, короче, видимо, что там помогает из-за... так у меня VPN отключен, у меня нет. А сейчас отключил, попробовал. Но короче, мне по ходу придется обновляться чаще просто. Так, давай я попробую, вот я нарисовал квадратик, ты видишь?

[00:16:56] Интервьюер: Нет, я квадратик не вижу.

[00:17:06] Кандидат: Я квадратик тоже. Ладно, давай тогда ты закидаешь, я потом обновлюсь и посмотрю. А, Дима, давай сделаем так, давай тебе экран пошел. Давай, так мы пришли к демонстрации. Видно что-то?

[00:17:33] Интервьюер: Так, вижу, нормально видно. Квадратик видно, квадратик видно, супер.

[00:17:54] Кандидат: Так, смотри, раз у нас в общем SEO-оптимизация, ну вот этот, короче, раз у нас SEO предлагается и у нас нагрузка до 1000 RPS, короче, может быть, нам в любом случае понадобится тогда какой-то балансер нагрузки из-за того, что балансер нагрузки для нашего SSR, потому что если они все 1000 будут стучаться, мы будем отдавать, то у нас все будет очень грустно для нашего, вот поэтому они должны стучаться через... вот я пока просто верхнеуровнево прикидываю. Так у нас также должен быть наш весь SSR, и должны ходить через какой-нибудь API Gateway либо еще что-то к сервакам для того, чтобы запрашивать. Ну давай просто напишу, здесь будут какие-то микросервисы. Давай сначала посмотрим, что какие у нас должны быть микросервисы. Так, у нас должен город, город отправления, город назначения, дату, количество пассажиров, поиск. Ну давай прям верхнеуровнево сделаем вот так вот, пускай будет у нас тут какая-то БД. Поиск и так далее. Хорошо, это мне кажется, что очень похоже на какой-нибудь, какая-нибудь типа Postgres либо что, как раз для табличной, в общем, ну подходит очень, вот эта вся выборка подходит очень для табличного хранения. Да, вот соответственно, чтобы нам... некоторые могут отвечать несколько секунд, результат поиска может стать сотни тысяч вариантов, сотни тысяч вариантов — это мы значит будем использовать тогда кэш, будем использовать, чтобы нам не ходить, не галдеть по остальной базе. Кэш — это Redis. Так, и у нас получается, получается, что будет результат поиска, получить список из сотни перелетов. Так, и в общем, пускай будет, я бы знаю что сделал, пускай будет один микросервис, но не один, там в общем сеть микросервисов. То есть микросервисы будут для того, чтобы просто... так, подожди, там это не очень хороший паттерн, когда один и тот же микросервис стучится в базу данных. Пускай, короче, в общем, это будет микросервис... короче, вот так напишем. Вот, это будет несколько микросервисов, они соответственно будут отвечать за выборку, за поиск и за... фильтрацию. То есть у нас будет грубо говоря API с какая-то может с query-параметрами, где мы просто будем задавать по каким данным мы будем фильтровать наши запросы и ходить в базу данных. Так еще раз, давай напишем, то есть какие микросервисы будут. Хорошо, микросервис, ну то есть это микросервисы по поиску и по фильтрации.

[00:22:18] Интервьюер: Поиска и фильтрации — два разных микросервиса?

[00:22:20] Кандидат: Не, не, не, не, это один микросервис, который занимается и поиском, ну то есть грубо говоря, мы там либо сходили сразу все забрали из базы данных, либо забрали там через select что-то там, какие-то данные, вот именно фильтры, которые делают по цене или компаниям так далее. То есть это просто сеть микросервисов, которые делают одно и то же. Нагрузки в 1000 RPS, я вот думаю, что навряд ли там один микросервис, ну хотя бы несколько микросервисов должно быть, чтобы нам с этим разобраться. Вот поэтому я не знаю, Дим, наверное, не буду подписывать здесь, это просто общие микросервисы по работе с базой данных. Давайте стрелочки сразу прорисую. Сходил сюда, это сходил, сходил сюда, нет, нет, так вот, дальше у нас получается, это сходили сюда, что такое, короче все помню, нет, так, мы будем стучаться через Gateway, да, да, у нас это соответственно ходит сюда, здесь, здесь у нас тоже при 1000 RPS, если они все будут запрашивать данные, у нас там порядка двух мегабайт, это даже только хотя бы один бандл будет. Вот, в принципе, но сейчас мы поговорим вкратце, как можно усилить. То есть у нас, грубо говоря, тут тоже будет несколько SSR, вот, вот, и соответственно сходили сюда, получи. Также на статику загрузили на CDN, сходили на CDN, и соответственно у нас вот эти вот ходят вот так вот, либо так, либо через балансер нагрузки, если у нас сейчас, да что что такое то, вот так вот. Так это мы прикинули верхнеуровнево систему. То есть смотри, у нас раз SEO, это будет CDN, кстати, CDN у нас хорошо от DDoS-а так будет защищать, и плюсом мы там будем хранить всю статику вот на CDN-е, и соответственно с него подгружать именно то, что, не знаю, там какие-то общие вещи, которые не меняются, то есть картинки какие-нибудь, которые есть или еще такого вот. Вот, потом, так как у нас 1000 RPS, у нас будет соответственно, ну то есть нагрузка большая получается, у нас получается через один, ну как одну ноду мы не обойдемся, нам надо несколько нод использовать вот SSR, поэтому соответственно у нас должен быть какой-то балансер нагрузки через SSR. Вот мы можем как сделать, мы например этот балансер, он грубо говоря ходит там рандомайзером, закидывает запросы в...

[00:25:49] Интервьюер: Балансеру, чтобы снизить нагрузку. Мы снижаем, например, Round-robin, один даст порядка выигрыш в 40 процентов примерно, он дает выигрыш только за счет того, что ходит и просто по кругу опрашивает, ну не опрашивает, а по кругу закидывает всем серверам, например, запросы. Так, и плюсом, кстати, балансер нагрузки нас тоже будет спасать наши SSR, тоже те же самые DDoS-атаки и так далее. Вот, и часть, кстати, мы можем еще здесь поставить кэш, вот здесь вот, какие-то данные тоже здесь кэшировать. Как это лучше нарисовать-то? Через какой-нибудь кэш. Кэш. Так, так, мы по времени немножечко вылетаем. Так, чтобы у нас, если что, чтобы мы могли какие-то общие данные загружать. То есть мы можем делать первую страницу, например, если нам SEO-оптимизация нужна, и мы захотим снизить нагрузку на наши серваки SSR, мы можем первую страницу отдавать как SSR, а все остальные последующие там страницы или еще что-то, ну то, что возможно, или какие-то переключалки, чтобы уже это генерировалось на клиенте непосредственно. Вот. И так мы снизим непосредственно нагрузку, особенно в пиковые периоды, то, что 1000 RPS мы снизим нагрузку с наших SSR. Вот. Потом, соответственно, у нас наши SSR, либо через балансеры, ну если на клиенте уже начнется, мы ходим в API Gateway, он долбится в микросервисы, и они через кэш долбят нашу базу данных. Так. Давай еще раз просмотрим: город отправления, город, дату, количество пассажиров, выполнить поиск. Есть. Получить список из сотен вариантов перелетов, использовать сортировку, фильтрацию, фильтр, количество, открыть конкретный вариант, конкретный вариант, выбрать тариф, ввести данные пассажиров, перейти оплатить. Слушай, самое главное, кстати, не спросил, мы же не делаем авторизацию, то есть...

[00:28:27] Кандидат: Нет.

[00:28:28] Интервьюер: Так, давай, давай, давай. Ну пока не про авторизацию профиля, мы ничего не говорим, просто на том, что можно оплатить, получить билет на почту условно. А, то есть пользователь вообще не должен авторизоваться, просто зашел, оплатил и погнали дальше, так?

[00:28:45] Кандидат: А, пока авторизация, да. Давай только без нее, и так много чего другого есть.

[00:28:50] Интервьюер: Так, перейти к оплате, значит, у нас должен быть еще здесь отдельно сервис по оплате, Payment, Payment, Payment, Payment, которые... Давай вот так вот, даже сделаем. Если мы переходим, вот так вот, пускай, грубо говоря, как это будет... наш микросервис, который будет... Вот. Наш микросервис, который будет отвечать за оплату, и, соответственно, он будет в какую-то платежную систему заходить. Платежная система тоже наша, или мы используем сторонних?

[00:29:30] Кандидат: Сторонних, конечно.

[00:29:32] Интервьюер: Сторонних. Так, хорошо. Так, тарифы мы выбрали, ввести данные пассажиров, перейти к нам. Тарифы мы выбрали, ввести данные пассажиров, перейти к оплате. Оплаты сторонние есть. Так. Верхнеуровневая система закончена. Так, давай еще раз. Фильтрация по авиакомпании, количество пересадок, открыть конкретный вариант. Новая страница. Как раз на нее можно, например, использовать там Client-side rendering. Выбрать тарифы, ввести данные пассажиров. Так. Он, товарищ, выбирает тарифы. Это вот этот микросервис отвечает. Выбрал тарифы, ввел данные пассажиров, он обработал. Залетели в Payment. Залетели в Payment. И здесь еще должна быть еще, я так понимаю, то есть у нас просто вот я, например, захожу, проковырял там все, заплатил. И как предполагается то, что, например, я могу потом еще на сайт зайти и увидеть, что я уже что-то бронировал. Ну, то есть вот какая-то такая система предполагается, что видно историю бронирования или еще что-то такое.

[00:30:53] Кандидат: И, ну, в идеале бы хотелось это видеть, да. Но давай пока вот в рамках текущей задачи, давай предположим, что оно либо уже сделано, да, либо предстоит делать.

[00:31:08] Интервьюер: Ну, давай так, оно уже как будто по факту есть. Угу. Короче, история есть. Так, хорошо. Давай так, сервис с авторизацией, пусть давай уже есть. Вот так вот. Пользователи уже там проавторизировались, в личном кабинете, все, вот, хорошо. Мы это сейчас...

[00:31:28] Кандидат: Да, да, да. Супер. Поехали тогда дальше. Давай тогда проговорим про выбор технологий и потом перейдем к каким-нибудь сущностям. Выбор технологий. Ну, понятное дело, CDN — это понятно. Клиент, ну, раз несколько у нас... Еще раз. А, ну, Chrome и мобилки, в принципе, получается... И там... То есть у нас еще... Сейчас потом соображу. Так, у нас получается... Он там везде отдаст... Бандл он отдаст. То есть где-то еще должен быть... Так, ладно, хорошо. В общем, давай так. SEO — это, ну, понятное дело, это у нас SSR. Вот, вот, технологии я бы использовал React. Почему React? Потому что...

[00:32:32] Интервьюер: А это надо писать, Дима, куда тогда?

[00:32:35] Кандидат: Да, давай напишем. Давай, первая, ну, это SSR. SSR. Вторая, там под капотом... Там под капотом... А почему вот... Ты выбрал SSR, но при этом мы не обсудили, почему ты выбрал SSR. Почему?

[00:32:55] Интервьюер: А, SSR — это для SEO-оптимизации, потому что у него есть требования. Хорошая SEO-оптимизация, быстрая. Вот он как раз за счет того, что генерит страницу уже непосредственно на серваке и отдает уже готовую страницу. У него очень скоростная SEO-оптимизация, поэтому именно выбрали в сторону SSR.

[00:33:15] Кандидат: Угу, окей, ладно. Так, SSR... Этот... Я бы взял React под капотом, потому что... Почему React? Из-за того, что... Ну, банально, по-простому, что... Сейчас на React достаточно много разработчиков, и так как у нас это MVP, планируется дальнейший рост проекта, вот, то нам разработчиков на React будет найти намного быстрее и проще, чем разработчиков на Angular. Вот. То есть исходя из этого, я бы взял только React. React.

[00:33:51] Интервьюер: Ага. А, окей. Третье. Третье. По поводу State Manager. State Manager. Здесь есть несколько вариантов, например, либо взять связочку React Context и React Query для кэшированных запросов, либо пойти вообще в RTK. Вот. Но из-за того, что здесь мне видится, что как раз, вот опять же, мы пока делаем MVP, но предполагается дальнейший рост этого проекта и увеличение команды, я бы все-таки начал делить этот вообще проект на микрофронты. Тем более, ну, именно из-за того, что будет предполагаться дальнейший рост. Вот. И, соответственно, я бы взял, раз это микрофронты, а не монолит будет, я возьму связочку контекста, ну, нативного этого React-овского хранения State Manager и React Query. То есть, грубо говоря, в каждом микрофронте использовать этот. Так. Микрофронт. Четвертое. А вот, посмотри, ты говоришь, проект будет расти, а в чем минус, почему React, ну, контексты гряжешь? А если у контекста еще какие-то минусы? Если у контекста минусы?

[00:35:22] Кандидат: Да, нативный. Ну, вот если большое приложение будет, будет много микрофронтов. Ну, у него, возможно, будет какая-то проблема с прокидыванием именно в микрофронты связки. Ну, хороший вопрос. Можно, конечно, там в хостовом приложении взять какой-то тот же RTK, а уже в микрофронтах непосредственно пользоваться контекстом. Да, хорошо, что подметил. Давай тогда сделаем так. Да, надо на будущее тоже посмотреть. Хост, пускай будет RTK. С ним будет удобнее работать и, соответственно, да, мы хоть и несколько технологий поднесем в проект, но это будет более выгодно в плане производительности, потому что у нас только хостовое приложение RTK тянет. Вот остальное мы просто React Query можем закрыть, тем более, кстати, у RTK тоже есть RTK Query. Давай тогда. Просто я к тому, чтобы не раздувать на наши этот бандлы сильно. Ладно, давай пускай так будет. Давай пускай будет RTK плюс… Что-то мне сказал. Контекст. Вот так вот. И вот так в скобочках. Контекст. Так. Это, короче, по микрофронтам. Так, по микрофронтам. State Manager. Ну, раз мы микрофронты, то есть это Module Federation, Webpack, то есть нам не нужно сейчас что-то новое молодежное, типа, Svelte, как он ковыряться, еще что-то. Ну, пойдем просто в Webpack, так вот пишется. Вот. Чтобы не нагружаться. Так. У нас, понятное дело, что будет крутиться у нас на CDN-е… Это у нас… Это как же у меня это был? Сейчас подожди вспомню… Что ж такое? Вспошка выпала. Ладно, не будем… Сейчас я… Короче, CDN я вспомню, скажу… Там… Не надо там… Как же он называется-то… Блин, здесь из-за кого выпало… Нет, Nginx, к слову. Вот. Nginx у нас будет крутиться… Он как раз очень хорошо, кстати, из CDN-а подходит. И нам надо еще, кстати, будет потом… Ну, уже когда… Во время дальнейшей работы надо посмотреть по поводу тарифов CDN-ов… Потому что 1000 RPS достаточно много… Какие-то денежки это, я думаю, заберет у нас. Вот. По поводу… Так… Это есть, это есть, это есть… По поводу… Быковой разработки… Нам надо сильно углубляться туда? Или… Можем так, верхнеуровнево пробежать?

[00:38:43] Интервьюер: Давай сделаем еще что… Давай посмотрим… Какие у нас… Давай немножко еще рассмотрим… Вот мы рассмотрели там условную архитектуру взаимодействия с бэкендом… А вот… Балансер туда-сюда… А с точки зрения фронта технологии ты написал понятно… А как с точки зрения какой-то архитектуры на фронте как-то будет… Как ты это видишь? Можно какие-нибудь там, не знаю… Расписать по… Компонентно, верхний уровень, хотя бы страницы… Будут ли страницы, как-то все…

[00:39:23] Кандидат: Да, хорошо… Давай тогда… Я сейчас это сделаю… Так, давай, пишем… Технологии… Технологии… Технологии… Технологии… И… Ну, еще, наверно… Такой вопрос… Какие страницы ты хочешь отрендерить на сервере… Какие не на сервере… Угу… Что вообще будет… Что будет происходить на сервере… Так… Давай так… Давай… Сервер… То есть мы сейчас просто проговорим по поводу папочек, да? То есть… И… Давай так… Угу… Что мы хотим на сервере держать… Ну, что рендерить на сервере… Что на клиенте… Ну, так как этот проект… Опять же, по поводу масштабирования… То есть… Он предполагается рост… То есть… Я бы какой-нибудь выбрал FSD… Плюс… Он взял бы какую-нибудь слоистую архитектуру… То есть… У нас, грубо говоря… Будет… То есть… Такую мешанинку сделать небольшую… Я бы… Слой… Выделял бы отдельно слоя API… Выделял бы… Отдельно слой какой-то там компонентов… Это я уже про папочки… Примерно как деление… Какой-нибудь там слой… Я бы выделял… Ну, понятно типов… Кстати, да… Самое главное-то я не сказал… React с TypeScript… Без него… Просто сейчас… Связка по умолчанию… То есть… Это какие-то типы… Это общие какие-то hook'и… Hook's… Это общие какие-то… Константы… Конст… Конст… Вот… А непосредственно уже бы компоненты… Я бы делил соответственно… Там… Какие-то там… Пэйджи… На… Какие… На… На… Какие-то более низкого уровня… Не знаю… Типа… Ну вот если мы смотрим сейчас на сам этот компонент… То есть… Ну вот которая страница вверху… Да… Это… Это у нас соответственно какая-то… Ну… Грубо говоря… Это тоже будет отдельно… То есть… У нас есть полностью… Пэйджа… Вот эта вся страница… У нас там есть… Навигация какая-то… У нас есть… Фильтры… Фильтры… У нас есть… Непосредственно вот эти вот блок… Поиска… Ну… Пускай… Там… Все… Все… Не знаю… Там… Не знаю… Пускай… Там… Пока… Так… Пока… Так… У нас какой-то… Такой один будет блок… И… Кстати… В пэйджах… То есть… У нас… У нас несколько… Пэйджей… Плюс… Так… В результат поиск… У нас… Заходит… Ну… То есть… Отдельно там страница перехода там на оплату… Отдельно страница где ты открываешь… Конкретно… Ты можешь провалиться под конкретным вариантом… Это другая страница какая-то… Где ты там выбираешь тарифы, заносишь и оплачиваешь… То есть… Это все у нас улетало бы в пэйджи… И примерно там может быть… Ну… Не может быть… А там… Какие-то такие же были разделения по папочкам… Вот… И… Эти вещи я бы генерировал… Но… Я бы генерировал на серваке только вот эту вот первую страницу… Вот… То есть… Как мы до этого обговаривали… Что первая страница у нас будет SSR… Вот… А вторая страница непосредственно… Давай… Сделаем… Ну… Вот… Вот… Вторая страница… Это у нас… Client… Client… Client… Client… Client… Client… А на второй странице… Ну… Соответственно… Должны… Генерировать… Ну… Соответственно… Сделать… Уже… Непосредственно… Вот… Конкретный вариант… Конкретный вариант… А… А… А… А… А… А… А… А… Ну… Допускай… Давай… Пускай… Это… Payment… Что-то типа такого… Почему именно так… Потому что… Соответственно… Здесь есть… Что… Некоторые API могут отвечать долго… Результаты поиска содержат сотни тысяч вариантов… Это нам всё лучше отдать… На обработку сервака… Потому что… Ему быстрее прогоняться до базы данных… На сервере… Чем… Если… Через клиента… Мы будем… Нагружать… Ну… Если… Без SSR… Нагружать… Наш… API Gateway… И… Соответственно… Долбиться… В микросервисы… Вот… То есть… Первая страница… Вот… Кидаем… На сервер… Соответственно… На клиенте… Мы уже будем… Отображать… Тариф… Ну… Это… Есть… Это… Есть… Да… Будем… По поводу… Так… Вкратце… По поводу безопасности… По поводу безопасности… Но опять же… Да… У нас… Кэш… Не кэш… А CDN-а… DDoS… Атак… Будет защищать… У нас… Соответственно… Ну… Какая-то политика… Content Security Policy… Можно сделать… Чтобы защититься… Ну… То есть… Надо будет делать… Content Security Policy… Чтобы защититься… От… Так… И… От… Соответственно… Через HTTPS… Кидаться… Чтобы… И… Делать… Какие-то там… Токены… Чтобы защититься… От… CSRF… Атак… Вот… Еще… Еще… Что тут можно сказать… Что тут можно сказать… Ну… Можно еще про WebVitals поговорить… Или Vitals… Ну… Давай это чуть-чуть… Давай про это не будем говорить… Давай… Лучше… Так… Про сущность… А вот… API-шечку попроектируем… Да… Да… Давай про API-шечку поговорим… Какие запросы… Какие данные вообще приходят… Уходят… Давай… Сейчас… Где это все будет храниться… Давай… Сейчас… Давай… Так… API… Ну… Понятное дело… Что у нас будет какой-то… То есть мы кидаемся… нас предполагается что будет JSON, мы будем кидаться, вот и соответственно HTTP будет ходить, единственно что может быть то микросервисами, gRPC, по он как-то он так называется, но ты глубоко туда не буду погружаться, вот так у нас будет вести HTTPS и теперь гоняться. Вот по поводу API-шки, у нас будет API, на то есть первая страница — это соответственно на какой-то GET-запрос на получение... ну да, короче, GET-запрос у нас получается. Так, а получается пользователь зашел на страницу, он пока никакой выборки не видит, он сначала выбирает там сверху что-то и нажимает найти билеты, и только после этого у него что-то же происходит, я же правильно понимаю, вот эта кнопка как работает? То есть у нас получается, да, у нас получается будет GET-запросы на поиск, это будет все, вот то есть давай вот так по-русски напишу, потом короче на получение данных, потом у нас будет, потом у нас будет GET-запросы на фильтрацию, это вот вот это слева навигашечка, соответственно просто кидаемся GET-запрос. Так, а GET-получение или на фильтрацию отличаются запрос? Вообще можно по-хорошему их можно объединить эти запросы, вот потому что в принципе и...

[00:49:05] Интервьюер: Хорошо, да, я понял, лучше даже объединить, потому что в принципе когда мы будем левую навигацию толкать, мы все равно должны вот эти вот все данные сверху, которые были, они должны будут все равно повторно уходить. То есть у нас не предполагается никакого состояния на наших микросервисах, хранение состояния. Соответственно, мы получается просто будем GET-запросы кидаться и получать какие-то данные. Потом соответственно у нас будет GET-запрос на если мы проваливаемся в конкретный, ну как этот, в конкретный поиск, и соответственно где мы должны будем получать уже непосредственно более детальную информацию.

[00:49:49] Кандидат: Открыть конкретный вариант, то есть это понимаю мы провалились, получили более детальную информацию или там не предполагается детальная информация? Детальная информация, потом POST-запросы, когда мы вводим формочку, то есть это ну грубо говоря, ну грубо говоря, оплата, оплата. Так, пока Дима, у нас час всего, да, у нас очень-то так, у нас минутка осталась, а уже и все. Так, давай еще тогда вопрос тебе задам пока. Так, смотри, вот что может быть, если у нас эти запросы 10 секунд отрабатывают? Ну то есть условно ты ищешь там Москва-Санкт-Петербург и вариантов 1000 сразу выходит, но при этом полностью запрос отработать через 10 секунд, но в целом первый результат уже можно нарисовать через 500 миллисекунд. Что вот в этой ситуации будет делать? И ждать все 10 секунд и после будешь отрисовывать все 1000 поисков, или какой-то есть метод, способ, как можно решить?

[00:51:32] Кандидат: Да, можно например на микросервисе сделать, чтобы он там отдавал это партиционно, скажем так, ну то есть и для нас сделать например типа Lazy Loading, грубо говоря, то есть например он первые 10 результатов сразу нам выкидывает. Мы если понимаем что такая ситуация есть, может миллион записей в таблице быть, мы например берем там первые 10, он сразу нам выгружает первые 10 и остальные мы например докачиваем. То есть он нам их...

[00:52:02] Интервьюер: Так это будешь докачивать остальные, еще чего?

[00:52:11] Кандидат: За счет, за счет, за счет непосредственно либо уже на клиенте тогда вы что-то запросами делать, но это придется еще загружать. Но вообще лучше всего сделать какой-нибудь типа, ну вот типа Lazy Loading какой-нибудь сделать, но...

[00:52:24] Интервьюер: Но а чай долбить, но делать что Lazy Loading? Но вот у тебя он грузится 10 секунд, тебя отрабатывать запрос, но... был чатом, ловы, ловы, до рисуется, данных нет, меня сидит ждет, ждет, ушел, потому что долго, пошел другой сервис, где джин показали, это билет. Не, не, то есть 10 секунд — это прям red flag, то есть такого нельзя, нам что-то пользователь обязательно показывать. И сразу мы можем ему показать как раз вот какие-то первые, скажем так, первые наброски, ну то есть там 1-10, 20, 30 записей. Вопрос в том, как мы остальное будем загружать пользователю, ну какой там сделать виртуализацию, что-нибудь типа такого попытаться сделать ему.

[00:53:19] Кандидат: Но виртуализация как будет работать, ну по какому принципу у тебя?

[00:53:22] Интервьюер: Да, у тебя бэк возвращает, что он, чем либо вернет? Каким образом он тебе часть вернет? Ты как будешь регулировать, какую часть показать, вернуть, не вернуть, за счет чего это будет достигаться? Ну ты говоришь, покажем первые пять маршрутов. У тебя запрос один, да, ты запросил, и тебя запрос А, кандидцы пока полностью все не соберет, Б, он как-то может быть частично что-то возвращает, а вторую часть как, спирит, по какому принципу вторую часть?

[00:54:04] Кандидат: Хороший вопрос, что мы будем делать со второй частью или... 1000 разных билетов. Во-первых, можно пагинацию попробовать, эти запросы сделать пагинацию на серваке, то есть и при переходе там на вторую страницу уже делать запрос на сервак. Но...

[00:54:25] Интервьюер: Спорт, пагинация, что пагинация? Чтобы часть сформировалась, нужно чтобы запрос А сходил на БД, взял 1000 этих разных билетов, да, разделила по пагинации, какую-то кусок на какую-то часть и тебе ответил. На это опять долго, 10 секунд.

[00:54:43] Кандидат: Так нет, подожди, это тогда будет не 10 секунд, потому что мы там же будет быстрее из-за того, что мы отдаем серваку как количество, там например 10 записей, и он только первые 10 записей, то есть базы данных-то все там 100-500 записей брать, он возьмет...

[00:55:16] Интервьюер: Хорошо, ты будешь что-то передавать? Да, да, да, да, да, да, да. То есть ну какой-то, например, странице номер, например, какой-то... ну типа страницы, да, я говорю там, давай третью страницу, он понимает, что ты с 30 например по 40 записи должны получить. Вот, но тут ты другой стороны, возможно мы на более дальних страницах будем тогда силы по скорости из-за того, что уже долго, мы по крайней мере первые первыми нарисуем. А вот то, что попробовать, попробовать, в общем надо мне посмотреть. Вопрос хороший, хороший, как мы с этим можем побороться, чтобы барабашки... говорят, ну вот кажется, что пагинация, еще нужно встать и не за ценная, пока не могу придумать, как мы можем загружать, загружать, потому что а вот... хотя можно тот чем какие варианты, естественно, сервер может слать его NT каких-то данных порции, веб-сокет, ты можешь стороне подумать, но слушай, да интересно, кстати, действительно, да это вот как подсказка такая. Это Server-Sent Events, на кровоем поток и он закидывает, интересно, слушай, да, в... мне кажется лучше с и до...

[00:56:41] Интервьюер: Открыться, язык закидывается, с и допустим большое... руки так... это получается пока все, да? Получается я не успел спроектировать API, но сущности и на Vitals мы решили не разговаривать, а так в принципе... но нет, на самом деле момент как так, что мы стали обсудить, но так тогда на сегодня получается все. Так, хорошо, а ты какой-то скинешь там фидбэк или еще что-нибудь такого?

[00:57:30] Кандидат: Да, в целом конечно, да, спасибо, тогда пока.