Building World-ready Applications in JavaScript Becoming a Reality

October 4th, 2012

We consistently hear from developers that today’s JavaScript standard lacks a few basic objects and library helpers that are vital for building rich, world-wide Web applications. Last year, we shared a reference implementation of an emerging proposal for an Internationalization API for JavaScript. This API introduces support for number formatting, date and time formatting, and locale sensitive collation or string comparison. Given that this limitation fundamentally prevents world-ready sites from being written interoperably on the standards Web platform; the working group, which includes members from Amazon, Google, Mozilla, and Microsoft, have collaborated to finalize the draft specification ahead of the draft ECMAScript 6 specification. A couple of weeks ago, the standards committee met in the Computer Science department on the campus of Northeastern University and finalized the proposed API. We have updated our reference implementation to match the current draft of the specification.

We’ve also published a demo to illustrate the use of this API in to visualize Foreign Currency Exchange. This is a common Web scenario that today has to be written using a plug-in, a browser extension, or through interaction with the server. Play with the demo, open the JavaScript console to interact with the API, and give us feedback.

Charting Historical Foreign Currency Exchange with the Internationalization API

Perusing sites like Google Finance, Yahoo Finance, FXCM, ForXCharts, and other ForEx sites, a pattern emerges: all of these sites implement their user experience using a combination of plug-ins, extensions, or constructs which require server round-tripping for interactivity. Because these sites need to format currencies, present dates according to a specific locale, and sort strings like stock tickers with locale specific string comparison, the Web platform comes up short for them today.

1) Yahoo Finance ForEx Chart using Flash to format numbers 2) Google Finance using Flash to format DateTime

Aside from the ActiveX control which provides support for the API, the user experience of our ForEx test drive demo is written 100% in JavaScript. It uses jqPlot to chart the currency exchanges format dates and currencies in JavaScript. At the top of the demo, you can pick a Foreign Exchange pair, such as comparing EUR/JPY and view it with a locale specific date format by selecting the ja-JP-u-nu-latin language tag. When you hit the “Plot with Intl” you’ll see the JavaScript API in action.

Overview of the JavaScript Internationalization API

Web applications are harder to globalize than native applications because JavaScript does not provide access the native date and currency formats in the underlying OS. All JavaScript implementations run on top of operating systems that include comprehensive internationalization libraries that have varying degrees of support. With the introduction of this API, there will be a standard interface for accessing these libraries. The internationalization library in Windows 8 includes support for 364 available locales, 18 numbering systems, many date patterns, and includes support for the Gregorian, Islamic, Hebrew, Buddhist, Korean, and Japanese calendars.

For the purpose of this test drive demo, the reference implementation of the emerging standard is implemented as an ActiveX extension, but once installed and enabled it works just like the planned JavaScript API will work. You can even experiment with it in the JavaScript console window.

The API itself enables three basic capabilities to the Web platform:

  • Number formatting – Format numbers with specified decimal lengths or as a currency or percentage
  • Date and Time formatting – Converts a time value into a string provided inputs of time zone, second, minute, hour, day, month, year, weekday, or era
  • Ordinal String Comparison – Formally known as collation which does locale specific string comparison

Below you can find an example of the API in action:

// Number formatting
var nf = new Intl.NumberFormat(["en-US"], {
    style: "currency",
    currency: "CNY",
    currencyDisplay: "symbol",
    maxmimumFractionDigit: 1

nf.format(100); // "¥100.00"

// Date formatting
var dtf = new Intl.DateTimeFormat(["ar-SA-u-ca-islamic-nu-latin"], {
    weekday: "long"
dtf.format(new Date()); // Prints today's week day in long format

//Collation sample
var co = new Intl.Collator(["de-DE-u-co-phonebk"]);"a", "b"); // returns -1

Next steps for the ECMAScript Standard

While the internationalization API is in the process of being ratified, the standards committee continues to refine the list of proposals for the next version of the standard, ECMAScript 6, which is targeted to be completed in 2013. As with the internationalization API, we welcome feedback on these proposals to ensure that we’re able to faithfully represent the needs of Web developers when the standards committee meets every few months.

The best way to get a feel for the proposals is to experiment with the reference implementations. We encourage you to play with the sample app or play with the prototype API in the JavaScript console to see how it feels. Once you’ve tried it out, let us know if you have any feedback or suggestions. We look forward to improving JavaScript and making it ever easier to build great Web applications using standard APIs.

— Suresh Jayabalan & Amanda Silver, Program Managers, JavaScript Team