Тестовое задание на вакансию Front-end разработчика
Задание
Мы предлагаем создать front-end приложение для оформления покупки в интернет-магазине в соответствии с макетами (см. исходные материалы). На выбор мы предлагаем 2 варианта: (с использованием фреймворков) или (без). Обратите внимание, что предполагается функция автоопределения адреса доставки по геоданным. Формы должны иметь валидацию, а некоторые поля предполагают автоподстановку. Также на этапе после оформления заказа есть функция вывода текущей страницы на печать. Печатная версия должна быть адаптирована под черно-белую печать.
Требования к работе
HTML
Семантичная адаптивная верстка
CSS
Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS)
Использование соглашений/архитектур написания стилей MVCSS/Bem и т.п.
Можно использовать ui-фреймворки (Bootstrap/Foundation/Semantic UI и т.п.), либо просто сетки.
JS
Данная форма может быть реализована как на нативном javascript (es5/es6) (1), так и с использованием одного из популярных фреймворков (2).
При оценке мы обращаем внимание на:
Продуманную архитектуру приложения
Настроенный процесс CI/CD
Наличие тестов
Вариант 1
Код должен быть структурирован, реализован в рамках парадигм MVC/MVVM/Functional programming. Можно использовать как реализацию классов, так и прототипно-ориентированное программирование. Можно использовать jQuery для работы с DOM, можно использовать Lodash/Underscore или др. Подобные библиотеки для работы с данными, массивами, объектами (однако приветствуется использование стандартных методов из ES6)
Желательно использовать модули (Common.js/AMD и т.п.)
Желательно использовать событийную модель общения между модулями
Желательно иметь настроенный task-manager для сборки и запуска кода
Желательно некоторые сущности разбить на отдельные сервисы (сервис обработки ошибок, сервис autocomplete, и т.п.) со специфичным интерфейсом
Вариант 2
Все, описанное в предыдущем варианте, применимо и тут. Однако в этом варианте важно написать приложение в рамках устоявшихся практик того или иного фреймворка. При этом на собеседовании вас все равно будут спрашивать о том, как бы вы реализовали это без использования фреймворка (важно, чтобы у испытуемого было общее фундаментальное понимание js и устройства таких приложений).
Желательно иметь настроенный task-manager или взаимозаменяемую тулзу (webpack + npm например) для сборки и запуска кода. Или, как минимум, иметь соответствующее окружение
Грамотно реализовать общение между модулями в рамках имеющихся для этого в фреймворках сущностей
Можно использовать готовые решения для какого-то имеющегося функционала
Примечания
Плюсом будет наличие автоматизированных тестов.
Исходные материалы
Прототип: https://invis.io/U773MCDH8
Sketch-файл: front-end-tt.sketch
Figma-файл: front-end-tt.fig
Результат вашей работы необходимо опубликовать (github pages, heroku, e t.c.)
