Как вырастить веб-разработчика от стажера до архитектора. Матрица компетенций

    Вместо эпиграфа
    Когда в 2004 году я окончил университет, в нашем городе почти не было команд разработчиков. Где работать, у кого набираться практического опыта?

    Выбор был прост: “админом” или “в Москву”. Или уйти из профессии.

    Сейчас я преподаю веб-разработку в местных ВУЗах, руковожу большим коллективом и мне важно, чтобы в моем городе хотели жить толковые молодые ребята, чтобы наш город не считался “тухлым местом”.

    Суть статьи коротко


    Мы с коллегами умеем «растить» веб-программистов с “почти нуля” до уровня уверенного профессионала (Senior / Архитектор).

    Хотим рассказать как все работает и поделиться с сообществом материалами и методикой.

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

    Далее описан “трек развития веб-разработчика”, уровни компетенций “Стажер”, “Junior”, “Middle”, “Senior” и “Architect”, как я их вижу и даны примеры аттестационных заданий.

    Пирамида способностей программиста или «что качать на старте»


    Как стать хорошим веб-программистом? Нужно ли заканчивать «информатику» в хорошем ВУЗе? Или хватит месячных курсов? Или «с книжкой и мышкой» все можно изучить?

    Три «кита», на которых стоит профессия любого разработчика на любом стеке технологий, это алгоритмизация, базы данных и собственно программирование (язык + ООП + паттерны).

    image

    Что такое алгоритмизация?


    Близкий «житейский» аналог технического навыка «алгоритмизации» – ремонт вентилятора. Что делать, если «не крутится»? Проверить/сменить розетку, потом рукой крутануть лопасти, потом «прозвонить» провод.

    Логика очевидна: «разделил на части и проверил каждую». Удивительно, но многие люди не умеют так мыслить. У настоящего программиста это «в крови».

    Базы данных


    Курс БД – один из основных, как физика для инженера. Плохо что часто преподают их одинаково плохо: сводят к «пересказыванию параграфов».

    В БД важны и теория, и практика. Программист должен уметь и писать запросы, и разбираться в логике ORM, и проектировать структуру.

    Какие технологии нужно знать программисту?


    Из чего вообще состоит профессионализм разработчика? Указано примерное время освоения при классическом пути развития (начиная с ВУЗа).

    Пирамида.png

    “По уму” алгоритмизации учат в школе/ВУЗе. Тратится на это 1-2 года, и этот период определяет высоту будущего профессионального взлета. Если вы не освоите алгоритмизацию, то никогда не вырастете.

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

    Фреймворки часто включают сотни модулей/классов/расширений и постоянно развиваются. Освоение фреймворка займет у вас несколько месяцев как минимум.

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

    Конкретные технологии (например AJAX, серверный рендеринг JS, push&pull, распределение нагрузки по гео-кластеру, профилировка долгих запросов в xhprof, очереди сообщений, NoSQL базы данных) бесконечно разнообразны. Учить их можно вечно.

    Эту пирамиду нужно проходить “снизу вверх”. Если вы начнете с фреймворка и напишете красивое резюме, но не будете знать как работает “голый JS” или “чем get-запрос отличается от post” – профи вам не быть.

    Какие задачи нужно решать?


    Первый этап – “старт”. Сначала нужен навык уверенного и правильного решения относительно простых задач. Чаще всего это игровые, математические или логические задачи.

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



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

    Такой метод обучения у медиков называется “методом свинцовой ж*пы”. Простите за грубость, но из народного творчества слов не выкинешь.

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

    Это очень сложный переход. Многие программисты не делают его никогда: они становятся разработчиками “одной программы” или всегда пишут проекты не более чем в 200 строк. Это не уровень профи.

    Чтобы научиться, нужно решать большие задачи в коллективе и параллельно читать правильные книги. Например, Роберта Мартина “Чистый код”.

    “Большие задачи” – реальные сервисы, которыми пользуются люди, где команда состоит минимум из 2 человек, и состоящие из тысяч строк кода. Такие проекты формируют уверенного специалиста.

    Третий этап – “мастерство”. Оно включает освоение конкретных фреймворков в рамках выбранного стека технологий. Вы должны научиться решать реальные современные задачи на высоком уровне.

    Более сложная и более полезная книга – Шаблоны корпоративных приложений Мартина Фаулера. Ее тоже нужно прочитать, примерно через год-полтора работы в профессии.

    А зачем? Можно просто закончить 3-месячные курсы “веб-разработчика”?


    Удивительно часто на собеседование приходят “как бы программисты”. У них за плечами курсы, несколько мест работы, портфолио с красивыми сайтами (странная манера, как будто мы ищем веб-дизайнера).

    При этом на простейший вопрос типа “что такое cookies” или “как работает подгрузка сообщений в ленте ВКонтакте” люди часто не знают ответа, у них даже версий толком нет.

    Хороший программист знает теорию и применяет на практике, все время думая “как сделать правильно”. На “спинном мозге” и “копировании кусков кода из гугла” далеко не уедешь. Нужна база и практика.

    Как получить эту “базу”? Где правильно учиться? Есть два пути. Первый – 4-5 лет в хорошем ВУЗе. Второй – несколько лет упорного самообучения и практики. Можно стать сильным программистом без профильного образования, если у вас светлая голова, открытое сердце, а вы сами готовы много работать.

    Короткие курсы полезны, чтобы получить базовые знания и понять “куда рыть самому”. Профессионалом они не сделают.

    Матрица компетенций. Стажер – Junior – Middle – Senior – Architect


    Мы считаем что наша матрица и есть ответ на вопрос “как из новичка стать гуру веб-разработки”.
    В нашем мире разработчик занимается в основном бекенд-задачами, но он не должен бояться фронтенда и администрирования (для злых задач есть узкие специалисты).

    По ссылке доступна полная матрица с примерными вопросами по аттестации.

    Это – таблица, разделенная на грейды (стажер, junior, middle, senior). Каждый грейд содержит набор уникальных компетенций. Вопросы сгруппированы по областям знаний (PHP, SQL, Frontend, веб-технологии в целом и управление серверным хозяйством)
    

    Стажер


    На старте стажер должен быть способен:

    • уверенно отличать куки от сессий;
    • понимать на сервере или в браузере происходит конкретная операция;
    • написать на PHP без серверных фреймворков несложную задачу управления данными. Например “ведение БД групп и студентов с редактированием, удалением, созданием и выводом”;
    • прилично оформить результат своей работы.

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

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

    Ошибки – нормальная часть обучения.


    Junior


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


    Что практически должен уметь Junior на старте:

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

    Middle


    Middle – специалист, который способен решить сам любую типовую для отрасли задачу.


    Что практически должен уметь Middle на старте:

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

    Senior


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



    Вот например, что сам Senior должен знать и уметь по блоку “Работа с серверами и Linux”.

    • Сборка нетиповой системы выкатки изменений
    • Работа с микросервисами.
    • Организация нагрузочного тестирования
    • Настройка continuous integration
    • Синхронизация файлов и репликация данных
    • Сборка отказоустойчивого и высоконагруженного кластера на Bitrix Framework и без него.
    • ELK / другие системы логирования и аналитики
    • Серверы очередей Gearman / RabbitMQ и построение распределенных систем

    Как правило, Senior играет роль технического лидера группы разработчиков.

    Architect


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



    Такие специалисты играют ключевую роль в технически и организационно сложных проектах.

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

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


    Каждый месяц с каждым программистом индивидуально мы проводим «планерку по развитию» и разговор на другие темы о работе. Участвуют руководитель отдела, техлид и/или наставник.

    Во время таких встреч мы вместе определяем приоритеты развития — сдать лабораторную или устный экзамен по компетенциям.

    Как устроена проверка уровня (аттестация)?


    Что такое «аттестация»? Это процедура подтверждения квалификации программиста. Ее проходят все программисты. Аттестация включает лабораторные работы и устные экзамены.

    В результате аттестации в матрице компетенций появляются “Да” напротив подтвержденных компетенций. От этого увеличивается грейд, например, «Стажер-54%» → «Junior-27%».



    Как проходит аттестация?


    Аттестация включает теорию (устный экзамен) и практику (лабораторные работы). Цель – “закрыть” несколько компетенций в матрице, подтвердить уровень, получить новые задачи и повысить зарплату.

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

    Многие блоки матрицы компетенций закрываются практикой и теоретических вопросов по ним нет.

    Теория. Устный экзамен


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

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

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


    Лабораторная работа покрывает сразу несколько компетенций. После выполнения лабораторной работы эти компетенции засчитываются как подтвержденные и не попадают в устный экзамен.

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

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


    Мы разработали около 20 заданий (называем их привычно для студентов «лабораторные работы»). Несколько – опубликуем.

    Вот примеры простых заданий.

    Задание 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
    • Типы данных

    Суть — продолжаем работу над сайтом из задания 2а:

    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, с поддержкой очередей



    Посмотреть и скачать матрицу компетенций – 2020

    Я уверен, что именно так, по шагам, с наставником и постоянным code review, через цепочку аттестаций, развивается правильный разработчик «от стажера до архитектора».

    Бриллианты формируются под давлением.

    Similar posts

    Ads

    Comments 15

      +7
      Бриллианты формируются под давлением.

      Всё же под давлением формируются алмазы, а бриллиантами они становятся лишь после огранки. К сути статьи, кстати, эта разница так же применима.
        +8
        ИМХО эта классификация проще:
        Джун — решает легкие задачи сложным путем, сложные задачи не решает.
        Мидл — решает легкие задачи легким путем, сложные задачи решает сложным путем.
        Сеньер — решает легкие и сложные задачи легким путем.
        Архитектор — рассказывает всем, что решит все задачи легким путем, но сейчас очень занят.
          +3
          Ко всему прочему здесь и в статье присутствует системная ошибка. Junior, Middle, Senior — это про уровень профессионального развития, уровень компетенций, в данном случае разработчика, в то время как Архитектор — это должность или роль, которую может выполнять разработчик уровня и Middle и Senior, например. Как они оказались ступенями одной классификации, большой вопрос.
            +1
            Они довольно легко попадают в одну категорию, когда это просто «лычка» на погон разработчику, а не оценка компетенции или роль в команде.
          0

          Для чего-то серьезного 1-2 лет алгоритмизации крайне мало, ее по хорошему нужно постоянно потихоньку улучшать.

            +4

            т.е без знания Битрикс сеньором не стать?

              0
              Сейчас я преподаю веб-разработку в местных ВУЗах


              Подскажите, как удалось пропихнуть веб-разработку в вузы? Под каким кодом специальности преподаете, как называются предметы?
              Хотелось бы интегрировать веб-разработку в курс нашего университета, но на фоне микропроцессорных систем, сапров, ассемблера, предмет блекнет.
              Или под веб-разработкой Вы имеете в виду большой курс по алгоритмизации, БД и прочему, описанному в Вашей пирамиде и статье?
                0
                собственно ничего пропихивать не надо
                есть конкретные предметы
                — Технологии разработки для сети И нтернет
                — Человеко-машинное взаимодействие (больше про интерфейсы, но тоже веб затрагивает)
                — Веб-технологии
                — много еще

                которые есть в программах и которые преподаются

                просто мы приходим в ВУЗ и говорим: мы профильное предприятие, у нас есть люди с учеными степенями и педагогическим опытом, давайте мы у вас поработаем (а заодно будем базой практик, руководить/оппонировать дипломам, организовать «кафедры от предприятия»)

                ВУЗу это очень надо, у них kpi на привлечение таких партнеров

                и работаем

                вот курс, посмотрите там видео и презентации. качество записи пока не «вау», но мы работаем над этим www.intervolga.ru/school
                0
                посмотрел матрицу.
                скажите, плиз, почему jquery уделяется так много внимания?

                Насколько я понимаю, это устаревшая технология и сейчас все ориентируются на другие…
                  0
                  не так много на самом деле. просто на старте как правило люди фронтендом называют верстку и самый базовый JS. идем по пути база => jQuery => более современные подходы

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

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

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

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

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

                  что касается ВУЗов — по сути первый стажерский уровень матрицы мы и даем на полугодовом курсе веб-разработки в ВолГУ
                  0
                  Рассуждение, как я понимаю, относится в первую очередь к вашей организации? Адаптируя под широкий круг я бы всё таки не стал делать упоры на одном только PHP (За который в 2020 даже стыдно ручаться), а добавил бы Python, Golang, Rust, Node.
                    0
                    не совсем понятно какое «рассуждение» вы имеете в виду
                    по сути да, мы описываем специфику нашей работы, ценен личный опыт

                    впрочем, он довольно универсален

                    что касается разных языков: сугубое ИМХО, но мне кажется что стоит выбрать 1 технологию и изучать ее всерьез.
                    круто знать 4 серверных языка/технологии — чтобы что? для кругозора, для шансов сменить работу — согласен. для глубины и качества? спорно…

                  Only users with full accounts can post comments. Log in, please.