JavaScript Library Comparisons
www.XenCraft.com Abstract
Which JavaScript library is best for international deployment? This session presents the results of an investigation of the features of several JavaScript libraries and their suitability for international markets. We will show how the libraries were evaluated and compare the results for at least: Dojo, JQuery, and YUI. The results may surprise you and will be Comparing JavaScript Libraries useful to anyone designing new international or multilingual JavaScript applications or supporting existing ones. Craig Cummings, Tex Texin November 4, 2014
2
Agenda Origins
• Background • Project to extend globalization • Evaluation Criteria - Complex e-Commerce Software - Multiple subsystems • Libraries - Different development teams • Results - Different libraries already in use • Q&A • Should we standardize? Which one? - Reduce maintenance - Increase competence
3 4
Craig Cummings and Tex Texin JavaScript Library Comparisons
Evaluation Criteria Candidate Libraries
• Support for target and future markets AccDC MooTools Ample SDK PhoneJS • Number of internationalization features CupQ Prototype DHTMLX Pyjamas • Quality of internationalization features Dojo qooxdoo • Maintained? Echo3 Rialto Toolkit Enyo Rico • Widely used? Ext JS SmartClient & SmartGWT Google Web Toolkit Wakanda • Ease of migration from existing libraries i18next Web Atoms jQuery Webix • Browser compatibility Midori YUI 5 MochiKit 6ZK
The ECMA I18n Standard Internationalization Feature Requirements • Why not rely on the new standard? • Encoding Support • Text Support - It didn’t exist circa 2011 - Unicode - Case, Accent Mapping - Supplementary Chars - Unclear browser support - Boundary detection - Bidi algorithm, shaping - Older browser support requirements - Character Properties - Transliteration - Charset detection • Message Formatting - Conversion - Resource/properties - IDN/IRI files - Normalization - Collation - Plurals, Gender, et al
7 8
Craig Cummings and Tex Texin JavaScript Library Comparisons
Internationalization Feature Desirable Features Requirements
- Cross-browser compatibility • Regular Expressions • Data formats • Desktop, Mobile, Node.js, Older versions - Date, time, calendar • Compression - Based on CLDR Locale Data - Time zone - Based on ICU • Locales - Number, Currency - Ease of data update and customization - Names (BCP 47) - Postal Address - Negotiation - Name, Honorifics • Time zone data (Olson/IANA) - Fallback • CLDR locale corrections and additions • Measurement - Detection systems - Part of a larger (useful) JS platform - Well-performing (CPU, download size, disk, memory) 9 10
Scoping Minimal Feature Requirements (Ideally in one library) • Need to limit investigation • Encodings • Writing tests and reviewing each feature - Detection, Supplementary characters, Conversion for each library would take a large effort • Locales: European and Asian Markets • Reduced list of libraries • Data Formats - Already in use or strongly recommended - Dates, times, numbers, currency - YUI, jQuery+globalize.js, Dojo, Closure, QooxDoo - Localized Gregorian calendar • Identified features/functions actually used • Message formatting, Externalized text • IDN, IRI 11 12
Craig Cummings and Tex Texin JavaScript Library Comparisons
Updated Goals Example Challenge: Dates
• Adequate i18n for foreseeable future • 142 different date formats in use • Meets minimal i18n requirements - Unclear history or requirements for each format - Unclear how to internationalize some formats • Meets browser requirements - Unclear whether to internationalize some formats • Acceptable to development teams • Part of a larger library • Easy to update data • Easy to migrate to 13 14
Quick Comparison
YUI globalize.js Dojo Locales 81 225/353 25/35 Number Format Fair (self) Good Excellent Currency Format Fair (self) Good Good Date Format Good (strftime) Good Excellent Time Format Good (strftime) Good Excellent Calendar Format Fair (self) Excellent Good
Library Comparison Data
16
Craig Cummings and Tex Texin JavaScript Library Comparisons
Code Evaluation (js.i18nqa.com) YUI
• Advantages • 2014 Update - Robust additional I18n - Code shows strftime support flexible enough to match • BCP-47 locales and in- 12 of 16 standard ICU depth locale support date formats • JSON/YRB Resources - The 4 do not match only • Word break for time zone spellout • Disadvantages - Number formatting just as - Self-driven number and problematic currency formatting - New calendars near - strftime date formatting impossible to add
17 20
YUI Development End Dojo
• “On August 29, 2014, it was announced that active • Advantages • 2014 Update development of YUI by Yahoo! would end, citing the - CLDR formats - Unit testing reveals this evolution of the JavaScript standards, steadily decreasing harder to get running than • Number, currency, date YUI, but easier than interest in JavaScript libraries by developers, and the and time formatting Globalize. proliferation of server-side solutions. Future development - Code shows strftime flexible • Disadvantages enough to match 4 of 16 will be limited to maintenance releases addressing issues standard ICU date formats. which are absolutely critical to Yahoo properties.” - Not-as-rich locale support Mismatches due to minor - BCP-47 locale, currency, separator problems - http://yahooeng.tumblr.com/post/96098168666/im and other I18n support not - More locales available than portant-announcement-regarding-yui as well documented advertised, but problematic in actual use.
21 22
Craig Cummings and Tex Texin JavaScript Library Comparisons
jQuery/Globalize.js ECMA-402
• Advantages • Advantages • 2014 Update - Excellent implementations for locales, number and date formats, and - Very rich set of I18n support - Being rewritten; alpha collation. - International calendars state. Can’t fully review. - Supplementary character support in separate specification out this fall • Disadvantages - More difficult to set up (ECMA-262) - Date information mismatches - Now with CLDR - Built-in support with all major browsers save Safari. with CLDR/ICU - Nearly as comprehensive • Disadvantages - jQuery DatePicker’s first day of week, day name problems coverage for dates and - Message support, boundary detection, and more earmarked for stalled numbers as ECMA-402. second edition. - BCP-47 locale support not well documented - Differing results with different browsers - Mobile support currently very limited
23 24
ECMA vs ICU Comparison Conclusion
Passing Unit Tests for EMCA Support • Even popular, recommended JS libraries
I18n Support IE 11 FF 33 Chrome 38 Opera 25 lack good i18n coverage in “basic” areas Number Format (of 487 638 461 486 - A standard is needed 645) Date Format (of 0 4841 1939 2067 • Extensive evaluation is nice to have, 10320) scoping to near-term needs is practical Browser Independent - Risks repeating and replacing library in the future jQuery globalize number format 585/645 Dojo number format ~487/645
25 27
Craig Cummings and Tex Texin JavaScript Library Comparisons
YUI Resources Dojo Resources
• YUI I18n Doc • Dojo doc - http://yuilibrary.com/yui/docs/intl/
- http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/intl/index.html - http://dojotoolkit.org/documentation/tutorials/1.9/i18n/ • YUI Numbers/Currencies - http://dojotoolkit.org/reference- - http://yuilibrary.com/yui/docs/datatype/datatype-numberformat.html guide/1.9/quickstart/internationalization/index.html#quickstart- - http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/datatype/datatype_numberformat.html internationalization-index • YUI Dates/Times • Dojo demos - http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html
- http://yuilibrary.com/yui/docs/datatype/datatype-dateformat-lang.html - http://dojotoolkit.org/reference-guide/1.9/dojo/number.html#dojo-number - http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/datatype/datatype_numberformat.html - http://dojotoolkit.org/reference-guide/1.9/dojo/date.html#dojo-date - http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/datatype/datatype_dateformat_lang.html - http://dojotoolkit.org/reference-guide/1.9/dijit/Calendar.html
28 29
JQuery/globalize.js Resources ECMA Resources
• Jquery • ECMA Specs - http://jqueryui.com/datepicker/#localization - 1st Edition • globalize.js • http://www.ecma- international.org/publications/standards/Ecma- - https://github.com/jquery/globalize 402.htm - https://github.com/jquery/globalize#numbers - Tests - https://github.com/jquery/globalize#currency • http://test262.ecmascript.org/testcases_intl402.h - https://github.com/jquery/globalize#dates tml#
30 31
Craig Cummings and Tex Texin JavaScript Library Comparisons
Questions? Craig R. Cummings Principal Software Engineer – I18n, Informatica
Craig has been working in the field of software globalization for over twenty years. Before his role at Informatica, Craig was at Zynga making games in a variety of languages including Arabic. Before that, at Yahoo! Inc., he helped drive corporate technical strategy for internationalization with a particular focus on Middle Eastern markets. Prior to that, Craig was with Oracle's Applications globalization team where he worked closely with Sun's internationalization team to shape some of the pluggable locale, resource bundle, font, and supplementary character support in Java.
32 33
Tex Texin Globalization Architect, XenCraft
Tex Texin is an industry thought leader specializing in business and software globalization services. His expertise includes global product strategy, Unicode and internationalization architecture, and cost-effective implementation and testing. Over the past two decades, Tex has created numerous global products, led internationalization development teams, and guided companies in taking business to new regional markets.
Tex is a contributor to several internationalization standards for software and on the Web. He is on the steering committees of open source products and the program committees for Unicode and other conferences.
Tex is a popular speaker at conferences around the world and provides on-site training on Unicode, internationalization, and globalization worldwide.
Tex maintains two Web sites for internationalization, the popular, instructional www.I18nGuy.com site and the site for his business www.XenCraft.com.
Tex is founder and Chief Globalization Architect for XenCraft. XenCraft provides global business consulting and software design, implementation, test and training services on globalization product strategy and software internationalization architecture.
34
Craig Cummings and Tex Texin