JavaScript Globalization Overview
Overview page that shows what solutions exist for JavaScript globalization (internationalization and localization). What is missing. What overlaps. Why each library was created. What are their goals, strengths and weaknesses.
Summary
ECMA-402
The standard native implementation. It provides collation (string comparison), number formatting, and date and time formatting. The API was developed by a working group with members from Google, Microsoft, Mozilla (Norbert Lindenberg), Amazon, and IBM.
Strengths
- Best performant on both speed and size. Speed, because it's native compiled code, which runs faster than interpreted JavaScript code from libraries. Size, because again it's native compiled code, which requires no extra JavaScript or resource loading (it relies on compiled i18n data) to be executed.
Weaknesses
- Limited browser support (it may NOT be supported by your target client).
- Lack of a resource loading mechanism (certain locale may NOT be available on your target client).
- Inconsistency. Different browsers may give different results.
Links
- http://www.ecma-international.org/ecma-402/1.0/
- http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html
- http://generatedcontent.org/post/59403168016/esintlapi (locale support)
Cldrpluralruleparser
Standalone library created by Santhosh Thottingal that provides CLDR plural rule parsing. Used by Wikimedia Foundation.
Strengths
- Based on CLDR data (largest and most extensive i18n repository).
- No bugs due to outdated i18n content (it has no hard coded i18n data).
- Consistency. Same results are obtained across browsers.
Links:
FormatJS
FormatJS is a modular collection of JavaScript libraries for
internationalization that are focused on formatting numbers, dates, and strings
for displaying to people. It includes a set of core libraries that build on the
JavaScript Intl
built-ins and industry-wide i18n standards, plus a set of
integrations for common template and component libraries.
Strengths:
- Integrates with template/component libraries: Handlebars, React, and Dust.
- Modular, integration libs (above) are built on core libraries: intl-mesageformat, intl-relativetime.
- IE6+ support, automated testing in IE7+.
- Built on standards: ECMA-402, CLDR, and ICU Message syntax.
Weaknesses:
- No parsing beyond what the
Date
andNumber
build-ins provide.
Links:
- http://formatjs.io/
- http://formatjs.io/github/ (packages)
Globalize
A jQuery project, initially created to fullfil jQuery UI (datepicker and spinner widgets). It provides number formatting and parsing, date and time formatting and parsing, message formatting, and plural support.
The design goals are (a) to leverage the official CLDR JSON data, (b) allow users to load as much or as little data as they need, (c) avoid duplicating data if using multiple i18n libraries that leverage CLDR, and (d) run in browsers or node.js.
Strengths
- Based on CLDR data (largest and most extensive i18n repository).
- No bugs due to outdated i18n content (it has no hard coded i18n data).
- Consistency. Same results are obtained across browsers.
- Allow different locale instances running simultaneously.
Links:
Google Closure i18n
Part of the larger Closure library, based on CLDR data. Provides number formatting and parsing, date and time formatting and parsing, message formatting (including plural and gender support), access to some of the CLDR data (like currency symbols).
Strengths
- Based on CLDR data (largest and most extensive i18n repository).
- Consistency. Same results are obtained across browsers.
Weaknesses
- Supports only one locale at the time (default model, can be bypassed).
Links
- https://developers.google.com/closure/
- http://docs.closure-library.googlecode.com/git/namespace_goog_i18n.html
ibm-js/ecma402
JavaScript implementation of some of the ECMA-402 APIs as developed by IBM. It provides number formatting and date and time formatting, but not collation. The package was primarily developed by John Emmons (IBM), who is the chairman of the Unicode CLDR Technical Committee. Members of IBM's Dojo development team assisted with many of the resource loading issues.
Strengths
- Based on CLDR data (largest and most extensive i18n repository).
- Consistency. Same results are obtained across browsers.
- Provides a "shim" feature, which allows the native ECMA-402 implementation to be used when available.
- Allows multiple locales to be available to the application.
Weaknesses
- Official version not yet released - still under development.
Links
iLib
iLib is a library of Javascript internationalization routines implemented in pure Javascript without many dependendencies on other libraries. It is the i18n library used in webOS, which is currently shipping on millions of LG SmartTVs.
Strengths:
- Completeness. Goal is to be the "ICU" of Javascript!
- Runs in rhino, nodejs, various browsers and webOS
- Based on CLDR
- Over 15,000 unit tests
Weaknesses:
- Code is large. Needs to be modularized and to support more of a jquery-style plugins.
- Needs some performance enhancements
Links:
- http://sourceforge.net/projects/i18nlib/
- http://demo.jedlsoft.com/
- http://docs.jedlsoft.com/ilib/jsdoc/
jquery.i18n
jQuery based library port of MediaWiki's client side localization framework. Used by Wikimedia Foundation. Uses JSON based message file format(aka. banana format). Messages are in MediaWiki's own syntax. Supported Plural, Gender, Grammer, Number formatting. Also supports recursive nesting of plural, gender, grammar etc.
Strenghts
- Based on CLDR data (largest and most extensive i18n repository).
- Consistency. Same results are obtained across browsers.
- Message validators (https://www.npmjs.org/package/grunt-banana-checker)
Weaknesses
- jQuery based library.
Links:
Messageformat.js
Standalone library created by Alex Sexton that provides ICU MessageFormat support, with built-in SelectFormat and pluggable PluralFormat.
Strengths
- Precompile formatter for faster/smaller runtime.
Links:
Grid
ECMA-402 Native |
Cldrpluralruleparser santhoshtr/cldrpluralruleparser |
Globalize jquery/globalize |
Messageformat.js slexaxton/messageformat.js |
FormatJS formatjs.io |
iLib ilib |
jquery.i18n wikimedia/jquery.i18n |
Closure https://developers.google.com/closure/ |
|
---|---|---|---|---|---|---|---|---|
Functionality | ||||||||
Date Formatnew Date() ⟹ Oct 23, 2014, 9:00:00 AM
|
Via ECMA-402 or its polyfil |
|||||||
Date Parse Oct 23, 2014, 9:00:00 AM ⟹ new Date()
|
||||||||
Relative Time Formatnew Date() ⟹ last month
|
Via intl-relativeformat |
goog.date.relative. No localized data, loading translation with goog.getMsg |
||||||
Date Range Format Jan 11-13, 2015 |
||||||||
Calendar Manipulation Aban 1, 1393 (Persian) |
||||||||
Time Zone Manipulation Jan 13, 1am New York time |
||||||||
Number Format12734.89 ⟹ 12,734.89
|
Via ECMA-402 or its polyfil |
|||||||
Number Parse 12,734.89 ⟹ 12734.89
|
||||||||
Unit Format 1,234.56 feet, 98 minutes |
||||||||
Unit Conversion 1 mile ⟹ 16.09 km |
||||||||
Name Format ("John", "James", "Smith") ⟹ "John James Smith" |
||||||||
Name Parse "John James Smith" ⟹ ("John", "James", "Smith") |
||||||||
Address Format ("Santa Clara", "CA", "USA", "94044") ⟹ Santa Clara, CA 94044 USA |
||||||||
Address Parse Santa Clara, CA 94044 USA ⟹ ("Santa Clara", "CA", "USA", "94044") |
||||||||
Phone Number Format ("1", "650", "5551212") ⟹ 1 (650) 555-1212 |
20 locales |
|||||||
Phone Number Parse 1 (650) 555-1212 ⟹ ("1", "650", "5551212") |
20 locales |
|||||||
Phone Number Normalization "5551212" ⟹ ("+", "1","650", "5551212") |
||||||||
Phone Number Geolocation ("0112345678", "France") ⟹ "Paris" |
||||||||
Charset Mapping Shift-JIS ⟹ Unicode |
||||||||
Plural3 ⟹ few
|
Powered by santhoshtr/cldrpluralruleparser |
Powered by santhoshtr/cldrpluralruleparser |
||||||
Resource BundlegetString(id) ⟹ "resource string"
|
||||||||
Message FormatYou have {count, plural, one {1 item} other {# items}} ⟹ You have 5 items
|
Powered by slexaxton/messageformat.js |
Via intl-messageformat |
Extensible mediawiki message format |
|||||
Unicode Normalization Algorithm | ||||||||
Code Point Support | ||||||||
Glyph Support | ||||||||
Locale-sensitive Capitalization | ||||||||
Unicode Character Properties |
(via the CType functions) |
|||||||
Template integration | Handlebars React Dust |
Closure Templates https://developers.google.com/closure/templates/ |
||||||
Collation |
limited locales so far |
Wrapper, calls the native ECMA-402 implementation if available, the old localeCompare if not. | ||||||
I18n data | Compiled | CLDR >= 25 | Compiled Based on CLDR |
Compiled or Dynamic load Based on CLDR 22.1 |
CLDR >= 25 | Compiled Based on CLDR |
||
Support | ||||||||
Environments | Globals | AMD CommonJS Globals |
AMD CommonJS Globals |
AMD CommonJS Globals |
ES6 CommonJS Globals |
Globals | ||
Node.js | >= 0.12en only by default
|
|||||||
Browser | Chrome: 24 Firefox: 29 Safari: N/A Opera: 15 IE: 11 Reference MDN. |
Chrome: (Current - 1) or Current Firefox: (Current - 1) or Current Safari: 5.1+ Opera: 12.1x, (Current - 1) or Current IE: 8 (needs ES5 polyfill), IE9+ |
All ES3+ including IE6 | Chrome: 20+ Firefox: 25 Safari: 5.1+ IE: 9+ |
||||
Mobile | iOS: 6.1+ Android: 2.3, 4.0+ |
Android iOS |