ui-I18n Proposal #173

orneryd · 2014-02-02T06:01:51Z

due to the verbose nature of a couple of the i18n libraries out there and working on ng-grid 3.0 and wanting a lightweight version of i18n support I created a module that seems to be fairly lightweight and performant.

you can compare the performance of thousands of bindings against angular-translate here:

angular-translate 11K rows of bindings

ui-i18n 14K rows of bindings

setup:

var uiI18n = angular.module('ui.i18n');
// adding english here, the array specifies all the matchable languages for the strings.
uiI18n.add(["en", "en-us"],{
    groupPanel:{
        description:'Drag a column header here and drop it to group by that column.'
    },
    example: "I speak English"
});
uiI18n.add("de",{
    groupPanel:{
        description:'Ziehen Sie eine Spaltenüberschrift hierhin um nach dieser Spalte zu gruppieren.'
    },
    example: "I speak Something Else"
});

NOTE: you can lazy load strings and it will extend the current set of strings with the new ones

var uiI18n = angular.module('ui.i18n');
//calling this later:
uiI18n.add(["en", "en-us"],{
    groupPanel: {
        otherText: 'some other group property text'
    },
    anotherExample: "I speak A Different Language"
});
// results in 
"en"/"en-us": {
    groupPanel:{
        otherText: 'some other group property text',
        description:'Drag a column header here and drop it to group by that column.'
    },
    example: "I speak English",
    anotherExample: "I speak A Different Language"
}

You can set the language via directive

<!-- directly-->
<body ui-i18n="en">
<!-- or via bindable $scope property-->
<body ui-i18n="bindableProperty">

Or, through a module method:

angular.module('ui.i18n').set("en-us");

Usage:
You can use it as an attribute, element, or filter, see all the different possibilities below

 <h3>Using attribute:</h3>
    <p ui-t="groupPanel.description"></p>

    <p ui-t="example"></p>

    <p ui-t>groupPanel.description</p>

    <p ui-t>example</p>

    <p ui-t="invalid.translation.path"></p>

    <p ui-t>invalid.path</p>

    <p ui-t>invalid.translation.again</p>


    <h3>Using element:</h3>
    <ui-t>example</ui-t>
    <br/>
    <ui-translate>groupPanel.description</ui-translate>
    <br/>
    <ui-t>invalid.path</ui-t>
    <br/>
    <ui-t>invalid.translation.again</ui-t>

    <h3>Using Translate Filters:</h3>

    <p>{{"groupPanel.description" | t}}</p>

    <p>{{"example" | t}}</p>
    <p>{{"invalid.path" | t}}</p>

    <p>{{"invalid.translation.again" | translate}}</p>

Bonus:
{{}} expressions work in the directive syntax also.
Caveat, this does impact performance a little bit.. even using this syntax its still about 2-3x faster than angular-translate with a similar amount of rows but you should know.

 <p ui-t="groupPanel.{{desc}}"></p>

it will alert you to missing translations with "[MISSING]: invalid.path" in place of where the translations should be.

All feedback is greatly appreciated.

here is a plunk for your enjoyment:
ui-i18n plunk

c0bra · 2014-02-06T17:03:51Z

Tim, can the ui.i18n module expose a service for doing all these things, rather than having properties that dangle off the module object? That would let us leverage DI, and would prevent issues with the module not existing when the language packs try to use it, depending on file execution order.

waltersurf · 2014-02-12T16:11:42Z

This looks really nice. Any plans on parameter support? I mean something like "You have %1 credits left".

orneryd · 2014-03-08T22:24:26Z

@c0bra I added a service wrapper for the module syntax is the exact same except for a new method getCache() which returns the module _cache

orneryd · 2014-03-08T22:26:53Z

@waltersurf, right now if you want to format a string you can pipe it to a filter or use angular's builtin formatting for the result of the string. there shouldn't be anything preventing that. Can you play with it and see if you find any issues?

…ui-i18n

waltersurf · 2014-03-11T12:07:48Z

Timothy, you're right it works fine like that. Having to use another filter adds some length to the syntax, but then again this is the more rare use case. Also this way the parameter markup is not dictated by the translation library, which is nice.

knalli · 2014-03-22T12:32:25Z

fyi: I've rebased the angular-translate demo on the current 2.0.1: http://jsfiddle.net/knalli/f9fe8/1/

blueimp · 2014-04-09T09:27:56Z

I'm the author of angular-localize, a localization implementation for AngularJS which focuses on the best possible performance.
You might wanna have a look and see if it would be a good fit.

0x-r4bbit · 2014-04-10T14:47:13Z

Would love to see some benchmarks here :)

orneryd · 2014-04-11T16:30:54Z

If someone wants to throw together a JSPerf comparison that would be cool. I don't have the time at the moment. This also focuses on being as lightweight as possible, such as not dictating any syntax for string formatting or pluralization since those are already features of angular.

blueimp · 2014-04-12T01:56:25Z

ng-pluralize falls short if you want to combine pluralization with gender selection.

Both angular-translate and angular-localize make use of MessageFormat.js, which is based on a standard, allows precompilcation of the translation functions and is - based on my research looking at implementations of Gettext and various custom string replacement libraries - the best available solution for a flexible JavaScript localization implementation.

I've created a console timed test for angular-localize here:
http://jsfiddle.net/blueimp/LQxX4/

The code used in the JSFiddle is also suitable for JSPerf, I've created one with a duplicate here:
http://jsperf.com/angularjs-localization
This would of course be much more interesting to run against a different localization library.
The JSPerf test includes a check for each node that is run after each sample to make sure the localization was correct, which makes the test run a little bit slow.

Generally though, I'm not sure if the JSPerf setup is the best way to analyze the performance.
In my own research, I've used the Chrome developer tools and the Batarang extension to check the performance on a real world website.

Btw., although I really recommend Messageformat, angular-localize is independent of this format, as it simply uses the provided translation functions.
It's also independent of grunt-locales, although I also recommend to use it combined.

LeleDev · 2014-06-28T11:25:49Z

Can't this be merged still? impatiently waiting for that

orneryd · 2015-04-21T23:46:29Z

I updated this to work with Angular 1.3 + and also made it a provider to inject into .config blocks

I also registered it as "angular-ui-i18n" on bower.

https://github.com/timothyswt/ui-i18n

PowerKiKi · 2015-07-01T08:22:05Z

This PR seems to be obsolete. Moreover UI.Utils modules was split in individuals repositories. If still valid, please consider re-submitting on the dedicated repository.

See the README for details.

orneryd added 8 commits February 1, 2014 22:43

initial ui-i18n commit

becc864

tidy up

4c7a724

fixing bug with set(language)

774016e

simplify usage, bundle deepcopy

51cd834

jshint!

fedbcbb

ok... try again?

8a50593

forgot to check in observable support last night

8327d70

jshint you dirty dog...

5afde4d

orneryd mentioned this pull request Feb 3, 2014

refactor(angular.extend): support recursive merging (deep copy) angular/angular.js#5059

Closed

orneryd added 3 commits February 3, 2014 21:12

getting rid of callee

5b06d04

user error, please replace user.

5291087

adding docs and trying to write a test

c560344

zhukov mentioned this pull request Feb 12, 2014

Localization zhukov/webogram#36

Closed

douglasduteil added the feature label Feb 20, 2014

adding service wrapper for module

3675e70

double quotes...

3d9f2ef

orneryd added 2 commits March 8, 2014 15:30

module not angular duh...

6aefca2

Merge branch 'master' of https://github.com/angular-ui/ui-utils into …

631b227

…ui-i18n

PowerKiKi closed this Jul 1, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ui-I18n Proposal #173

ui-I18n Proposal #173

Uh oh!

orneryd commented Feb 2, 2014

Uh oh!

c0bra commented Feb 6, 2014

Uh oh!

waltersurf commented Feb 12, 2014

Uh oh!

orneryd commented Mar 8, 2014

Uh oh!

orneryd commented Mar 8, 2014

Uh oh!

waltersurf commented Mar 11, 2014

Uh oh!

knalli commented Mar 22, 2014

Uh oh!

blueimp commented Apr 9, 2014

Uh oh!

0x-r4bbit commented Apr 10, 2014

Uh oh!

orneryd commented Apr 11, 2014

Uh oh!

blueimp commented Apr 12, 2014

Uh oh!

LeleDev commented Jun 28, 2014

Uh oh!

orneryd commented Apr 21, 2015

Uh oh!

PowerKiKi commented Jul 1, 2015

Uh oh!

Uh oh!

ui-I18n Proposal #173

ui-I18n Proposal #173

Uh oh!

Conversation

orneryd commented Feb 2, 2014

Uh oh!

c0bra commented Feb 6, 2014

Uh oh!

waltersurf commented Feb 12, 2014

Uh oh!

orneryd commented Mar 8, 2014

Uh oh!

orneryd commented Mar 8, 2014

Uh oh!

waltersurf commented Mar 11, 2014

Uh oh!

knalli commented Mar 22, 2014

Uh oh!

blueimp commented Apr 9, 2014

Uh oh!

0x-r4bbit commented Apr 10, 2014

Uh oh!

orneryd commented Apr 11, 2014

Uh oh!

blueimp commented Apr 12, 2014

Uh oh!

LeleDev commented Jun 28, 2014

Uh oh!

orneryd commented Apr 21, 2015

Uh oh!

PowerKiKi commented Jul 1, 2015

Uh oh!

Uh oh!