FormatJS - JSConf Argentina
•
2 recomendaciones•1,378 vistas
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.
Recomendados
Más contenido relacionado
Similar a FormatJS - JSConf Argentina
Similar a FormatJS - JSConf Argentina (20)
Último
Último (20)
FormatJS - JSConf Argentina
- 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
- 8. CLDR Unicode Common Locale Data Repository http://cldr.unicode.org/
- 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
- 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
Notas del editor
- - We want FormatJS to be the ICU of JavaScript