Currently, I am developing with my team a front-end project from scratch at Uniplaces (kind of secret). Like every project that we developers start from scratch, we always have the intention to put in practice clean code and clean architecture.

In this specific project, we made the decision to don’t rely on existing plugins/libraries for UI components. Why? Well because they come with more than what we need and in this specific project we need to easily maintain and control the business logic.

Having this requirement and sticking to this decision, there are a lot of pitfalls along the way, when we implement UI components that have a lot of logic and even worst Math logic. Why? Because we are not the math and physics genius that the media try to make of us :). We rely more on black boxes(functions) as building blocks to reason about things.

Notice: In this specific example I will use javascript, but this can be applied in all the majority of programming languages we know.

The cross-multiplication hell

How many times in your developer experience you have to use the cross-multiplication rule to convert between scales or to compute a percentage or factor.

X — 90% 150–100%

Let’s see this in code. Imagine that we have a function to calculate and apply a discount and then visualize that discount on an offer:

Requirements:

- The discount cannot be smaller than 1% and bigger than 5% of the price

- We give the ability to the landlord to specify the discount in € and the tenants must watch the new price and the percentage of the discount.

func applyDiscount = (priceEuros, discountEuros) => {

if(discountEuros < 0 || discountEuros/priceEuros > 0.05) {

throw Error('the discount must be between 1% and 5%');

}



return {discount: discount/priceEuro};

}

Now the visualize discount: