Globalize ♥ CLDR – A story of jQuery, CLDR JSON and the Community – ಠ_ಠ



Globalize ♥ CLDR – A story of jQuery, CLDR JSON and the Community – ಠ_ಠ

0 0


globalize-cldr-talk

Globalize ♥ CLDR Talk

On Github rxaviers / globalize-cldr-talk

Globalize ♥ CLDR

A story of jQuery, CLDR JSON and the Community

by Rafael Xavier / @rxaviers / gh:rxaviers

jQuery

  • jQuery
  • jQuery UI
  • jQuery Mobile
  • QUnit
  • Sizzle
  • Globalize
<!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

Maintenance burden

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 6th Issue Reported 0 days Sep 18th CLDR v26 Released 43 days Nov 5th Today 91 days and counting...

angular.js

src/ngLocale/angular-locale_ca-it.js

@ master

git.io/NrqQ7A

ಠ_ಠ

You have 0 message.
<!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

  • Safari
  • Firefox
  • Chrome
  • Opera
  • Internet Explorer

  • 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"

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

  • Globalize
  • CLDR
  • Node.js

Client application

  • Globalize
  • CLDR
  • Safari
  • Firefox
  • Chrome
  • Opera
  • Internet Explorer

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