Евгений Петухов

Разработка личного кабинета брокера для московского застройщика

Стек: Vanilla Javascript, Vue2 + Options API, Vuex, Axios, SCSS, Figma

Параллельно разрабатываю собственную мини-игру на Unity

В основном, разработка фронтенда для ВПН-сервиса на Electron и мелкая заказная разработка (создания сайта для польской юридической компании, исправление багов на существующих сайтах)

Участвовал в разработке фронта в двух продуктах: Личный кабинет Покупателя/Продавца и Витрины, а также к двум UI-Kit'ам к этим проектам

Кратко о деятельности:

• Разрабатывал core-функционал на фронте;
• Исправление багов и рефакторинг легаси;
• Декомпозиция задач;
• Для крупных эпиков составлял UML-диаграммы (как для своих задач, так и для задач других разработчиков);
• Описывал контракты/интерфейсы для взаимодействия фронта и бэка до запуска эпика в работу;
• Оптимизация производительности сайта (как точечно, когда речь шла о мемликах, так и архитектурно, если проблемы была в организации компонент, либо избыточности передаваемых данных);
• Проведение Code Review, помощь в проведении собеседований.

Информация о стеке.

Общее:

• Typescript;
• Axios;
• Service Workers;
• i18n;
• SCSS.

Проект "Личный кабинет":

• Vue2 + Vue-property-decorator;
• Vuex.

Проект "Витрины":

• Vue3 + Composition API;
• Pinia;
• Nuxt 3.

Прочие инструменты разработки:

• Jira;
• Figma.

Примеры средних и крупных эпиков:

• Написание единого api-сервиса для удобной работы с запросами в проекте;
• Для заботы о чистоте кода добавил хуки на пре-коммит с проверкой кода линтером, проверкой правильности оформления названия коммита и запретом на пуш, если код-стайл/название коммита неверные;
• Разработка фильтров каталога на фронте. Синхронизация дублирующих фильтров, работа с url, сохранение, сбросы, чипсы, доступ извне и т.д. Вообще, там интересно, могу подробнее рассказать про концепт и сильные стороны реализации (но настолько, насколько могу по NDA);
• Поиск по каталогу, отдельные страницы суб-каталога;
• Создание раздела балансов. Пополнение баланса (разные валюты, варианты пополнения, эквайеры и т.д.), переводы между счетами, история операций, работа с заявками на пополнение. Для Покупателей и Продавцов разные варианты разделов. Тоже могу рассказать подробнее;
• Добавление web-push нотификаций (service workers + firebase);
• Переработка страницы заказов. Программирование подтверждения получения заказов, раздела с заказами для повтора + оформление повторного заказа, работа с маркировками и настройками логистики;
• Написание страницы товаров. Спецификация товара, данные о продавце, работа с корзиной, написание отзыва, рейтинг и отзывы других пользователей;
• Переработка раздела Документации;
• Цепная оценка товаров из последней поставки;
• Отображения статистики по товарам за последние 3 дня;
• SEO-оптимизация под Nuxt3;
• Интеграция внешних сервисов: GA, GTag, Chat2Desk, Amplitude и т.д.

Организационные созвоны и миты

Участвовал в дейликах, планировании спринтов, брейнштормах, груминге бэклога, технических планированиях, ретро.


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

На планировании спринта оценивались висящие таски с прошлого спринта, флекс нового и распределение задач по разработчикам.

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

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

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

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

Вернулся в Кельник в связи с необходимости аккредитации, работал на двух работах.

С подробным описанием деятельности можно ознакомиться ниже (в секции за 2018-2020 год)

Работа с людьми:
- Просмотр резюме, проверка тестовых заданий и собеседование соискателей
- Подготовка рабочего места сотрудникам
- Управление командой из 9 человек (и я очень горжусь ребятами, они - моё самое большое достижение): распределение обязанностей на внутренних проектах, оценка квалификации специалистов
- Консультации фронтенд разработчиков, дизайнеров, бэкендеров, менеджеров и руководителей по вопросам фронтенд разработки
- Организация обучающих лекций и консультаций для фронтенд разработчиков и дизайнеров
- Постановка задач по внутренним проектам
- Перераспределение человеческих ресурсов между проектами в экстренных ситуациях
- Проведение code review
- Анализ и оценка трудозатрат специалистов с последующим выявлением узких мест в рабочих процессах
- Проведение one-to-one
- Контроль качества и своевременности выполнения должностных обязанностей специалистов
- Подготовка ответов для заказчиков по техническим вопросам
- Коммуникация с подрядчиками и разработчиками стороннего программного обеспечения
- Составление технического задания для подрядчиков
- Приёмка работ подрядчиков

Работа с проектами:
- Оптимизация процесса разработки
- Решение конфликтных ситуаций и экстренных случаев в проектах
- Участие в разработке внутренних проектов (проектирование, программирование, распределение задач между специалистами)
- Оценка дизайна проектов, выявление трудозатратных моментов на макете, которые слишком сильно увеличивают время на разработку. Предложение альтернативных вариантов решения задачи
- Исправление багов на проектах, с которыми не справились другие специалисты
- Написание документации по внутренним проектам и процессам
- Принятие решений по внедрению новых технологий в существующий стек
- Рефакторинг проектов
- Анализ производительности проектов (Chrome devtools Lighthouse + Chrome devtools Performance) и проведение мероприятий по их оптимизации
- Коммуникация с DevOps по внедрению технологий упрощающих жизнь разработчиков

Являлся тимлидом фронтенд разработчиков в трёх направлениях с различным стеком:
1. Разработка новых проектов.
Twig, Scss, Native JS (ES6), Vue.js.
Webpack + gulp (для билда css так было быстрее, чем через вебпак), Figma
2. Сопровождение и поддержка существующих проектов.
Jade, Scss/Less, JS (ES5/ES6) + jQuery, Handlebars
Gulp, Avocode
3. Продукт "Планоплан".
React (функциональный с хуками), Redux, Styled-components, recompose, Routing, Next.js, Cypress, Jest.
Webpack, Zeplin

Основные клиенты - недвижимость и строительство (были и исключения). Работали по методологии Waterfall, т.к. такой подходы был наиболее удобен для клиентов.
Примеры некоторых сайтов, которые были разработаны под моим тимлидством (всего новых проектов было более 20):
1) https://www.spbren.ru/ - первый сайт, на котором мы использовали Vue.js на проде для визуального поиска квартир (https://www.spbren.ru/visual/). Кейс в портфолио Кельника - https://spbren.kelnik.ru/
2) https://sg-showroom.kelnik.ru/ - кейс тач-стола для Ultra City. Ссылку на сам проект в интернете предоставить не смогу, ибо приложение используется локально в офисах продаж.
3) http://sevgorod.ru/ - кейс с поэтапным и очень сложным полным редизайном и полной сменой стека технологий "на горячую". Основная проблема заключалась в том, что сайт должен обновляться на проде постепенно, т.е. одновременно должна быть комбинация и старого, и нового стеков и дизайна.
4) https://www.spbsez.ru/ - сайт для Особой Экономической Зоны Санкт-Петербурга с проработанной системой заполнения всех отчётов резидентов в личном кабинете
5) https://www.newlessner.ru/ - один и моих любимых проектов за всё время работы с приятными анимациями и обновлённой системой адаптивности сайта
6) http://www.laruscapital.ru/ - изначально новую систему адаптивности хотели применить именно на этом сайте, однако я забраковал идею и попросил отложить её на будущее, объяснив, где будут серьёзные утечки времени и насколько рискованно будет внедрять систему в данной ситуации. Мои опасения оказались верны, утечки времени совпали с предполагаемой оценкой. В будущем на разработку новой системы адаптивности и её отладку ушло около месяца работы.

Рабочее окружение:
Linux (Ubuntu), Apache2, MySQL, PHP v5.6, Node 6.4.1, Git (GitLab), GitFlow, npm, bower, WebStorm, Avocode

Стек разработки:
Jade (бывший Pug), SCSS/Less, JS (es5/6)+jQuery, Handlebars, методология БЭМ

Стек билда и окружения проекта:
Gulp (позже gulp+webpack), Babel, Eslint, Stylelint

Сопровождение существующих проектов:
- Оценка времени выполнения задач в часах
- Исправление багов
- Вёрстка новых страниц и элементов
- Программирование элементов на чистом JS и JS+jQuery
- Рефакторинг легаси (устаревшего) кода
- Базовая оптимизация сайтов по рекомендациям Chrome DevTools Audit

Участие в разработке внутреннего boilerplate:
- Создание jade миксинов
- Создание новых функций и миксинов для стилей SCSS
- Создание новых компонентов, общих для всех новых проектов
- Написание документации к компонентам и миксинам

Общее:
- Участие во внутренних конференциях
- Посильная помощь и консультация других специалистов (как в области фронтенда, так и в смежных областях, например настройка и исправление ошибок в Linux или IDE и подобное)
- Участие в обсуждениях по развитию отдела


К сожалению, на текущий момент большинство работы либо устарело и очень сильно изменилось за 2 года, либо проекты полностью переработаны с нуля, поэтому предоставить ссылки на работы невозможно. В качестве примера хочу показать страницу из веб архива, которая была полностью разработана мной (и вёрстка, и логика, и реализация js): https://web.archive.org/web/20200511022740/https://lubercysamolet.ru/howtobuy/
В веб архиве страница работает некорректно (из-за некоторых бэкенд запросов в пустоту и нерабочего в архиве sessionStorage), но, в целом, для демонстрации имеет место быть.

• Сбор web команды с нуля;
• Разработка Prisma WEB (React+Typescript+MobX);
• Разработка маркетинговых страниц для мобильных приложений (Svelte+Typescript
  
• Развитие внутреннего дэшборда для аналитиков (React + Javascript)
  
  

Prisma WEB — веб версия популярного мобильного приложения Prisma для редактирования фотографий, которое создает потрясающие фотоэффекты, превращая ваши изображения в картины

Тимлид и ведущий разработчик EDM для военных проектов.
Разработчик EDM MVP для дочки Газпрома по ремонту и обслуживанию скважин

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

Стек:
Vue.js + Vues ORM
GraphQL (Apollo)
Webpack
Scss
Adobe XD