TODO
- add fonts load
Мы предлагаем создать front-end приложение для оформления покупки в интернет-магазине в соответствии с макетами (см. исходные материалы). На выбор мы предлагаем 2 варианта: (с использованием фреймворков) или (без). Обратите внимание, что предполагается функция автоопределения адреса доставки по геоданным. Формы должны иметь валидацию, а некоторые поля предполагают автоподстановку. Также на этапе после оформления заказа есть функция вывода текущей страницы на печать. Печатная версия должна быть адаптирована под черно-белую печать.
Семантичная адаптивная верстка
- Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS)
- Использование соглашений/архитектур написания стилей MVCSS/Bem и т.п.
- Можно использовать ui-фреймворки (Bootstrap/Foundation/Semantic UI и т.п.), либо просто сетки.
- Данная форма может быть реализована как на нативном javascript (es5/es6) (1), так и с использованием одного из популярных фреймворков (2).
- Продуманную архитектуру приложения
- Настроенный процесс CI/CD
- Наличие тестов
- Код должен быть структурирован, реализован в рамках парадигм MVC/MVVM/Functional programming. Можно использовать как реализацию классов, так и прототипно-ориентированное программирование. Можно использовать jQuery для работы с DOM, можно использовать Lodash/Underscore или др. Подобные библиотеки для работы с данными, массивами, объектами (однако приветствуется использование стандартных методов из ES6)
- Желательно использовать модули (Common.js/AMD и т.п.)
- Желательно использовать событийную модель общения между модулями
- Желательно иметь настроенный task-manager для сборки и запуска кода
- Желательно некоторые сущности разбить на отдельные сервисы (сервис обработки ошибок, сервис autocomplete, и т.п.) со специфичным интерфейсом
- Все, описанное в предыдущем варианте, применимо и тут. Однако в этом варианте важно написать приложение в рамках устоявшихся практик того или иного фреймворка. При этом на собеседовании вас все равно будут спрашивать о том, как бы вы реализовали это без использования фреймворка (важно, чтобы у испытуемого было общее фундаментальное понимание 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.)