Skip to content

Commit

Permalink
Improve wording
Browse files Browse the repository at this point in the history
Co-authored-by: Joanna May <[email protected]>
  • Loading branch information
jsgalarraga and jolexxa authored Jul 29, 2024
1 parent 06886fe commit 90d0258
Showing 1 changed file with 11 additions and 11 deletions.
22 changes: 11 additions & 11 deletions src/content/docs/internationalization/localization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ sidebar:

In the modern and global world, it is likely that your app will be used by people that speak another language. With internationalization, you will write your app in a way that allows you to easily change texts and layouts based on the user language.

At Very Good Ventures, we recommend using internationalization even if you are not planning to support other languages in your first version. The overhead is small and the advantages in the long run are big, making your project scalable and setting it up for success.
Even if you are not planning to support other languages in your app's first version, **we highly recommend using internationalization**. The overhead is small and the advantages in the long run are big, making your project scalable and setting it up for success.

## Definitions

Expand All @@ -20,12 +20,12 @@ Before we start with the recommendations, let's define some terminology:
[^1]: Richard Ishida, W3C, Susan K. Miller, Boeing. [Localization vs Internationalization][i18n_l10n_locale_definitions]

:::note
Internationalization is often referred as i18n and localization as l10n. Did you know that the 18 and 10 in both acronyms refer to the number of characters between the first and the last letters of each term?
Internationalization is often referred as i18n and localization as l10n since the 18 and 10 in both acronyms refer to the number of characters between the first and the last letters of each term.
:::

## Frontend

Our frontend framework of choice, Flutter, supports localization in an easy way, but all the concepts here can be extrapolated to any other UI framework.
We can use Flutter's built-in support for localization.

1. Start by setting up internationalization. In Flutter, you will have to install the `fluter_localizations` and `intl` packages. Also, enable the `generate` flag in the `flutter` section of the pubspec file:

Expand Down Expand Up @@ -100,31 +100,31 @@ extension AppLocalizationsX on BuildContext {

:::

Check out the [Flutter documentation][flutter_i18n_docs] on this topic to have more details about the implementation.
Check out the [Flutter documentation][flutter_i18n_docs] on this topic to find more details about the implementation.

:::tip
You can save time configuring the localizations when creating a new project by using the Very Good CLI and running `very_good create flutter_app <app_name>`. This command will create the demo counter app with the English template file and all the internationalization configuration to start using it, as well as a readme section explaining how to add new strings.
You can save time configuring the localizations when creating a new project by using Very Good CLI and running `very_good create flutter_app <app_name>`. This command will create the demo counter app with the English template file and all the internationalization configuration to start using it, as well as a readme section explaining how to add new strings.
:::

### UI libraries
### UI Libraries

It's common to create components in a different package that do not have access to the localized strings. The easiest solution to support localization is to allow these components to receive the required strings as parameters, passing them from the main app.

## Backend

Some applications don't require the backend to send any user-facing strings to the frontend. However, there are cases where this is needed, like a recipes app where you won't be storing all recipes in the device. To internationalize your app, you can follow a similar approach as we did for the frontend:

- Create as many databases as languages you want to support, with the translated content.
- Get user locale by receiving it in the API call.
- Create database entries with translated content for each language you want to support.
- Require client to transmit the user's locale with a backend request or when starting a session.
- Decide which string should be returned based on the user locale.

### Error messages

One kind of message that will always be sent from the backend is an error message. When dealing with errors we can have multiple strategies: silently fail, retry, show a message... Here we will not discuss what approach might be better, however, every time a message is shown, it has to be localized.
We can leverage multiple error-handling strategies on the client-side: silently fail, retry, show a message, etc. Whenever an error message is received, however, it must be localized.

Our recommendation is that the API returns the appropriate [HTTP status codes][http_status_codes] and the frontend can map those codes to localization keys and custom messages.
We recommend that the backend return the appropriate [HTTP status codes][http_status_codes] so the frontend can map those codes to localization keys and custom messages.

However, there are times where the HTTP status code does not give enough information and we want to be more specific to the user. In these cases, we should return an error constant and map it to the localized string in the app. For example, if we have a shopping cart where we can use a promo code, when we validate it, the server could return a 400 (bad request) with a custom error code in the body: `invalid_code`, `expired_code`, `limit_reached`, `unqualified_item`, `already_used`.
However, there are times where the HTTP status code does not give enough information and we want to be more specific to the user. In these cases, we should return an error constant and map it to a localized string in the app. For example, if we have a shopping cart where we can use a promo code, the server could return a 400 (bad request) with a custom error code in the body if the promo code was invalid: `invalid_code`, `expired_code`, `limit_reached`, `unqualified_item`, `already_used`, etc.

---

Expand Down

0 comments on commit 90d0258

Please sign in to comment.