Om Next DataScript Localisation Demo

I made a demo project showing one way of doing localisation with Om Next and DataScript. The source is on GitHub.

Here’s a video showing how the app works.

So, what’s going on here?

Overview

The page is divided into five sections:

1. The top section has editable strings.
2. The next section shows the same strings but this time read-only.
3. Then there’s an information section. So we can see how the information changes in different locales.
4. Next is the Locales section.
5. Finally all the Localised Strings are shown in a table.

Editing Text

Any text surrounded by a dotted box is editable. Just click on the text and change it right on the page. You should see all instances of the string change. If you don’t see the string change everywhere, it’s a bug, please tell me.

Changing Languages

You can change the displayed language by clicking on a language name in the Demo Information section. It’s not only what you see that changes, if you view the page source you’ll notice that the lang attribute of the html tag and the contents of the title tag (shown in the browser’s window title or tab bar) change too.

Localising Text

Most of the text on the page is localised. That is, by default, available in 3 languages (English, Chinese, French). You can add another locale if you like by clicking the “Add a new locale” button in the Locales section. To see the new locale in action, you’ll also need to fill in the localised versions of the strings (in the Localised Strings section).

A localised string is referred to in the code via an identifier, a Clojure keyword like :app/desc. (See the Localised Strings table.) The app requests a string from the Om Next parser by passing a string identifier and a target locale. The parser read function will pass back its best attempt at localising the string.

Why its best attempt at localising? Maybe the string you’re asking for does not exist in the database or does not exist in the locale you requested. So the read function falls back as follows:

If the string is not in the database

Return the identifier as the string. For example, “:app/missing”. In this way at least something is shown on the page and it’s pretty obvious what needs to be done - localise the string with that id or correct the requested id.

If the string is in the database

1. If it’s localised and not an empty string, return the localised string.
2. If the default value is not an empty string, return that.
3. Return the identifier as above.

Creating Localised Strings

There’s a missing string in the app - :app/missing. There’s two ways of adding this string.

1. You can click the “Add a new localised string” button and fill in the table row.
2. You can click on the editable text directly and edit the string. This creates a new string in the current locale and a copy as the default string (if the default string does not already exist). If you switch to a different locale the default string will be shown but you can click on the string in this new locale and create the localised version the string.

There’s a lot to be said for seeing the app live in a given locale and editing the strings directly rather than in a separate localisation file.

Localising Formats

Localising is not just about translation. The layout, format and order of strings can change too. For example, in English we might write the date as Thursday, 21 January 2016 but in Chinese we would write 2016年1月21日，周四. Same information but in a different order and language.

In this app, format strings can be localised. For example, :date/format (see the Localised Strings table) is “{day}, {date} {month} {year}” in English but in Chinese it is “{year}年{month}月{date}日，{day}”. A simple interpolation function (interp format-string replacement-map) is used to replace the placeholders in the format string with their values from a map. For example:

(interp
  "{day}, {date} {month} {year}"
  {:year "2016" :month "January" :date "21" :day "Thursday")})
  => "Thursday, 21 January 2016"

bye

I hope you enjoy playing with the app.

btw

If you’re interested in multilingual content management systems, take a look at yajogo.