Обновление калькулятора Циферблат

30 Ноя 2017

Фронтенд
Типография «Циферблат»
Обновление калькулятора Циферблат

Задача

Задачей этого проекта было улучшение уже имеющегося калькулятора. Изначальная версия обладала большим количеством кода, который нагружал весь сайт и тратил много времени на обработку элементарных запросов. Также, большой проблемой стал вопрос об «отсутствии гибкости» для внесения улучшений.

Особенности

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

Подготовка

К моменту запуска обновления калькулятора присутствовало 3 разных типа уровней таблиц: с одной строкой, двумя и несколько таблиц. Таблицы были разные и практически каждая являлась костыльным решением. Поэтому, первым делом мы абстрагировались и начали с разработки логики, полностью уйдя от изначального варианта.

Процесс на бумаге
Процесс на бумаге

Решение

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

После загрузки данных в область видимости скрипта, он считывает все данные в объект, все параметры в массив параметром (для вывода вариантов пользователю).

Тестовая сборка
Тестовая сборка

Дополнительные же данные, которые находятся в data-аттрибутах являются триггерами для распределении в таблицах.

Выводы

Разработка и внедрение данного универсального решения позволило существенно увеличить скорость загрузки страницы и облегчить ее работу.

Доказательством улучшения работы были данные, полученные с помощью утилиты от Google — PageSpeed Insights. Мы определили, что показатели оценки выросли на 4-7 процентов в ПК и мобильной версии.

pagesspeed
Pagesspeed
В проекте принимали участие

АрсенийАрсений
АлександрАлександр