Публичное собеседование: фронтендер [Хекслет + CSSSR]

Транскрипция видео:

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

  00:00:02 - 00:01:10

• могут отвечать кандидаты для них это такая терапевтическая больше конечно истории проверка собственных знаний и вот сейчас я уже успела наговорить вам очень много слов а это значит что самое время сказать мне как меня слышно как меня видно а и пока вы мне там пишите плюсики либо говорить что да все хорошо звук норм картинка норм я начинаю представлять наших сегодняшних участников оси беседую сегодняшнюю историю а сетевого css are serious головин сереж привет вот он нам машет урок привет отлично а и отвечайте на ли его

  00:00:37 - 00:01:47

• сегодняшняя кавер на а может быть и не очень вопросы василий он нам чуть позже представиться самостоятельного сид привет привет отлично а и вот я вижу что уже пошли плюсы все хорошо но и кроме того вы можете подписываться на twitter и ребят и вы ссылка на них есть в описании но и кроме того сегодня у нас также будет присутствовать официальные аккаунты с и сары от youtube это же отвечать на ваши вопросы если они вдруг будут возникать участвовать в дискуссиях и я вас тоже активно призываю общаться поддерживать

  00:01:12 - 00:02:19

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

  00:01:45 - 00:02:46

• чтобы он немножко рассказала о себе я у вас в курс дела представился рассказал про свою какую-то экспертизу вот а потом мы переходим публичному собеседнику а я из этого барда скрываясь и буду с вами в чате да давайте тогда я немножко расскажу о себе действительно я уже наверное лет десять программирую профессиональные то есть зарабатывая при этом деньги начиналось бэг-энда потом перешел во front-end и [музыка] последние пару лет я с тела компания сесар до этого был просто разработчикам но надеюсь что и сейчас можно насчитать

  00:02:16 - 00:03:30

• разработчикам тем льдом и вот красить его иногда кантри бью чего всякий разный open source ну и собственно наверное все вот и хотел бы сейчас передать слово василию чтобы мы как раз познакомились и потихонечку же начинали непосредственно наше собеседование привет всем не вася не 31 год программируя не 10 лет всего шесть семь месяцев наверное сих пор реки пришел на hex лет учусь по программе front-end разработчик уже закончил несколько проектов на текст лить но по сути профессию я уже добил вот решил по собеседовать посмотреть что

  00:02:53 - 00:04:21

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

  00:03:37 - 00:04:36

• того собственно как у нас пойдет беседы это нужно мне непосредственно для того чтобы определить какие-то границы знаний глубину этих знаний и так далее вот но перед тем как мы непосредственно к этим вопросом каким-то техническим вопросам перейдем василий расскажи вот ты ты говорил что ты учился кстати вот какие какие задачи тебе больше всего радовали то есть что тебе больше нравится то момент с джессом поработать какие то алгоритмические задачки или больше верстка вот что тебе нравится во front-end

  00:04:09 - 00:05:06

• наверное с джессом больше потому что я пробовал раньше но здесь на верстка мне нравится тоже но джесс это нечто новое для меня была на hex лети тем более углубиться сам язык программирования понятию вора какие-то хорошие плохие стороны возможности то есть нежность и ранах и стороны но у каждого языка программирования есть хорошие плохие стороны это сердце стримеров для нужны задач поэтому наверное всем посыпь а на других языках у тебя был опыт программирования говорю что джесс это что то новое на

  00:04:37 - 00:05:53

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

  00:05:16 - 00:06:29

• первые поделки и у меня было желание программировать но я просто брал там смотрел там книжки была такая знаешь где просто из примеры ты его перепечатывала куда-то она работала это не понимал совершенно как естественно интерес быстро угасал и только уже университете когда это начал изучать питон и когда уже понял вообще как программа работает вот тогда соответственно и загорелась ну хорошо давай тогда перейдём к вопросам мы говорим собственно ojos скрипте давай с его особенности собственный начнем джо

  00:05:57 - 00:06:56

• скрипта есть некоторые такие концептуальные особенности которые его особо страны выделяют другой стороны делают каким-то какие-то общие черты с другими языками давай поговорим о да из нас о контексте вот как та штука работает джесс вообще и какие есть такие моменты с а я знал что будет на самом деле дресс эта штука в скрипте написано что она не так работает как на других языках beer ждать я не могу потому что на других языках не пишу но вес ссылается на контекст без внутри каких-либо функций ссылается на контекст объекты

  00:06:27 - 00:07:46

• внутри которых функции работает собственно то есть это такая динамическая штука которая в одних функциях во время вызова может вызываться с нужным контекстом у обычных функций тех которые мы объявляем составом function фарша и тодес привязан к у стрелочных он типа привязана всегда там где стрелочная функция объявлена объявлена то деистом постоянный то есть он принимает ты стрелочная функция получает окружении контекст того места где она была объявлена только окружен окружении контекст хорошо а вот так который

  00:07:06 - 00:08:38

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

  00:07:54 - 00:09:12

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

  00:08:33 - 00:09:46

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

  00:09:10 - 00:10:28

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

  00:09:48 - 00:10:44

• такое что это за функция ну джесси вообще функции то они являются объектами первого рода то есть функции по сути это выражение функции то данные мы их можем передавать в другие функции как параметры мы можем их возвращать из функций в общем работать с джессом в таком никому функциональном стиле когда мы типа функции принимает функции находит возвращает другие функции вот два немножко про функциональный стиль и вот этот если бы у нас не было функции высшего порядка то вообще смысл замыканиях остался бы или пропал

  00:10:17 - 00:11:38

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

  00:10:59 - 00:12:22

• декорирование частичное применение которое используют замыкание и как раз таки она существует для того чтобы замка не существует для того чтобы использовать вот эти техники хорошо ты тут сам как бы себя подтолкнул уже к следующему вопросу да я не думаю что мы это затронем но раз ты упомянул к режем частичное замыкание в чем разница между ними в каре рование получается мы возвращаем функцию сканирования от частичного применение отличается разница и количеством аргументов карьера возвращает 1 аргументу каждый возврат функции из

  00:11:41 - 00:12:57

• функции возвращает функция принимает один аргумент а частичное применение но уже несколько то есть ты можешь вернуть какой то ты можешь частично применить функцию снег с некоторым количеством аргументов больше чем один два три и там за 43 границы только в том сколько аргументов можно там но сколько помнишь да мне кажется ну на самом деле нет но интересный факт чтобы ты не очень сильно расстраивался это такой немножко триллион не самая частая штука которую общее используется и карьерным частичным

  00:12:22 - 00:13:30

• применением не буду называть но на самом деле даже на таком довольно менее известном курсе по хаски white опутали носами лектор путал так что не переживай насчет это на самом деле carrera вани это превращение функция ты на документов функцию от произвольное количество аргументов то есть мы как раз кодированные функции можем частично применять и в этом разница если нас функция не кори равана допустим же скрипте там и и частично применять не можешь есть даже какой-нибудь там будешь там даже тоже есть функция кори как раз

  00:12:59 - 00:13:53

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

  00:13:26 - 00:14:46

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

  00:14:10 - 00:15:03

• раз таки переменными там объявлены так далее nokia давай двигаться дальше джо скрипте есть еще одна такая особенность большая это асинхронность как ты считаешь какую проблему решает асинхронность вообще джейсон был создан как язык который работает на клиенте и по сути это язык такой стиль событий то есть в браузере этот язык работает как как событийная модель он ждет от пользователей какого каких-то действий и если бы вот java скрипте не работал асинхронность то какое-то действие пользователя блокировала бы поток

  00:14:37 - 00:15:55

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

  00:15:16 - 00:16:41

• код который выполняется очень долго [музыка] не то чтобы долго и мы не можем остановить выполнение остановиться на выполнение какой-то функции просто не выполнять если мы все где то на фоне может и не знать считаться файлы записываться там и так далее то есть это нужно для того чтобы все работало быстро и без ну давай вот тоже сюда немножко копнем вот ты говоришь про долго выполнение кода ну вообще у нас как асинхронность реализовано то есть чтоб что нам нужно сделать чтобы какой-то кусочек кода

  00:15:58 - 00:17:14

• выполняться синхронно что в троицком стaть либо прописать осень то есть перед функцией поставить написать и sing и и то есть любая скромно операции которые внутри функции выполняется автоматически делает его sync ролью но ну я просто не не услышал вопросы конкретных до вам жесткой должен но и сначала промежуточный вопрос был как мы можем это сделать 2 1 можем выяснили что например promise написать вот мы пишем promise и в котором мы будем выполнять код который будет выполняться минуту скажем мы сможем когда он начнет

  00:16:36 - 00:17:50

• выполняться продолжать работать с браузером также так царь конечно конечно смотрит он не будет на как блокировать другой выполнен же скрипта нет не блокирует асинхронная функция вызывается именно тот момент когда стек основной стать пустой нашим вот когда она уже вызвалась да то есть уже пошла выполнение вот этого кода который будет минут выполняться пошло тогда он будет блокировать какой-то другой java script возле ну например мы там где-то написали допустим у нас есть кот синхронно чего-то делаем там a + b до потом

  00:17:14 - 00:18:27

• вызываем этот promise который будет минут выполняться тело его потом еще какой-то код пишем вот как это будет выполняться и будет ли блокировать но он не должен блокировать ток promise как бы он вызывает call back по своему завершению то есть он куб он не блокирует поток по сути то есть у нас а может такая хорошо другом сплошь может быть такая ситуация что он тоже не блокирует он кого-то будет выполнять до может ли у нас такое быть что правильно с этим еще какой-то код будет выполняться нет не можем назвать несколько есть

  00:17:50 - 00:19:00

• такая штука про my soul то есть мы выполняем несколько проект несколько операций одновременно но call back вызывается в конце когда они все выполнил то есть несколько операций одновременно восполняться да ну и и можно упорядочить это то есть можно можно выполнить и несколько одновременных операций можно этого порядочность тебе нужно чтобы одни данные попадали в другой то есть другой параметр третий и так далее на по сути да можно выполнить несколько одновременно мы не можем гарантировать как они будут выполняться в каком то

  00:18:28 - 00:19:34

• есть порядке что ли данные придут в кроме sol но по сути да мне кажется одновременно могут одновременно могут любые вообще просто допустим у нас там произвольный код котором сами написали это 10 promise of таких произволен кодом и мы запустили все 10 вот они все 10 бы параллельно выполняться допустим каждому и у нас ну пусть 818 promise of допустим но он добавляет эта модель или как короче место где исполняется сам джейсон добавляет стык вот этот promise выполняет добавляет следующие выполняя дополняет следующий три стороны

  00:19:01 - 00:20:21

• выполняется последовательно да ни про один страж о-окей что это за стык такой вот как он работает для чего он так вызов это играешь он добавляет какой то так он на самом деле не совсем корректно говорит что он стык добавляется так он очень удивляется текст это скорее как структуры данных работает в этом смысле но до структура данных do not здесь давай сейчас разграничим все таки у нас есть в event лупи да есть очередь очереди то есть т.к. он как очередь работает получать 1 зашел да и первый вышел тут

  00:19:41 - 00:21:02

• немножко ты конечно или сказал парадоксальную штуку то есть так работает как очередь это как черный работает как белая один стык попадает функция допустим потом она вызывает другую другую вот это так растет потом это выполнилась она ушла из 3 к 2 другое короче функции который вызвал из 1 не вызывает других а на последней получается это сама давай тут его дела и станешь к путанице давай попробуем сейчас вот этот момент разгрести смотри у нас есть какая-то задача да да он попытается сначала когда

  00:20:21 - 00:21:31

• вы создали promise все там она попадает в отдельную очередь то есть это него синхронные да но она попадает в такую очередь для синхронных задач там они еще делятся на какие-то тоски микро макро тоски и взвесить отворять по моему микро тоски и выполняется раньше чем макро тоски потому что нейтралитет это шо это даже ну это тоже важная разница и но есть еще более важная разница не скажу потому это не просто же сейчас мы положим вот это на стык потом пойдем дальше а потом вернемся к это ваша давай

  00:20:56 - 00:22:06

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

  00:21:32 - 00:22:40

• вызовов пустой до кол стоит пустой и отсюда кстати тоже интересно интересный момент вытекает если мы давай сейчас все таки скинуть ссылочку на яндекс код и мы там посмотрим пару вещей часа скину ссылку в наш приватный чатик ты откроешь или в принципе я могу даже расшарить сейчас я попробую себе открыть [музыка] отдавай часто парашара так я надеюсь все видно вот смотри представь что носить некий код сейчас мы быстренько java script для простоты пусть это будет очень простая функция которой ничего не будет делать

  00:22:06 - 00:23:46

• давай назовем ее ран который будет принимать собственно функцию и выполнять ее и соответственно мы сделаем какой не будешь просто этаж просит увеличить шрифт немножко потому что не раз это и сделать это так и надеюсь будет видно так здесь мы какой нибудь сделаем консоль консоль trace вот и потом у нас будет какой-нибудь ран в которой мы сделаем promise i saw и соответственно в нем тоже какой-нибудь консульт 1 вот на что делать консультации по моему вызывает трейдер он выводит на экран порядок вывода

  00:23:06 - 00:24:45

• функции до вызова функции по сути down stack trace выводят как раз таки это нам может показать вообще как у нас вызывался код как отрабатывал то есть когда мы видим county ошибку да и там подаст actress это по сути тоже самое только без ошибки то есть мы можем просто показать тут показать вот в момент вот это выполнение кода какой на stack trace и интересный момент да вот мы видим здесь синхронно живет здесь у нас уже будет асинхронно выполняется код как ты считаешь так как у нас весь код будет последует выполняться то вот здесь

  00:23:59 - 00:25:06

• вот в этом моменте у нас stack trace просто дополнится новым трейсер или будет практически пустым новым там с парой строчек вот в момент выполнения от этого синхронного кода давай подумаем там стриптиз бывает будет написано вызов а здесь тоже будет вызов который понял бы вы знаете тут вода он по идее будет пустой down почти будет пустой почему потому что он вызывается как бы в своем стыке уже когда ран выполнился то есть ран выполнился стек освободился только тогда вызвался вызвался профиль срезов

  00:24:33 - 00:25:50

• то есть не просто не вызвался таким был бы какой-то вызов но все правильно да это то о чем мы как раз говорили да то есть когда у нас непосредственно новая задача начинает выполняться тогда когда у нас старый кот уже выполнился то есть у нас уже stack trace пустой call stack пустой и соответственно именно поэтому когда мы делаем консоль trace в асинхронном коде мы не можем увидеть код предыдущих синхронных вызовов потому что ничего уже смотреть именно поэтому наверное нельзя с отловить ошибки через строкач

  00:25:12 - 00:26:15

• когда пролез какой-то выполняется внутри потому что трачу же выполнился и потом правительства до но тут немножко другой момент да ты можешь трака чем отловить их внутрь и снаружи да не можешь потому что на самом деле вот уже полностью выполнился как-то сказал все верно хорошо так давай тогда двигаться дальше мы это в принципе обсудили поговорим немножко про самую частую тему которую обсуждают про безопасности есть такая штука course the cross origin ресурсы можешь рассказать что это и но по традиции для чего для чего нужен блин

  00:25:45 - 00:27:06

• я вот очень очень очень плохо понимаю что это но я примерно знаю что кросс короче это это когда у нас с одного места идут запросы на сервер то есть по сути как бы это объяснить но мы делаем запрос на сервер к нам при прилетает ссылка какая-то к примеру мы проходим по этой ссылке этот вредоносный сайт получают наши cookies и уже с нашими куками может обращаться на и тот же сервер но уже с другого места и вот cars это по сути такая такая настройка которая это заголовки который выполняется вместе с

  00:26:25 - 00:27:46

• защите по запросам для того чтобы определить летят ли запрос с этого места ошибаться просто в целом правильно то есть сейчас я не думаю что важно там придираться к нюансам потому что целом ты понимаешь плюс-минус как это работает но давай попробуем понять а для чего это вообще штуку нужно потому что это более важно на самом деле вопрос ну для того чтобы понять что все запросы выполняются конкретного 1 место одним человеком то есть это не злоумышленника ними человеком человек здесь много в чем курс

  00:27:09 - 00:28:18

• на как смысле с 1 места с одного места выполняется сражалась раз ты имеешь ввиду что что то что такое место с окружении из одного браузера получается или мини-курс ничего про тоже про браузер не говорит это немножко другое панель давай подскажу под одним местом понимается один домен зачастую ну или разрешенный домен домен что такое но им это имя который скрывает ip адрес ну если очень сильно упрощает нужно хорошо пусть будет так для простоты сейчас нам это здесь не нужно хорошо для чего нам это нужно вот для чего нам

  00:27:44 - 00:29:11

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

  00:28:28 - 00:29:59

• такое курс на никогда не бывал ситуации где это может то есть я не задумался о том как это можно использовать а ты слышал аппарата узи масти какие-нибудь распространенный тип xss асессоров новость это красоте эликсира это по-моему когда мы можем в каком-то текством поле вызвать джесс код до когда мы можем каких типов так скрип написать какой-то джесс кода и он будет выполнить это слышал хорса знал что это некая защита для того чтобы не очень связано но в целом ты только это безопасно да он связан с рифа так такая штука

  00:29:15 - 00:30:44

• давай щас я тебе расскажу а мы потом ты подумаешь вообще тогда где здесь может быть курс на все срыв это когда у нас допустим на стороннем ресурсе может злоумышленник ну неважно это может быть сторонний ресурс а может специально сформирована ссылка зависит от того какой вектор атаки но для простоты будем говорить что у нас есть просто сторонний ресурс на котором злоумышленника написал какой-то код который допустим обращается к фейсбуку и этот код например там facebook и меняет email нашего аккаунта

  00:30:00 - 00:31:00

• и так как мы когда заходим и мы авторизованы то наши cookies благополучно уходят вместе с этим запросам и соответственно facebook может посчитать о так это штамм иван иванов вот его cookies и соответственно и он просит меня поминать mail забываем сейчас на секундочку что нужно еще для этого подтверждения и так далее ну просто ты да понятно и соответственно имел меняется то есть вот такой очень простая ситуация email меняется и все как от этого можно защититься сам способ но вот это и есть наверное да курс защита это нужно

  00:30:29 - 00:31:51

• то есть каждый запрос должен идти с одного домена [музыка] запрос на изменение mail с одного домена не из одного здесь не так это важно что с одного здесь важно что оставили на то есть вас доверенного но так есть же можешь как ты курс отключить это посылаются определенной заголовки определенного типа не то чтобы отключить увеличить число доменов откуда идут запросы правильно выразиться до в простом случае не совсем то есть но ты можешь это сделать нам через прокси но это уже детали на самом деле насчет

  00:31:10 - 00:32:24

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

  00:31:48 - 00:32:49

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

  00:32:19 - 00:33:26

• безопасности не имел делая примерно примерно слышал что такое курс но не вдавался в подробности как общин работает где он работать я примерно знала что из названия можно сделать логический вывод что это типа кросс домой какая-то защита но по сути нет я имел дело с этим я понял хорошо когда давать двигаться дальше давай поговорим про a single page при кейсинг как концепцию право там react немножко поговорим про то вообще зачем такая такие фреймворке библиотеки появились на давай начнем с простого

  00:32:52 - 00:34:10

• вообще что это за концепция такая очень критично но это когда мы на одной странице рендеринг мы отображаем разные грубо говоря странице браузер просто не перезагружают он не перезагружая страницу не переходит на другой к этой ural внутри браузером и получается с помощью ручника можем показывать разные разные странички внутри приложения соответственно react и как фреймворк и создает вот эти сингл апликэйшен ну да действительно это изначально концепция родилась как идея что у нас ниткой вот других страниц под страницами понимаются

  00:33:31 - 00:34:56

• на самом деле road и на сервер это когда мы идем там просим контент для какой слэш админ там слышно же вздор ли еще что то такое но сейчас что самое парадоксальное для замкнулась дай какой-нибудь тут же gps ну что делать он по сути те же самые road и точно также делает на сервере чем cтoит их просто и выдает нужны давай оставим за скобками будем считать что на самом деле вот сейчас мы будем подземном точечными ефрем орками этими понимать вот такие богатые клиенты доктора толстые клиенты которые там по

  00:34:14 - 00:35:21

• сути все в браузере происходит а зачем вообще понадобилось делать какие-то отдельные библиотеки типа того же реактор angular а почему старым добрым православным же скриптом скриптинг нужно скриптом тоже сейчас уже все можно делать джек вере почему не обошлись но они на самом деле решают разные задачи и джек верил не позволяет делать single application и ну он больше манипулирует дом браузере но так как домом медленный и очень сложно управлять ими домом из скрипта потому что идет конвертация джесс типа в строки но ты и так далее

  00:34:47 - 00:36:12

• обратно в объектную модель короче это сложно и react он по сути упрощает работу я не помню на какой архитектуре mvc и тем самым короче манипуляции основу реакции свой виртуальный дом которого мы делаем изменения и он работает гораздо быстрее чем управлять на браузер выставляет ну смотри сейчас я немножко тут тебе тут палки в колеса поставляя потому что говорят что ряд делать свои манипуляции какие-то которые быстрее чем управлять напрямую браузерный дома да но ведь он потом для того чтобы внести изменения в

  00:35:30 - 00:36:50

• браузерный дом он выполняет операции с браузерных домом до конкретно но [музыка] то есть выполнять операции над браузерный домом это очень долго и затратный тот же как-то делает как-то это делает ряд делать я в смысле проще проще пройтись под же с дерева по своему вот этому virtual дому это же обычный грубо говоря джесс ноты какие-то сделать эти все изменения внутри объекта и вставить точечно в браузерный дом чем короче рендерить все дерево не так просто это все замените смотри вот тебе такая задачка то на поразмышлять очень

  00:36:11 - 00:37:45

• простая у нас допустим есть какой-то дом элемент мы хотим поменять его содержимое мы можем это сделать просто непосредственно трипсов это содержимое вызовов и 5 браузера или мы можем сделать какую-то абстракцию что-то посчитать а потом уже выполнить ту же самую операцию по замене это содержимого доме вот какой набор операции будет быстрее конечно в в браузере но это все лишь одна операция да но ряд он решает проблему рендеринга всей страницы + он приедет при приоритизирует нужные нам элементы игрового то то есть

  00:36:58 - 00:38:11

• получается мы подходим к основной сути на самом деле тут вопрос не скорости именно работы с домом действительно дом операции дорогие но react все равно их выполняет просто он решает вопрос о какие операции нам нужно выполнять а какие не нужны а вот значит кстати за за что сейчас вас нам react критикует не могу сказать ну вот как раз за его виртуальный дом то есть сам абсолют эта концепция она была прервана этом на момент его появления но сейчас она конечно же морально паду старела потому что виртуальный дом это тоже очень

  00:37:35 - 00:38:37

• дорогая абстракция потому что когда у нас он очень большой иногда даже дешевле тупо просто всегда переписывать дом чем подделать эти пересчет и очень много раз секунды но сам как-нибудь богатые анимации это сложно и вообще веб и получается туре акт даже может мешать был даже прецедент я не помню помню netflix они использовали react они рендере лири актом на сервере а потом отдавали статику и не использовали react на клиенте и вот по сути решили проблему то есть они просто перенесли весь рендеринг на сервер

  00:38:07 - 00:39:16

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

  00:38:41 - 00:40:08

• что у нас что то изменилось и они знают что это нужно поменять только в фиксированном месте в доме не нужно им потом сравнивать огромную эти деревья чтобы понять что вот у нас там разница есть ну окей давай вернемся к концепции медленного браузерного дом а почему он медленно почему говорят что операции там например по изменению даже по чтению дома могут быть дорогим ну потому что чтобы перевести каждую ноту в gs это нужно сконвертировать грубо говоря fugees объект у каждого у каждой ноты куча куча своих каких-то элементов

  00:39:26 - 00:40:49

• атрибутов пока нет джейс объектов мы говорим час уже непосредственно продам браузера то есть но сейчас react отложили сторонке но потому что это скорее дерева и все операции с деревом и нужно пройти через все дерево для до нужны ноты чтобы снять это ну не совсем смотри тут же о чем речь речь об изменении конкретного узла то есть мы уже нашли на самом деле тот дом элемент который мы хотим менять и поиск он был недорогой по сравнению с тем что мы сейчас его допустим даже прочитаем не то что сейчас

  00:40:08 - 00:41:21

• это мы кстати тоже прочтения записи поговорим вот октября к этому не знаю на самом деле почему медленный почему вот но я могу предположить что то есть введение вот этого virtual virtual дома было не зря то есть я очень степени было не зря действительно но сейчас давай сейчас ты перескакиваешь временно react давать час на ближайшие пять минут где-то забудем что он вообще то есть на сейчас react вообще не интересуют нас интересует и непосредственно дом браузер и вот и как он работает давайте вы подскажут слышал

  00:40:44 - 00:42:01

• ты про такие концепции как этом при paint и флауи листая рестайл или рилай out процесс нет это наверное то что стилизует да но да это что выстраивает ее в потоке нужно да все верно а давай сейчас подумаем на самом деле мы понимаем что браузер для того чтобы это же нам отрисовывать дом там никакие не заниматься или вправо в принципе мы там добавляем что-то в дом браузер должен соответственно тоже пиперин дарит страничку есть у меня тоже есть какой-то жизненный цикл рендеринг же бензик верной страница с рендерингом

  00:41:23 - 00:42:37

• как ты считаешь как часто происходит эта операция рендер ну [музыка] по идее вам постоянно рендерит страницу потому что viewport меняется соответственно в первый раз он рам перед всю страницу выстраивает все блоки устанавливаются стиле выстраивает и все как бы на этом все потом пользователь что-то нажал или какой-то товар или анимации ли что-либо еще то есть он рендерит уже тот кусочек я не знаю все ли страницу мне кажется там должен быть какой-то оптимизированный механизм который рендерит конкретный

  00:41:59 - 00:43:18

• конкретный надувал тот же hover или вы потолки какие-то что-либо еще там если этого падалка задевает наверное всю страницу сдвигает системе элемент это ему приходится перемен дыры рендерить тащатся такую задачку решают представь что я прихожу к тебе говорю василий нам нужно разработать свой браузер вот у нас есть такие входные требуя получается то что ты озвучил что передали нам нужен либо один раз от рендер ли и в принципе все ничего не меняется нам не нужно ничего рендерит то есть от 0 раз в секунду до того момента когда мы будем

  00:42:39 - 00:43:51

• что-нибудь стриги лить либо сами с java скрипта либо там наши пользователи очень быстро и да там чемпионы мира по какому-нибудь старков то будут кликать миллион раз в секунду до что-то будет вызывать ну и соответственно у нас есть какой то не знаю разумное ограничение должны быть мы не можем позволить нами перевариваться в миллион раз секунду на потому что мы просто живем все ресурсы любого там компьютера и все нам нужно что то придумать чтобы не больше чем какое-то количество 1 секунду мы могли это делать если

  00:43:17 - 00:44:23

• необходимо типа 60 кадров но тип 60 кадров до хорошо теперь давай подойдём к тому что мы хотим делать не чаще чем 60 раз в секунду вот штуки да и соответственно нам нужно как-то ограничить то есть получается что у нас еще может вызвать изменения кроме того что пользователь кликает я тут уже это звучит в принципе но чтоб ты анимации видео какой-нибудь здесь интерактив для не обязательно такте в какие-то может быть вычисления в самом жестко repti то есть сам джо скрывать может обратиться к элементу и сказать теперь там твой

  00:43:49 - 00:44:58

• высота будет увеличена на 1 пиксель это он может делать очень много раз секунду вот как ты считаешь нам когда мы записываем в элемент нам нужно вызывать рендер когда мы записываем допустим мы просчитали высоту элемента когда мы изменяемся ее придумаем браузер до изменить изменили то есть мы уже скрипте говорим там элемент . там это равно 100 да конечно тогда получается что если мы будем делать это строчка за строчкой то у нас очень большой раза количество 1 секунду будет передан развиваться а мы этого не

  00:44:24 - 00:45:36

• хотели говорили что нам бы сделал так чтобы у нас 60 1 секунду это предел был может мы можем эти операции поместить в порядок очереди и он все равно не будет выполнять больше 60 операций в секунду то есть можно тесты меньше двух какой-то очереди потом который мы будем обращаться и раздай на иначе браузер просто зависнет или сожрет все память в компьютере можно так сделать на мне кажется можно на самом деле знать что сделать просто записывать в какую-то куда-то это как временные изменения а потом когда мы готовы будем от рендерить

  00:45:01 - 00:46:12

• новый кадр смотреть что там мы хотим от рендерить вот по этой модели строить новую страницу вот муж говорит нам позже просто не совсем не совсем понял какая задача игры мы хотим что сделать мы хотим понять почему там у нас когда в какой момент мы будем изменять нашего передают нашу страничку да вот мы какие то ограничения сейчас себе задаём и проектируем наш браузер вот мы говорили что нам бы хотелось чтобы чаще чем 60 вот секунду ничего не прерывалась но мы довольно лишь такие значит мы тогда не

  00:45:37 - 00:46:39

• можем просто взять и по записи прерываться это но очевидно иначе мы преодолеем вот этот рубеж тогда мы можем просто записывать куда-то а потом соответственно там каждый 16 миллисекунд условно смотреть какие у нас там есть изменение значит давайте рендерит новую страницу если нет изменений на пошли дальше тоже вот так этот цикл будет повторяться на 160 1 секунду вот и мы сделали да то есть мы соответственно записали у нас вот этот временная модель а что произойдет когда мы писали писали писали об этом так и бах и

  00:46:08 - 00:47:13

• хотим почитать типа что же у нас там соседней элемент например как-то изменился или даже тот же самый какая там высота блин не знаю а в реальном браузер все сойдет реально браузере мы уже браузер уже читает в принципе прочитал весь html css скрипты которые скот и он в ожидании выполнять менять так же как вот ты говоришь записали все вот он записывает все и в ожидании изменить тоже высоту и ширину и так далее по действие пользователя или смотритель если выпуска погода скажем реальный браузер если мы

  00:46:40 - 00:47:48

• будем много-много раз секунду писать какой-то элемент то он страничку будет равен дарить все равно 1 . 160 раз в секунду а что будет если мы будем строчка за строчкой напишем чудо им пишем читаем пишем читаем пишем читаем и так очень много раз ноу-хау наше время будет сокращаться на чтение еще просто он сможет выполнять шисят операции получается [музыка] ну ты зависим с там будет ли он рендерится тут страничку браузер и не сможет я просто просто так отыскали будет читать и и снова не он считает

  00:47:16 - 00:48:33

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

  00:47:55 - 00:49:01

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

  00:48:33 - 00:49:40

• это если сейчас мы дальше пойдем эту тему то кажется что hover это все равно какой-то тасс кто там так далее все равно какой-то код который нужно выполнить он будет в очередь помещен потом он будет попадется новости когда он в текущей раскрутиться стык новых для простоты у нас есть только текущий год я и мы выяснили что на соответственно при записи я уже говорю точно и в реальном браузере в нашем проектируем браузер и когда мы будем многом надо записывать у нас очень верные чтение перед эндер будет все равно 600 1 секунду а с ним

  00:49:06 - 00:50:08

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

  00:49:38 - 00:50:58

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

  00:50:19 - 00:51:22

• просчитать его зама тяжелое получается что он запускает force делает force рифов пересчитывать тебе все и говорит вот такое у тебя будет значение если будешь эту механику объявить то есть ты будешь просто все время так читать то ты будешь этот рифф вызывать очень очень очень часто и не за этого есть как раз таки проблемы когда у нас есть не оптимально не централизованная система которая может что-то поменяется что-то прочитать то может оказаться так ну например почему джейк вере это очень плохой пример для описания сложных

  00:50:50 - 00:51:57

• приложений потому что у нас нет механизма централизованного управления изменениями в дом то есть мы можем кто-то написал какой-нибудь компоненте который очень активно отслеживает изменение скролла и при этом какую-нить анимацию рисует а кто то еще что то делает у нас получается может все время чередоваться чтение и запись видел какие-нибудь сайты когда вроде ничего там нет ничего не происходит ты вскроешь страницы у тебя там не знаю macbook в воздух взлетает мало на не macbook какой-нибудь компьютер который обычно

  00:51:24 - 00:52:20

• воздух взлетает просто так на там а мощный компьютер начинает и стефани что не ограничивает получается он не может сохранить то есть есть единственный на самом деле компромисс на какой мы можем пойти компромисс чтобы у нас не было for free flow то что мы можем такого сделать чтобы у нас вот этого force ни слова не было именно в 11 вариант именно как программисты а как вот не как программисты которые используют ее 5 браузера как разработчики браузеров вот мы пишем браузер что мы можем сделать такого чтобы с одной стороны у нас вот

  00:51:51 - 00:52:54

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

  00:52:24 - 00:53:27

• нас какие-то значения наша программа завязано то нам нужно всегда любые вычисления связанные с ним будет производить только тогда после после пересчета кадры тогда нам нужно редизайн нет нашей pr-отдела так чтоб у нас есть какой-нибудь был хук который но он есть на самом деле но мы бы тогда выполняли этот хук во всех случаях когда мы хотим связаться на изменения в доме вот соответственно есть to request a небольшим фрейм когда его советуют использовать на самом деле что что вот про request и не меньше на фрейме я еще не читал а вот

  00:52:57 - 00:54:10

• смотри даже даже ты не читал в час мы уже обсудили request я тебе тоже скажу лекарственный фрейман как раз срабатывает в момент когда у нас кадр готова то есть соответственно когда браузер по сути может себе позволить первин дарит новый кадр и по сути он получается привязан к чему лекарственный фрейм ну к значениям наверное к тому что что что прочитал браузер там у нее значение проведу он привязан к фреймрейта то есть если у нас вдруг есть проседание по производительности почему тогда то есть мой просели и у нас там 60 кадров в

  00:53:33 - 00:54:45

• секунду опустилась до 30 то вот тот код который мы будем выполнять спокойствие машин фрейме он все равно не будет вызываться чаще и получается не будет еще дополнительно нагружать наши вычисления и соответственно поэтому рекомендуют там какой-то код связаны с анимацией выполнять чтобы не перегрузить еще сильнее то чтобы у нас не было такой ситуации когда у нас все тупит а мы еще с вами вычислениям еще сильнее заставляем тупить то есть если мы вдруг дроп ним вообще фреймрейт до 15 кадров или еще ниже то получится что вот это

  00:54:09 - 00:55:09

• вычисления мы будем делать реже а если вдруг и настраивай фреймрейт нормализуется то чаще то есть и это как бы нам поможет разрулить такую ситуацию окей давай тоже двигаться дальше еще 23 окт вернемся вообще это понимаю именно react на изучал то есть я начал изучать то есть по программе в текст лети был именно react ну выбор особо нет но мне интересно все но как он работает я конечно не не писал на нем больше чем текущие проекты которые на последней разве что последние еще выполнял тестовые одно задание на реакцию но по

  00:54:39 - 00:55:58

• сути это весьма его подход использование смог я не углублялся в не смотрел исходники грубо говоря я понял ну ничего страшно мы на самом деле уже какие-то ты к концепция писал то есть то что есть у на виртуальный дом ну давай такую задачку тоже еще решим представь что есть огромное приложений реакция вот мы его писали писали и не знаю специальные случайно забыли написать все возможные оптимизации то есть ни одной оптимизации написание пер компонент не шут компонентов do it news мимо вообще ничего то есть вообще ничего

  00:55:19 - 00:56:29

• нет у нас и в каком самом верху раме вам компоненте applications пусть он куда мы сделали состоит и возникает вопроса первый вопрос вызываться ли все методы рендер всех начальных компонентов в реакция вызовется один рендер который будет вызван самом об опере рисует все дочерние компоненты если он уже нет никаких газель нажимать компонент перерисуем дачи на компоненты то что значит что у них тоже вызывается range ну получается да то есть все компоненты перевернуться но если у них пропсы поменялись но мы до если вы вызвались

  00:55:54 - 00:57:12

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

  00:56:33 - 00:57:47

• [музыка] быть оптимизирована для react по сути он он перерыв перед все компоненты перемен dried все компоненты но он потом получается и все компоненты в реальной странице изменит все дом узла до должен должен неуверенно заменит ли вам все а как он понимает вот вопрос в том как он понимает какие ему нужно менять а какие нет на основе чего он делает вывод это но он сравнивает текущей дом там как бы как получается виртуальный дом есть current market и есть в процессе дом которые так вот он сравнивает

  00:57:13 - 00:58:33

• текущей с тем что в процессе меняет то есть приоритизирует те сначала выбирают те узлы которые нужно заменить потом получается выставляет их в в в приоритете какие находятся наверное во вьюпорте для клиента какие нет затем точечно получается заменяет те узлы которые поменялись а потом working process 3 становятся корень ты вот так вот это задача циклично повторяется при рендеринге элемент он на viewport там особо не смотрит на самом деле получается что ты сказал что есть у нас текущей виртуальный дом этот который

  00:57:53 - 00:59:13

• построился новый уже и мы их сравниваем да и вот у нас есть вот этот приложение да как где нет никаких оптимизация сделался состоит все переварилось когда перерезать мы получили новый виртуальный дом так и мы его сейчас начинаем сравниться старым может оказаться так что то вообще не будет изменений может конечно и тогда что произойдёт с реальным домом но он не поменяется он здесь связи тогда никакой нет несмотря на получается что получается что реактор конкретно наверное в конце перед тем как кэтрин

  00:58:32 - 00:59:42

• дарить дом он сравнивает текущей дом который находится в браузере с тем который нужно менять и понимает то есть менять какие-либо но ты либо не менять целом для того чтобы юзер экспириенс не портить но иначе иначе после каждого рендеринга мы бы просто обновляли страницу клиенты полностью перерисовывать все роды с рубцом на то есть получается что все таки нет связи сначала сказал что и я я думал о том что я просто когда об этом думал я думал вот 2 двух домах виртуальному вот этот текущий тот который мы заменили вот процессе вот

  00:59:07 - 01:00:26

• это [музыка] дифф я скажу между этими двумя деревьями добавить но браузерами так и останется получается да хорошо хорошо давай тогда перейдем еще одному такому вопросу сейчас я для это вопрос еще раз экран share мы попробуем с тобой разобрать такую архитектурную слышь дизайна пишет ную задачку тоже по сути на поболтать вот у нас есть некий сайт некой небольшой стартапам российского и ты видишь что тут небогато до оформления строчка но мы на ней будем ориентироваться сейчас вот у нас есть поисковая строчка по сути это

  00:59:48 - 01:01:27

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

  01:00:37 - 01:01:52

• единый там design system ну и соответственно мы разрабатываем компонент который будет перес пользоваться таком количество проектов что мы просто не знаем что там они захотят то есть на яндекс музыка скажет что чуваки мы хотим вот такой же поиск но чтобы когда писал там что-нибудь про музыку то мне здесь показывалась превью шичко player да то есть я мог нажать ее прослушать сэмпл песни кто то еще что то захочет кто то еще что то захочет вот как там сделать так чтобы с одной стороны у нас была возможность этот

  01:01:14 - 01:02:19

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

  01:01:47 - 01:02:48

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

  01:02:17 - 01:03:28

• это легко масштабируемый потому что мы можем в компоненте в самом интерфейсе этом реализовать скажем кроме текста добавить еще какое-то место не иконки это вот как ты говоришь не знаю какие то значки прямо по песку да это будем добавлять компоненты то есть мы еще один проб позволим прокинуть или как это будет выглядеть с точки зрения api самого компонента это должен будет быть проб вот этой самой в потолки и вот этот props он мы уже сможем его отделить допустим в этот провод будет прилетать какой-то объект с данными в

  01:02:51 - 01:04:16

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

  01:03:33 - 01:04:56

• знаю поиск точка ком музыка и соответственно просят нас а добавьте к нам еще пробст для того чтобы мы могли музыкальный темп опрокидывать и получается мы это добавляем у нас появляется место для нового про по мы выпускаем новую версию библиотеки ребята с погоды обновляются смотрят и типу чуть такое зачем это вообще нам нужно что вы добавили а еще если мы сделаем это обязательным тони такие а у нас все сломалось давайте убирать нам это не нужно ни на там же по дефолту будет только текст так как иначе

  01:04:15 - 01:05:24

• то есть обычное состояние будет этот пробует ожидать какой-то текст остальное все можно просто масштабировать расширять то есть кроме текста до можно еще прокинут что-либо еще и добавлять иконки то есть просто в обычной ситуации этот компонент будет иметь попадали на с текстом если мы хотим что-либо добавить мы просто прокидываем кроме текст что-либо еще в пробных и выводим рядом навевать прочного штука но сейчас давайте приведу пример и того через за два года через нас прошло этом 50 команд различных и вот у нас уже компонент

  01:04:50 - 01:05:56

• который там 50 плюс про псов имеет и типа нет я не fraps я не правда давление процесса props остается один но ты против про пса ты на то есть мы сами а кто определяется типа как там нет распарсить что туда пришла хорошо например shared да мы же используем этот пропуска как объекты вводим результаты получаются под патентом и допустим мы установили что во время набора текста у нас будет появляться выпадали на с пятью строчками то есть это будет каждая строчка будут будет подгружать где то на фоне результаты

  01:05:24 - 01:06:40

• поиска и вот эти вот 5 допустим буду проходиться по этому массиву с объектами выводить 5 результатов вот которые нам пришли на фоне но кроме мы же можем данные могут прилетать не только текстовые данные могут прилетать любые по сути наш компонент может из проб доставать только текст и выводить только текст либо он может доставить какие какую-то дополнительную информацию которые другие компании требуют и выводить ее рядом с текстом злом и сами пользе mentioned какую выводить infront допустим приходит ему

  01:06:02 - 01:07:16

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

  01:06:38 - 01:07:48

• если не преданы не пришел не пришли в этом хоре и у нас на а соответственно ничего не показывает ничего не рендерится если сам программисты либо те кто использует этот компонент захотят что либо выводить они просто этот проб достают из этого права по нужную информацию будет а текст будет иконки будто не знаешь что либо еще лапают проходятся по поэтому массиву и соответственно уже версткой не знаю как как бы это объяснить и получается с помощью такота и да и получается выводит эту инфу на страничке

  01:07:13 - 01:08:35

• окей я понял тут важно еще такая концепция да вот при проектировании дизайна ты ну как бы мы немножко вокруг да около этого понятия ходили но так или иначе но прослеживалась наверняка это знание компонента о чем-то да то есть вот вы говорили что вот кто будет управлять тем кто это рендере ты говорил что это команды например сейчас предложил что сами разработчики будут так или иначе передавать какие-то данные и сами там например winterpro пам будут отранжировать нужный им со jest может немножко рассказать вообще

  01:07:57 - 01:09:00

• концепция знания там той сущность длиной сущности друг о друге в проективные архитектуры это это про что то есть и почему очень часто про это говорят и отмечает зависимости наверное да и дождь и одного от другого дата просто обычно говорят например тот компонент знает а там вот это или релизов реализация вот этого компонента и говорят что это плохо например почему потому что данные должны идти вот как бы поток данных он должен уйти от одного компонент все ниже ниже ниже почему так сделано потому что если у тебя меняются

  01:08:29 - 01:09:36

• если поток данные он линейный такое меняются данные где-то посередине ты конкретно знаешь где они изменятся вы что этот компонент знает то есть у этого компонента из дочерние которые знают тоже какой-то там информацию и вот если мы поменяем данные здесь то они изменятся в тех компонентов которые используются но они все будут ниже как бы это объяснить и даже не знаю ну давай щас я тебя сразу перебью немножко а как же собственно flags и концепция когда у нас компоненты независимо они могут сосуществовать в пределах одного

  01:09:02 - 01:10:12

• родителя или даже быть друг другу родителями на при этом данные получать из торы не касается даже мы можем мы же можем посмотреть какие экшен и вызывают какие режиссеры но по сути у нас мы можем у нас если я правильно понимаю то компонент сам по себе он должен не за ведь не зависеть ни даже не зависит он не должен знать этих данных которые в него прилетят за то что он будет выводить уже может отвечать команда которые используют не совсем он не может не знать этих данных которые полетят потому что эти данные у него

  01:09:37 - 01:10:56

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

  01:10:19 - 01:11:38

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

  01:10:58 - 01:12:15

• вернемся думаю у меня такой последний вопрос я не буду тебя сиси ну то есть спрашивать там про всякие салину вообще там про вот это все концепции kiss альдо и прочее про проективная архитектуры вообще знаком ли ты с этим понятием соли там скатить букв буквами solid по моему сингла responsibility что там принцип ну неважно проектами габен деле я никогда не понимал когда там пытаются что все наизусть это все выучили да я примерно что не боишься винтера да и то в определенные паторны и программирование

  01:11:39 - 01:12:48

• гарантированный десантом штате платформе танкер шаблон да там это скорее какие-то такие абстрактные принцип вот давай очень быстро сейчас последний вопрос будет это принцип собственно открытость и закрытости out and lost принцип вот как ты его понимаешь честно говоря я его не знаю я знаю войти расскажу как он звучит и мы промышляем он звучит следующим образом что сущность какая бы то ни было должна быть закрыта для изменения открыты для расширения то есть немножко такое это может показаться странно как то так вот

  01:12:13 - 01:13:18

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

  01:12:46 - 01:13:59

• наследование там наследование не причем очень часто действительно почему-то ассоциирует соль и т.п. хотя solid это вообще про проектирование систем в любой парадигме в любом стиле написание кода вот давай щас я тебя очень коротко и не знаю как бы нам это сделать чтобы с одной стороны не создавать еще ссылочку вот представь себе код просто пустой массив но потом . мы вызываем мэтт мечта передаем call back да что он делает не вызывает этот call back над каждым элементы массива он вызывает наказываем а сам код вот что

  01:13:25 - 01:14:39

• он будет делать непосредственно ментам кто пишет мы пишем мы пишем разработчики вот когда дизайне ли и пойми по то учли вот этот принцип открытости за 15 как ты считаешь вот значит выравнивал принцип что он закрыт для изменения но открыт для расширения да наверное потому что как раз таки мы выбираем call back который будет работать с нашими элементами силы наверное троим сделали общую реализацию на позволили расширять ее другим взрывать да можно переписать внутренности мипо но можем расширить его

  01:14:03 - 01:15:13

• поведение мы можем переписать марк в целом мы можем за monkey патчить да мы можем ну да я вот скрипа это вот предыдущий задач когда которого мы решали просто чтобы создать какой-то интерфейс для использования но чтобы они не могли заменить эти понятно внутренности самого компонента но использовали его то же самое как мы мы джесси используем функции сортировки мы и так далее высшего порядок вот этот принцип то есть 10 это не это не то что знаешь священный грааль который всегда нужно слепо применять их

  01:14:40 - 01:15:58

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

  01:15:18 - 01:16:19

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

  01:15:49 - 01:17:01

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

  01:16:25 - 01:17:34

• плане его грейда то пожалуйста можно это сделать да я буду еще на всякий случай сразу говорит что это будет в контексте исключительно там нашего мировосприятия то есть мы его в рамках компании ceasar где я работаю это может быть у кого то будет совершенно другое представление о вреде потому что на всякий случай вдруг это будет не очевидно но great это просто какая-то за сечи чко на векторе вашего опыта и у всех эти засечки могут быть немножко в разных местах и там у всех могут разные представления я бы

  01:16:59 - 01:17:58

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

  01:17:29 - 01:18:40

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

  01:18:05 - 01:19:09

• опиши chic то есть вот эти вещи еще видно что опыта просто не хватает но по понятным причинам потому что его нет но именно в этом у нас там есть какое-то отличие что вот джун человек неплохой базой начальный а есть middle который у которого прям хорошая уже прям база еще есть опыт да то что он может решать уже задача практически самостоятельно и вот василию буквально не хватает чуть-чуть поработать на реальных проектах там под руководством опытного тимлида чтобы этот самый опыта приобрести какую-то на

  01:18:36 - 01:19:36

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

  01:19:07 - 01:20:08

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

  01:19:37 - 01:20:33

• и по копателю безопасность немножко потому что нужно хотя бы чуть-чуть представляется там какие могут быть проблемы потому что это будет связано пример с тем а как вообще хранить какие-то сан-сити в данные токен и прочее это конечно же уровень повыше но этот тип чуть забегая вперед все равно так или иначе мы работаем с какими-то данными данными авторизации все равно там мы и сами можем реализовать авторизацию поэтому представление о том где может прилететь хотя бы базовое она все равно должна быть как он вот как то

  01:20:05 - 01:21:09

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

  01:20:37 - 01:22:07

• то чтобы не находил времени почитать проект она никогда не думал что мне придется отвечать на этот вопрос поэтому сразу ответил нет чтобы ну по самом деле я тут могу тоже отметь что ты когда-то отметил нет это не самое страшное это такая может быть уже рекомендации интерьером то есть нет это не значит человек не знает и не понимает потому что нам важно не зубрежку какой-то проверить как интерьером а понять от человек вообще сможет разобраться в этой теме самостоятельно и ты здесь довольно неплохо себя проявил

  01:21:25 - 01:22:21

• то есть потому что в незнакомой области да у тебя там были какие-то такие ступор и где ты не до конца понимал что тебя хочу как хотя в принципе может быть это моя проблема дано вроде этом все расписал но мы все равно в итоге как пришли к тому что на самом деле происходит и тоже такая небольшая рекомендация еще чуть чуть глубже копнешь то внезапным образом окажется что ент лук и вот эти все циклы рендера страницы и исполнение посредстве на кода и проверка вот этого холсте к вообще все это взаимосвязано и есть вообще

  01:21:53 - 01:22:57

• жизненный цикл браузера как таковой да когда мой кот выполнили от рендер или и вот когда у тебя это осознание придет тогда-то за счет да у тебя пазл сложиться и он уже наш как на велосипеде ты научился ездить уже не разучишься то же самое придет понимание ты начнешь намного глубже понимать все вещи которые построены над этими штуками спасибо отлично очень здорово пятки очень рада лоток молодец спасибо тебе огромное за вопросе и зато как-то и корректно и мягко лил наше сегодняшнее интервью на мой взгляд

  01:22:25 - 01:23:38

• получилось очень здорово и ребята тоже в комментариях отмечают что очень хорошо прошло сегодняшние собеседование и там есть небольшие дискуссии предложения в том числе тут даже уже кто-то кого-то на работу набирает поэтому я помогаю всем прийти к нам флаг продолжить эту беседу для того чтобы она была более оперативно и более живое не ожидать когда кто-то в комментариях будет отвечать общем все приходите в slug вот а вася еще раз мы большой молодец давайте писать его бы больше комментариев это далее вот серёжа

  01:23:04 - 01:24:10

• спасибо тебе за наше сегодняшнее интервью и ещё раз и ещё раз и буду много много раз это спасибо говорить спасибо вам что предоставлю так возможно спасибо нашим зрителям видим оживленную действительно дискуссию всем спасибо но я от лица своего модераторского еще хочу поблагодарить ислам и которой от лица конца с а сара как раз писал в чате и отвечал тоже на некоторые вопросы помогал ребятам немножко так вел их тоже к ответу которые резины на вопросы которые сереж сегодня задавал в общем всем огромное

  01:23:37 - 01:24:43

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

  01:24:10 - 01:24:43