Traditionally, rendering of our web applications would be done on the server, where there are lots of established internationalization tools and libraries. However with the rise of single page apps (SPAs), user interfaces are being rendered in the browser using JavaScript. In this talk we'll be introducing FormatJS: a collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings. We'll do a walkthrough of JavaScript's Intl API and some of the core libraries we've developed, as well as integration with Handlebars, Dust and React. Finally, we'll discuss how these tools can be useful even if your application is only written in one language.

1. A brief tale of i18n in JS
Juan Dopazo
Yahoo
Formerly-known-as-YUI team

2. What we’re aiming at
• I18n-ready web apps
• Single page applications
• Server side rendering

4. 1.002

5. 1.002
1,002

6. 1.002
1,002
1 002

7. 12/11/2014
11/12/2014

8. CLDR
Unicode
Common Locale Data Repository
http://cldr.unicode.org/

9. Enter ECMA-402

10. Intl
Intl.NumberFormat
Intl.DateTimeFormat
Intl.Collator

11. Intl.NumberFormat
var number = 3500;
console.log(
new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale
// → '3.500' if in AR Spanish locale

12. Intl.NumberFormat
var number = 3500;
console.log(
new Intl.NumberFormat(“en-UK”).format(number));
// → '3,500’

13. Intl.DateTimeFormat
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(
new Intl.DateTimeFormat().format(date));
// → '12/19/2012' if in US English locale
// → '19/12/2012' if in AR Spanish locale

14. Intl.DateTimeFormat
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(
new Intl.DateTimeFormat(“es-AR”, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date));
jueves, 20 de diciembre de 2012

15. Where to do i18n
M V C

16. Introducing
http://formatjs.io/

17. Integrates with…

18. Number formatting
<p>
{{formatNumber 1002}}<br>
{{formatNumber 90 "percentage"}}<br>
{{formatNumber 100 "USD"}}
</p>
1.002
90%
US$100

19. Date formatting
<<p>{{formatDate date
day="numeric" month="long" year="numeric"}}</p>
November 13, 2014 if in US English locale
13 de noviembre de 2014 if in AR Spanish locale

20. ICU
International Components for Unicode
• Mature, widely used set of
C/C++ and Java libraries
• Industry standard
• Used by browsers

21. The ICU Message Format Syntax
A {name1}, {name2} y {numLikes, plural,
=1 {una persona más}
=2 {dos personas más}
other {# personas más}
} les gusta tu publicación.
A Juan, Carlos y 10 personas más les gusta tu publicación.

22. The ICU Message Format Syntax
Disponible con un {discount, number, percent} de
descuento hasta el {takenDate, date, long}.
Disponible con un 50% de descuento hasta el 24 de diciembre de
2014.

23. Message Formatting
<p>
{{formatMessage (intlGet "messages.photos")
name=name
numPhotos=numPhotos
takenDate=takenDate}}
</p>

24. Relative Time
<p>
{{formatRelative pastDate}}<br>
{{formatRelative pastDate "hours"}}
</p>
ayer
hace 24 horas
Best fit
Hours, numeric

25. Why we’re moving away from YUI

26. CanJS
201_
The year of the JS Framework
React
Ember
Backbone
Knockout
Angular
Meteor
Ractive Montage
JavaScriptMVC
Knockback
Ampersand
Agility
Mithril
KendoUI

27. “The cost of writing a new programming language is much lower than the
cost of fixing an existing one”
Alex Aiken
Department Chair, CS
Stanford University

28. FORMATJS INTEGRATIONS High level integration
FORMATJS CORE LIBS
STANDARDS
Small abstraction layer +
missing pieces in the
web platform
Contribute back to web
standards
Polyfills

29. Thank you
Keep in touch
@juandopazo
http://formatjs.io/
Special thanks
Andy Earnshaw
Intl polyfill author