Тестовое задание. Кратко:

• Требуется сверстать страницу, согласно приложенному макету. Названия шрифтов и цвета взять из web_guides.pdf
• Страница должна отображать таблицу параметров. Список параметров брать из приложенного json файла (необходимо организовать его парсинг при загрузке).
• В таблице должны быть отображены параметры, у которых в массиве поля groupId есть группа 1.
• В таблице нужно отображать следующие поля из json файла: name, value, measureUnit, description.
• Если у параметра присутсвует поле relations, то нужно отобразить стрелочку раскрывающую список зависимых параметров. В основном списке таблицы зависимые параметры отображать не нужно.
• Значения параметров должны обновляться каждые 10 секунд (при изменении параметра в файле json – страница должна отобразить это изменение не позже чем через 10 сек).
• При нажатии на иконку карандаша должно появляется окошко редактирования значения параметра.
• Страница должна корректно отображаться и функционировать в последней стабильной версии Chrome.

Склонировать репозиторий и в его локальной папке последовательно выполнить:

npm -i
npm run build
npm run start

Открыть в браузере http://localhost:8080/

Обьемное для тестового задание. В моем понимании все же тестовое должно быть или меньше или оплачиваемое.

Чтобы был интерес в его написании и для расширения кругозора решил попробовать Svelte. Впечатления оказались очень даже положительные, Svelte превзошел мои ожидания :) Изначально хотел еще и сборщик использовать snowpack, но что-то пошло не так и вернулся к проверенному webpack'y.

В проекте используются сокеты, можно открыть несколько вкладок с фронтендом и меняться значения будут во всех из них.

На изменение файла на диске подписался через наблюдение за ним, так что его изменения так же повлекут немедленную (ну относительно) перерисовку интерфейса.

Над алгоритмом как менять значения в этом большом, ну относительно большом, json'e долго не раздумывал, но все же он не так плох. По вложенным на второй уровень массивам он будет проходиться один раз и изменять значения точечно по сохраненным в Мапе индексам.

• Параметры основного текста значатся как

Proxima Nova Semibold, 14pt, 
#FFFFFF

а на самом деле цвет #000

• Часть значений необходимых для отрисовки макета не возможно корректно найти в макетах. Их можно было бы получить из макета, но я не знаю пропорций. Можно конечно масштабировать его до тех которые известны, скажем до скролла, но это странное занятие. В общем макет растровый, из ниго не понятны пропорции в пикселях.