Тестовое задание для младших или средних разработчиков обычно показывает их реальный опыт и понимание предметной области, а вот для старшего разработчика тестовое задание немного другое.
Расскажу свою историю написания небольшого тестового задания на Angular с использованием лучших практик.
С чего все началось
В нашей компании роли обычно строго распределены между разработчиками.Каждый разработчик несет ответственность и поддерживает свою часть проекта.
Что-то сломалось в 2 часа ночи, отличное время, чтобы это починить.У каждого есть какие-то волонтерские роли.А еще разбудите пару человек, ведь вы один работаете, а остальные спят.
Например, кто-то организует корпоративы, кто-то проводит собеседования с другими застройщиками, кто-то закупает мебель и технику.
Обычно я пишу обзоры тестовых заданий, которые мы иногда даем разработчикам, чтобы понять их уровень, если на собеседовании это сделать не удалось.
Хотя мы все против тестовых задач, так как считаем их отталкивающей практикой, все равно иногда появляется разработчик, который 50/50 и непонятно, что с ним делать.У нас есть простая тестовая задача в Angular: Создайте форму с 3-4 полями, добавьте создание объекта и сохраните в localStorage. При желании добавьте карту и отобразите объекты на карте.Чаще всего мы даем тестовое задание, которое можно выполнить за 3-6 часов.
Цель теста показать как работать с RxJS, Redux, DOM, Работа с формами (Angular Forms) и желательно писать модульные тесты, желательно в шутку.
И однажды, просматривая тестовое задание кандидата, я написал такой отзыв: плюсы
- Проект запущен
- В проекте реализована часть тестового задания
- Рекомендации по проектированию не соблюдаются (src/app/comComponents/air-routes/air-routes.comComponent.ts:32, src/app/services/data-tickets.service.ts:22)
- В частных/публичных свойствах нет порядка (src/app/comComponents/air-routes/air-routes.comComponent.ts:14).
- Адаптивности в макете нет - 480px все нормально
- Компоненты не используют ChangeDetection
- Никакой ленивой загрузки
- Тестов нет, а автоматически сгенерированные не проходят.
- Работа с нативным API (localStorage) сделана очень плохо и не обрабатывает кейсы, не говоря уже о реализации самой логики.
- Есть неиспользуемый код, который можно удалить.
- Angular Router подключен, но не используется
- При запуске проекта на главной странице какой-то мусор
- Маршруты построены не правильно.
Если ввести A (сегодня) -> B (сегодня + 1) и B (сегодня + 1) -> A (сегодня + 2) — то маршрута A — B — A не будет.
- Даты отъезда и прибытия не проверяются — вы можете выбрать дату прибытия из прошлого.
- Не могу удалить маршрут
- Нет работы с часовыми поясами
- Данные в шаблоне статичны.
Можно было хотя бы прелоадеры сделать от текущей даты
- Никакого ощущения красоты, никакого вау-эффекта.
- Переменные неправильно названы (src/app/comComponents/table-ticket/table-ticket.comComponent.html:12, src/app/comComponents/air-routes/air-routes.comComponent.ts:38).
- Все стили взяты из внешней библиотеки, ни одной строчки SCSS-кода.
- Обновите свои знания, прочитав документацию Angular (руководство по стилю, маршрутизация, сервисы, тестирование).
- Прочтите разделы документации Typescript, посвященные созданию типов.
- Обновите свои знания JavaScript и используйте современные языковые конструкции и функции.
- Познакомьтесь с Redux в Angular (на примере Ngrx, ngsx)
- Познакомьтесь с юнит-тестированием на примере кармы, шутка
- Познакомьтесь с современными инструментами разработки Nx.
Не долго думая, я решил сделать небольшое тестовое задание, которое будет носить ориентировочный характер, чтобы его можно было отправить кандидату и рассказать, чего мы хотим.
Разработка тестового задания
Отмечу, что у меня есть «угловатость».И в качестве тестового задания я решил выбрать следующее: Разработайте небольшое приложение, в котором пользователю будет показана карта; На домиках расставлены точки (булавки).Если вам не нравится Angular, проконсультируйтесь со своим ведущим разработчиком, прежде чем читать это, иначе это может побудить вас перейти на Angular.
При нажатии на булавку необходимо отобразить информацию о доме.
Должен быть функционал добавления пина с актуальной информацией, а также необходимо реализовать удаление пина.
Храните данные в localStorage.
Прочитав еще раз, я подумал, что это можно сделать за пару часов (или дней).Основные приложения, которые я разрабатываю на своей основной и любимой работе, используют решение Nx — это монорепозиторийная реализация Angular и не только.
Однако я ни разу не видел тестового задания, написанного с использованием Nx. Итак, для простоты я решил использовать стандартный Angular CLI для создания приложения.
Но Nx заявил о себе, когда я начал создавать приложение.
Когда я создавал приложение, Angular еще был 11 версии, и как вы знаете, в этой версии еще не было поддержки eslint. Пришлось перейти на eslint и добавить красивее.
Потом, когда я увидел карму, я конечно заплакал и бесцеремонно удалил карму и в шутку устроил тестирование.
Поскольку Nx предполагает разработку нескольких приложений и набора библиотек, я решил создать в TS алиасы и использовать их.
Это уже не прихоть, а необходимость, поскольку позволяет разграничить доступ между модулями («библиотеками»).
Когда я начал развивать проект, то решил не делать gitflow, так как я один и особой пользы в этом нет. Но когда меня за это упрекали, я слабо подчинился и ближе к завершению начал создавать ветки по функционалу и объединять их.
На настройку окружения ушло около часа, осталось ещё 3. Первые колокола Приступим к реализации проекта.
И тут я попал в ловушку готовых решений.
В данном случае я имею в виду, что при разработке конкретного проекта есть определенный набор решений, которые вы используете помимо основного фреймворка.
Например, есть сервисы для работы с наборами параметров, обрабатывающие переменные докера, envirionmentService — унифицирующий доступ к средам в Angular и многое другое.
Но в новом проекте этого нет и что с этим делать, непонятно.
Я решил перетащить по мере необходимости.
Но вам не следует этого делать.Перенеся часть библиотек для упрощения работы, я начал с азов — создания шаблона всего приложения, который включал в себя шапку и подвал, а также определил, где должен отображаться основной контент. Понятно, что не стоит писать собственный UI-кит; За основу я взял Angular Material. Но главный недостаток Material в том, что нет четкого решения по созданию сеток.В результате получилось около 12 основных библиотек, и это явно усложняло тестовую задачу.
Видимо разработчики решили, что проще использовать нативный CSS и создавать всё с помощью flex, но это всё равно нужно сделать.
В результате я решил перенести другое решение и создать папку UI, где располагались сетки, спиннер, карусель и иконки.
Я честно украл концепцию сеток из бутстрапа и сделал микрореализацию в Angular.
Хотя в Angular есть Angular Flex, который позволяет сделать что-то подобное, само решение мне не понравилось и я взял проверенный велосипед.Создав макет, пришло время реализовать бизнес-логику.
Поскольку Redux — это все, я подключил Ngrx и создал RootState, который является Store. Перенеся часть утилит из Nx, в частности DataPersistence, я добавил в Ngrx оператор выборки эффектов.
Поскольку весь проект является частью Airbnb, я создал базовые сущности, создал соответствующее состояние, сервисы для работы с сущностями, сервисы для работы с нативным хранилищем, фасады и менеджеры, которые соединяют разные сущности и предоставляют гибридные значения.
К этому моменту с момента начала написания тестового задания уже, наверное, прошла неделя.
Я, конечно, писал это только по вечерам, часа за 2-3 до сна, что называется, чтобы лучше спать.
Но макета еще не было, как и многое другое.
В тот момент я понял, что больше не смогу написать просто тестовое задание, а нужно использовать материал по максимуму.
Я решил сделать обзорное тестовое задание, в котором рассмотрю создание микроприложения от начала до конца, чтобы после прочтения статьи у читателя было понимание, как подготовить Angular. И тут я открыл хабр и начал писать.
Однако, когда объём стал слишком большим, я решил, что это неправильно и решил разбить статью на несколько небольших, лаконичных статей, где каждая статья будет показывать решение той или иной проблемы.
В итоге у меня получилась серия из 27 статей, посвященных созданию тестового приложения, которую я разместил в своем блоге на Mediume — Тестовое задание в Angular. Введение.
Результат можно увидеть на Github: https://github.com/fafnur/barinb .
Результат был следующий: 
В серии статей охвачен практически весь процесс разработки, начиная с установки и разработки приложения, заканчивая тестированием и развертыванием.
Возможно, кому-то статьи покажутся слишком пустыми, но обычно такие статьи редко читают, обычно все смотрят исходный код и пытаются понять, что и как было сделано.
Где все пошло не так и как с этим бороться
Я не сразу заметил момент, когда микроприложение начало перерастать в нечто большее.Конечно, основная проблема здесь в постановке задачи, так как я старался больше показать разные аспекты, а не выполнить задачу, в частности быстро написать приложение, которое бы работало.
И тут я задумался, есть ли смысл в тестовом задании для старшеклассников.
Мне сложно говорить о своем опыте, так как я считаю себя всего лишь высокооплачиваемым джуниором, но я решил спросить об этом своих коллег и знакомых.
Большинство ребят ответили, что тестовые задания в РФ они не выполняют в принципе.
Многие настроены скептически, поскольку github расскажет больше, чем какую-то ненужную задачу.
Из тех, кто делал нечто подобное, очень часто сталкивались с одним и тем же результатом: небольшое приложение перерастает в любимый проект и так далее.
Забавно, что все подобные проекты заканчиваются с появлением жены и ребенка.Подводя итог всему вышесказанному, можно подвести итог:И с большим сожалением многие это подтвердили.
- Можно дать тестовое задание старшему, но шанс, что он его выполнит или выполнит так, как вам хотелось бы, минимален.
Это связано с тем, что разработчик будет тащить за собой огромный пласт своих «готовых/проверенных» решений, что в свою очередь может чрезмерно усложнить проект, который не будет завершен.
- Большинство разработчиков, не умеющих разделять бизнес и работу, скорее всего, усложнят проект и поэтому также могут увязнуть в рутине и завершить проект гораздо позже, чем требуется.
- Должны быть установлены сроки выполнения.
- Задача должна быть максимально подробной, в идеале — даже сделать небольшой прототип пользовательского интерфейса.
- Четко укажите, что следует включать в тестовое задание, а что нет.
- Делайте акцент на тех частях задачи, которые кажутся вам наиболее важными, чтобы разработчик действительно делал то, что вам нужно, а не собственное авторское видение задачи.
Теги: #JavaScript #тестовое задание #angular
-
Хабрастатистика
19 Oct, 24 -
18 Фактов О Джоне Ските
19 Oct, 24
