/help-payment

Primary LanguageJavaScript

Тестовое задание на вакансию Front-end разработчика

TODO

  • add fonts load

Задание

Мы предлагаем создать 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.)