Globalize ♥ CLDR

A story of jQuery, CLDR JSON and the Community

by Rafael Xavier / @rxaviers / gh:rxaviers 


<!doctype html5>
<html>
  <body>
    <script src="message-format.js"></script>
    <script src="number-format.js"></script>
    <script src="date-format.js"></script>
  </body>
</html>
		

You have 2 messages.
		

You have 1 message.

ಠ_ಠ


You have 0 message.

1/3

Evaluate CLDR as database

github.com/jquery/globalize/issues/128

  1. Maintenance burden

  2. Original Source = lots of problems

+350 locales

(.NET)

+740 locales

(CLDR)

✔ Multiple currencies

✔ Date relative time format

✔ ...

UTS TR#35

(The CLDR specs)

www.unicode.org/reports/tr35/

ಠ_ಠ

Embedded Data

twitter-cldr

Aug 6thIssue Reported0 days
Sep 18thCLDR v26 Released43 days
Nov 5thToday91 days and counting...

angular.js

src/ngLocale/angular-locale_ca-it.js

@ master

git.io/NrqQ7A

ಠ_ಠ


You have 0 message.
Boss Yelling 

<!doctype html5>
<html>
  <body>
    <script src="message-format__my-plural-fix.js"></script>
    <script src="number-format.js"></script>
    <script src="date-format__my-italian-fix.js"></script>
  </body>
</html>

͡° ͜ʖ ͡°


	You have 0 messages.

Maintenance?


<!doctype html5>
<html>
  <body>
    <script src="message-format__new-release.js"></script>
    <script src="number-format__new-release.js"></script>
    <script src="date-format__new-releasejs"></script>
  </body>
</html>

ಠ_ಠ


	You have 0 message.

Now what?

1. CLDR in the JSON format

cldr.unicode.org/index/cldr-spec/json

2. Developer control

3. Avoid duplicate

CLDR JSON bindings

cldr.unicode.org/index/cldr-spec/json

2013

Globalize 1.x

github.com/jquery/globalize

Where to use it?

  • Browser

  • Node.js

  • 5.1+

  • prev+

  • prev+

  • 12.1+

  • 8+

  • iOS
  • Android

  • 6.1+

  • 2.3, 4.0+

Does it support my module loader?

  • AMD

  • CommonJS

cldr.js

Simple layer to facilitate I18n software to access and use the official CLDR JSON data.

github.com/rxaviers/cldr.git

Where to use it?

  • Browser

  • Node.js

Does it support my module loader?

  • AMD

  • CommonJS

Unopiniated load mechanism


Cldr.load( json );

Unopiniated load mechanism


Cldr.load({
  main: {
    en: { ...  }
  },
  supplemental: {
    likelySubtags: { ...  },
    timeDate: { ...  },
    weekData: { ...  }
  }
});

Unopiniated load mechanism


$.get( "cldr/supplemental/likelySubtags.json", Cldr.load );

Unopiniated load mechanism


define([
  "json!cldr/supplemental/likelySubtags.json"
], function( likelySubtags ) {

  Cldr.load( likelySubtags );

});

Unopiniated load mechanism


Cldr.load( require( "cldr/supplemental/likelySubtags" ) );

Get a locale normalized


var enGb = new Cldr( "en-GB" );
locale languageId maxLanguageId language script region
en "en" "en-Latn-US" "en" "Latn" "US"
en-US "en" "en-Latn-US" "en" "Latn" "US"
en-GB "en" "en-Latn-GB" "en" "Latn" "GB"
de "de" "de-Latn-DE" "de" "Latn" "DE"
zh "zh" "zh-Hans-CN" "zh" "Hans" "CN"
zh-TW "zh-TW" "zh-Hant-TW" "zh" "Hant" "TW"
ar "ar" "ar-Arab-EG" "ar" "Arab" "EG"
pt "pt" "pt-Latn-BR" "pt" "Latn" "BR"
pt-BR "pt" "pt-Latn-BR" "pt" "Latn" "BR"
pt-PT "pt-PT" "pt-Latn-PT" "pt" "Latn" "PT"
es "es" "es-Latn-ES" "es" "Latn" "ES"
es-AR "es-AR" "es-Latn-AR" "es" "Latn" "AR"
Likely Subtags

Variable replacement

languageId = `en-GB`


enGb.get( "main/{languageId}/dates/timeZoneNames/gmtFormat" );

region = `GB`

language = `en`


enGb.get( "supplemental/territoryInfo/{region}/{language}" );

More...

github.com/rxaviers/cldr.git

ಠ_ಠ

Fetch CLDR JSON data


wget "http://www.unicode.org/public/cldr/latest/json.zip"
unzip json.zip -d cldr

CLDR as peer dependency

package.json


{
  "peerDependencies": {
    "cldr-data": ">24"
  }
}

bower.json


{
  "dependencies": {
    "cldr-data": ">24"
  }
}

Server application

Client application

bower install globalize

Examples...

github.com/jquery/globalize/tree/master/examples

Performance tuning

formatter = Globalize.numberFormatter()

10 secs
formatter( 3.141592 )

1 sec

Iterations


var formatter = Globalize( "en" ).numberFormatter();

[ 1, 2, 3.14159 ].map(function( x ) {
   return formatter( x );
});

// [ "1", "2", "3.142" ]

Server app


var formatter = Globalize( "en" ).numberFormatter();

app.get( "/", function(req, res){
  res.send( formatter( input ) );
});

Size tuning

plural( 0 )

other
plural( 1 )

one
plural( 2 )

other

 

{
  "supplemental": {
    "plurals-type-cardinal": {
      "en": {
        "pluralRule-count-one": "i = 1 and v = 0 @integer 1",
        "pluralRule-count-other": " @integer 0, 2~16, 100, 1000, 10000, 100000, 1000000, … @decimal 0.0~1.5, 10.0, 100.0, 1000.0, 10000.0, 100000.0, 1000000.0, …"
      }
    }
  }
}

+

globalize/plural.js 2.0KB

Over simplified for demonstration purposes


function( count ) {
  return count == 1 ? "one" : "other";
}

jQuery Foundation

The Mission

An open web

An accessible web

Collaboration with the development community

One thing that really struck me during my limited research was how many overlapping libraries there are especially for number and date-time formatting

Norbert Lindenberg, the creator of ECMA-402

  • Wikipedia

  • moment.js

  • CLDR

  • Dojo

  • Yahoo

  • Google

  • IBM

  • Mozilla

Public Channel

javascript-globalization@googlegroups.com

JavaScript Libraries

Comparison Grid

github.com/rxaviers/javascript-globalization/

Happy developing

Thank You

Questions?

Rafael Xavier

@rxaviers

gh:rxaviers