Translating a monolingual application

Talked given @AFUP Paris

Transcript

1. TRANSLATING A MONOLINGUAL
   TRANSLATING A MONOLINGUAL
   APPLICATION
   APPLICATION
   AFUP - February, 2020
   

   View Slide

2. HI, I'M OLIVIER DOLBEAU
   HI, I'M OLIVIER DOLBEAU
   

   View Slide

3. TRANSLATING
   TRANSLATING A MONOLINGUAL
   A MONOLINGUAL
   APPLICATION
   APPLICATION
   AFUP - February, 2020
   

   View Slide

4. TRANSLATING
   TRANSLATING A MONOLINGUAL
   A MONOLINGUAL
   APPLICATION
   APPLICATION
   AFUP - February, 2020
   

   View Slide

5. View Slide

6. G11N > I18N > L10N > T8N
   G11N > I18N > L10N > T8N
   Globaliza on
   Interna onaliza on
   Localiza on
   Transla on
   There all numeronyms.
   I hope you learned something today!
   

   View Slide

7. GLOBALIZATION
   GLOBALIZATION
   The term Globaliza on(g11n) comes into
   play when a company wants to expand their
   market outside of their locale place and
   move into a global market.Globaliza on is
   simply the umbrella term used to describe
   the process of bringing i18n and l10n into
   your product.
   Vivek Madurai
   

   View Slide

8. INTERNATIONALIZATION
   INTERNATIONALIZATION
   To put it in simple words Interna onaliza on
   is a process of designing and developing a
   product so that it can be easily localized for
   various target markets without any
   engineering dependency. For example, taking
   decision on encoding characters stored in
   your database in Unicode like u -8 instead
   of la n-1, moving messages to resources
   files, handling mestamps across mezones
   Vivek Madurai
   

   View Slide

9. LOCALIZATION
   LOCALIZATION
   The term Localiza on refers to the adop on
   of a product to a specific language or
   culture(country/region). Localizing a product
   includes language transla on, number
   forma ng, date formats, currency, look and
   feel etc.
   Vivek Madurai
   

   View Slide

10. TRANSLATION
    TRANSLATION
    translate('a_beer_please', 'en'); // A beer please
    translate('a_beer_please', 'fr'); // Une bière s'il vous plaît
    translate('a_beer_please', 'ar'); // ﺖﺤﻤﺳ ﻮﻟ ةﺮﻴﺑ
    translate('a_beer_please', 'ta'); // தய ெசய் ஒ பீர்
    

    View Slide

11. View Slide

12. LOOKS SIMPLE!
    LOOKS SIMPLE!
    

    View Slide

13. BUT IT'S NOT...
    BUT IT'S NOT...
    

    View Slide

14. PROBLEM #1
    PROBLEM #1
    VARIABLES TRANSLATIONS
    VARIABLES TRANSLATIONS
    

    View Slide

15. PLURAL?
    PLURAL?
    if (0 === $beers) {
    translate('no_beer', 'fr'); // Je n'ai pas bu de bière
    } elseif (1 === $beers) {
    translate('one_beer', 'fr'); // J'ai bu une bière
    } else {
    translate('more_beer', 'fr'); // J'ai bu plusieurs bières
    }
    

    View Slide

16. GENDER?
    GENDER?
    if ('female' === $gender) {
    translate('women_drink', 'fr'); // C'est une grosse buveuse.
    } elseif ('male' === $gender) {
    translate('men_drink', 'fr'); // C'est un gros buveur.
    }
    

    View Slide

17. COMBINED?
    COMBINED?
    if ('female' === $gender) {
    if (0 === $beers) {
    translate('women_no_beer', 'fr'); // Elle n'a pas bu de bière
    } elseif (1 === $beers) {
    translate('women_one_beer', 'fr'); // Elle a bu une bière
    } else {
    translate('women_more_beer', 'fr'); // Elle a bu plusieurs bières
    }
    } elseif ('male' === $gender) {
    if (0 === $beers) {
    translate('men_no_beer', 'fr'); // Il n'a pas bu de bière
    } elseif (1 === $beers) {
    translate('men_one_beer', 'fr'); // Il a bu une bière
    } else {
    translate('men_more_beer', 'fr'); // Il a bu plusieurs bières
    }
    }
    

    View Slide

18. ☺
    ☺ SOLUTION
    SOLUTION
    ICU MESSAGE FORMAT
    ICU MESSAGE FORMAT
    

    View Slide

19. MOST SIMPLE EXAMPLE
    MOST SIMPLE EXAMPLE
    translate('drink_beer', [
    'name' => 'Michèle',
    ]);
    

    View Slide

20. MOST SIMPLE EXAMPLE
    MOST SIMPLE EXAMPLE
    translate('drink_beer', [
    'name' => 'Michèle',
    ]);
    {name} boit de la bière.
    

    View Slide

21. PLURAL EXAMPLE
    PLURAL EXAMPLE
    translate('drink_beer', [
    'beers' => 5,
    ]);
    

    View Slide

22. PLURAL EXAMPLE
    PLURAL EXAMPLE
    translate('drink_beer', [
    'beers' => 5,
    ]);
    {beers, plural,
    =0 {Je n'ai pas bu de bière.}
    one {J'ai bu une bière.}
    other {J'ai bu # bières !}
    }
    

    View Slide

23. GENDER EXAMPLE
    GENDER EXAMPLE
    translate('drink_beer', [
    'gender' => 'female',
    ]);
    

    View Slide

24. GENDER EXAMPLE
    GENDER EXAMPLE
    translate('drink_beer', [
    'gender' => 'female',
    ]);
    {gender, select,
    female {Tu es une grosse buveuse!}
    male {Tu es un gros buveur!}
    other {Tu bois beaucoup!}
    }
    

    View Slide

25. COMBINING VARIABLES
    COMBINING VARIABLES
    translate('drink_a_lot', [
    'firstname' => 'Michèle',
    'gender' => 'female',
    'count' => 5,
    ]);
    

    View Slide

26. ICU HELL!
    ICU HELL!
    Doc:
    More examples:
    Online editor:
    {gender, select,
    female {
    {count, plural,
    =0 {{firstname} ne boit pas.}
    =1 {{firstname} n'est pas une grosse buveuse, elle n'a bu qu'une seule bière.}
    other {{firstname} est une grosse buveuse, elle a bu {count} bières!}}}
    male {
    {count, plural,
    =0 {{firstname} ne boit pas.}
    =1 {{firstname} n'est pas un gros buveur, il n'a bu qu'une seule bière.}
    other {{firstname} est un gros buveur, il a bu {count} bières!}}}
    other {
    {count, plural,
    =0 {{firstname} ne boit pas.}
    one {{firstname} a bu une seule bière.}
    other {{firstname} a bu {count} bières!}}}}
    h p:/
    /userguide.icu-project.org/formatparse/messages
    h ps:/
    /symfony.com/doc/current/transla on/message_format.html
    h ps:/
    /format-message.github.io/icu-message-format-for-
    translators/editor.html
    

    View Slide

27. TIP: USE A TRANSLATION KEY!
    TIP: USE A TRANSLATION KEY!
    h ps:/
    /symfony.com/doc/current/best_prac ces.html#use-keys-for-transla ons-instead-
    of-content-strings
    h ps:/
    /php-transla on.readthedocs.io/en/latest/best-prac ce/index.html
    

    View Slide

28. PROBLEM #2
    PROBLEM #2
    THE FILE BASED WORFLOW
    THE FILE BASED WORFLOW
    

    View Slide

29. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    

    View Slide

30. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    1. Developers create a transla on file.
    

    View Slide

31. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    1. Developers create a transla on file.
    2. This file is sent to translators.
    

    View Slide

32. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    1. Developers create a transla on file.
    2. This file is sent to translators.
    3. Translators send back a translated file.
    

    View Slide

33. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    1. Developers create a transla on file.
    2. This file is sent to translators.
    3. Translators send back a translated file.
    4. Developers integrate this file in applica on.
    

    View Slide

34. FILE BASED WORKFLOW
    FILE BASED WORKFLOW
    1. Developers create a transla on file.
    2. This file is sent to translators.
    3. Translators send back a translated file.
    4. Developers integrate this file in applica on.
    5. REPEAT
    

    View Slide

35. WORKFLOW - 2 LOCALES
    WORKFLOW - 2 LOCALES
    Developer
    Translation file Keys
    Create
    Translators
    EN FR ...
    Translated file
    Pull
    

    View Slide

36. WORKFLOW - 3 LOCALES
    WORKFLOW - 3 LOCALES
    Developer
    Translation file Keys
    Create
    Translators
    EN FR ES ...
    Translated file
    Pull
    

    View Slide

37. WORKFLOW - 4 LOCALES
    WORKFLOW - 4 LOCALES
    Developer
    Translation file Keys
    Create
    Translators
    EN FR ES CO ...
    Translated file
    Pull
    

    View Slide

38. WORKFLOW - 5 LOCALES
    WORKFLOW - 5 LOCALES
    Developer
    Translation file Keys
    Create
    Translators
    EN FR ES CO AR ...
    Translated file
    Pull
    

    View Slide

39. IT'S LIKE SUPER HEROES MOVIES
    IT'S LIKE SUPER HEROES MOVIES
    

    View Slide

40. FAR FROM PERFECT
    FAR FROM PERFECT
    1. Time consuming for developer
    

    View Slide

41. FAR FROM PERFECT
    FAR FROM PERFECT
    1. Time consuming for developer
    2. Complicated workflow
    

    View Slide

42. FAR FROM PERFECT
    FAR FROM PERFECT
    1. Time consuming for developer
    2. Complicated workflow
    3. Hard to deal with diff.
    

    View Slide

43. ☺
    ☺ SOLUTION
    SOLUTION
    USE A SAAS PRODUCT
    USE A SAAS PRODUCT
    

    View Slide

44. LOT OF SOLUTION EXISTS
    LOT OF SOLUTION EXISTS
    Loco (h ps:/
    /localise.biz/)
    PhraseApp
    Transifex
    ...
    (please don't reinvent the wheel)
    

    View Slide

45. LOT OF SOLUTION EXISTS
    LOT OF SOLUTION EXISTS
    Loco (h ps:/
    /localise.biz/)
    PhraseApp
    Transifex
    ...
    (please don't reinvent the wheel)
    

    View Slide

46. OUR NEW WORKFLOW
    OUR NEW WORKFLOW
    See: h ps:/
    /jolicode.com/blog/how-to-properly-manage-transla ons-in-symfony
    

    View Slide

47. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    

    View Slide

48. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    

    View Slide

49. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    Translators now have a dedicated tool.
    

    View Slide

50. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    Translators now have a dedicated tool.
    SAAS product = primary data store
    

    View Slide

51. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    Translators now have a dedicated tool.
    SAAS product = primary data store
    You have access to the whole history! \o/
    

    View Slide

52. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    Translators now have a dedicated tool.
    SAAS product = primary data store
    You have access to the whole history! \o/
    You can add context to transla ons \o/
    

    View Slide

53. IT SOLVES OUR PROBLEMS (& EVEN MORE)
    IT SOLVES OUR PROBLEMS (& EVEN MORE)
    Developer only have to push keys, nothing else.
    Translators now have a dedicated tool.
    SAAS product = primary data store
    You have access to the whole history! \o/
    You can add context to transla ons \o/
    ⬇ Automa cally retrieve transla ons during deploy
    

    View Slide

54. ⌨
    ⌨ CODE PLEASE.
    CODE PLEASE.
    

    View Slide

55. SYMFONY COMPONENT FTW!
    SYMFONY COMPONENT FTW!
    composer require symfony/translation
    use Symfony\Component\Translation\Translator;
    $translator = new Translator('fr_FR');
    $translator->addResource('array', [
    'a_beer_please' => 'Une bière s\'il vous plaît',
    ], 'fr_FR');
    echo $translator->trans('a_beer_please');
    // « Une bière s'il vous plaît »
    

    View Slide

56. LOT OF LOADERS
    LOT OF LOADERS
    

    View Slide

57. SYMFONY/TRANSLATION
    SYMFONY/TRANSLATION
    Supports variables
    Supports ICU
    Supports Fallback
    Supports catalogs
    Provide basic extract feature
    

    View Slide

58. WE'RE MISSING SOMETHING
    WE'RE MISSING SOMETHING
    HOW TO SYNC TRANSLATIONS WITH A SAAS SOLUTION?
    HOW TO SYNC TRANSLATIONS WITH A SAAS SOLUTION?
    

    View Slide

59. PHP-TRANSLATION FTW
    PHP-TRANSLATION FTW
    A github organisa on dedicated to transla ons
    Allow to sync transla ons with SAAS solu ons
    ⬇ Provide advanced extract feature
    Doc: h ps:/
    /php-transla on.readthedocs.io/en/latest/
    

    View Slide

60. EVEN BETTER WITH SYMFONY
    EVEN BETTER WITH SYMFONY
    

    View Slide

61. PROFILER INTEGRATION
    PROFILER INTEGRATION
    

    View Slide

62. SYMFONY COMMANDS
    SYMFONY COMMANDS
    

    View Slide

63. & MUCH MORE!
    & MUCH MORE!
    ✍ Edit in place
    Web UI
    Auto translate
    

    View Slide

64. View Slide

65. TRANSLATING A
    TRANSLATING A MONOLINGUAL
    MONOLINGUAL
    APPLICATION
    APPLICATION
    AFUP - February, 2020
    

    View Slide

66. TRANSLATING A
    TRANSLATING A MONOLINGUAL
    MONOLINGUAL
    APPLICATION
    APPLICATION
    AFUP - February, 2020
    

    View Slide

67. CRAZY IDEA!
    CRAZY IDEA!
    

    View Slide

68. WHO WORK ON A MONOLINGUAL APP?
    WHO WORK ON A MONOLINGUAL APP?
    

    View Slide

69. WHO WORK ON A MONOLINGUAL APP?
    WHO WORK ON A MONOLINGUAL APP?
    WITHOUT TRANSLATIONS?
    WITHOUT TRANSLATIONS?
    

    View Slide

70. "Can you change the transla on in the
    footer please?"
    

    View Slide

71. "Can you change the transla on in the
    footer please?"
    "There's a typo in the subscrip on
    funnel, could you correct it?"
    

    View Slide

72. git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

73. ➕ Create a PR
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

74. ➕ Create a PR
    ⏲ Wait for tests
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

75. ➕ Create a PR
    ⏲ Wait for tests
    ⏲ Wait for review
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

76. ➕ Create a PR
    ⏲ Wait for tests
    ⏲ Wait for review
    ⏲ Merge your PR
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

77. ➕ Create a PR
    ⏲ Wait for tests
    ⏲ Wait for review
    ⏲ Merge your PR
    Deploy
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

78. ➕ Create a PR
    ⏲ Wait for tests
    ⏲ Wait for review
    ⏲ Merge your PR
    Deploy
    And some mes, there is an issue to deal with...
    git commit -m 'Correct typo translation'
    git push origin fix-typo
    

    View Slide

79. View Slide

80. SET UP A TRANSLATION WORKFLOW!
    SET UP A TRANSLATION WORKFLOW!
    

    View Slide

81. SET UP A TRANSLATION WORKFLOW!
    SET UP A TRANSLATION WORKFLOW!
    Devs are not blockers / bored anymore.
    

    View Slide

82. SET UP A TRANSLATION WORKFLOW!
    SET UP A TRANSLATION WORKFLOW!
    Devs are not blockers / bored anymore.
    It's easier / quicker for anyone to update
    transla ons.
    

    View Slide

83. SET UP A TRANSLATION WORKFLOW!
    SET UP A TRANSLATION WORKFLOW!
    Devs are not blockers / bored anymore.
    It's easier / quicker for anyone to update
    transla ons.
    It's a first step done for G11N.
    

    View Slide

84. USE TRANSLATIONS!
    USE TRANSLATIONS!
    

    View Slide

85. THE END
    THE END
    Ques ons then beers!
    

    View Slide