![Page 1: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/1.jpg)
Comparing JavaScript Libraries
Craig Cummings, Tex Texin
www.XenCraft.com
October 27, 2015
![Page 2: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/2.jpg)
WhichJavaScriptlibraryisbestforinternationaldeployment?ThissessionpresentstheresultsofseveralyearsofinvestigationoffeaturesofJavaScriptlibrariesandtheirsuitabilityforinternationalmarkets.WewillshowhowthelibrarieswereevaluatedandcomparetheresultsforECMA,Dojo,jQueryGlobalize,Closure,iLib,ibm-js andintl.js.TheresultsmaysurpriseyouandwillbeusefultoanyonedesigningnewinternationalormultilingualJavaScriptapplicationsorsupportingexistingones.
Abstract
2
![Page 3: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/3.jpg)
Agenda
• Background• Evaluation Criteria• Libraries• Results• Q&A
3
![Page 4: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/4.jpg)
Origins
• Project to extend globalization-Complex e-Commerce Software-Multiple subsystems-Different development teams-Different libraries already in use
• Should we standardize? Which one?-Reduce maintenance- Increase competence
4
![Page 5: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/5.jpg)
Evaluation Criteria
• Support for target and future markets• Number of internationalization features• Quality of internationalization features• Maintained?• Widely used?• Ease of migration from existing libraries• Browser compatibility
5
![Page 6: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/6.jpg)
• Encoding Support-Unicode-Supplementary Chars-Bidi algorithm, shaping-Character Properties-Charset detection-Conversion- IDN/IRI-Normalization-Collation
• Text Support-Case, Accent Mapping-Boundary detection-Transliteration
• Message Formatting-Resource/properties
files-Plurals, Gender, et al
6
Internationalization Feature Requirements
![Page 7: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/7.jpg)
• Regular Expressions
• Compression
• Locales-Names (BCP 47)-Negotiation-Fallback-Detection
• Data formats-Date, time, calendar-Time zone-Number, Currency-Postal Address-Names, Honorifics-Phone numbers
• Measurement systems
7
Internationalization Feature Requirements (more)
![Page 8: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/8.jpg)
8
Candidate Libraries
AccDCAmple SDKCupQDHTMLXDojoEcho3EnyoExt JSGoogle Web Toolkiti18nextjQueryMidoriMochiKit
MooToolsPhoneJSPrototypePyjamasqooxdooRialto ToolkitRicoSmartClient & SmartGWTWakandaWeb Atoms WebixYUIZK
![Page 9: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/9.jpg)
9
I18n Libraries(general libraries left; messages-specific right)
ECMA (402+262)DojojQuery GlobalizeClosureiLibibm-jsintl-js
moment.jsnumeral.jsdate.jsjQuery.now
jQuery.i18n (Wikimedia)L20n (Mozilla)FormatJS
CLDRPluralRuleParserI18Nextmessageformat.jsl10n.jsl10nsbrowser-i18nrequirejs-i18n
![Page 10: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/10.jpg)
The ECMA I18n Standard
• Why not rely on the new standard?-ECMA-402
• 1st Edition released Dec, 2012• 2nd Edition released Jun, 2015-ECMA-262 (supplementary character support)
• 6th Edition released Jun 2015-More details at site of one of authors
• http://norbertlindenberg.com/2013/10/javascript-internationalization/index.html
10
![Page 11: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/11.jpg)
Desirable Features
- Cross-browser compatibility – including Safari• Desktop, Mobile, Node.js, Older versions
- Based on CLDR Locale Data- Based on ICU (see next slide)- Ease of data update and customization
• Time zone data (Olson/IANA)• CLDR locale corrections and additions
- Part of a larger (useful) JS platform-Well-performing (CPU, download size, disk, memory)
11
![Page 12: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/12.jpg)
ICU Value (Skeleton Dates)
DateFormat(DateFormat.FULL) SimpleDateFormat ICU Skeleton = JS Results
English Wednesday, December 23, 2015 Wednesday December 23 2015Wednesday, December 23, 2015
French mercredi 23 décembre 2015 mercredi décembre 23 2015 mercredi 23 décembre 2015
German Mittwoch, 23. Dezember 2015 Mittwoch Dezember 23 2015 Mittwoch, 23. Dezember 2015
Spanish miércoles 23 de diciembre de 2015 miércoles diciembre 23 2015 miércoles, 23 de diciembre de 2015BrazilianPortuguese Quarta-feira, 23 de Dezembro de 2015 quarta-feira dezembro 23 2015 quarta-feira, 23 de dezembro de 2015
Japanese 2015年12月23日 水曜日 12月 23 2015 2015年12月23日水曜日
Korean 2015년 12월 23일수요일 수요일 12월 23 2015 2015년 12월 23일수요일SimplifiedChinese 2015年12月23日星期三 星期三十二月 23 2015 2015年12月23日星期三
12
![Page 13: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/13.jpg)
Scoping
• Need to limit investigation• Writing tests and reviewing each feature
for each library would take a large effort• Reduced list of libraries (sort of; see next bullet)
-Already in use or strongly recommended-ECMA, Dojo, jQuery Globalize, iLib, Closure, ibm-
js, intl.js (honorable mention to moment.js & numeral.js)
• Plus a plethora of message formatting libs13
![Page 14: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/14.jpg)
Minimal Feature Requirements(Ideally in one library)
• Encodings-Detection, Supplementary characters, Conversion
• Locales: European and Asian Markets• Data Formats-Dates, times, numbers, currency-Localized Gregorian calendar
• Message formatting, Externalized text• IDN, IRI
14
![Page 15: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/15.jpg)
Updated Goals
• Adequate i18n for foreseeable future• Meets minimal i18n requirements• Meets browser requirements• Acceptable to development teams• Part of a larger library• Easy to update data• Easy to migrate to
15
![Page 16: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/16.jpg)
Example Challenge: Dates
• 142 different date formats in use• 300+ different date formats in use
• Unclear history or requirements for each format• Unclear how to internationalize some formats• Unclear whether to internationalize some formats-A little clearer as some of these derive from
different databases, programming languages, and standards.-Still a mess!
16
![Page 17: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/17.jpg)
js-i18n.com
17
http://js-i18n.com
![Page 18: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/18.jpg)
Passing Unit Tests
Lib DFO DFO All DTF DTF All NF NF All
Dojo 124/156 1883/2732 51/624 839/10928 38/39 587/683
Globalize 139 2577 89 1404 37 669
iLib 134 2378 0 0 39 660
Closure 151 2627 72 1235 39 682
ECMA 119 2179 232 1488 39 671
ibm-js 98 2179 168 1672 39 676
Intl.js 119 2179 232 1488 39 671
18
DFO = Date format onlyDTF = Date and time formatNF = Number format
![Page 19: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/19.jpg)
Measure by Caveats
• iLib
- Comes out-of-the-box with only 20 locales
• Instructions about building more are hard to find
• Dojo and ibm-js
- 600+ additional locales can be built with relative ease. Tools and instructions available per readme files in package.
- ibm-js readme lacks links to 2/3 require-related libraries
• JQ on server/browser (not node.js) is painful. Even then needs tweaking to remove locales from jQuery require
19
![Page 20: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/20.jpg)
Rafael Xavier Comparison Matrix(https://libraries.io/github/rxaviers/javascript-globalization)
20
![Page 21: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/21.jpg)
Feature Comparison Eye Chart
Feature iLib Closure Globalize Dojo ibm-js/Intl.js/ECMA
Locale 683 682 683 683 683
CLDR Locale Data ✔ ✔ ✔ ✔ ✔
Date/Time ✔ ✔ ✔ ✔ ✔
Number/Currency/Percentage ✔ ✔ ✔ ✔ ✔
International Calendars ✔ ✔ ✔ ✔
Parsing ✔ partial ✔
Collation ✔ ✔
Bidi ✔ ✔
21
†iLib additionally has support for time zone, measurement, name, address and phone formats as well asresource files, Unicode normalization, case mapping, encoding conversion and more
†† ECMA (and ibm-js & intl.js) has (have) extensive locale detection, negotiation, and fallback support††† Notably still missing is support for boundary detection/wrapping, Unicode regex, and IDNs/IRIs
![Page 22: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/22.jpg)
Message Library Comparison
Lib Concat Gender Plural Ordinal Grammar CustomFormatJS ✔ ✔ ✔ ✔ ✔
JQ I18n ✔ ✔ ✔ ✔
L20N ✔ ✔ ✔ ✔
CldrPlural ✔ ✔
JQ Globalize ✔ ✔ ✔
Closure ✔ ✔ ✔ ✔
messageformat.js ✔ ✔ ✔
i18next ✔ ✔ ✔
l10ns ✔ ✔ ✔ ✔
browser-i18n ✔ ✔
iLib ✔ ✔ ✔
ECMA
22
![Page 23: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/23.jpg)
Conclusion
• Further investigation and recent changes indicate better i18n coverage in “basic” areas (a problem noted in the past)- Improvements on mobile
• ECMA could use more consistent results across browsers
• Extensive evaluation is nice to have; scoping to near-term needs is practical- Risks repeating and replacing library in the future
23
![Page 24: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/24.jpg)
Resources
• ECMA-ECMA-402 Edition 2
• http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf
-ECMA-262 Edition 6 (supplementary characters)• http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
-Mozilla Developer Network• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
24
![Page 25: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/25.jpg)
Resources (other libraries)
Dojo https://dojotoolkit.org/
jQuery Globalize https://github.com/jquery/globalize
iLib http://sourceforge.net/projects/i18nlib/
Closure https://github.com/google/closure-library
ibm-js https://github.com/ibm-js/ecma402
Intl.js https://github.com/andyearnshaw/Intl.js/
25
![Page 26: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/26.jpg)
26
Questions?
![Page 27: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/27.jpg)
Craig R. CummingsPrincipal Software Engineer – I18n, Informatica
Craighasbeenworkinginthefieldofsoftwareglobalizationforovertwentyyears.BeforehisroleatInformatica,CraigwasatZyngamakinggamesinavarietyoflanguagesincludingArabic.Beforethat,atYahoo!Inc.,hehelpeddrivecorporatetechnicalstrategyforinternationalizationwithaparticularfocusonMiddleEasternmarkets.Priortothat,CraigwaswithOracle'sApplicationsglobalizationteamwhereheworkedcloselywithSun'sinternationalizationteamtoshapesomeofthepluggablelocale,resourcebundle,font,andsupplementarycharactersupportinJava.
27
![Page 28: Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought](https://reader031.vdocuments.net/reader031/viewer/2022022507/5aca69da7f8b9a7d548dd33c/html5/thumbnails/28.jpg)
Tex TexinGlobalization Architect, XenCraft
TexTexinisanindustry thoughtleaderspecializinginbusiness andsoftwareglobalizationservices.Hisexpertiseincludes globalproductstrategy,Unicodeandinternationalizationarchitecture,andcost-effectiveimplementation andtesting.Overthepasttwodecades,Texhascreatednumerous globalproducts,ledinternationalizationdevelopment teams,andguidedcompanies intakingbusiness tonewregionalmarkets.
TexisacontributortoseveralinternationalizationstandardsforsoftwareandontheWeb.Heisonthesteeringcommitteesofopen sourceproducts andtheprogramcommitteesforUnicodeandotherconferences.
Texisapopular speakeratconferencesaroundtheworldandprovides on-sitetrainingonUnicode, internationalization,andglobalizationworldwide.
TexmaintainstwoWebsitesforinternationalization,thepopular, instructional www.I18nGuy.com siteandthesiteforhisbusiness www.XenCraft.com.
TexisfounderandChiefGlobalizationArchitectforXenCraft.XenCraftprovides globalbusiness consulting andsoftwaredesign,implementation, testandtrainingservicesonglobalizationproductstrategyandsoftwareinternationalizationarchitecture.
28