Internationalizing Javascript Applications Norbert Lindenberg
Internationalizing JavaScript Applications Norbert Lindenberg
© Norbert Lindenberg 2013. All rights reserved. Agenda
• Unicode support • Collation • Number and date/time formatting • Localizable resources • Message construction
2 JavaScript is…
• ECMAScript Language • ECMAScript Internationalization API • Browser: DOM, Navigator, XMLHttpRequest • Server: Node.js • Platforms: Firefox OS, Windows 8, Phonegap • Libraries: jQuery, Dojo, YUI, GWT, Node modules, etc.
3 ECMAScript
• Language Speci!cation • Developed by Ecma TC 39 • Language syntax and semantics • Core API: Object, String, Array, RegExp, ... • Edition 5.1 current • Edition 6 expected December 2014
4 ECMAScript
• Internationalization API Speci!cation • Developed by Ecma TC 39 + experts • API: Collator, NumberFormat, DateTimeFormat • Edition 1 approved December 2012 • Chrome, Opera, Explorer, Windows shipped; Firefox, Node.js coming • Edition 2 expected December 2014
5 Unicode Unicode support
• All text in UTF-16 internally • UTF-8 well supported for transport • Need to identify charset in
41 Injecting strings into JavaScript
• Problems: • Mixes multiple programming languages • Can introduce syntax errors through localization
42 Bundling resources with JavaScript • Server knows locale when serving JS • Bundles resources with JavaScript • Convert to JavaScript/JSON • Concatenate with other JavaScript • Resources: var MyResources = {HELLO: "안녕하세요"}; • Code: alert(MyResources.HELLO);
43 Loading resources at runtime
• Locale not known until runtime • Request resources at runtime • Using XMLHttpRequest • By creating script tag • Resources in JSON or module format
44 Loading resources at runtime • Cross-domain support? • Not with XMLHttpRequest • Possible with script tag • Synchronous access? • More convenient programming model • Can lock up browser • BCP 47 support? • Many loaders assume aa-AA format
45 Access to resources in libraries • Dojo • Loading at runtime, synchronous • GWT • Injecting resources (Constant) • Bundling resources (with HTML, Dictionary) • YUI • Bundling resources via module loader
46 Message construction
Photo © Den Widhana Message construction
• Substitution • {user} went to {city}. • {user}さんは{city}へ行きました。
48 Message construction
• Plurals • {user} est allé à {city}. • {user1} et {user2} sont allés à {city}. • 1-6 forms depending on language • {number, plural {one {...} few {...} many {...}}}
49 Message construction
• Gender • {user} est allé à {city}. • {user} est allée à {city}. • 1-4 forms depending on language • {gender, select {female {...} male {...} unknown {...}}}
50 Message construction
{gender, select { female {num, plural { one {{user1} est allée à {city}.} other {{user1} et {user2} sont allées à {city}.}}} male {num, plural { one {{user1} est allé à {city}.} other {{user1} et {user2} sont allés à {city}.}}} }}
51 Message construction
• Google has MessageFormat for Closure environment • Alex Sexton provided standalone version • Mozilla has even more ambitious L20n library
52 Summary
• ECMAScript Internationalization API provides core functionality • http://norbertlindenberg.com/2012/12/ ecmascript-internationalization-api/ • Libraries provide more internationalization support than you may think • http://norbertlindenberg.com/2013/10/ javascript-internationalization/
53