Зарплаты фронтенд разработчиков
(в РФ)

👼 Junior: 30 000 - 120 000
👨‍🏫 Middle: 100 000 - 250 000
👨‍💻 Middle+: 170 000 - 300 000
🥷 Senior: 280 000 - 450 000
🧔‍♂️ Team lead: 350 000 - 700 000

Как я поднял оффер с 350 до 420 в 2021 или о важности переговоров

Несколько лет назад я брал менторинг у очень опытного лида. Он мне советовал множество различных книг по карьере и ИТ. Одна из них Договориться можно обо всем! Как добиваться максимума в любых переговорах. Прочитав ее, благополучно забыл на несколько месяцев.

Через несколько месяцев начал проходить собеседования и меня очень заинтересовала позиция в крупной европейской компании(Компания А), успешно прошел собес и получил оффер, но по деньгам хотелось больше. Тут я вспомнил пару глав из книги о переговорах и смысл там был: нужно всегда торговаться и не бояться этого делать, называть максимальную цифру изначально и потом уже сводить к средней.

Параллельно прошел другой собес в банк (но там я не хотел работать). Получил оффер в 380 (+ премия) ~= 400 и пошел торговаться с компанией А. Мой сообщение было примерно такое:

Мне очень понравился ваш проект и команда, я бы хотел с вами работать, но мне параллельно прислали оффер на 420(!). Очень с вами хочется работать, но по деньгам тоже не хочется проигрывать. Можем обсудить это и приблизиться к этой сумме?

Итого: оффер на 420 + квартальная премия

JavaScript: использование методов массивов в реальной жизни и необходимость их изучения.
( ч1. добавление/удаление элементов )

push: push(…items)– добавляет элементы в конец массива
частый кейс
необходимость изучения: 100%

pop: pop() – удаляет элемент из конца массива
нечастый кейс
необходимость изучения: 20%

shift: shift() – извлекает элемент из начала массива
гиперредкий кейс
необходимость изучения 0%

unshift: unshift(...items) – добавляет элементы в начало
гиперредкий кейс
необходимость изучения 0%

splice: splice(start[, deleteCount, elem1, ..., elemN]) – добавляет, удаляет и заменяет элементы
гиперредкий кейс
необходимость изучения 0%

slice: slice([start], [end]) – возвращает новый массив, в который копирует все элементы с индекса start до end, тоже самое что и splice, но в разы проще
частый кейс
необходимость изучения 100%

concat: concat(arg1, arg2...) – создаёт новый массив, в который копирует данные из других массивов и дополнительные значения, на текущий момент можно заменить оператором [...spread]
нечастый кейс
необходимость изучения 20%

Никогда не проходи тестовое задание (бесплатно)

За свою многолетнюю карьеру делал 15-20 тестовых. Абсолютно неблагодарная работа. Практически никогда не было позитивного фидбека. Ревьювер кода всегда смотрит со своей колокольни и не всегда она будет смотреть в вашу пользу. У каждого свое понимание «чистого» кода.

Тестовое занимает больше часа - в топку! Если компания не готова потратить время на тебя, почему ты должен тратить время на нее? В нормальных компаниях время на устройство вместе с соискателем делится примерно 50/50.

Последний раз делал тестовое пару лет назад на сеньорскую позицию с хорошими деньгами и условиями.
При просмотре тестового с лидом той компании оказалось, что для него норм писать костыли по проекту, писать на реакте классовые и функциональные компоненты одновременно чтобы использовать методы из обоих типов, лезть в instance компонета и менять там значения. На мои возражения соблюдения консистентности и кода без костылей человек сказал:
«по-хорошему надо бы, но мне удобнее так»
после этого меня побрили.

Тестирование фронтенда

Пирамида тестирования на фронте выглядит так:
e2e
integration
unit

E2E тестирование: Сквозное (end-to-end) тестирование, позволяет тестировать функционал приложения. Прокликивать отдельные фичи, запускать процессы и тд. Обычно для их написания использует Cypress или Selenium. Для тестирования добавляет отдельные атрибуты для элементов. Пример: <input data-test-id="search-input" />


Integration тестирование: Интеграционное тестирование, позволяет тестировать работу всего приложения через взаимодействие с UI, совместимость с другими модулями(если например приложение разбито на микрофронты или использует общение с другими приложениями). Обычно для их написания используют тот же Cypress или самописные решения.

Unit тестирование: Юнит тестирование, самое популярный вид тестов тестирование. Позволяет тестировать модули или определенные блоки. Конкретно на фронте тестирование классов, утилилок или компонентов. Чаще всего для юнит тестирования используют jest, react-testing-library.

Полезные статьи по тестированию:

Тестирование фронтенда: большой гайд

Трофей тестирования фронтенда

Какие инструменты и подходы использовать для тестирования фронтенда — рассказывают эксперты

7 основных тенденций в тестировании Web Front-End


#javascript #react #jest #cypress #selenium #unittest #e2e

JavaScript: использование методов массивов в реальной жизни и необходимость их изучения.
( ч2. перебор, поиск, трансформация элементов )

forEach: forEach((item, index, array) => )– позволяет запускать функцию для каждого элемента массива
нечастый кейс
необходимость изучения: 30%

includes: includes(item, from) – ищет item начиная с индекса from и возвращает true, если поиск успешен
частый кейс
необходимость изучения: 100%

indexOf: indexOf(item, from) – ищет item начиная с индекса from и возвращает номер индекса, на котором был найден искомый элемент, в противном случае -1
частый кейс
необходимость изучения 50%

find: find((item, index, array) =>) – если true - возвращается текущий элемент и перебор прерывается, если все итерации оказались ложными, возвращается undefined
частый кейс
необходимость изучения 100%

filter: filter((item, index, array) =>) – проходит циклом по массиву и выдает результат из элементов соответствующих условию
частый кейс
необходимость изучения 100%

map: map((item, index, array) => ) – вызывает функцию для каждого элемента массива и возвращает массив результатов выполнения этой функции
частый кейс
необходимость изучения 100%

sort: sort((a,b) – возвращает отсортированный массив, но обычно возвращаемое значение игнорируется, так как изменяется сам
частый кейс
необходимость изучения 100%

На 95% собеседований вас спросят о нем. Event Loop.

Event Loop (событийный цикл) - главнейший механизм в JS.
JS - однопоточный язык и некоторыми операциями можно заблокировать интерфейс пользователя. Соотвественно чтобы писать user-friendly приложение нужно делать его без блокеров IO (ввода вывода). Т.к. есть операции, которые мы не можем выполнить прямо сейчас, а когда-то потом. Для этого существует Event Loop и асинхронные инструменты Promise, async await и тд.

Что блокирует интерфейс?
- циклы while, for
- тяжелые вычисления
- cинхронные операции без механизмов ассинхроности (setTimeout, requestAnimationFrame и тд)


Полезные статьи:
Эволюция асинхронного JavaScript
What is non-blocking IO?
Асинхронное программирование в однопоточных средах JavaScript

Осень началась, появились вкусные вакансии)

Моему ученику прислали оффер на 275к. Топ результат за год ⬆️

🔥 3 собеседования на $7K: что реально важно на высоких позициях

Недавно прошел собеседования в топовые компании: крупный ритейл и два AI стартапа. Делюсь инсайтами.

На что РЕАЛЬНО смотрят:

1. Софт скиллы 👥
- Коммуникация с бизнесом
- Умение отстаивать технические решения
- Взаимодействие с другими командами

2. Проектирование 📋
- Декомпозиция больших задач
- Оценка рисков
- Планирование ресурсов
- Выбор технологий

3. System Design 🏗
- Масштабируемость решений
- Производительность
- Безопасность
- Интеграции

4. Архитектура 🎯
- Паттерны проектирования
- Чистый код
- Поддерживаемость решений

❌ Что НЕ спрашивали:
- Работу хуков React
- Bind/call/apply
- Алгоритмические задачки
- Задачи типо "Рекурсивный обход деревьев"

💡 Вывод: на высоких позициях важнее умение проектировать и принимать архитектурные решения, чем знание синтаксиса.

#собеседование #frontend #архитектура