Silly Polymer i18n

I haven't the foggiest idea what internationalization and localization should look like in Polymer. Heck, I'm not sure formal i18n / l10n is necessary in Polymer—a combination of distributed nodes and attributes might be sufficient for most cases. But to explore the topic, I start modifying a toy Polymer to support different text.

At lease some of this will be based on the example in the Dart code repository. Not tonight's work, which takes a more simplistic approach. But I will eventually get to that other sample.

I am starting exploration of this topic in Dart rather than JavaScript because Dart includes an internationalization library (which is admittedly still early stages). To start using, I add the intl package to the list of dependencies for my code:

name: i18n
dependencies:
  polymer: any
  intl: any
dev_dependencies:
  unittest: any
transformers:
- polymer:
    entry_points: web/index.html

After a pub get, I have Dart's internationalization library at my disposal:

➜  dart git:(master) ✗ pub get
Resolving dependencies...........................................
Downloading intl 0.9.1 from hosted...
Got dependencies!

My play Polymer looks something like:



The thing about localizing this particular Polymer is that I can do so without the formalization of the intl package. The help text at the bottom is actually distributed into the Polymer via <content> tag:

      <hello-you>
        <p>Introduce yourself for an amazing personalized experience!</p>
      </hello-you>

I can localize that to French with:

      <hello-you>
        <p>Présentez-vous une expérience personnalisée incroyable!</p>
      </hello-you>

And that works just fine, leaving only the initial title and button to be localized to French:



Before moving on, I feel that I must admit that I am a typical American. I took 6 years of French in school and would struggle to ask for directions to the library in French today. I am fully at the mercy of Google translate in this matter. Actually, that is not entirely true—I know that “incroyable” means “incredible” because Bomb Voyage calls Mr Incredible “Monsieur Incroyable” in The Incredibles. Anyhow...

The remainder of my play Polymer can be localized through attributes:

      <hello-you hello="Bonjour" done="Fin">
        <p>Présentez-vous une expérience personnalisée incroyable!</p>
      </hello-you>

To support that, I next need to bind the hello and done attributes in the Polymer template:

<polymer-element name="hello-you">
  <template>
    <div>
      <h2>{{hello}} {{your_name}}</h2>
      <p>
        <input value="{{your_name}}">
        <input type=submit value="{{done}}!" on-click="{{feelingLucky}}">
      </p>
      <p class=instructions>
        <content></content>
      </p>
    </div>
  </template>
  <script type="application/dart" src="hello_you.dart"></script>
</polymer-element>

And I need some dumb American defaults in the backing class:

import 'package:polymer/polymer.dart';

@CustomTag('hello-you')
class HelloYou extends PolymerElement {
  @published String your_name;
  @published String hello = 'Hello';
  @published String done = 'Done';
  HelloYou.created(): super.created();
  // ...
}

With that, I have my play Polymer localized in French:



I fully admit that this is not a complete and robust solution. If my Polymer contained dates, for instance, I will still be using the stupid American date format where the month comes first. Regardless of an application-wide intl locale setting, most of the world would still be subjected to the month first. But… for this very simple case, this simple approach works fairly well. I am still going to pursue a more robust solution that actually uses the intl package. Tomorrow.


Day #972

‹prev | My Chain | next›