Comparing JavaScript Libraries - jsi18n.comjsi18n.com/IUC39JSLibs.pdf-Different libraries already in use ... Tex Texin Globalization Architect, XenCraft Tex Texin is an industry thought

Comparing JavaScript Libraries

Craig Cummings, Tex Texin

www.XenCraft.com

October 27, 2015

WhichJavaScriptlibraryisbestforinternationaldeployment?ThissessionpresentstheresultsofseveralyearsofinvestigationoffeaturesofJavaScriptlibrariesandtheirsuitabilityforinternationalmarkets.WewillshowhowthelibrarieswereevaluatedandcomparetheresultsforECMA,Dojo,jQueryGlobalize,Closure,iLib,ibm-js andintl.js.TheresultsmaysurpriseyouandwillbeusefultoanyonedesigningnewinternationalormultilingualJavaScriptapplicationsorsupportingexistingones.

Abstract

2

Agenda

• Background• Evaluation Criteria• Libraries• Results• Q&A

3

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

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

• 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

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

8

Candidate Libraries

AccDCAmple SDKCupQDHTMLXDojoEcho3EnyoExt JSGoogle Web Toolkiti18nextjQueryMidoriMochiKit

MooToolsPhoneJSPrototypePyjamasqooxdooRialto ToolkitRicoSmartClient & SmartGWTWakandaWeb Atoms WebixYUIZK

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

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

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

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

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

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

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

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

js-i18n.com

17

http://js-i18n.com

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

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

Rafael Xavier Comparison Matrix(https://libraries.io/github/rxaviers/javascript-globalization)

20

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

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

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

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

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

26

Questions?

Craig R. CummingsPrincipal Software Engineer – I18n, Informatica

Craighasbeenworkinginthefieldofsoftwareglobalizationforovertwentyyears.BeforehisroleatInformatica,CraigwasatZyngamakinggamesinavarietyoflanguagesincludingArabic.Beforethat,atYahoo!Inc.,hehelpeddrivecorporatetechnicalstrategyforinternationalizationwithaparticularfocusonMiddleEasternmarkets.Priortothat,CraigwaswithOracle'sApplicationsglobalizationteamwhereheworkedcloselywithSun'sinternationalizationteamtoshapesomeofthepluggablelocale,resourcebundle,font,andsupplementarycharactersupportinJava.

27

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