Learning from the Mistakes of a v1

A presentation at JSCONF.BE 2020 by Sarah Dayan

const price = Dinero({ amount: 5000, currency: ‘EUR’ }); const tip = price.percentage(20); const fullPrice = price.add(tip); fullPrice.toFormat(); // “€60.00” @frontstuff_io

2 400 29 years commits releases @frontstuff_io

A v2 usually marks a turning point. @frontstuff_io

🔢 It uses numbers to represent amounts @frontstuff_io

const price = Dinero({ amount: 5000, currency: ‘EUR’ }); @frontstuff_io

.1 + .2; // 0.30000000000000004 (1 + 2) / 10 // 0.3 @frontstuff_io

const price = Dinero({ // 5000 cents, or 50 euros amount: 5000, currency: ‘EUR’ }); @frontstuff_io

Number.MAX_SAFE_INTEGER; // 9007199254740991 Number.MIN_SAFE_INTEGER; // -9007199254740991 @frontstuff_io

const calculator = { add(a, b) { return a + b; }, subtract(a, b) { return a - b; }, // … }; @frontstuff_io

import { Decimal } from ‘decimal.js’; const bigDinero = createDinero({ calculator: { add: Decimal.add, subtract: Decimal.sub, // … }, }); const price = bigDinero({ amount: new Decimal(Number.MAX_SAFE_INTEGER), currency: ‘EUR’, }); @frontstuff_io

💰 It doesn’t handle different exponents @frontstuff_io

1 euro = 100 cents 1 x 10^2 = 100 @frontstuff_io

const price = Dinero({ amount: 5000, currency: ‘EUR’, }); price.toFormat(); // “€50.00” @frontstuff_io

const price = Dinero({ amount: 1000, currency: ‘IQD’, precision: 3, }); @frontstuff_io

const IQD = { code: ‘IQD’, base: 10, exponent: 3, }; const price = Dinero({ amount: 1000, currency: IQD, }); @frontstuff_io

🔄 It expects a REST API for conversions @frontstuff_io

const options = { endpoint: ‘https://api/?base={{from}}’, propertyPath: ‘data.rates.{{to}}’, headers: { ‘user-key’: ‘xxxxxxxxx’, }, roundingMode: ‘HALF_UP’, }; Dinero({ amount: 5000, currency: ‘EUR’, }).convert(‘XBT’, options); @frontstuff_io

const price = Dinero({ amount: 5000, currency: ‘EUR’, }); price.convert(‘XBT’); @frontstuff_io

const rates = new Promise((resolve) => resolve({ XBT: 0.00012, }) ); Dinero({ amount: 5000 }) .convert(EUR, { rates }); @frontstuff_io

const rates = { rates: { XBT: 0.00012, }, }; Dinero({ amount: 5000, currency: ‘EUR’, }).convert(‘XBT’, { endpoint: new Promise((resolve) => resolve(rates) ), }); @frontstuff_io

🌎 It relies on the ECMAScript I18n API @frontstuff_io

const amount = 5; amount.toLocaleString(‘en-GB’, { style: ‘currency’, currency: ‘EUR’, }); // “€5.00” @frontstuff_io

const options = { style: ‘currency’, currency: ‘EUR’, }; amount.toLocaleString(‘en-GB’, options); // “€5.00” amount.toLocaleString(‘de-DE’, options); // “5,00 €” @frontstuff_io

const price = Dinero({ amount: 500, currency: ‘EUR’, }).setLocale(‘en-GB’); price.toFormat(); // “€5.00” @frontstuff_io

Inconsistent implementation @frontstuff_io

const price = Dinero({ amount: 500, currency: EUR, }); price.toFormat( ({ amount, currency }) => `${currency.code} ${amount}`, { digits: 2, roundingMode: Math.round, } ); // “EUR 5” @frontstuff_io

function i18n({ amount, currency }) { return amount.toLocaleString(‘en-GB’, { style: ‘currency’, currency: currency.code, }); } price.toFormat(i18n, { digits: 2, roundingMode: Math.round, }); // “€5.00” @frontstuff_io

const currencySymbols = { EUR: ‘€’, USD: ‘$’, // … }; function manualI18n({ amount, currency }) { const { code } = currency; const symbol = currencySymbols[code] || code; return `${symbol}${amount.toFixed(2)}`; } price.toFormat(manualI18n, { digits: 2, roundingMode: Math.round, }); // “€5.00” @frontstuff_io

🌳 You can’t tree-shake it @frontstuff_io

const price = Dinero({ amount: 500, currency: ‘EUR’, }); price.add(price).multiply(4); @frontstuff_io

const price = Dinero({ amount: 500, currency: ‘EUR’, }); multiply(add(price, price), 4); @frontstuff_io

🐞 It’s written in JavaScript @frontstuff_io

Maintaining types by hand doesn’t scale. And it’s a pain. @frontstuff_io

Static typing is extremely helpful. @frontstuff_io

🐦 TypeScript hits two birds with one stone. @frontstuff_io

Scalability Flexibility Agnosticism DX @frontstuff_io

Thank you! Sarah Dayan Software Engineer, Algolia Links Why Javascript Numbers Are Weird (And How to Fix It) youtu.be/Wq2AqONg7rs Dinero.js on GitHub github.com/dinerojs @frontstuff_io

Sarah Dayan
@sarahdayan

1 / 50

In early 2018, I published Dinero.js, the Moment.js for money. After two years of existence, 29 releases, 3.6k stars on GitHub, and peaks at over 6k downloads per day on npm, it’s time to release a v2 to fix the design issues of the v1. But how do you craft an impactful new major version?

A v2 usually marks a turning point. If you think of your favorite projects, they all probably started becoming interesting around their second iteration: Vue.js, Magento, Symfony, Angular, etc. A v1 is often experimental. It’s an excited new kid on the block, coming with big ambitions but numerous flaws. It has no experience in the real world, but it thinks it knows everything and wants to do it all. That’s the case of Dinero.js, and it’s time for it to grow up.

In this talk, I’ll go over the most significant issues of the v1, why they happened, and how I intend to fix them. I’ll explain how I approached this v2, what kind of feedback I used to design it, and how going with a design-driven approach has opened my world to a wealth of knowledge.

Learning from the Mistakes of a v1

Link for this presentation:

HTML code for embedding:

Share on social media: