When working on webapps which need to be used by international clients, it is important to provide internationalization (i18n).
I18n is the process of developing web/desktop/mobile applications which provide an easy way to change language and culture to be localized to different markets.
For example, English and French markets have different language, date format and number format.
The webapp needs to provide a way to switch texts and respect date and number formats.

So today I will show you how you can bring i18n to your WebSharper webapp. This post is composed by three parts

JS libraries

WebSharper bindings to work with F#

Example

Here is a preview:

1. JS libraries

There are three parts that needs to be configurable in order to provide i18n.

the language, all text needs to be translated

the date format, in some places, the days is after before the months - also days and months need to be translated

the number format, some places use dot . and others comma , to separate decimals - also currencies need to be translated

Then we can specify where the translated text will be placed using the attribute i18next.
The i18next.init takes a callback as second argument which is called when the initialization is done.
We then initialize i18nextJquery, the jquery plugin, and after initialized it adds a localize function to jquery elements which we can call to apply the translated text $('body').localize().

Momentjs

To use the localization of momentjs, we need to reference momentjs with the locales.

The translator provides the jquery element, it provides the underlying value, moment date or numeral number non formatted, a format defining the format of the data and an execute function which translate the value.

Now that we are done with the process in JS, let’s see how we can bind it with WebSharper to make it available in F#.

2. WebSharper bindings to work with F#

We have defined a good process in JS to translate our text, dates and numbers.
Now we need to provide the translations.
We will do that from WebSharper.
The benefit for doing this in F# is that we can build a typesafe model which contains all the translations.
So let’s define the translation model.

We create a Language type which will hold the language name and translation.
The translation will contain all our translation accessible by path.
For example, to access Text here we will reference Div.Text.

We follow the same way we used in JS.
We create an initialize function and a changeLanguage which binds directly to the JS equivalent.

Notice the notation New and => employed lg.Name => New [ "translation" => lg.Translation ].
New is used to create a JS object and => is used to create a property so we can use it together like so: New [ "propOne" => propOne ; "propTwo" => propTwo ].

We start by defining our languages and its translations.
Then we create a text, a date and a currency formatted number which will be translated.
And finally by using two buttons, one targetted to English and the other one French, we allow the user to translate the content of the website.

And that’s it we are done, we now have localization for text language, date and number in our webapp!

Conclusion

Today we saw how we could bring i18n in our WebSharper webapp in F#.
I didn’t see many tutorials on how to bring i18n to webapps so I wanted to share a way to do it.
Localization is very important when you need target different markets in different countries.
It is always better to be able to localize and it will also make your webapp more attractive than a Google translated webapp!
Hope you enjoyed reading this post as much as I enjoyed writing it!
As always, if you have comments leave it here or hit me on Twitter @Kimserey_Lam. See you next time!

Comments

While internationalization is important, localization is an important next step to think about also. For example, although you've correctly translated your webapp example into French, the dates will look wrong to a native French speaker. The French don't write "août 28 2016", they write "28 août 2016". See http://french.stackexchange.com/questions/12361/quelle-est-la-fa%C3%A7on-standard-d%C3%A9crire-la-date-en-fran%C3%A7ais for more details. (And the time is wrong too: the French use a 24-hour clock rather than a 12-hour clock with AM/PM. In France, "9:38 PM" should be written as "21:38".)

So there's a bit more to i18n / l10n than simply translating your strings. You need to be able to select the right formatting for things like dates, times, numbers, and so on. Your example had the right number format for French (comma instead of period as the decimal-point marker, and space instead of comma as the digit group separator for thousands, millions, etc.), but the date and time formats needed to be adjusted too.

If I knew the right way to do that in F# or .Net, I'd mention it here. But I'm still learning the process myself. If you find out the right way to adjust date and time formats and write a follow-up post, I'll be very grateful.

P.S. My name is showing up as "Unknown (Google)" in the comment box for some reason. In case it posts as Unknown or Anonymous, this comment was written by Robin Munn .

Hi Robin, thanks for reading my post!Your point about the date not being properly translated is totally correct. Indeed I overlook the formatting of the date by using MomentJS directly to translate the date day/month. I will write a note on the post to not mislead other readers that it is only a literal translation of the date provided by MomentJS. Many thanks for pointing this out!

Post a Comment

Popular posts from this blog

Absolute layout and relative layout Xamarin formsIn Xamarin Forms, layouts are used to position elements in the page.
There are multiple layouts available like stack layout, grid layout, table layout, absolute layout and relative layout.
Stack layout is straight to grasp the concept, we stack elements one by one horizontally or vertically.
Grid layout is also straight forward, we define rows and columns and we place the elements by indicating the row index and column index.
On the other hand, absolute layout and relative layout isn’t that straight forward because in Xamarin it is NOT the same as positions in CSS.So today, we will see how and when we can use absolute layout and/or relative layout in our advantage.
This post is composed by two parts: 1. Absolute layout
2. Relative layout
1. Absolute layoutThe first thing to understand is that absolute layout has nothing to do with CSS absolute position.
In Xamarin Forms. absolute layout allows us to position elements in the page by pre…

Build an accordion view in Xamarin.FormsFew weeks ago I posted about absolute and relative layouts.
Layouts are called Layouts because they contain children which are placed in a particular way.
Xamarin.Forms has a lot of layouts and views to structure pages like grid, table view or list view.Today I would like to show you how we can use some of these basic views to build an Accordion view.Here’s a preview of the Accordion view:Full source code available on GitHub - https://github.com/Kimserey/AccordionView/blob/master/Accordion/AccordionView.csThis post will be composed of four steps:Create a BindablePropertyDefine the accordion expandable sectionDefine the accordion viewUsage sample1. Create a BindablePropertyAs we saw in one of my previous post,
Xamarin.Forms works around data bindings.
View properties are bound to viewmodel properties.Default views like Label, Button, ListView or TableView come with the necessary bindable properties like BackgroundColor, TextColor, ItemsSource, It…

Use Font Awesome from your Xamarin.Forms projectIcons are important in mobile applications where space is limited.
We use icon everywhere to convey action intent like + would be to add an item or a bin would be to delete one.
There are two ways to add icons to our mobile app:with imageswith fontsToday we will see the second option - how we can add Font awesome to our Xamarin.Android project and how we can use it from Xamarin.Forms.
This post will be composed by three parts: 1. Why Font Awesome
2. Add Font Awesome to the Droid project
3. Use with Xamarin.Forms
1. Why Font AwesomeIf you are familiar with Web development, you must have encountered Font awesome http://fontawesome.io/.
It is an icon font containing lots of icon for every type of usage.
The advantaged of using a font is that we can leverage the text options, like text color or text size, to easily update the style of the icon to match our app.Let’s see how we can bring Font Awesome to the Droid project.2. Add Font awesome…