Loading post…
ShopifyCarys MillsExplainer
Creating Locale
Summary
Shopify’s move to support six additional languages exposed a challenge in its admin graphs: condensing numbers without distorting locale-specific conventions. The team needed locale-aware abbreviations for sales, visits, and customer data, because unshortened values could consume axis space. Existing JavaScript libraries either exceeded the requirement or conflicted with Shopify’s stack, while the Intl API lacked implemented number-condensing support. During Hack Days, the developers used abbreviation data from Unicode’s Common Locale Data Repository (CLDR) and currency information from Intl.js to build functions for locale-specific numbers and currencies. Their package handles examples such as Portuguese “3 mil” and non-Western systems including India’s lakhs and crores, and was released as condense-number on npm in July 2018.
Context
The project began as Shopify expanded its admin to six additional languages for more than 600,000 merchants. The front-end team working on Shopify Home and Analytics needed condensed values for graphs showing sales, visits, and customer data.
Approach / What changed
The developers combined number-abbreviation data from Unicode’s Common Locale Data Repository with currency information from Intl.js, then wrote functions that condense numbers and currencies according to locale. They packaged the solution as condense-number and released it on npm in July 2018.
Takeaways
Number abbreviations vary by locale: 3,000 becomes 3K in English but 3 mil in Portuguese.
India’s counting conventions use lakhs and crores rather than some Western increments such as millions.
CLDR supplied most of the number-abbreviation data, while Intl.js provided currency information for the implementation.
FAQ
Why couldn’t the team use JavaScript’s built-in Intl API for number condensing?
The Intl API supported language-sensitive formatting, but its proposal to add number condensing had not been implemented. Existing libraries either did more than the team needed or were incompatible with Shopify’s stack.
How does condensing differ across languages and counting systems?
A value such as 3,000 is abbreviated as 3K in English and 3 mil in Portuguese. India also uses lakhs and crores instead of some Western increments such as millions.
What data was used to build the locale-aware functions?
The implementation used abbreviation data from Unicode’s Common Locale Data Repository, or CLDR. Currency information came from Intl.js.
Source and freshness
- Source
- shopify.engineering
- Published
- Added to Yomu
Summaries are generated from the original by a language model. Check the original before relying on it.
Keep reading
Related reading
The Good Stuff
Paid picks we use ourselves. Links carry a referral code — a subscription through one earns us a commission at no extra cost to you.
The best engineering reads, once a week
One useful email. Unsubscribe anytime.