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

Agility in your translation workflow

Agility in your translation workflow

Matthieu Moquet

June 24, 2014
Tweet

More Decks by Matthieu Moquet

Other Decks in Programming

Transcript

  1. agility in your
    translation
    workflow
    @MattKetmo
    #PHPTour Lyon 2014

    View Slide

  2. Who am I?
    Matthieu Moquet
    @MattKetmo

    View Slide

  3. View Slide

  4. Agility

    View Slide

  5. “Agile software development
    is a group of methods based on
    iterative and incremental
    development.”

    View Slide

  6. In other words,
    DEPLOY OFTEN

    View Slide

  7. What’s your
    development workflow?

    View Slide

  8. 2 weeks SCRUM
    8 days development
    2 days
    bug fixes
    freeze features
    deploy

    View Slide

  9. SIMPLE
    WORKFLOW
    o  1 week planning
    o  Merge once it’s ready
    o  Several deployments /day

    View Slide

  10. View Slide

  11. Who makes the translations?
    When do you translate?
    How do you proceed?
    What about translations?

    View Slide

  12. Solution #1
    Write all translations before starting
    developments
    Pros:
    –  Better understanding of the final rendering
    Cons:
    –  Can’t update specs later
    –  Damn slow (not very agile)

    View Slide

  13. Solution #2
    Write all translations before deploying
    Pros:
    – Development can be parallelized
    – Translations are more concrete
    Cons:
    – Still damn slow to deploy

    View Slide

  14. Solution #3
    Don’t care about untranslated phrases in
    production…
    …since it’s not developers’ problem
    Pros:
    – Developers are more independent
    Cons:
    – Phrases can be untranslated for undefined time
    – Can’t translate before next release

    View Slide

  15. Solution #4
    Decouple your translation process from the
    development workflow
    Pros:
    – Developers are totally independent
    – Easy to update any content strings
    Cons:
    – Need tools to follow the translation flow

    View Slide

  16. Our solution

    View Slide

  17. Developers create the default translations
    –  in English (sometimes in French)
    –  taken from specifications… or their mind

    View Slide

  18. Translators do the rest
    – when a feature is developed (before production,
    once it’s on staging)
    – after deploying (to update default translations)
    – long after, because of a product change

    View Slide

  19. deploy your code
    then
    update your translations
    Think your translations as an independent
    asset from your code base
    …like a CMS

    View Slide

  20. YOU WILL NEED A DATABASE

    View Slide

  21. o  Create & Update translations with built-in app
    o  No translations stored in code source
    o  Import from DEV env to PROD when deploying

    View Slide

  22. We then built a similar module with
    our brand new Symfony website…
    BlablacarTranslationBundle

    View Slide

  23. o  English translations in Yaml files
    o  Pushed to database when staging
    o  Translators only work on production dataset

    View Slide

  24. namespace Symfony\Component\Translation\Loader;
    use Symfony\Component\Translation\MessageCatalogue;
    use Symfony\Component\Translation\Exception\InvalidResourceException;
    use Symfony\Component\Translation\Exception\NotFoundResourceException;
    /**
    * LoaderInterface is the interface implemented by all translation loaders.
    */
    interface LoaderInterface
    {
    /**
    * Loads a locale.
    *
    * @param mixed $resource A resource
    * @param string $locale A locale
    * @param string $domain The domain
    *
    * @return MessageCatalogue A MessageCatalogue instance
    */
    public function load($resource, $locale, $domain = 'messages');
    }

    View Slide

  25. Translations Deployment (lazy mode)
    o  Avoid querying the database for each HTTP request
    o  Only store the last modification time on a Redis key
    o  Deploying translations means updating the Redis token
    HTTP
    Request
    Translator
    isFresh()
    SELECT
    translations
    fwrite
    app/cache

    View Slide

  26. Debug Mode

    View Slide

  27. Will you open source your
    TranslationBundle?

    View Slide

  28. Nope!
    Our editing tool is too much coupled
    with other layouts & services.

    View Slide

  29. and there are already some
    Symfony bundles doing the job
    o  Kunstmaan/KunstmaanTranslatorBundle
    o  lexik/LexikTranslationBundle
    o  servergrove/TranslationEditorBundle
    o  schmittjoh/JMSTranslationBundle
    o  Elao/ElaoFormTranslationBundle
    o  Incenteev/IncenteevTranslationCheckerBundle
    o  matteosister/TranslationBundle
    o  Wiakowe/TranslationBundle
    o  Pierstoval/TranslationBundle
    o  fre5h/TranslationBundle
    o  GiZystems/TranslationBundle
    o  dinecat/I18nBundle
    o  PUGX/PUGXI18nBundle
    o  emmanuelballery/EBTranslationBundle

    View Slide

  30. But wait…
    is a bundle the good solution?
    – What about maintaining several applications?
    – Better to have a centralized platform to perform all
    the translations

    View Slide

  31. What about existing tools?
    Tools to help translating an application
    There are several! Mostly SaaS.

    View Slide

  32. View Slide

  33. (free for open source softwares)

    View Slide

  34. Clients

    View Slide

  35. ♥ UI

    View Slide

  36. o  Review / approval
    o  History
    o  Glossary
    o  Translation Memory
    o  Projects management
    o  Team organization
    o  Comments
    o  Statistics

    View Slide

  37. API + CLI tool

    View Slide

  38. View Slide

  39. (free for open source softwares)

    View Slide

  40. View Slide

  41. github.com/akeneo/php-crowdin-api

    View Slide

  42. View Slide

  43. o  Crowdsourcing
    o  Translation Agency
    o  Translation Memory
    o  Glossary
    o  Machine Translation
    o  In-context edition
    o  Screenshots
    o  Statistics
    o  Review/voting system
    o  Webhooks

    View Slide

  44. There are many more SaaS tools…
    but, is it worth it?

    View Slide

  45. http://phraseapp.com

    View Slide

  46. http://oneskyapp.com

    View Slide

  47. http://getlocalization.com

    View Slide

  48. http://webtranslateit.com

    View Slide

  49. http://localeapp.com

    View Slide

  50. http://weblate.org

    View Slide

  51. http://locale.biz

    View Slide

  52. Professional translators

    View Slide

  53. http://translate.twitter.com

    View Slide

  54. http://facebook.com/translations

    View Slide

  55. http://translate.adobe.com

    View Slide

  56. http://pootle.translatehouse.org

    View Slide

  57. PoEdit (gettext)

    View Slide

  58. © evernote

    View Slide

  59. Lots of tools,
    but can’t find a satisfying one
    Non-adapted to our current workflow
    §  Unable to edit source
    §  Unable to view/search by translation keys
    §  No SSO compliant
    §  etc.

    View Slide

  60. We could adapt ourselves to
    existing features

    View Slide

  61. OR…

    View Slide

  62. We could
    roll our own
    application!

    View Slide

  63. must be fully
    open source
    Pleasant to code / play with
    Doesn’t depend on a tier
    Roll your own auth mechanism

    View Slide

  64. should include the
    basic features
    of traditional tools
    Review, glossary, history, etc.
    And maybe more!

    View Slide

  65. should be
    flexible
    Language/framework independent
    Hackable

    View Slide

  66. damn simple to use
    Easy to install / configure
    Simple workflow
    Minimal interface
    UX friendly

    View Slide

  67. OpenLocalization

    View Slide

  68. openl10n.io
    v0.1

    View Slide

  69. Started as a traditional
    Symfony application
    Twig
    (a bit of) BackboneJS
    FosRest

    View Slide

  70. but that was not enough satisfying…

    View Slide

  71. …and I wanted to play more with
    Javascript

    View Slide

  72. API first
    No more session, Twig, etc.
    Full Javascript client
    Backbone + Marionette + RequireJS

    View Slide

  73. Shipped with a CLI tool
    à API client build with Guzzle 4

    View Slide

  74. View Slide

  75. $ cat openl10n.yml
    # Server connection
    server:
    hostname: "openl10n.dev"
    username: "user"
    password: "user"
    # Project specification
    project: "foobar"
    # Translation files
    files:
    - pattern: "resources/locales/.yml"

    View Slide

  76. $ openl10n push --locale=all
    Uploading file resources/locales/de.yml
    Uploading file resources/locales/en.yml
    Uploading file resources/locales/es.yml
    Uploading file resources/locales/fr.yml
    Uploading file resources/locales/it.yml
    Uploading file resources/locales/pl.yml
    Uploading file resources/locales/pt.yml
    ...

    View Slide

  77. View Slide

  78. $ openl10n pull --locale=all
    Downloading file resources/locales/de.yml
    Downloading file resources/locales/en.yml
    Downloading file resources/locales/es.yml
    Downloading file resources/locales/fr.yml
    Downloading file resources/locales/it.yml
    Downloading file resources/locales/pl.yml
    Downloading file resources/locales/pt.yml
    ...

    View Slide

  79. Demo

    View Slide

  80. What’s next?

    View Slide

  81. Users Management & Roles

    View Slide

  82. Webhooks
    RELEASE

    View Slide

  83. Webhooks / Web
    Eager
    Deploy translation files on each frontend servers
    Lazy
    Update a token and let servers update themselves

    View Slide

  84. Webhooks / Mobile
    Webhook will upload
    translations on a CDN
    On start-up, mobile app
    download latest version
    of translations

    View Slide

  85. Webhooks / Others
    o Make a PR on GitHub
    o Push new commit
    o Create backup archives
    o …

    View Slide

  86. And more to come…
    •  Proofread mode for editor
    •  History
    •  Statistics
    •  Screenshots
    •  Glossary
    •  Tags
    •  Support more formats (Android, iOS, Rails…)
    •  etc.

    View Slide

  87. Interested in the project?
    Feel free to contribute

    View Slide

  88. or just have a look at the sources
    if you’re just curious
    github.com/openl10n
    §  openl10n: The core project (API + javascript client)
    §  openl10n-sdk: API client (Guzzle 4)
    §  openl10n-cli: CLI tool
    §  openl10n.js: In-context translations (not planned yet)
    §  demo-(silex|symfony|angular|rails): Example
    of application with a openl10n configuration
    §  etc.

    View Slide

  89. Back-end / Symfony
    Domain/
    – Split by main components (project, resources,
    translations, etc.)
    – Unit tests via PHPSpec
    Bundle/
    – Set the infrastructure
    – Implements API & User management
    – Functionnal tests via PHPUnit

    View Slide

  90. Front-end / BackboneJS
    o MarionetteJS + RequireJS (soon Browserify?)
    o Bundles-like folders
    o No tests L
    o Is there a JS expert in the room?

    View Slide

  91. Thank you
    Slides available at
    moquet.net/talks/phptour-2014-i18n
    More information at openl10n.io
    Leave feedbacks @MattKetmo

    View Slide