As of August 2018 we’re happy to say that Squarespace’s all-in-one platform is now available to members and visitors in English, French, German, Spanish, Portuguese, and Italian. It’s hard to believe that only a few years ago providing an internationalized product experience was nothing but an uncertain bullet-point on our product roadmap. We knew we wanted to find a way to better serve our customers from all over the world but the engineering challenge was huge: how were we going to translate a 10-year-old codebase?
As the owners of the front-end build process, the Interface Architecture team was tasked with architecting a solution for our large and constantly changing front end. More than a decade of product development results in a lot of JS: at the time we were looking at over 480,000 lines of code in 7,000 .js/.jsx files, which were under active development and changing every day. With limited internationalization experience across the members of our team, the challenge was both daunting and exciting. It was an exercise in constantly learning, revisiting our assumptions, and accordingly refactoring.
As we made progress on a solution, we learned that creating a reliable translation system was not limited to the technical problem of extracting and translating strings. A reliable translation system would consider the holistic requirements of all of the stakeholders who were involved in delivering an exemplary internationalized product experience: engineers, product managers, language experts, translators, QA analysts, etc. Through lessons learned from five site language launches, we’ve arrived at the system we have today: a system which is responsible for reliably translating over 100,000 strings across five languages.
In this blog post I’ll describe the system we built for delivering front-end translations at Squarespace. I’ll describe how translation code is written, extracted, and translated, the rationale behind some of our architectural decisions, and some of the functional and internationalization-specific lessons we learned along the way.
How translations work today
The lifecycle of our front-end translation system can be split into four main steps.