Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Apps Go Intl - GIDS Live 2021

JavaScript Apps Go Intl - GIDS Live 2021

In a connected, global world there are a surprising number of problems with formatting text for our users. Did you know how many different ways there are to format a number? Or pluralise a noun? Or display a date? And let's not get into doing time zone maths for those dates. Internationalising an app by hand, and doing it correctly, could be a never-ending, full-time job.

The Intl namespace is home to the ECMAScript Internationalization API and contains the solutions to many of our formatting problems. In this talk we'll explore the available APIs that can make it easier to build a truly international application.

With Intl we can build apps that cater to all our users, wherever they are, however they write things down.

--

Links:

MDN on Intl: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

How to display dates in your user's time zone with the Intl API: https://philna.sh/blog/2021/02/22/display-dates-in-your-users-time-zone/

<time-formatter> Web Component: https://github.com/philnash/time-formatter/

Phil Nash

April 29, 2021
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. JAVASCRIPT APPS GO
    INTL
    @philnash

    View Slide

  2. Phil Nash
    @philnash
    https://philna.sh
    [email protected]

    View Slide

  3. JAVASCRIPT APPS GO
    INTL
    @philnash

    View Slide

  4. 1 MILLION
    @philnash

    View Slide

  5. 1,000,000 10,00,000
    1 000 000 1.000.000
    ١٬٠٠٠٬٠٠٠
    ⼀,
    〇〇〇,
    〇〇〇
    @philnash

    View Slide

  6. 1,234,567 12,34,567
    1 234 567 1.234.567
    ١٬٢٣٤٬٥٦٧
    ⼀,
    ⼆三四,
    五六七
    @philnash

    View Slide

  7. HOW DO WE DEAL
    WITH THIS?
    @philnash

    View Slide

  8. DATES
    @philnash

    View Slide

  9. What date is this?
    02/03/2021 02/03/2021
    @philnash

    View Slide

  10. @philnash

    View Slide

  11. DATA COMES WITH
    CONTEXT
    @philnash

    View Slide

  12. HOW CAN THE
    PLATFORM HELP?
    @philnash

    View Slide

  13. ECMA 402
    TASK GROUP
    @philnash

    View Slide

  14. INTL API
    @philnash

    View Slide

  15. NUMBERS
    @philnash

    View Slide

  16. Intl.NumberFormat
    @philnash

    View Slide

  17. UNITS
    @philnash

    View Slide

  18. PLURALS
    @philnash

    View Slide

  19. CARDINALS AND
    ORDINALS
    @philnash

    View Slide

  20. YOU NEED YOUR
    OWN TRANSLATIONS
    @philnash

    View Slide

  21. Intl.PluralRules
    @philnash

    View Slide

  22. RELATIVE TIME
    @philnash

    View Slide

  23. BRINGS THE
    TRANSLATIONS
    @philnash

    View Slide

  24. YOU SET THE TIME
    PERIOD AND OFFSET
    @philnash

    View Slide

  25. CAN BE USEFUL
    @philnash

    View Slide

  26. Intl.RelativeTimeFormat
    @philnash

    View Slide

  27. DATE AND TIME
    @philnash

    View Slide

  28. CONTEXT
    @philnash

    View Slide

  29. TIME / DATE /
    PLACE / LANGUAGE
    @philnash

    View Slide

  30. WE NEED A FORMAT
    THAT HAS ALL THE
    INFORMATION
    @philnash

    View Slide

  31. ISO8601.js
    UTC
    @philnash

    View Slide

  32. YYYY-MM-DDTHH:MM:SS.SSSZ
    @philnash

    View Slide

  33. WE JUST NEED THE
    USER'S TIME ZONE
    @philnash

    View Slide

  34. Intl.DateTimeFormat
    @philnash

    View Slide

  35. CAN THIS BE EASIER?
    @philnash

    View Slide

  36. WEB COMPONENTS
    @philnash

    View Slide


  37. @philnash

    View Slide



  38. 29/04/2021

    01.
    02.
    03.
    @philnash

    View Slide


  39. https://github.com/philnash/time-formatter/
    @philnash

    View Slide

  40. THE FUTURE OF
    ECMA 402
    @philnash

    View Slide

  41. The future of ECMA 402
    https://github.com/tc39/ecma402
    @philnash

    View Slide

  42. USE THE PLATFORM!
    @philnash

    View Slide

  43. Thanks!
    @philnash
    https://philna.sh
    [email protected]

    View Slide