Пример с расчетами, который разошелся с собственным калькулятором

Я владею сайтом с калькуляторами стоимости ремонта дома.

На каждой странице стоимость отображается в четырех местах:

Я обнаружил серьезный баг. В текстовом примере говорилось, что проект стоит $62,300. Виджет же показывал, что тот же проект стоит $56,779.

Разрыв составил $5,500.

Числа не были случайными. Они основывались на разных скрытых допущениях. В тексте предполагалось использование новой системы отопления, вентиляции и кондиционирования (HVAC). Виджет же предполагал использование существующей системы. Оба варианта были допустимы, но они «не общались» друг с другом.

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

Я исправил это с помощью правила, которое я называю source-first (приоритет источника). Оно состоит из двух частей.

Часть первая: Стоимость существует только в одном месте.

Я перестал вписывать числа вручную в тексты и таблицы. Теперь единственным источником является функция калькулятора. Таблицы и текстовые примеры подтягивают значения напрямую из этой функции в процессе сборки (build process). Если функция меняется, каждое число на странице меняется автоматически. Несоответствий быть не может, так как все числа имеют одно и то же значение.

Часть вторая: Каждое число должно указывать на свой источник.

Данные о стоимости не являются вечными фактами. У них есть срок годности. Я добавил небольшой объект данных к каждому расчету. Он показывает:

Это обеспечивает достоверность данных. Если исходные данные неверны, неверным будет весь сайт. Но, по крайней мере, сайт будет последовательным. Пользователь мгновенно замечает противоречия, а это подрывает доверие.

Урок прост:

Я потратил целый день на удаление чисел вместо того, чтобы их писать. Моя кодовая база стала меньше, и она больше не лжет моим пользователям.

Источник: https://dev.to/mark_b5f4ffdd8e7cd58/the-worked-example-that-disagreed-with-its-own-calculator-4cp9