Skip to main content

Move App translations back to app folder and create common library for shared translations only

Proposed change​

Move app translations into the app directory. But keep shared translations such as components, forms, form validation translations in @pm-netbank/translations and change the library name to be @pm-netbank/libs-i18n.

Motivation​

About 14 months ago with 👉11_TranslationsLibrary.md proposal we have moved all our translations into @pm-netbank/translations which enabled us manage all pm-netbank translations within single library.

By the time number of applications and libraries that are in pm-netbank workspace has been doubled and since all these applications and libraries being depend on @pm-netbank/translations:

  • We observe significantly increased pipeline durations and as well as CPU usage of the runners. Why? with the current setup in nx/monorepo once you make a single translation change it would trigger build for all applications that are depend on it.
  • We observed that all translations that are in @pm-netbank/translations being bundled with every application. This increases application build output bundles sizes significantly. Why? For example: the app cards wants to import and use the translations created for cards app and naturally imports @pm-netbank/translations but along with cards translations it actually imports all other translations belongs to applications and libraries.

Special thanks goes to Web core team ❤️ that they come up with different solutions such as nx cloud and parallel runner approaches to improve the pipeline durations.

With ths proposed change:

  • The applications will be depending on the translation files within the application scope/folder but still be able to import shared libraries from @pm-netbank/i18n library.
  • Applications bundle size will be reduced down up to ~2MB 🤯
  • We will have less affected projects during the CI/CD process

Proposed transition strategy​

  1. Create new library called @pm-netbank/i18n and implement sync-translation command from tools/lokalise and only keep the shared translations in this library such as components, forms, form validation translations.

  2. Refactor shared pm-netbank libraries and applications to use shared translations from @pm-netbank/i18n library.

  3. Update apps to fetch translations to apps/pm-netbank/**/src/i18n folder by using the global tools/lokalise script and use the translations and translationKeys from relative path by refactoring the app source files. Purposing this 👆 change should be done in a workshop with chapter devs so we can finalise it quickly. Scripting can ease the process.

  4. Provide SharedTranslationsProvider for shared components that are consumed by apps. This provider should be as it shown below in gatsby-wrappers/index.tsx app file.

    <IntlProvider {...getIntlConfig(translations, getLang())}>
      <SharedTranslationsProvider>...</SharedTranslationsProvider>
    </IntlProvider>

  5. Remove tools/pm-netbank/scripts/lokalise.sh script and start using global lokalise script tools/lokalise.

  6. Update relevant documentations PatternsAndBestPractices.md