Практическое руководство как стать senior frontend developer

Стереотип о джунах

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

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

Джун — не приговор. Просто учитесь решать задачи.

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

Approaches to the expertise evaluation in software development

As part of the seniority level analysis, we’ll describe several existing approaches to evaluating a programmer’s expertise. Applying them to the given gradation will provide a broader perspective of seniority in software development.

The Dreyfus model of skill acquisition identifies 5 stages of attaining and mastering skills. Andy Hunt in his book Pragmatic Thinking and Learning: Refactor Your Wetware applies the Dreyfus model to software development. The author uses the Dreyfus model to structure fundamental changes that occur throughout the learning process. This allows him to juxtapose how programmers at different stages perceive the development process and approach problems, as well as, how they form mental models.

The five Dreyfus model stages illustrating the most important changes on the way from Novice to Expert
Source: Pragmatic Thinking and Learning: Refactor Your Wetware by Andy Hunt

The Seven Stages of Expertise in Software Engineering. This is another approach to classifying expertise in software engineering by Meilir Page-Jones. The classification breaks expertise down into seven stages and uses productivity as the key criterion. Although originally used to evaluate software engineering in the ‘90s, the approach can be easily reapplied to our reality.

The Productivity Curve
Source: The Seven Stages of Expertise in Software Engineering by Meilir Page-Jones

Programmer Competency Matrix. This matrix of the programmer skillset was developed by Sijin Joseph, a technology leader with over 15 years of experience in designing and building software products. The matrix has a three-level structure that correlates with the Junior-Middle-Senior role distribution. The matrix also includes Level 0 which, in our opinion, equals a Trainee-level Software Engineer. We are going to refer to this source while describing the tech knowledge expectations for each seniority level.

Approaches to expertise evaluation compared

Психологическое состояние

  • Жизнь — тлен. Иногда бывает так, что написанный код не идет в production по каким-то причинам (например по бизнес-решениям) или живет недолго(стартап или неумелое управление). Это серьезно деморализует со всеми вытекающими. Тут надо не путать со здоровым обычным цинизмом ввиду опыта работы.
  • Постигший дзен. За годы в статичном Enterprise-проекте разработчик изучает его вдоль и поперек и у него складывается ощущение, что он теперь редкий специалист. На самом деле его навыки и умения за пределами этого проекта почти не стоят ничего, налицо переоценка своих возможностей разработчиком.
  • Недооцененный и неуверенный. Череда неудачных проектов, плохого управления и прочих рисков заставляют разработчика сомневаться в своих способностях и умениях, хотя на деле он может оказаться весьма способным и ценным сотрудником. Часто недооценивает себя по зарплате и/или должности.
  • Переоцененный. В контраст недооцененному и неуверенному этот индивидуум словил удачный проект или серию, который прошел крайне удачно и на этой волне сильно переоценивает свои способности и возможности.

Говорите со своими коллегами

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

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

Серверный Go-разработчик в Tamashi Games

Tamashi Games ― новая студия, основанная в 2018 году ветеранами геймдева. Раньше разработчики работали в LogicEditor, Astrum Online, Digital Legends, Pixonic, Game Insight и других студиях. Команда в поисках серверного Go-разработчика со знанием JS.

Задачи:

  • перенос серверной игровой логики многопользовательской real-time-игры с аркадной механикой с Node.js на Nakama;
  • перенос реализации серверной игровой логики с JS на Go;
  • отладка взаимодействия с клиентской частью игры;
  • участие в нагрузочных тестах игры, профилирование и оптимизация кода;
  • дальнейшая поддержка и развитие серверной части проекта.

Плюсом будет:

  • опыт разработки многопользовательских real-time-игр;
  • знакомство с Nakama, Node.js, Redis;
  • опыт профилирования и оптимизации кода;
  • опыт работы в команде, практиковавшей code review;
  • проживание в России или Беларуси.

Статистика зарплат по некоторым профессиям и специализациям

Большая доля вакансий приходится на следующие профессии и специальности: Senior Java Developer, Senior Frontend Developer, Senior PHP Developer, Senior Backend Developer, Senior Python Developer.

Обзор зарплат по некоторым профессиям и специализациям
Технология Средняя зарплата, руб. Медианная зарплата, руб. Вакансий с зарплатой Всего вакансий
Senior Java Developer 322401.0 327000.0 242 910
Senior Frontend Developer 275700.0 259000.0 263 685
Senior PHP Developer 248433.0 251000.0 252 458
Senior Backend Developer 291718.0 289000.0 156 394
Senior Python Developer 272818.0 259000.0 132 330
Senior React Developer 295419.0 293000.0 86 214
Senior PHP Backend Developer 242429.0 251000.0 35 74
Senior Python Backend Developer 299400.0 253000.0 20 53
Senior Java Backend Developer 339800.0 351000.0 10 50
Senior .NET Backend Developer 272882.0 271000.0 17 37
Senior Node.JS Backend Developer 343842.0 327000.0 19 33
Senior Golang Backend Developer 351364.0 331000.0 11 15

Возможно, вас заинтересуют зарплатные обзоры по следующим профессиям и специализиям:

Обзор зарплат
Технология Средняя зарплата, руб. Медианная зарплата, руб. Вакансий с зарплатой Всего вакансий
Developer 162735.0 151000.0 13469 33499

За деньгами

Второй вариант работы джуниором — сразу начать зарабатывать, но тут сложнее. Немногие компании готовы сразу платить нормальные деньги новичкам в надежде, что они сами всему научатся. Можно рассчитывать на зарплату всего на 10–15 тысяч больше, чем в первом варианте, но требования тут другие. От вас будут ждать, что вы сами способны выдать рабочий код. Поблажек на то, что вы только начинаете, не будет.

С другой стороны, если вы пишете на популярном и простом языке, то конкуренция будет выше, а зарплаты — ниже, потому что много желающих поработать. Тем, кто пишет на редких или перспективных языках типа Kotlin или Rust, платят больше.

Управление развитием программиста

Практика. Лабораторные работы

Примерные формулировки заданий

Задание 2а. «Базовый web». Реализуем CRUD на чистом PHP.

  • PHP: Аутентификация и авторизация на сайте
  • PHP: Обработка форма обратной связи с сохранением данных и валидацией
  • Фронт: Создание форм на html
  • Фронт: Синтаксис и селекторы CSS, общее представление о весах селекторов
  • SQL: Основы Mysql
  • SQL: Типы данных
  • PHP: Синтаксис языка PHP
  • завести репозиторий на bitbucket и выполнять в нем;
  • сразу сделать ветку и pull request;
  • в PhpStorm установить плагин Statistic, максимальное кол-во строк на весь проект — 1500:
  • через PhpStorm создать необходимые таблицы и заполнить их данными;
  • сделать страницу аутентификации;
  • сделать страницу с формой обратной связи, на которой есть: текстовое поле, многострочное текстовое поле, радиокнопки, флажки, выпадающий список, кнопка сброса формы, кнопка отправки формы;
  • форма обратной связи доступна только авторизованным пользователям, критерий допуска — вход в систему выполнен;
  • все красиво сверстать, показать пример использования основных типов селекторов: id, class, attribute, pseudo-class, pseudo-element;
  • обе формы должны обрабатываться без JS;
  • проверить через PhpStorm, что данные добавляются в таблицу.
  • проверяется качество декомпозиции php, js, css;
  • умение выделить ответственность и установить правильные зависимости между компонентами MVC/ECB;
  • безопасность (доступ);
  • безопасность (XSS, SQL injection);
  • корректность редиректов;
  • единство стиля оформления кода.

Развитие заданияЗадание 2б. Развитие CRUD-интерфейса на PHP.

  • 3 способа подключения скрипта
  • Создание форм на html
  • Синтаксис и селекторы CSS, общее представление о весах селекторов
  • JS: операторы, функции
  • Отладка JS с помощью консоли браузера
  • Основы Mysql
  • Типы данных
  1. сделать мини-админку:
  2. список отправленных форм обратной связи;
  3. список должен быть отсортирован по дате отправки, новые — сначала;
  4. список можно “обновить”, это делается с помощью AJAX;
  5. совет: для интерактивного тестирования запросов к БД используйте консоль БД в PhpStorm;
  6. отправленную форму можно удалить из админки, все на AJAX;
  7. таким образом продемонстрировать все способы подключения JS;
  8. отправленные данные можно отредактировать (использовать уже разработанную форму, без AJAX);
  9. можно использовать jQuery.
  10. открыть инструменты разработчика (желательно Firefox):
  11. найти источник запроса из лога запросов;
  12. установить точку останова, спровоцировать выполнение кода, изучить пошаговое выполнение кода;
  13. во время пошагового выполнения просмотреть значения переменных через соответствующий инспектор;
  14. добавить watch;
  15. воспользоваться консолью для доступа к переменным в текущей области видимости.
  1. проверяется качество декомпозиции php, js, css;
  2. умение выделить и установить правильные зависимости между компонентами MVC/ECB;
  3. безопасность (доступ);
  4. безопасность (XSS, SQL injection);
  5. единство стиля оформления кода;
  6. все пункты по использованию инструментов разработчика продемонстрировать.

Задание 10. Парсинг сайтов

  • Регулярные выражения
  • HTTP-запросы с сервера, cURL
  • TODO: написание консольных утилит (и одноразовых скриптов) на кодовой базе Bitrix Framework
  • TODO: добавить CRON
  • Проанализировать сайт, продумать структуры данных, пригодные для автоматизированной обработки
  • Распарсить сайт в эти структуры
  • Оформить в виде CLI-скрипта
  • Настройками реализовать возможность парсить не все подряд, а только то, что нужно пользователю
  • корректность CLI-окружения
  • декомпозиция регулярных выражений
  • экономичность по запросам
  • обработка ошибок
  • возможность параллельного парсинга нескольких объектов сразу
  • Работа в консольном и интерактивном режиме
  • *работа в режиме внешнего сервиса, доступного по HTTP, с поддержкой очередей

Продюсер в FunPlus

Московская студии FunPlus разыскивает продюсера на новый казуальный проект.

Задачи:

  • тестирование геймдизайнерских гипотез, механик, концептов, сеттинга и стилистики;
  • продюсирование и тестирование ключевых игровых механик;
  • взаимодействие с продакшен-командой и командой UX-департамента;
  • формирование процессов и инструментов проверки эффективности геймдизайнерских гипотез;
  • составление и защита фичеплана по развитию продукта.

Будет плюсом:

  • опыт работы над играми в жанре match-3;
  • хорошие знания в игровой аналитике;
  • опыт продюсирования в R&D-отделе;
  • опыт работы в проекте с командой более 25 человек;
  • опыт работы с UA и маркетинговой аналитикой.

Работа с кодом

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

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

Как вычислить джуниора?

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

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

А что насчет сеньора?

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

Сеньор думает о коде не так, как джуниор: созданные опытным специалистом программы удобно обслуживать и масштабировать.

Фото: Unsplash

Прекратите смотреть на чужие зарплаты

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

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

Стать Senior: выбрать подходящий проект

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

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

Project Manager в Last Level

Last Level занимается разработкой мультиплеерных мобильных игр на движке Unity. Главные проекты студии — Modern Strike Online, World War Heroes и Sky Combat.

Задачи:

  • организация и координация процесса разработки игровых проектов;
  • взаимодействие с командами разработчиков, арт-отделом, аналитиками и другими подразделениями;
  • релиз-менеджмент: контроль качества и сроков релизов, отслеживание технических показателей релизов, уровня crash rate;
  • проведение собраний, курирование отчётов по проектам;
  • распределение зон ответственности, контроль сроков и качества выполнения задач;
  • оперативное решение возникающих технических вопросов.

Джуны (младшие разработчики)

Джуны — программисты, которые иногда не знают, что именно они знают (и никто из коллег тоже не знает). Это тот случай, когда не совсем понятно, что человек умеет, и совсем не ясно как он это применяет на практике.

Джуны обычно не могут объяснить вещи, которые нужно сначала потрогать на практике.

Например, в JavaScript. Про него всё написано, но до тех пор, пока программист с ним не поработал, он не поймёт, как там всё организовано. Когда я проходила собеседование на джуна, я вообще не знала половину этих слов. Я не могла ответить на вопрос, потому что просто не понимала, о чём меня спрашивают.

Джун, который немного поработал в настоящей компании, может решать задачи разных уровней. Вопрос только в том, как он это делает. Чаще всего, решение будет одно, максимум два, потому что у джуна нет опыта решения подобной задачи через множественные подходы. Он может нагуглить, может сам решить, но это условные 1-2 варианта, а всё остальное будет казаться сложным, непонятным и нереализуемым.

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

Ищем мотивацию

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

Помните про эффект Даннинга — Крюгера

Про данную психологическую особенность написано очень много статей. Проще всего продемонстрировать его следующей картинкой:

Картинка честно взята отсюда.

Да, на определенном начальном этапе вы почувствуете себя самым сеньорным из всех сеньоров. Вы будете думать, что горы по колено и что вы все можете. Я вот однозначно таким был и мне пришлось приложить усилия, чтобы подавить это жгучее чувство внутри. Это, увы, не так. У вас еще очень большой путь путь впереди, вам многое предстоит узнать и пощупать. Помните — вы не король разработки. Король разработки у нас один и имя его многим из нас хорошо знакомо. Старайтесь провести на пике уверенности как можно меньше времени.

Градации программистов и фулстек

Есть четыре градации в программировании: стажёр, джуниор, мидл и сеньор (Junior, Middle, Senior).

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

Деление условное, всё зависит от требований компании. То, что одни компании требуют от джуниоров, другие хотят от мидлов.

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

Нет тонкой грани между Middle и Senior разработчиком

Нельзя сказать, что однажды, одним определенным утром, разработчик проснётся уже Senior, хотя засыпал в должности Middle Developer.

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

У разных компаний требования к старшим программистам разные, как и оклад. Некоторые из них считают, что после пяти лет работы программист претендует на должность Senior Developer. Другие уверены, что для этого потребуется кандидат с шестью-восемью годами опыта работы. Невозможно точно назвать срок, в течение которого каждый младший разработчик автоматически приобретает нужные для должности Senior навыки.

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

Чего не стоит спрашивать у Senior Developer

  • Как работает редко нужный алгоритм XXX(например, quicksort). Зачем спрашивать то, что не нужно в повседневной работе разработчика, но гуглится за 5 секунд?
  • Владеете ли Вы несложным иструментом YYY(например git). Я еще не встречал разработчика, который бы не освоил базовые возможности git, нужные для повседневной работы, за день-два.
  • Умеете ли писать тесты. Вопрос со звездочкой. Сам процесс написания тестов — несложен, а вот научиться понимать, что именно нужно тестировать и в каком объеме — тут нужна длительная практика. На деле же достаточно одного опытного тестописателя в команде, который сможет контролировать этот процесс в эффективной манере.
  • Что такое Agile/Kanban/Scrum. Методологию, как будет вестись разработка, выбирает Team Lead, соответственно рядовым исполнителям знать ее досконально не обязательно, а базовые принципы постигаются за считанные дни.

Узнаем компетенции

  • Алгоритмы.
  • Архитектура, шаблоны проектирования.
  • Базы данных.
  • Параллельное выполнение и синхронизация работы процессов.
  • Основы производительности ПО.
  • Дебаг и логирование.
  • Каким образом используя SQL удалить одну строку, если под критерии выборки попадает больше одной?
  • Какой командой git откатить последний коммит?
  • Какие методы объекта Object в Java Вы знаете? Тут могут быть другие варианты в других языках — то, что хорошо знает собеседующий.
  • Почему люк круглый?
  • Как налить ровно 4 литра воды в одно ведро, если есть два ведра — 3 и 5 литров?
  • Решите какую-нибудь головомку, например соберите кубик Рубика.

What comes after senior developer?

Senior developer is a good jumping off point for another rung on the ladder. Some seniors want to move into more technical roles, others prefer management roles. Here are some options a senior may consider transferring into.

Architect. This is the highest rank on the technical career ladder. An architect’s job is to design complex systems that will be implemented by teams of senior and junior developers. Depending on the focus of the business problem, there are enterprise, technical, and solution architects. You may read more on it in our dedicated article.

Product Manager. A product manager with coding experience will feel more comfortable in leading the product delivery. Knowing the development process from the inside, they will be able to manage the work on the product much more efficiently.

Senior Leader. The work of a senior leader has little to do with programming and is all about people skills: inspiring, motivating, leading, and strategizing. When making high-level decisions that determine a company’s direction, a senior leader makes sure that all employees follow these decisions and believe in the mission.

Будьте инженерами, а не макаками

Пожалуй, это самый главный пункт. Я часто встречаю на форумах и в беседах «Front-End разработчиков на React/Redux», которые на деле с трудом отличают javascript от микроволновки. Наша область труда — наукоемкая. Тут не бывает «просто взял и воткнул кнопочку». За всем кнопочками скрывается очень много сложных вещей, которые разрабатывались лучшими инженерами десятилетиями. Не просто так сейчас появился Computer Science.

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

Я бы разделил программистов на 3 большие группы. Представьте, если вам задать довольно специфичный вопрос (вроде «Ты слышал что-нибудь о кодах Рида — Соломона»). Программисты могут ответить на него следующими способами:

  1. Нет, мне это не надо

  2. Нет. Что это такое, расскажи?

  3. Да, конечно, это…

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

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