Backbone.js and i18n


backbonei18n
A few weeks ago I had to support i18n in a backbone.js project I’m developing. Many doubts quickly appeared, when to load the i18n’ed content? how? where to define it? in which format? …

I started looking into JavaScript i18n libraries/frameworks, and decided to take a look at three: i18next, jed and jsperanto.
Jed looks really good and is truly the closest thing you can get to gettext in JavaScript.

But this time I needed something simpler which could allow me to quickly delegate translations to someone without explaining all these concepts about pluralization and interpolation since the i18n that needed to be done was really simple and small.

From my perspective jsperanto is like i18next on steroids. (edit: not that jsperanto supported more features, but it felt more complex due to the lack of documentation in comparison to i18next)

I ended up using i18next, it was clean and simple solution for a simple problem with basic i18n necessities.

Initialization

Since i18next features async initialization, it is the first thing initialized and then the main backbone.js router is initialized in its callback. Something like this:

$.i18n.init({
    lng: "en-US",
    ...
}, function(t) {
    app = new Router();
    Backbone.history.start();
});

Since the main router is initialized in i18next initialization callback, I will have i18next initialized inside the app scope allowing me to call the i18n main method.

Translation

With initialization done, the only thing left was content translation.
Which in i18next is accomplished by inner html replacement in DOM elements that contain the specified i18next attribute.

I didn’t want to blind translate everything. Instead I decided to translate each backbone.js view in its rendering final stage.
Something like this:

window.ProfileView = Backbone.View.extend({
    ...
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));

        $('#profile_container', this.el).html(new ProfileInfoView({
            model: this.model
        }).render().el);

        $('.content_sub_menu', this.el).i18n();

        return this;
    }
});
Advertisements
Previous Post
Leave a comment

7 Comments

  1. I’m the author of i18next. Not sure why jsperanto is like i18next on steroid? could you explain? i mean i18next is based on the jsperanto api but bringing stuff like proper pluralization, context, interpolation, sprintf, …?!? just wonder 😉

    Reply
    • toxinheadricky

       /  January 9, 2014

      Id have to say Jan, great work, but i18next has the choppiest documentation i have ever came across.

      Reply
  2. At the time jsperanto felt more complex, probably due to the documentation (smaller), but that doesn’t mean in terms of functionality its superior to i18next. (like steroids they make you feel bigger but not stronger) 🙂
    i18next at the time for me felt cleaner, allowing me to understand the concept quicker.

    But you are right, reading my sentence now, it just gives the wrong idea. (will add an edit note to it)

    The truth is I loved to use i18next and will probably use it again in a near future in a more i18n demanding project, thank you for the awesome project 🙂

    Reply
  3. Hi Pedro,

    Your blog post is like the last drop for my decision of i18n solution.
    Today I made research, and here is results: http://landike.blogspot.com/2013/09/x-ation-on-javascript.html

    And i’m still not sure about what to choose.

    Can I get rid of i18next data-i18n ? I plan to use i18n app inside of Underscore templates, and I’m not found of data- attributes.

    Pedro, have u tried another way?

    Jan, in case u this this comment – Is there any chance to implement Underscore injection with your i18next via helpers or just simple insert ?

    Reply
  4. Jordi

     /  November 21, 2013

    Hi, I am evaluating the possibility of using i18next, but I couldn’t find the clue about something yet though… So maybe someone could help… 🙂
    As far as I can see the whole tool is ‘perfect’ when using a client side template engine, but what about backend templating? does it work on it? if so, any special markup is required? (IE data-whatever=’key’)?
    Any tip? useful link?
    anyway, interesting article and ‘so far looks like’ great i18 tool!
    thanks!

    Reply
  1. Introduction à i18next la traduction côté client
  2. X-ation on JavaScript | Work'n'Me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s