Хотите работать в продуктовой компании, но не знаете, как туда попасть? Мы всё выяснили за вас. Мы связались с разработчиками из Тинькофф, «Вконтакте», «Проксиматики», PetShop и EPAM и узнали, кого они видят в качестве мидл-фронтендера у себя в компании.

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

Общие навыки

Если вы претендуете на позицию мидла, у вас должны быть хорошие знания HTML и CSS. Нужно знать семантическую вёрстку, уметь создавать адаптивные интерфейсы, строить сетки на таблицах, флексах и гридах, а также правильно выбирать метод построения сеток под конкретную задачу.

Ещё обязательно знать ванильный JavaScript, TypeScript и минимум один фреймворк. Самый популярный — React, его используют во всех компаниях. В Тинькофф некоторые команды программируют ещё и на Angular, а во «Вконтакте» — на Vue. В EPAM выбор ещё шире: здесь мидлы должны владеть React, Angular или Vue.

Из софт-скиллов особенно важны ответственность и самостоятельность, навыки коммуникации и командной работы. Мидлы не должны бояться просить совета у коллег, если столкнулись с проблемой. Им нужно работать быстро, качественно и с минимальным руководством. А ещё важны навыки наставничества. Ведь когда в компании появляются новички, им нужно помочь быстрее влиться в работу и освоить новые технологии.

Petshop

Petshop — крупнейший интернет-магазин товаров для животных в России. Чтобы устроиться сюда разработчиком, нужно хорошо владеть React и Redux: не только знать правила и ограничения библиотек, но и понимать, с чем они связаны. Здесь важно разбираться в SSR — он не играет ключевую роль на собеседовании, но для работы понадобится. Ещё разработчики должны уметь читать чужой код, а при написании своего нужно следовать принципам SOLID и KISS.

Если говорить о софт-скиллах, то в Petshop важна коммуникабельность. Нужно не стесняться уточнять информацию в техзадании, уметь рассуждать над задачей и давать качественную обратную связь — без оценочного суждения и с конкретными предложениями или замечаниями.

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

Владимир Турецкий, фронтенд-разработчик Petshop

Что нужно знать: HTML, CSS, JS, React, TypeScript, SSR, Redux.

Проксиматика

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

Разработка здесь ведётся на React, поэтому фронтендер должен разбираться в функциональных компонентах. А вот в классовых — необязательно, их стараются не использовать. Ещё нужно знать маршрутизацию, управление состоянием, SSR и организацию взаимодействия с бэкендом.

Мидл — это человек, который может прочитать техническое задание и осознать его, провести декомпозицию задачи на компоненты и изготовить эти компоненты. Причём он всегда может обратиться за помощью к коллегам, если нужно что-то оптимизировать или использовать наработки, которые он не знает.

Волков Максим, генеральный директор «Проксиматики»

Что нужно знать: HTML, CSS, JS, React, TypeScript, GraphQL, Rest API, SSR.

Тинькофф

В Тинькофф своя система грейдов: здесь есть джун-, джун и джун+, мидл-, мидл и мидл+, а ещё сеньоры. Уровень разработчика проверяется по двум матрицам компетенций: для софт-скиллов и хард-скиллов.

Софт-скиллы. Софтовая матрица едина для всех. По ней мидлами считают активных и самостоятельных людей, которые могут сами выполнить задачу и, если что-то пойдёт не так, не стесняются задавать вопросы.

Хард-скиллы. Хардовая матрица у каждой команды своя. В Тинькофф нет должности фронтенд-разработчика — вместо него JavaScript-разработчик, и это направление делится на React, Angular и Node. js. Соответственно от того, в какой команде фронтендер, зависит то, такие технологии он должен знать. Но есть и общие навыки для всех команд. Например, мидлы должны понимать браузерный рендеринг и API, работать со сборщиками webpack и Babel.

Тестирование. Все разработчики компании пишут тесты. Джунам достаточно знать основы, а вот мидлы должны понимать, как работает тестирование в целом приложении и как писать стабильные тесты. Они знакомы с пирамидой тестирования и придерживаются её.

Мидлы должны разбираться в производительности и оптимизации приложений. Знать хотя бы на базовом уровне про безопасность: XSS-атаки и CORS, отличать авторизацию от аутентификации. Нужно понимать веб-архитектуру и хотя бы немного разбираться в том, как работает мониторинг: читать логи, искать ошибки и исправлять баги.

Если ты претендуешь на уровень «мидл+», то дополнительно проходишь собеседование на веб-архитектуру. Здесь нужно понимать архитектурные особенности, что такое микрофронтенды, зачем они нужны, как с ними работать, как работать с CDN и нужен ли он. Но если ты мидл и участвовал в запуске нового проекта, ты хотя бы на минимальном уровне всё это знаешь

Николай Тихонов, фронтенд-разработчик Тинькофф

Что нужно знать: HTML, CSS, JS, React, Angular или Node. js, TypeScript, Redux, юнит-тесты, JS Core, Rest API.

EPAM Systems

EPAM — крупная международная IT-компания. Здесь производят ПО для финансовых, торговых, медицинских, медиа- и других организаций.

В EPAM тоже есть матрица компетенций, по которой проверяются навыки мидла, сеньора и тимлида. Требований много. Например, если говорить о базовых навыках, то фронтендеры-мидлы должны очень хорошо знать JavaScript:

  • понимать, что такое хойстинг и какая разница в хойстинге переменных, объявленных при помощи разных ключевых слов;
  • хорошо знать синтаксис создания функций: понимать разницу между функциональным выражением и объявлением функции;
  • уметь решать задачи на всплытие переменных и функций, понимать замыкания и области видимости;
  • разбираться, как парсится JS и как работает токенизация;
  • понимать, как назначается и теряется контекст выполнения функции;
  • как работают методы call(), apply() и bind();
  • писать кастомный bind;
  • понимать асинхронность и промисы;
  • решать задачи с then(), catch() и finally();
  • подключать скрипты c атрибутами async и defer, при этом понимая разницу между ними.

Ещё у них должно быть общее понимание работы приложения и взаимодействия с бэкендом, представления о сборке проекта.

Если вы подумали, что все эти навыки могут быть и у джуна — то вы отчасти правы. Разница в степени погружения: мидлы должны глубже разбираться в конструкциях JS и применять их без ошибок.

И это ещё не все. Чтобы устроиться в EPAM, нужен английский уровня A2 или B1. Без него никак, потому что часть собеседования проходит на иностранном языке. А при повышении грейда проводится комиссия уже полностью на английском — здесь нужен уровень владения языком B1 или B1+.

Что нужно знать: английский язык, HTML, CSS, JS, JS Core, OSI, протоколы, React, Angular или Vue.

«Вконтакте»

Во «Вконтакте» нет формального деления разработчиков на сеньоров, мидлов и джунов — считается, что в такой системе принижается ценность мидлов. Вместо этого здесь младшие разработчики, разработчики и старшие разработчики.

Младшие — фронтендеры, которым нужны чёткие требования и поддержка на каком-то из этапов, чтобы довести задачу до конца. А разработчик — это полноправный опытный программист, который сам справляется со всеми задачами, если они понятно описаны. Он знает, как писать простой поддерживаемый код и хорошо разбирается в своей области.

Чтобы устроиться сюда, нужно знать Redux, webpack, Immer, уметь проводить тестирование и работать со Storybook. Разные команды используют разные инструменты, причём младшие и старшие разработчики обычно находятся в одном стеке разработки.

Что нужно знать: HTML, CSS, JS, TypeScript, webpack, React, Immer, Storybook, юнит-тесты, React Redux, Vue. js (Vuex).

Заключение

У каждой компании свой набор требований и своя сетка грейдов. Но есть технологии, которые требуются почти на любой работе: HTML, CSS, JavaScript, TypeScript и реактивные фреймворки. Советуем хорошо изучить их, чтобы подходить максимальному числу работодателей. А если хочется попасть в конкретную компанию, заранее узнайте, какой там стек, и прицельно изучайте эти технологии.

Проксиматика

Вконтакте

Тинькофф

PetShop

EPAM

Фреймворки

React

React, Vue

React, Angular, Node.js

React

React, Angular, Vue

TypeScript

GraphQL

Rest API

SSR

Redux

Immer

Unit-тесты

JS Core

OSI и протоколы

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

☝ Подтянуть знания по самому распространённому фреймворку TypeScript рекомендуем на профессиональном курсе.

Узнать больше