Angular Internationalization (i18n) with Transloco + Airtable
In this article, we are going to build a highly dynamic copy management system for an Angular application using Transloco and Airtable.
I’ve been working at PomeloHealth for 2 years as a front-end lead developer. We develop web solutions to improve access to healthcare for all and we aim to provide a better patient experience across the globe. Because of this, internationalization is an important part of what we do, and we already manage English, French, and Spanish. Given the company’s rate of growth, we will certainly have to manage other languages in the future. With this in mind, we have to imagine a scalable system.
We have copywriters who are in charge of providing meaningful content in multiple languages. Thus far, product copy has been provided to developers via Google doc. Maintaining and navigating these files can be quite complicated. A lot of back and forth between copywriters and developers can result in time wasted that nobody enjoys.
To integrate these translations in our web applications, we use Transloco. Transloco allows you to define translations for your content in different languages and switch between them dynamically at runtime. For each new feature or copy change, the developers have had to make the changes in JSON files which contain all the necessary translations. Each JSON file corresponds to a language. The keys are defined by developers and the values by copywriters.
We can see that with the current solution the risk of error is considerable. With the arrival of Spanish, we’ve been motivated to imagine a more efficient, robust, and scalable solution.
Now, let’s get started.
Airtable
Airtable is like Google sheets, only more developer-friendly. In addition to what you would expect from a spreadsheet editor, it also has features like history visualization, versioning and serving images. Our team has some experience with Airtable, and my colleague Veryan Goodship has written a very good article about our first occasion to use it.
Airtable offers many free pre-built templates to quickly get started. And you know what? Airtable has a template for copy management. Awesome! We’ll use it as a starting point.
This template is really interesting but we had to adapt it to our needs by deleting some existing columns and adding others. Here is the final version of our table for our test application:
We chose to group our translations by the application module. Then we added a column for each language (en, fr, es), the last modification date, and the row creator.
The goal is for the developers to only need to add the translation keys, and leave it up to the copywriters to add the various translations. This is especially useful if the copywriters aren’t familair with JSON or using an IDE.
Now that our Airtable is ready to save all our translations, we will have to fetch it from our Angular application.
Transloco
If you are not familiar with Transloco, or want to learn how to install it to your project, you can read this article.
When Transloco is integrated into your project you should have this file :
The HttpLoader is a class that implements the TranslocoLoader interface. It’s responsible for instructing Transloco how to load the translation files. It uses the Angular HTTP client to fetch the files, based on a given path.
In our case instead of loading translations from a JSON file, we’re going to load the translations from Airtable. To do this we will use the Airtable API. It’s quite straightforward, we just have to do an HTTP GET and pass the API key in the headers.
This will allow us to retrieve all the records from our Table (spreadsheet). Since our application is divided into several modules that are lazy-loaded, we only need to load the translations of the module we are on. Thankfully, Transloco has scopes that define which module it has to get the translations from.
As far as Airtable goes, the API offers a query system that allows for filtering data. In our table, we’ve grouped translations by interface module, which will allow us to filter them by language and by scope:
Finally, we need to transform the data sent from the Airtable API into a format that Transloco can make use of.
Improvements
With this solution we have 2 major technical constraints:
- The API key is visible in our front-end code, which allows for malicious hacking.
- The API is limited to 5 requests per second per base. If you exceed this rate, you will receive a 429 status code and will need to wait 30 seconds before subsequent requests will succeed.
So, to avoid these constraints, we could imagine a back-end service that would be the intermediary between our Angular application and the Airtable API. This service would take care of the authentication with Airtable and set up a caching strategy. Finally, this service could format the data from Airtable by sending a JSON file to the Angular application.
Conclusion
The team now has a scalable solution to manage translations. Copywriters and translators should really like the fact that they can see where their words will fit into the product — a feature not existent in solutions using Google docs or sheets.
Another advantage is we don’t need to release the application in production because the changes are instant:
Thanks for reading. Happy translating!
PS : Thank you Pauledmundlessard and Veryan Goodship for your help writing this article.