Что должен знать джуниор фронтенд разработчик

Что должен уметь начинающий Front-end разработчик?

Должность Junior Front-End Developer для новичка – быстрый и верный способ начать карьеру в IT-разработке. Такой вывод вы сделаете, если проанализируете статистику вакансий и зарплат IT-специалистов за 2021 год.

Но, чтобы пройти собеседование, сделать тестовое и трудоустроиться, начинающий Фронт-енд разработчик должен обладать конкретными техническими и “гибкими” навыками. Ниже я расскажу о них, чтобы вы составили чек-лист старта карьеры в IT.

Что делает Junior Front-end разработчик

Задача Junior Front-End разработчика – создать видимую часть веб-сайта таким образом, чтобы точно передать задумку веб-дизайнера и дать пользователям возможность взаимодействовать с веб-страницей. Также фронтендеру важно настроить клиентскую часть, чтобы она правильно взаимодействовала с бэкэндом и базой данных, сторонними надстройками и всевозможными сервисами.

Давайте проанализируем, что должен знать и уметь Junior Front End разработчик, чтобы умело выполнять задачи, которые будет ставить перед ним работодатель или клиент.

ТОП-5 технических навыков Junior FrontEnd Developer

Как только вы получите эти 5 Tech Skills для фронтендщика – будете желанны на каждом собеседовании и сможете брать заказы на фрилансе.

1. HTML+CSS

HTML (аббревиатура HyperText Markup Language) – это язык гипертекстовой разметки. С его помощью фронтенд делает “скелет” сайта или веб-страницы. С помощью HTML-тегов специалисты создают “макет”, который правильно отображает:

текстовый контент,
маркированные и нумерованные списки;
картинки
медиа-контент

CSS (аббревиатура cascading style sheets) – это язык стилей страницы, который формирует логически правильный внешний макет сайта или страницы, делает его визуально красивым.

С помощью CSS-свойств Front-end специалист настраивает вывод страницы для пользователя в зависимости от поставленных целей – от обычного печатного представления до чтения голосом и даже вывода шрифта Брайля на специальных устройствах.

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

HTML и CSS – это база. Она нужна для фрондендщика так же, как и художнику навык создавать эскизы будущих картин. Поэтому, если вы хотите успешно стартовать в карьере Junior Front-end разработчика – сделайте первый шаг – зарегистрируйтесь на марафон по верстке HTML/CSS. На нем вы:

сделайте первый сайт-резюме;
узнаете основные HTML-теги и CSS-свойства, с помощью которых в дальнейшем будете создавать сайты и веб-страницы;
попробуете силы в IT “на минималках”.

2. JavaScript

Знания JavaScript для Front-end разработчика must have! С помощью этого языка программирования специалисты добавляют динамичность элементов на изначально статичных HTML-страницах. Например, с помощью JS разработчик делает так, чтобы при действиях пользователя:

показывалась правильная анимация,
“всплывали” нужные окна,
проявлялись необходимые эффекты.

Согласно опросам StackOverFlow 2021, 83`052 опрошенных 64,95% создают IT проекты на JavaScript. Это делает JS самым популярным языком программирования и открывает перспективы перед начинающими специалистами. Поэтому, если вы готовы делать крутые современные сайты – регистрируйтесь на 2-х недельный мини-курс по изучению JavaScript в GoIT.

3. JQuery и Фреймворки JavaScript, CSS

JQuery – JS-библиотека, которая упрощает написание и сокращает количество кода, необходимое для взаимодействие JavaScript и HTML.

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

Фреймворки JavaScript и CSS – библиотеки, которые представляют собой набор стилей и динамических элементов “по-умолчанию”. Чтобы уйти от скучных терминов и проще объяснить, что это такое, приведем пример. Представьте, что вы Junior Front End разработчик. Вам поручили задачу сделать “черновик” сайта, веб-страницы или приложения и дали вводные, которые подойдут за основу любому проекту. У вас есть 2 варианта:

Начать создавать проект “с чистого листа” и потратить на создание основ десяток часов – отличная практика для новичка, если сроки не горят.
Воспользоваться фреймворками JS и CSS и сделать основу проекта за час-два – возможность быстро “развернуть” проект с нуля, без необходимости долгого кодинга.

Новичку полезно уметь делать и то и другое, чтобы выбирать в зависимости от наличия (отсутствия) времени.

4. Система контроля версий

При работе над проектами, Front-end developer каждый день взаимодействует с командой разработки, веб-дизайнерами, тестировщиками. Чтобы коммуникация была удобной для каждого, нужно уметь работать с системой контроля версий. Например, рассмотрим Git. Вам нужно знать:

Как установить Git на компьютеру.
Как отправлять изменения в Git, чтобы их увидела команда.
Как просматривать изменения и возвращать ранние версии проекта.

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

5. Адаптивный дизайн

При создании сайтов и веб-страниц важно помнить, что пользователи будут просматривать их на разных устройствах:

компьютерах;
планшетах;
смартфонах.

Чтобы делать страницы, которые будут адаптироваться под просмотр на любом устройстве, Junior Front End разработчик должен знать техники адаптивной верстки.

Soft Skills для Front End разработчика

Для начинающего Front End разработчика важно обладать не только Tech, но и Soft Skills. Все о “гибких” навыках мы рассказали в одноименной статье в Блоге GoIT Journal.

ТОП-5 Soft Skills, необходимые новичку:

Навыки командной работы – выполнение ваших задач напрямую влияет на создание проекта, поэтому важно соблюдать дедлайны и делать работу качественно.
Дисциплина – обязались презентовать работу – сделайте, даже если она не готова на 100%.
Правильная коммуникация – освойте Git, задавайте вопросы и участвуйте в обсуждениях.
Креативность – пробуйте выполнять задачи “с душой”, решайте трудности необычным путем и тогда будете создавать уникальные сайты.
Самостоятельное решение трудностей – меньше спрашивайте ответы у коллег и больше гуглите.

Если вы хотите стать Junior Front End Developer – в GoIT уже разработан курс который сделает вас фронтенд-специалистом с нуля. За 183 дня на курсе вы:

получите необходимые знания и навыки, необходимые для трудоустройства и работе на фрилансе;
сформируете и улучшите Soft Skills;
научитесь создавать резюме Front End разработчика и узнаете, где их размещать, чтобы заинтересовать рекрутеров;
научитесь общаться с HR-специалистами и рекрутерами, чтобы “преподносить” навыки и портфолио с лучшей стороны.

Хотите получить личный план развития в Front-end – регистрируйтесь на курс Front End online.

Поможем с выбором

Напиши нам, если есть вопросы по обучению или нужна помощь с выбором профессии. Мы перезвоним и с радостью поболтаем с тобой 🙂

Подождите несколько секунд. почти получили Вашу заявку

Спасибо, информация отправлена успешно. Мы свяжемся с вами как можно скорее.

Что должен уметь Frontend разработчик в 2023 году (+Roadmap)

Обложка: Что должен уметь Frontend разработчик в 2023 году (+Roadmap)

С каждым годом войти в IT становится всё труднее. За счёт высоких зарплат, комфортного образа жизни, амбиций, потребности в специалистах, сейчас чуть ли не каждый второй хочет стать программистом. За счёт этих факторов, рынок труда в IT перенасыщается, из-за чего потребности в навыках специалистов тоже выросли. Теперь от разработчиков даже требуют уметь программировать, я знаю, это ужасно…

Это не говорит о том, что сейчас в IT идти смысла нету, этот факт лишь говорит о том, что повысилась конкуренция. Я лично считаю, что такая ситуация наоборот благосклонно влияет на весь мир в целом, так как конкуренция порождает прогресс. А для вас это дополнительный стимул стать еще более востребованным специалистом и сильной личностью.

Как развиваться (Roadmap)

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

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

Beginner (Новичок)

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

Что такое TCP/IP, из каких уровней состоят и какие протоколы содержит. (В частности Ethernet, IP, UDP, TCP, HTTP1/2/3)
Что такое HTML. Базовые элементы разметки. Семантика SEO-оптимизация и доступность.
Что такое CSS. Базовые свойства стилизации. Позиционирование элементов макета. Flexbox. Grid. Адаптивность посредством составления @media запросов. Анимации и трансформации. Псевдоэлементы и псевдоклассы. Методология БЭМ.
Основы языка программирования JavaScript. Типы данных. Циклы, Условия, Работа с объектами. Функции. Прототипы и наследование. Работа с объектами. Методы массивов.
Выбрать редактор кода. Я лично из своего опыта рекомендую Visual Studio Code или WebStorm (платный).

Trainee (Стажёр)

Если вы знакомы с понятиями описанными выше, вы можете переходить к следующему этапу — Trainee. Изучив технологии, описанные в данном разделе, вы уже имеете какой-никакой вес в IT мире и даже сможете устроиться на стажировку в IT-компанию.Стажёр должен быть знаком со следующим перечнем технологий:

Уметь работать с браузерным окружением и DOM (Document Object Model). Браузерные события. Обработка ошибок (Try/Catch). Пользовательские ошибки. ООП. Модульная система. Экспорт и импорт. Динамические импорты. Web API.
Что делает JavaScript — асинхронным. Что такое Event Loop. Микро и макро задачи. Промисы. Fetch API. Синтаксический сахар — Async и Await.
Что такое DNS-зоны и домены. Cross-Origin Resource Sharing (CORS). Preflight Requests. No-CORS mode. Request & Response Headers.
Что такое линтеры. Настройка ESLint и подключение плагинов. Настройка Prettier и Stylelint. Pre-commit Check.
Как работает система управления версиями (Git). Регистрация на GitHub. Коммиты. Репозитории. Форки. Merge Requests. Checkout. Ветки.
Что такое Node.js. Как работает менеджер пакетов Npm. package.json и package-lock.json. npm install, npm uninstall. Dependencies & Development Dependenices. Создание своего пакета.
Что такое препроцессор. SASS и SCSS. Переменные. Импорты. Вложенность. Модули. Миксины.

Junior (Младший разработчик)

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

Что такое сборщик модулей. Babel. Настройка Webpack. Правила. Модули. Плагины. DevServer. Переход к Vite.
Что такое React и какие проблемы он решает. Жизненный цикл компонентов. Особенности виртуального DOM-дерева. React компоненты. Базовые хуки и разработка собственных. React Portals. React Refs. JSX синтаксис. Props & State.
Особенности FLUX архитектуры. Reducers. Actions. Хук useContext. Redux и Redux Toolkit. Redux Thunk. RTK Query. (По желанию можно изучить MobX и/или Zustand)
Что такое роут. Из чего состоит объект Location. Как манипулировать историей сессии через History. Библиотека React Router.
Как повысить эффективность стилизации. Что такое PostCSS. Плагин CSS Modules. Библиотека TailwindCSS. Что такое UI библиотека. MUI. Ant Design.
Что такое VPS/VDS. Базовые команды терминала Linux систем. Права доступа. Ununtu. Nginx. Базовая настрока веб-сервера. SSH. Ассиметричное шифрование.
Что такое CI/CD. Интеграция. Доставка. Развертывание. Структура и настройка. Пайплайны. Артефакты. Этапы. Переменные.

Middle (Средний специалист)

Если вы изучили все предыдущие темы, по моему мнению, вы уже можете называть себя Junior Front-end Developer. Но на этом останавливаться рано. Чтобы вырасти до Middle Front-end разработчика, вам необходимо изучить следующий перечень технологий:

Что такое TypeScript и какие проблемы он решает. Интерфейсы. Типы. Дженерики. Enum. Интеграция с технологиями. Типизация React-приложения.
Что такое авторизация? Идентификация. Аутентификация. Методы аутентификации. Bearer Token. JWT. Защита роутов. Протокол OAuth. Интеграция с сервисами.
Что такое оффлайн. Как работают Web & Service Workers. Регистрация сервисов. Жизненный цикл Service Worker’ов. Cache API. Методы Cache API. Как кэшировать выборку запросов.
Что такое PWA (Progressive Web Application). Надежность. Быстрота. Привлекательность. Favicon. Настройка Manifest’а.
Как настроить доступность приложения. Что такое Screen Readers и Voice Over. Доступность с клавиатуры. Библиотека Focus Trap. Семантика. Анализ доступности через Lighthouse.
Как локализировать приложение. Объект navigator. Intl. Плюрализация и Интернационализация. Библиотека l18next. Localazy.
Что такое Next.js и какие проблемы он решает. Что такое SSG, SSR, ISR и в чем между ними разница. Роутинг Next.js приложения. Оптимизация. SEO.
Почему тормозят сайты. Основные метрики Web Vitals. Анализ производительности. Методы оптимизации. Tree Shaking. React.lazy и React.Suspense. Как браузер рисует страницы. Layout. Paint. Compose. Rendering Pipeline. Парсинг HTML и CSS. Объединение DOM и CSSOM. Render-дерево. Мемоизация. useMemo и useCallback. Оптимизация изображений. Houdini Paint API.
Из чего состоит тестирование приложений. Мониторинг ошибок. Sentry Service. Что такое E2E, Unit и интеграционное тестирование. Пирамида тестирования. Библиотека Jest. Таймеры Jest. Мок-функции. TDD. Тестирование React-приложения через React Testing Library. Методы поиска элементов на странице. Тестирование событий. E2E тестирование с помощью Cypress.

Senior (Старший разработчик)

Ну и перейдём к последнему этапу. Изучив все вышеперечисленные технологии, вы уже закрепились, как уверенный разработчик интерфейсов, однако расти можно бесконечно долго. Ниже я перечислил актуальные на данный момент технологии для вашего развития:

Это лишь часть того, что вы можете изучить и это лишь то, что относится к Front-end разработке. После изучения всех вышеописанных технологий, вы можете идти в Full-stack разработку или же в другую специализацию в целом. Главное, чтобы вам нравилось то, чем вы занимаетесь.

Заключение

Как вы поняли по этой статье, путь в IT совсем не легкий и требует много времени. Этот путь отнюдь не простой и быстрый. Скорость развития зависит напрямую от вас и вашего стремления. В моём окружении есть мидлы, которым по 18-19 лет. Вы должны посвятить этому свою жизнь. Сделать работу частью себя. Вы должны получать кайф от своей работы. В любом случае, попробовать стоит, возможно в этом вы найдёте себя.

Мануал для джуна. Что нужно знать новичку в frontend-разработке перед собеседованием на проект мечты: вопросы на интервью и примеры тестовых

Создавать IТ-продукты можно на разных уровнях и совершенствовать их как изнутри, (backend), так и снаружи (frontend). Возьмем, к примеру, сайт. Специалист может работать с задачами под капотом, а может развивать интерфейс сайта, приложения или специальное программное обеспечение для бизнеса, чтобы они были удобными, понятными и функциональными.

Последним как раз занимается frontend-инженер. Что еще нужно знать джунам о frontend-разработке, что не стоит делать перед собеседованием и на какие вопросы ответить, чтобы быть готовым на 100% — Frontend Engineer в Levi9 Алексей Горбунов разложил все по полочкам в этом материале.

Базовые знания

Сфера frontend-разработки достаточно велика. Специалист может выполнять рядовые задачи, как станки страницы, настраивать передачу информации с сервера на сайт и делать это в понятном пользовательском виде, так и разрабатывать программы для IOS/Android, интерфейсы для работы со статистическими данными, структурирование информации и файлов, интерактивные доски и инструменты производительности, как Trello, Jira, Notion.
Языки для работы: JavaScript, TypeScript
Фреймворки: общие — React, Angular, Vue; для мобильной разработки — React Native и Ionic; для десктоп-разработки — Electron
Английский: чтобы иметь возможность быстро расти и работать на международных рынках и с интересными проектами, нужно владеть английским языком — по крайней мере, уровень В2, чтобы комфортно общаться с командой и клиентом.
Frontend-разработчик может работать в любой сфере. Да, в e-commerce ты отвечаешь за взаимодействие клиентов с вашим сайтом и его наполнением, работаешь с браузером и его фичами. Если это мобильное приложение, то разработчик встречается с нативными модулями — настройка уведомлений, интеграция диплинков, элементы видео, как сканирование QR-кода или получение информации с камер. У каждой сферы есть свои нюансы и особенности, но это нормально — разработчик постоянно учится.

Опыт собеседований и их особенности

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

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

Вопросы на интервью

Если soft-skills вопросы нацелены на то, чтобы раскрыть ваши личностные качества, то на техническом интервью внимание уделяется hard-навыкам. Обычно много надо говорить о работе с «чистым» JavaScript, то есть без фреймворков и библиотек.

Если речь идет о языке программирования, то классический JavaScript отличается от того, что применяют разработчики на реальных проектах. К примеру, способы работы с определенными типами данных берутся из библиотек как lodash, при всем этом те же классы изредка употребляются при построении интерфейсов на React, разница есть и в работе с объектами, массивами, примитивами, прототипами, классами и другими вещами «под капотом». Подход к решению задач также иной, но без понимания классического JavaScript вы не сможете взаимодействовать с более высоким уровнем абстракции на проекте.
При работе на React, вероятно, вы не будете сталкиваться с прототипным подражанием. На собеседовании же о них могут спросить.
Во время большинства интервью в блоке о JavaScript вас спросят типы данных в этом языке, что означает и как работает ключевое слово «this», дадут несколько заданий на синтаксис, прототипы, алгоритмы и различные структуры данных по типу стека или очереди. А по фреймворкам, например, React — как работать с перформансом, инструментами для этого, о рендеринге и хуках, а также взаимодействие с жизненным циклом компонента. При этом если при работе на React вы вряд ли будете сталкиваться с прототипным подражанием, то на собеседовании о них могут спросить.
Во время разговора вас также могут попросить написать код — дать задание и спросить, как вы улучшите перформанс и какое решение требования заказчика можете предложить.
Могут быть и странные вопросы. Например, у меня когда-то интересовались, что бы я сделал, если бы двое моих коллег подрались.

Интересные тестовые

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

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

Подготовка к интервью

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

А чтобы удостовериться в своих силах и освежить теорию, можно потренироваться на задачах на Leetcode, на Codewars, посмотреть репозитории с популярными вопросами на собеседованиях — там есть блоки по CSS, HTML, JavaScript. Можно также просмотреть похожие кейсы, фреймворки, особенности взаимодействия с ними и работы с перформансом.

Red flags

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

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

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

Junior-специалистам лучше больше времени уделять повышению квалификации и обучению. Тогда результат будет гораздо более ценным и для вас, и для компании.

Альтернативная польза собеседований

Когда специалист проходит собеседования, лучше понимает свою позицию на рынке — знаете ли актуальные технологии и потребности бизнеса и соответствуют ли ваши навыки и опыт.

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

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

Как стать джуном, которого берут на работу (frontend-разработка)

Привет, Хабр! Я — начальник отдела разработки небольшой IT-компании, и мы — те самые люди, которые не ищут на работу сеньоров, и мы готовы брать не только мидлов, но даже и джуниоров, и готовы растить их до уровня крепких мидлов. Однако 80% приходящих на вакансию frontend-разработчика соискателей, даже называющих себя мидлами, с опытом работы, по сути оказываются не то что джуниорами — вообще не программистами. Что же на самом деле должен знать джун, чтобы попасть в компанию, подобную нашей? И как к этому прийти, если за плечами нет высшего программистского образования или богатого опыта программирования в школе? Я расскажу об этом и о том, как устроено техническое собеседование в нашей компании.

Базовый уровень программирования

Итак, к нам приходит среднестатистический кандидат, который прошел курсы по JavaScript, сделал там пару проектов. Потом узнал, что во многих местах хотят React, сходил на курсы по нему, тоже сделал пару проектов, выложил их на Github. Приходит к нам, уверенный в себе. И мы его просим написать функцию, которая выбирает из строки все большие буквы, или реализовать «вручную» какой-нибудь метод из array. И половина кандидатов в этом месте выбывают из строя. Кто-то вообще не может это сделать, у кого-то на двухминутную функцию уходит больше получаса. Зачем мы вообще это спрашиваем и почему с этого начинаем?

Дело в том, что когда вы начинаете делать реальные проекты, то такие микрозадачи (просто чуть более сложные или чуть менее стандартные) регулярно начинают возникать:

то нужно покрасить гласные буквы;

то написать правильное окончание у слова с числительным (2 ракетки, но 5 ракеток, и вам нужно в автоматическом режиме подставить окончание);

то вычислить новые положения всех точек змейки после очередного шага; и так далее.

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

(Да, бывалые программисты здесь мне скажут, что нужно предусматривать много граничных условий, и речь идет не о 2 минутах, а больше, и вообще если есть библиотека, которая это умеет из коробки, то лучше ее подключить. Но примерный смысл работы библиотеки всегда лучше знать, чтобы мочь сделать вручную то же самое, но слегка модифицированное; а кроме того, человек, который пишет этот кусок кода за полчаса, а не за две минуты, граничные условия не напишет просто никогда).

Почему он этого не знает?

А у среднестатистического соискателя этой части обучения не было. Чаще всего он даже понятия не имеет о том, что она существует. Это во многом связано с тем, что курсы гораздо лучше продаются, когда человек получает на них быстрый результат. Но на таких курсах, даже 5-месячных, не остается времени на собственно базовое программирование — и поэтому в учебном проекте преподаватель предусматривает самые легкие пути с минимумом проблем. А шаг вправо-шаг влево от этого дается студентам с огромным трудом.

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

Но можно эту часть выучить и после того, как вы прошли курсы по javascript и React. И у вас сразу станет больше шансов стать айтишником, чем у 95% остальных выпускников курсов. Потому что действительно сложно потратить несколько месяцев, решая какие-то задачки, которые, как кажется, не имеют практического применения, мучая строки, массивы и циклы. Но это только кажется: в реальной работе вы будете иметь с ними дело очень часто.

Матчасть

Но, допустим, перед нами соискатель, который научился базовому программированию. Следующее, что мы просим на собеседовании, — найти на странице все кнопки и покрасить их в какой-нибудь цвет. В этом месте отваливаются еще 30% соискателей. Возможно, с этого стоит начинать разговор — с человеком, который не знает ответа на эту задачу, можно распрощаться за 7 минут, а в предыдущей на это уходит минут 15-20 обычно 🙂 Но как так, спросите вы? Человек сделал 4 проекта, разве он ни разу не делал чего-то подобного за это время?

Ну, во-первых, проекты обычно довольно небольшие. Даже если там много файлов, интересный код хранится от силы в 1-2. И там несколько раз они, конечно, выбирали элементы, но не настолько часто, чтобы это вошло в пальцы и в голову. И проблема вовсе не в том, что эти люди не были усердны, и даже не в том, что задачи на курсах достаточно невелики и упрощены. Проблема еще и в том, что при подготовке кандидаты решают какие-то задачи, ожидая, что на собеседованиях могут спросить примерно про что угодно, от стрелочной функции до каких-нибудь throttle и debounce. Но на самом деле есть несколько классов задач, с которыми frontend-разработчик имеет дело практически каждый день. В нашей рабочей практике (и в фирме, и времен фриланса) этих классов всего три:

работа с DOM-моделью (изменение стилей, атрибутов, html-кода);

работа с событиями (как минимум — обработка кликов по кнопкам, в том числе — сгенерированным в процессе работы);

отправка данных на сервер и обработка ответа (и тут, кстати, тех, кто походил на курсы базового программирования, ждет приятный сюрприз, потому что, например, если поднять сервер на PHP, то окажется, что там ровно и есть базовое программирование +/- работа с базой данных (ну, на уровне, когда надо всего лишь отправить на фронт какой-то ответ для тестирования), вот оно и пригодилось нечаянно).

И вот эти штуки, хотя бы в базовой версии, тоже надо знать очень хорошо, а применяемые команды и их синтаксис — наизусть (благо, их не так уж много). Как выбрать элемент — по тэгу, классу, атрибуту, его значению; как поменять стили, как поменять атрибуты, innerHTML и insertAdjacentHTML. Как обработать событие, что там внутри event (хотя бы target и currentTarget); как быть, когда кликабельные элементы сгенерированы или когда их очень много. Как отправить на сервер данные (fetch или даже хотя бы $.ajax). И, вы не поверите, если вы знаете наизусть синтаксис этих штук и применили их в реальных задачах раз по сто — ваша скорость разработки увеличивается еще в 5-10 (!) раз. То есть разница по скорости разработки между обычным соискателем и соискателем, который знает базовое программирование и базу матчасти языка, может доходить до 100 (. ) раз.

И вот как раз с этого места мы готовы называть его способным джуном и учить его дальше. Потому что дальше, до мидла, там еще очень много всего.

Что должен знать мидл

Собеседование с мидлом начинается, на самом деле, по той же схеме:

сначала задачка на базовое программирование;

потом на выбор элементов и покраску/скрытие/изменение атрибутов;

потом какое-нибудь простое событие и обсуждение стрелочных функций;

потом отправка данных на сервер и разговоры про GET/POST;

и пару слов про git (его, слава богу, хотя бы в базовом варианте умеют использовать даже джуны).

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

А дальше можно разговаривать в очень разных направлениях. Мы задаем много вопросов, но не ждем, что соискатель-мидл ответит на все — крепкий мидл должен знать процентов 70-80, начинающий — 30-40. Обычные вопросы в нашем случае такие:

всякие подробности про промисы;

какие-то другие способы взаимодействия с сервером, кроме ajax (например, websocket);

сборщики (webpack, gulp), разделение кода по компонентам;

event loop, всякие детали событий, кастомные события;

прототипы и полифиллы;

filter, map, reduce;

работа с линтером;

тесты и заглушки;

декораторы, throttle и debounce;

Соответственно, если джун в курсе про что-то из этого, то это плюс и к общему впечатлению, и к пути до уровня мидла. Но знание базы гораздо важнее, и бонусы его не заменят.

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

Тем, кто только стал джуниором, для начала лучше идти в организации, в которых используют vanilla js, может быть, с небольшими усовершенствованиями, и первые год-два проводить именно здесь. Почему я так думаю? Ведь если вам удастся устроиться сразу React-разработчиком, вам, скорее всего, будут платить больше денег!

Дело в том, что если вы работаете с обычным js, вы гораздо лучше понимаете, что и как устроено изнутри (и потом вам будет легче понимать и то, как устроены конструкции в React-е). У вас становится гораздо больше опыта работы с css-свойствами, больше способов сбора данных с кнопочек и форм; вы начинаете гораздо легче читать чужой код, потому что вы видели несколько способов и синтаксисов сделать то, что вы делаете, некоторые из них вы переняли; вы уже пробовали настраивать всякие штуки типа сборщиков и линтеров, потратили на это довольно много времени и знаете кой-какие нюансы. И дальше, когда вы идете уже непосредственно работать с React-ом, то вы все это уже умеете, и в 95% случаях вам не приходится учить еще и это. Потому что возможности мозга ограничены, и при большом объеме того, что нужно понять сразу, вы рискуете не справиться. Точнее, не справляться примерно первые несколько лет работы. И вам будет очень трудно, вы регулярно будете хотеть бросить работу, а ваши коллеги, которые уже имеют этот бэкграунд, будут обгонять вас в росте с космической скоростью.

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

И если путь «сначала js — потом фреймворки» будет соблюдаться (а когда-то это был естественный путь разработчика), то как раз и будет получаться, что с фреймворками работают мидлы и сеньоры. Проблема в том, что кто-то когда-то это заметил и поставил телегу впереди лошади: решил, что если вы пройдете курсы по React-у, то вы уже мидл. Но это так не работает 🙂

О реальных сроках роста

Существуют ли вообще люди, которые за полгода смогли пройти курсы, хорошо устроиться на работу и потом быстро вырасти? Да, они существуют. Проблема в том, что 90% из них имеют несколько лет бэкграунда самостоятельного кодинга, или школьного/университетского программирования, то есть это совсем не те люди, которые пришли с нуля. У них получится так быстро, а у вас нет 🙂

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

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

Дальше начинается путь к сеньору, и он занимает еще минимум пару лет. Но про это лучше думать, уже будучи более-менее приличным мидлом.

Как войти в IT

Резюмирую. Путь, по которому стоит войти в IT и стать джуном, которого берут на работу, в первую очередь включает в себя обучение базовому программированию. Если у вас этого еще нет, но уже есть курсы js и/или react — потратьте на это три-шесть месяцев, и процент интервью, которые вы будете проходить, резко возрастет. И к этому добавьте знание и практику матчасти по работе с DOM, событиями и ajax. Откровенно говоря, в этот момент вам должно казаться, что вы можете сделать на сайте примерно всё, что угодно. И это не очень далеко от правды, но. Многих технологий вы еще не знаете, как и многих деталей и нюансов DOM-модели. Еще вам предстоит изучить способы делать многое проще и быстрее; научиться хорошей организации кода; и так далее. И вот этому уже вы будете учиться на работе.

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