Best practices for localization of apps

How-to Discussions
1

Does anyone have any best practices of handling localization of Fuse apps? Currently we are doing something like what is outlined here: https://github.com/fusetools/fuse-samples/issues/14

We store all the strings inside a file called Locales.ux and use <StateGroup Active="{lang}"> to determine which strings to use. Is there a better way? It would be fantastic if localization was built directly into fuse as all our apps require it.

I thought perhaps we could export for Android and iOS then localize the string files which exported similar to what is outlined below however the strings are not exported:

2

Hi!

Great question, I agree that localization should be built into fuse. Its an important feature that has to be done right.

If you are using JavaScript in your app you can use Observable to bind all your strings. And theres probably a ton of good localization frameworks for JavaScript available

3

Documentation has en entry covering localization.

4

@Gaëtan

That is pretty much how we are doing it now using <StateGroup>. But that only addresses how to store your localized text. It does not address things like working out what language should be displayed, time and dates, external files for translation etc.

@Vegard Strand Lende

Using a JS package makes sense to me as this could handle a lot of things like date and time differences. What would be the benefit of using an Observable over <StateGroup>?

@Both

Thanks for replying on this. I would love to get more of your input on this, as @Vegard Strand Lende said “it is an important feature that has to be done right”.

5

Thanks for your input :slight_smile:

I think chosing Observable or <StateGroup /> is a matter of preference and need. If your app only need to support a few languages and does not contain large amounts of different strings I think I would go with <StateGroup />, its simple and easy. No need to spend lots engineering hours developing a system if its really not needed.

On the other hand, if the app contains thousands of string, targets many countries, needs support for different date and time formats. I would go for a solution in JS. More so because there are lots of JS libraries that solves these issues, so I would find a JS library that covers what I need and use Observables to get the strings into my UX.

6

Getting the current locale for the device that the app is running on can easily be implemented with Native Modules and ForeignCode

Have a look at this example:

using Uno;
using Uno.Compiler.ExportTargetInterop;
using Fuse;
using Fuse.Scripting;
using Fuse.Reactive;

public class LocaleModule : NativeModule
{
    static readonly Locale Locale;

    static LocaleModule()
    {
        Locale = new Locale();
    }

    public LocaleModule()
    {
        AddMember(new NativeFunction("GetCurrentLocale", (NativeCallback)GetCurrentLocale));
    }

    static object GetCurrentLocale(Context c, object[] args)
    {
        return Locale.CurrentLocale;
    }
}

class Locale
{
    public string CurrentLocale
    {
        get { return GetCurrentLocale(); }
    }

    [Foreign(Language.Java)]
    extern(Android) static string GetCurrentLocale()
    @{
        return java.util.Locale.getDefault().getLanguage();
    @}

    [Foreign(Language.iOS)]
    [Require("Source.Include", "NSFoundation/NSFoundation.h")]
    extern(iOS) static string GetCurrentLocale()
    @{
        return [[NSLocale preferredLanguages] objectAtIndex:0];
    @}

    extern(!iOS || !Android) static string GetCurrentLocale()
    {
        // return the preferred language for unimplemented platforms
        return "Default";
    }

}

Android locale iOS locale