Разбор тестового задания #2
Максим Пацианскийhttps://www.youtube.com/watch?v=EWaNgM4mv-A
План
- Что это такое?
- Кто я такой?
- Общие пожелания
- Общие ошибки
- Лучшие решения
- Все решения с отметками по времени + указание ошибок
Что это такое?
Это код-ревью решений второго тестового задания. В группе публикуются задачи, которые затем попадают на стенд контроля качества, где выявляются удачные и не удачные решения.
Кто я такой?
Меня зовут Максим Пацианский, у меня есть сообщество “Без воды” (vk, telegram) и популярные книги по реакту на gitbook (2016й год, практика устарела, теория хорошая). Вы можете написать мне в телеграм (@maxfarseer) или на почту maxpfrontend@gmail.com
Консультирую по react с 2014 года. Стоимость 45$/час. Можно оплачивать на расчетный счет.
Бесплатно вам могут помочь (в том числе и я) на:
Общие пожелания
Проверьте, все ли зависимости добавлены корректно: удалите все node_modules, и выполните npm install / yarn install. Убедитесь, что проект работает.
Оформляйте демо на heroku (или подобные сервисы).
[TODO]: разобрать на вебинаре оформление демо.
Для тех, кто участвует не первый раз: присылайте задания с новым письмом, а не ответом на старое.
Общие проблемы
- Плохое Readme;
- Остаются eslint предупреждения, лишние
console.log(redux-логгер не в счет); - Иконка Web не вынесен вперед (невнимательное чтение задачи);
- Иконка Web выносится вперед в компоненте (а лучше бы в редьюсере, или экшене);
- Пароль не очищается, если запрос вернулся с ошибкой;
- Submit кнопка в форме логина доступна, если поля пустые (или одно из полей);
- Submit кнопка в форме логина не поддерживает нажатие Enter;
- Нет деления на компоненты/контейнеры (не относится к тем, кто делил по другим подходам);
- URL-адрес для запросов на сервер полностью передается (нет оформления повторяющейся части строки в константу);
- Ошибка/уведомление “неправильное имя пользователя/пароль” - не очищается;
- Ошибка “неправильное имя пользователя/пароль” - выводится константой с сервера;
- Текст ошибки “захардкожен” в коде. Нет обращения в словарик по константе с сервера;
- Не удален “старый код”, то есть такой код, который нигде не используется;
- Нет блока catch у промисов, нет обработки ошибок, если сервер отвечает не
ok; - Компоненты размещены в node_modules;
- Отсутствуют или недостаточно подробно описаны Prop Types.
- Экшены и редьюсеры в куче в одном файле (или в одном все экшены, в другом все редьюсеры). Нет деления на “модули”, то есть каждой сущности - свои экшены и свои редьюсеры;
От автора:
Некоторые проекты у меня не работали, пока я не убирал redux dev tools. Подробностей не нашел, странно, что это касалось не всех проектов.
Лучшие решения
Решения идут в порядке, в котором были присланы.
Максим Сафин
Используется atomic-подход и styled components. Здесь без комментариев, так как нет большой экспертизы в данных вопросах.
Из письма:
Фронтенд разработкой занимаюсь 3 месяца. Скидываю так рано потому что нужно писать диплом и времени на задание больше нету. Не успел сделать валидацию, а стандартная HTML5 валидация не работает.
Ренат Рысаев
Из письма:
Сделал его часов за 5-6
Работаю фронтом уже полгода, до этого был верстальщиком
Евгений Санжиев
Из письма:
С React я познакомился полтора года назад, просто немного поигрался с ним (даже не понимал как работать с Redux) <cut /> Сейчас я работаю UI-разработчиком (занимаюсь в основном версткой) в компании Wrike.
Я делал его на выходных (сб, вс) по 4-5 ч в день.
Вениамин Трепачко
UI прекрасен.
Аладьин Александр
Используется подход с ducks, деление на страницы.
Из письма
Немного о себе: разработкой увлекся примерно 2 года назад (в 29 лет), сначала в качестве хобби <...> понял, что это может быть основным занятием и устроился на первую работу.Теперь о самом задании: потратил где-то 10 дней по часу-полтора в день. Больше времени ушло на какие-то мелочи <...>.Порошин Роман
Из письма
Опыт: JS - около года, React/Redux - 1-2 месяца.
Артем Бочков
Используется Semantic.UI, есть поддержка CI (continuous integration).
Все решения с отметками по времени
Здесь указаны только ошибки, и не отмечены хорошие моменты, которых великое множество, поэтому крайне рекомендую посмотреть все подряд.
6m00s - Артур Донковцев Commit
7m40s - опечатка в названии функции
8m07s - асинхронные запросы не вынесены в экшены
10m07s - все экшены в одном файле. Нет деления на модули.
10m25s - вынос иконки (перебор данных) сделан в компоненте. Лучше в редьюсере или экшене.
12m28s - “прикольные” надписи. Лучше делать “нейтрально”, чтобы затем подобные задания можно было сразу посылать работодателю.
13m05s - лишний экшен, указывающий что “загрузка” завершилась. То есть вместо трех экшенов: REQUEST / SUCCESS / STOP, можно уложиться в два: REQUEST / SUCCESS.
16m16s - Дмитрий Петров Коммит
18m16s - использование var
18m34s - не вынесена часть URL адреса в константу
21m17s - плохое сообщение в коммите
22m15s - одинаковые названия экшенов.
24m16s - Кацура Владислав Коммит
25m17s - (не ошибка) - данные приготовлены в редьюсере
27m38s - использование e.target, лучше e.currentTarget
28m20s - ==, а надо бы ===
28m33s - использование componentWillUnmount
29m00s (не ошибка) - рассуждение про “до серверную валидацию”.
30m05s - код не отфморатирован (на любителя)
31m35s - использование “не универсального” обработчика, там где это уместно.
32m02s - Сергей Regies Linkas Commit
33m42s - нет экшена для прелоадера
34m30s - порядок методов в компоненте ( ссылка на плагин )
35m30s - не существующий PropTypes
35m57s - Кононов Виталий Commit
39m45s - не делаем то, что не интересно
40m31s - Евгений Санжиев Commit
41m20s (не ошибка) - словарик для работы с ошибками
42m46s - Виталий Набережный Коммит
42m54s - не убраны тестовые данные
44m50s - Вениамин Трепачко Commit
Ачивка: очень классный дизайн.
47m42s - redux версия не полноценная.
47m57s - Ingvarr6 (Игорь) Commit
48m21s - нет 404 роута
51m30s - не очищается ошибка
54m48s - Роман Палесика Commit
55m30s - не хватает экшенов на загрузку/ошибку
56m49s - использование side-effects в редьюсере
58m10s - (не ошибка) вынос иконки web с помощью css (sick!)
59m15s - использование callback’a в setState, что приводит к лишней перерисовке. Лучше валидировать прямо в рендере.
61m01s - неуместное использование else if
62m13s - dsfcv d (boortcore) Commit
63m15s Константин Липский Commit
65m11s - в экшен передается URL целиком, лучше просто id передавать в данном варианте.
67m50s - сложное условие в shouldComponentUpdate, можно проще (сразу проверить на props.data и все)
69m32s - e.preventDefault не первый в обработчике
71m50s - Ахметанов Альберт Commit
72m20s - компоненты в node_modules
73m15s - дублирование обращений к переменным
76m04s - privateRoute не вынесен в отдельный компонент
76m33s - сложный код для перемещения иконки web
76m56s - избыточное свойство loaded
77m35s - Аладьин Александр Commit
80m33s - ошибка не вынесена в словарик
81m43s - избыточное использование withRouter
83m04s - Dmitrii Shapovalenko Commit
84m58s - избыточное деление экшенов
85m55s - ошибка в названии lifecycle-метода
87m15s - семантически неверное использование тэга article
90m46s - лишний вызов метода массива