СОБЕСЕДОВАНИЕ Middle Frontend разработчика С ИНТЕРЕСНЫМ ОТКРЫТИЕМ

Рет қаралды 24,340

Күн бұрын

В данном видео мы провели собеседование с Сергеем (на данный момент middle frontend в сбере). Поговорили про такие тамы, как event loop, замыкания, анимации и react. Также неожиданно узнали об некоторых особенностях codesandbox.
Ссылка на Telegram канал:
telegram.me/ayub_begimkulov_c...
Таймкоды:
00:00-05:20 - Сергей рассказывает о своем опыте
05:20-07:53 - Задача на микро/макро таски и requestAnimationFrame
07:53-10:07 - requestAnimationFrame, layout, paint, composite
10:07-24:13 - Задача про анимации
24:13-38:33 - Разбираемся в результатах задачи с анимациями
38:33-44:58 - reflow, repaint и перерисовка экрана
44:58-53:08 - Задача на замыкания
53:08-01:00:58 - Говорим про jsx в React
01:00:58-01:09:25 - Мемоизация в React
01:09:25-01:12:37 - Batching
01:12:37-01:19:46- Замыкания в React
01:19:46-01:29:05 - Пишем альтернативу useCallback
01:29:05-01:33:44 - Фидбэк и заключение по собесу
#frontend #javascript #react

Пікірлер: 74

@glebyakovlev7098 Жыл бұрын

Отдельная благодарность за разбор анимации и особенность codesandbox. Такие вещи и делают контент действительно уникальным.

@ayub_begimkulov Жыл бұрын

Рад, что понравилось!

@TheInsable Жыл бұрын

Аюб и Сергей, спасибо за собеседование, было интересно послушать. Отдельная благодарность за ответ на каждую задачу и разбор ее на месте.

@ayub_begimkulov Жыл бұрын

Рад, что понравилось!

@ayub_begimkulov Жыл бұрын

Друзья, всем спасибо за просмотр! Во время пересмотра записи заметил, что звук у меня и Сергея был разной громкости и noise gate был настроен чуть агрессивно, из-за чего мою речь иногда вырезало. Постараюсь поправить все к следующему собесу. Также заметил, что я использую термин “контекст функции”, вместо “скоуп функции” (на 01:18:50, но вроде было еще пару моментов). Если еще что-то проглядел -- делитесь в комментариях.

@2difficult2do Жыл бұрын

Аюб, спасибо за интересный ролик. Разбор"особенностей" обработки кода в codesandbox 👍👍👍

@ayub_begimkulov Жыл бұрын

Не за что!

@kirills4631 Жыл бұрын

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

@ayub_begimkulov Жыл бұрын

Спасибо за фидбэк! Рад, что смог помочь тебе)

@AntonDev 4 ай бұрын

спасибо, ребят! Серёга, молодец, на запись сложно отвечать на рандомные вопросы)) все мы люди, у всех есть нервы!) Большой молодец! Аюб, респект за разбор raf, крутой фидбек оставил, очень по-доброму))) удачи вам обоим!)

@nafanya3733 2 ай бұрын

спасибо)

@user-qb7jg4hx5l 11 ай бұрын

спасибо, интересное собеседование и детали про анимацию

@v.demchenko Жыл бұрын

Круто, что разобрался в вопросе до конца👍 с codesandbox

@ayub_begimkulov Жыл бұрын

Да самому этот момент покоя не давал) Спасибо за фидбэк!

@SuperWhiteskull Жыл бұрын

Очень полезно и интересно. Спасибо.

@ayub_begimkulov Жыл бұрын

Рад, что понравилось!

@anas4ik777 Жыл бұрын

комментарий в поддержку автора✊

@ayub_begimkulov Жыл бұрын

Спасибо!

@semyon3100 Жыл бұрын

Спасибо за видео. Инфа чисто для улучшения контента - есть небольшие проблемы со звуком, иногда очень сложно понять речь, + иногда треск есть

@ayub_begimkulov Жыл бұрын

Да, был сильно настроен noise gate, в следующий раз постараюсь избежать этого.

@art7653 Жыл бұрын

Круто👍

@ayub_begimkulov Жыл бұрын

Спасибо!

@user-eq3ph4qc9g 11 ай бұрын

Хороший показательный собес, когда разрабы в принципе говорят об одном и том же , но не могут понять друг друга) к слову о том что отсобесить человека очень сложно

@mew6085 Жыл бұрын

Я в а***. Отменный контент)

@ayub_begimkulov Жыл бұрын

Спасибо!

@HEX_CAT 10 ай бұрын

❤🎉

@user-kj6go4ft4j Жыл бұрын

🎉

@OGIDOG1 Жыл бұрын

Спасибо за видео. Решение задачи function sum() { let v = 0; if (arguments.length === 0) { return 0; } else { v = arguments[0] } return function inner() { if (arguments.length === 0) { return v; } else { v = v + arguments[0]; return sum.call(null, v); } } }

@ayub_begimkulov Жыл бұрын

Спасибо за фидбэк!

@user-vu6hn4ul2i Жыл бұрын

Что-то ты перемудрил. function sum(num) { let result = 0; function inner(nextNum) { if(!nextNum) return result; result += nextNum; return inner; } return inner(num); }

@user-cy6vu7gv8x Жыл бұрын

@@user-vu6hn4ul2i + как вариант с помощью call. const sum = (n?: number) => { if (!n) return 0; return (nextN?: number) => { if (nextN) { return sum.call(this, nextN + n) } return n; } }

@gooseob Жыл бұрын

а у меня такое вот решение const sum = num1 => num1 === undefined ? 0 : num2 => num2 === undefined ? num1 : sum(num1 + num2);

@user-jn1iu1ef1r Жыл бұрын

Отрезок видоса с теорией по анимации с помощью RAF и ошибкой codesandbox стоит вынести в отдельное/ые видео. (с 24.15)

@ayub_begimkulov Жыл бұрын

Плейлист по анимациям уже давно в планах. Тут добавил, чтобы все кто собес посмотрели - тоже поняли, в чем беда.

@user-kj6go4ft4j Жыл бұрын

🎉🎉🎉🎉🎉🎉

@EvilYou 8 күн бұрын

31:38 Насколько я знаю, рендеринг происходит перед макрозадачей. Поэтому setTimeout всегда должен выполняться после изменения стилей. 35:16 Круто, не знал.

@mercury_2379 Жыл бұрын

комментарий в поддержку канала

@ayub_begimkulov Жыл бұрын

Спасибо!

@user-vr1bt4bv6s Жыл бұрын

😅

@goshanmerzkiy9742 4 ай бұрын

function sum(arg1) { if (!arg1) return 0; return function (arg2) { if (!arg2) return arg1; return sum(arg2 + arg1) } }

@user-qc8ic8tb3x Жыл бұрын

Немного режет фраза "мейн тред", она в вебе неприменима, т.к. мы всегда в мейн трейде (не считая всякие тонкости работы со скроллом, с слоями, ну и с воркерами). Будто автор из Android разработки пришел в веб :) По теме вопросов, довольно пугает, что про event loop спрашивают на всех собесах, но почти всегда даже сеньеры грешат кучей рефлоу, перерасчетом стилей множества элементов вместо одного, непониманием композитных слоев и прочим. Та же самая тема с замыканием, спрашивают всех, а понимание внутренней работы хуков их реакта ни у кого нет (и природу проблем хуков при неправильной передаче в них зависимостей). Ощущение, что либо надо спрашивать что-то практичное, либо углубляться в вопросы, а не спрашивать то, что есть в методичках по собеседованию. Я бы лучше дал пример - исправь проблему тяжелой отрисовки или перерасчета стилей. Пусть хоть дома сидит над этим, загуглить все равно не сможет. Но если посмотреть в реале, то можно будет увидеть, как человек умеет пользоваться инстурментами девтулзов и как понимает работу отрисовки браузера. С другой стороны, если человек пишет в основном админки и всякий бэкофис, то эти знания ему абсолютно не нужны, и лучше спросить что-то предметное. А если он пишет большой продукт, который должен плавно работать на слабых мобильных устройствах, вот тогда нужно мучить его по теме отрисовки браузера (и никогда не найти специалиста :) ).

@demimurych1 11 ай бұрын

Ваше замечание подобно - немного режет фраза "мы ходим пешком", так как мы всегда ходим пешком ( не считая всяких кто ездин на машине, метро и автобусе) В настоящий момент стандарт дефакто - это программирование с использованием минимум олного воркера - причем именно в нем и лежит основная логика работы веб приложения. Это сервайс воркер. А то что Вы ляпнули, характерно было для 2014 года, когда воркеры только появились на горизонте.

@user-qc8ic8tb3x 11 ай бұрын

@@demimurych1 ну а вы придрались к самому незначительному абзацу в моем комментарии. Я просто в шутку хотел сказать, откуда пришел автор видео. Но если серьезно, то вы неправы: Во всяких нативных приложениях действительно, крайне часто всякую работу выносят в отдельный поток, чтобы не нагружать основной поток, который выполняет рендер. И даже в некоторых технологиях можно через Invoke из потоков менять интерфейс, предварительно залочив его объекты. По этой причине там нужно упоминать, в каком мы треде. Для веба нет стандарта дефакто по потокам. Вебовские воркеры не полноценные потоки, они не умеют в шаред мемори в основным потоком (не считая типизированных массивов), они не умеют в lock. По сути по своим возможностям они приближены к процессам а не потокам, т.к. внутри себя создают контекст (полноценный window объект), создают свой event loop даже со стадией рендера (см. OffscreenCanvas), они не умеют общаться друг с другом через прямое обращение к памяти. т.е. вебные воркеры это дорого - передача данных требует сериализации, создание потока требует создания контекста с кучей выделенной памяти. Часто в проекте с воркерами спрашиваю "вы же, ребят, больше ресурсов тратите на подготовку сообщений в воркер, чем на вычисления в нем. Зачем он вам?", а тебе в ответ "не знаю". В 99.9999% проектов в вебе не будет воркеров или они есть, но неэффективны, поэтому у нас не говорят "мэйн тред". > А то что Вы ляпнули, характерно было для 2014 года В 2014 году было больше воркеров чем сейчас, т.к. тогда люди по ошибке думали, что они эффективны. Сейчас же многие разобрались, и крайне редко тащат их в проект, только для тех задач, где нужно минимум общения с воркером и куча работы в нем. У нас куча асинхронщины, поэтому можно строить классный интерфейс без воркеров, а тяжести выносить на бэкенд.

@demimurych1 11 ай бұрын

@@user-qc8ic8tb3x Вы так тролите? Причем тут нативные приложения? при чем тут invoke? Для веба есть стандарт дефакто по тому как организовывать потоки для выполнения кода JS. Открывайте официальную спецификацию ECMA и читайте до просветления. С 2014 года существует все необходимое закрепленное официальной спецификацией для организации паралельного выполнения кода и доступа к разделяемой потоками/процессами памяти. В том числе и мьютексы/локи состояние гонки и прочие прелести паралельного выполнения кода. Нет не приближены к процессам. Спецификация позволяет делать то, что угодно runTime для решения задач паралельного выполнения кода. И совершенно все равно процессы там под капотом или потоки. Результат там один единсвенный. В V8 под капотом - thread-ы. > т.к. внутри себя создают контекст (полноценный window объект), Вы несете чушь. window обьект - это global object для стандарта HTML5. И он присуствует только там. И даже там, есть еще 11 разных типов глобальных обьектов - по колличеству типов worker-ов. Которые ничего общего с window не иемеют. Прекратите сорить терминами смысла которых Вы не понимаете. >т.е. вебные воркеры это дорого - передача данных требует сериализации, создание потока требует создания контекста Вы снова несете чушь. Открывайте спецификацию и читайте что такое Atomics операции. Вы несете чушь еще больше, когда упоминаете слово контекст, не понимая смысла этого слова в рамках спецификации языка JS. При этом Вы не ограничиваетесь и несете чушь даже в академическом смысле слова того чем являются потоки. Стратегия наговорить "умных" слов работает только тогда когда вы общаетесь с неучем подобно Вам. а не с человеком который в том числе писал спецификацию. >В 2014 году было больше воркеров чем сейчас, т.к. тогда люди по ошибке думали, что они эффективны. Вы несете глупости. Стыдитись. Воркеры не могут могут быть эффективны или не эффективны хотя бы потому, что есть вещи которые вы можете сделать ТОЛЬКО при помощи воркеров - например контроль за сетевым взаимодействием вашего приложения с вашим сервером. Или например использования всех возможностей предлагаемым HOST средой браузера для создания оффлайн приложений. Ничего подобного без воркеров Вы не создадите в принципе. Потому, что только в воркерах есть подобный функционал. И это не касаясь главного - воркеры позволяют Вам распаралеливать нагрузку на доступные вычислительные ресурсы архитектуры где выполняется Ваш код. Вы Неуч. И что хуже всего неуч воинствующий, который считает что заучив пару терминов спецификации, он будет ставить "на место" тех кто боится туда заглянуть. Прекратите позориться, и дайте себе труд хотя бы раз в жизни прочитать спецификацию.

@deantek Жыл бұрын

насчет мемоизации, на одном проекте на RN просто все в мемо оборачивали, ибо не было времени, дабы все отдельные компоненты проверять :D

@ayub_begimkulov Жыл бұрын

Да, как раз про это и говорили. Иногда проще придерживаться одного стандарта. Во Vue кстати тоже все компоненты всегда "memo".

@olegdunkan 8 ай бұрын

Самое красивое решение: function sum(prev) { return (x) => x ? sum(x + prev): prev; }

@user-ms5ii9lc4o 6 ай бұрын

Только проверки на sum() нет. В данном виде возвращает функцию при отсутствии аргументов. А так супер!

@alexandroppolus Жыл бұрын

В решении sum есть баг: const f1 = sum(1)(2); const f2 = f1(3); console.log(f1() + f2()); // напечатает 12 хотя должно быть 9 мой вариант const sum = (v) => v == null ? 0 : (v1) => v1 == null ? v : sum(v + v1);

@user-vu6hn4ul2i Жыл бұрын

Ничего не понял, но очень интересно. Откуда 9 взялось? 6 же должно быть, нет?

@ayub_begimkulov Жыл бұрын

Точно! Глаз-алмаз) Я почему-то кейс это пропустил. Постараюсь внимательнее быть.

@ayub_begimkulov Жыл бұрын

Мы в решении только один раз замыкание создавали на result, а затем к нему уже суммировали все. То есть каждый последующий вызов добавлял в один и тот же result и возвращал одну и ту же функцию calculate.

@alexandroppolus Жыл бұрын

@@user-vu6hn4ul2i f1 = sum(1)(2); - вот здесь будет 3 f2 = f1(3); - а здесь 3 + 3 = 6, потому что стартуем от f1, т.е. это как sum(1)(2)(3) f1() + f2() = 3 + 6 = 9

@user-vu6hn4ul2i Жыл бұрын

@@alexandroppolus понятно, спасибо

@sergeykhairulin Жыл бұрын

в задаче на замыкание хорошо бы arguments.length проверять, а не undefined.

@ayub_begimkulov Жыл бұрын

В идеале бы вообще на typeof arg === 'number'. Так как если там не число, то пользы от этого большой нету.

@user-vu6hn4ul2i Жыл бұрын

@@ayub_begimkulov ага, а следом на NaN, пользователи, они такие 🤣

@user-rl7ly3cz6g Жыл бұрын

@@user-vu6hn4ul2i Number.isFinite() тогда уже)

@tnsaturday Жыл бұрын

3 года опыта миддл+? Это очень сомнительно.

@astkh4381 Жыл бұрын

Почему?

@EvilYou 8 күн бұрын

можно за 3 года и сеньором стать, это же фронтенд, а не СИ.

@tnsaturday 8 күн бұрын

@@EvilYou ничто не может быть дальше от истины, чем это утверждение

@wall-wrecker-my6ss 6 ай бұрын

Чо пацаны, постанова?

@TarasovFrontDev 10 ай бұрын

Ребят, не знаю реальный ли это собес и реальный ли собеседуемый, но я на самообучении за полгода все эти концепции изучил в разы лучше кандидата из видео + тонну дополнительной информации. Но, в любом случае, за видео спасибо! Повторять материал тоже надо. P.S. Кстати, из обсуждения renderQueue или CRP (кто как называет) вы нечетко проговорили этап style (recalculation), который вызывается между rAF и layout. А именно, в этот момент браузер стечит DOM и CSSOM, вычисляет активные @media, что в итоге формирует render tree. И уже за этапом style (recalculation) идет этап layout.

@nafanya3733 2 ай бұрын

жаль, что через полгода ты сам забудешь эти знания без постоянного повторения =)

@TarasovFrontDev 2 ай бұрын

@@nafanya3733 Справедливо) Но ведь чел из видео готовился к собесу, а значит должен был повторить