При приеме на работу дали такое тестовое задание задние:
(Ориентировочное время выполнения 4-8 часов
Разработать SPA приложение по заданию ниже.
В качестве фреймворка предпочтительнее использовать vue.js. Но также рассматриваем кандидатов с выполненным заданием на react или angular.
В качестве сборщика предпочтительнее использовать Webpack.
--- ПРИЛОЖЕНИЕ и ЯДРО ---
Разработать родительское приложение, которое послужит контейнером для подключения дочерних блоков с бизнес-логикой.
В состав контейнера должны войти хедер с меню из двух страниц и область для загрузки контента под каждую страницу (блоков).
Контент дочерних блоков должен подгружаться динамически с отложенной загрузкой (отдельным бандлом).
Далее необходимо разработать мини-ядро, которое будет грузиться вместе с родительским приложенияем и иметь api для загрузки дополнительных плагинов. Ядро должно быть доступно из кода каждой страницы родительского приложения.
Первым плагином ядра является плагин, реализующий паттерн шина данных. Он реализует в себе глобальную на уровне приложения шину данных. Каждый компонент системы может писать в нее события или читать их из нее (посредством подписки).
Вторым плагином ядра будет плагин, реализующий SDK для взимодействия с биржей binance (только 2 метода: получить биржевой стакан по определенному символу по REST и подписаться на обновления стакана по WS). (См. раздел Diff. Depth Stream в документации:
https://github.com/binance-exchange/binance-offici...).
--- GUI КОМПОНЕНТЫ ---
В приложении на первой странице расположить компонент, который при помощи плагина ядра "SDK" забирает состояние стакана по определенному символу с биржи binance (можно применить limit=500, чтобы не тянуть стакан на всю глубину), подключается на обновления данных по ws для этого символа (по умолчанию берется по BTCUSDT) и отрисовывает стакан в подобном формате
|----------|----------|----------||----------|----------|----------|
|--Amount--|--Price---|--Total---||--Amount--|--Price---|--Total---|
|----------|----------|----------||----------|----------|----------|
| ... | ... | ... || ... | ... | ... |
Где левые три колонки относятся к ордерам тиба Bid, правые к ордерам типа Ask.
Price и Amount (Quantity) получаются из binance. Total рассчитывается на клиенте как Price * Amount.
Для верстки желательно использовать правила именования по БЭМу.
Цвета и отступы можно использовать на свой вкус.
Верстка должа быть резиновая и адаптивная для мобилки и десктопа. Breakpoint можно выбрать самостоятельно.
В мобильной версии отображать только колонки с Price и Amount.
Таблица должна помещаться по вертикали на странице (без скрола на страница) и должна содержать свой скрол-бар.
Скролл в таблице должен появляться по ховеру на таблицу, сама таблица и ее контент должны оставаться на месте при этом.
Внешний вид скроллбара не принципиален. Таблица скроллится внутри, шапка остаётся на месте.
Полоса скролл бара начинается под шапкой. При скролле значения в таблице не должны наезжать на шапку.
Компонент должен уметь:
* читать сообщение об изменении читаемого символа из плагина "шина данных". При изменении символа компонент должен очищать свое содержимое по предыдущему символу и загрузить данные по новому.
* транслировать в шину данных в виде сообщений все примененные diff-изменения.
На второй странице расположить компонент, сожержащий в себе:
* DropDown перечнем символов. Их можно зашить статически BTCUSDT, BNBBTC и ETHBTC
* Cписочный элемент
DropDown при изменении выбранного элемента отправляет в шину данных событие об изменении активного символа.
Cписочный элемент читает шину данных и отображает информацию о каждом diff-изменении в новой строке.
Дополнительное задание (если успеваете):
* Релизовать SSR для приложения
Всё, что покажется в задании непонятным или неоднозначным к трактовке, делайте на свое усмотрение, соблюдая здоровый рационализм.
Главное - это общий полученный результат. Если возникнет непреодолимое по вашему мнению препятствие, пиши свой(и) вопрос(ы) нам. По завершении нам нужна ссылка выложенного тестового на GitHub Pages и ссылка на код.)
В итоге я застрял. У меня опыт с vue небольшой. Js нормально знаю, но с websocket не работал. С шиной и компонентами я еще разберусь, а вот с остальным вряд ли. Может кто-нибудь делал что-то подобное или видел пример. Буду признателен, если подскажете
