$30 off During Our Annual Pro Sale. View Details »

Vincent Munier (Jnesis) : Multilingual Applications with Ext JS: Overview of native and alternatives solutions

Lee Boonstra
February 09, 2016

Vincent Munier (Jnesis) : Multilingual Applications with Ext JS: Overview of native and alternatives solutions

Vincent Munier (Jnesis) : Multilingual Applications with Ext JS 5: Overview of native and alternatives solutions by Lee Boonstra
Published June 3, 2015 in Technology

Internationalization has become a common issue for developers, especially for those in touch with software publishing or in globalized organizations. Ext JS has been offering solutions to this concern for a long time, some are native and well known, others are more innovative ( additional files, dynamic file loading , web service ...). This session aims to present a complete overview of the solutions offered to Ext JS developers, the pros, the cons and how to implement them.

Lee Boonstra

February 09, 2016
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. View Slide

  2. Multilingual Applications with ExtJS 6
    Overview of the native and alternative
    solutions

    View Slide

  3. Vincent Munier
    Technical Manager

    View Slide

  4. JNESIS briefly…
    •  Java and javascript specialists
    •  An agile team of expert consultants
    •  Sencha partner for Switzerland
    and France since 2013
    MULHOUSE - PARIS - PHILADELPHIA

    View Slide

  5. •  Consulting (code auditing, consultancy in software architectures,…)
    •  Development (mainly in Agile)
    •  Training and technical coaching
    JNESIS briefly…

    View Slide

  6. JNESIS briefly…

    View Slide

  7. Why this presentation?

    View Slide

  8. Contents

    View Slide

  9. Contents
    •  Brief definitions

    View Slide

  10. Contents
    •  Brief definitions
    •  Some reflections about it…

    View Slide

  11. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation

    View Slide

  12. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation
    •  Architecture – Basic refresher

    View Slide

  13. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation
    •  Architecture – Basic refresher
    •  Natives solutions

    View Slide

  14. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation
    •  Architecture – Basic refresher
    •  Natives solutions
    •  Entreprise concerns

    View Slide

  15. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation
    •  Architecture – Basic refresher
    •  Natives solutions
    •  Entreprise concerns
    •  Enterprise-class solution

    View Slide

  16. Contents
    •  Brief definitions
    •  Some reflections about it…
    •  Scope of the presentation
    •  Architecture – Basic refresher
    •  Natives solutions
    •  Entreprise concerns
    •  Enterprise-class solution
    •  To Conclude

    View Slide

  17. Brief definitions

    View Slide

  18. Brief definitions
    •  i18n : internationalization
    •  L10n : localization

    View Slide

  19. Brief definitions
    i18n : internationalization
    •  Ability for an application to support translation
    L10n : localization
    •  A translated “occurrence” of the application

    View Slide

  20. Brief definitions
    L10n + i18n

    View Slide

  21. Brief definitions
    Ext JS comes with files acting as localization materials for up to 40
    languages:

    View Slide

  22. Some reflections about it…

    View Slide

  23. Some reflections about it…
    Differences are not only in the words:
    •  Orientations
    •  Alphabet
    •  Punctuation marks
    •  Dates formats
    •  Culture impacts
    •  Legal impacts

    View Slide

  24. Some reflections about it…
    Internationalization
    •  You MUST study the functional concerns BEFORE implementation
    •  Core components in charge of i18n should be as generic as possible
    •  In the worst cases, the application itself would have to be
    redesigned!

    View Slide

  25. Scope of the presentation

    View Slide

  26. Scope of the presentation
    Internationalization
    •  Cannot be reduced to technical concerns
    •  Is a mix of:
    ü 
    Functional requirements
    ü 
    Business requirements
    ü 
    Technical constraints
    ü 
    Time consuming constraints(!)
    ü 
    People involved in the process

    View Slide

  27. Scope of the presentation
    Considering the starting point is:
    •  The application has been correctly designed to run
    internationalization

    View Slide

  28. Architecture
    Basic refreshers

    View Slide

  29. Architectures: Basic refresher

    View Slide

  30. Native solutions

    View Slide

  31. Native solutions
    The developer is in charge of finding the most appropriate solution:
    •  the faster to implement
    •  that meets the requirements as easily as possible
    » Modification in app.json: the builds property having defined locales

    View Slide

  32. Native solutions

    View Slide

  33. Native solutions
    Good points:
    •  Native solution: configured through a file: app.json
    •  1 single build = 1 single SenchaCMD execution
    •  Translation gathered in 1 single file per language

    View Slide

  34. Native solutions
    Points that would worth evolutions:
    •  multiple URLs, 1 for each language => multiple entry-points
    •  Adding or updating a key => requires running Sencha CMD again
    •  1 application for each language => 1 app.js for each language
    •  multiple deployments for each language

    View Slide

  35. Advanced native solution
    Developers can ease their life!
    •  1 URL = 1 access point
    •  1 URL = 1 single deployment
    » Modification of app.json: integrations of the “manifest”s
    ü 
    builds properties for locales
    ü 
    bootstrap properties for dev “manifest”s
    ü 
    output properties for deployments

    View Slide

  36. Advanced native solution

    View Slide

  37. Advanced native solution
    Good points:
    •  1 single URL: ability to change language with a request parameter
    •  Native: advanced configuration using dedicated files
    •  1 single build = 1 single SenchaCMD to run
    •  Translation gathered in 1 single file for each language
    •  1 single deployment

    View Slide

  38. Advanced native solution
    Demo

    View Slide

  39. Advanced native solution
    Additional concerns:
    •  Adding / updating a key = 1 sencha CMD to run
    •  1 single index.html BUT 1 apps.js for each language

    View Slide

  40. Enterprise concerns

    View Slide

  41. Enterprise concerns
    Common constraints:
    •  Developers are not translators
    •  The job of a specialist, a team or a department
    •  Mostly: Non-technical profiles

    View Slide

  42. Enterprise concerns
    Translators are in charge of:
    •  Understanding the functionality
    •  Understanding the business
    •  Must have an access to the application
    •  Must have an access to files / database hosting
    translations

    View Slide

  43. Enterprise-class solution

    View Slide

  44. Entreprise-class solution
    Ideally:
    •  Translation processes offered by third party software
    •  Tools integrated in your application or not
    •  Example of a build in i18n feature: Portal Engine + ExtJs 5
    See SenchaCon ‘15 in San Fransisco Screencast
    •  Usage of a Web Service or a loadScript

    View Slide

  45. Entreprise-class solution

    View Slide

  46. Entreprise-class solution
    With ExtJs mechanisms: Very easy to code !
    Defining a new localized property

    View Slide

  47. Entreprise-class solution
    With ExtJs mechanisms: Very easy to code !
    Defining a singleton

    View Slide

  48. Entreprise-class solution
    With ExtJs mechanisms: Very easy to code !
    Using the localized property

    View Slide

  49. Entreprise-class solution
    With ExtJs mechanisms: Very easy to code !
    Using a launch function to call the ws

    View Slide

  50. Entreprise-class solution
    Good points:
    •  Translation processes can be now offered by third party software!
    •  No specific configuration
    •  No need to run SenchaCMD every time change a word must be
    added / changed
    •  1 single URL: embedding a simple request parameter (locale)
    •  1 single Javascript, 1 single built application

    View Slide

  51. Entreprise-class solution
    Demo

    View Slide

  52. Entreprise-class solution
    Not perfect:
    •  Requires specific Javascript
    •  Overriding native components is necessary
    •  Swapping to another language still requires reloading the
    application
    •  Mind the performances! (webservice concerns)

    View Slide

  53. What’s next? Hot reload!
    All these solutions require reloading the application in the browser!
    Triggered by:
    •  Users themselves when they select a new language
    •  Application itself when requesting translation keys

    View Slide

  54. What’s next? Hot reload!
    Yes! Hot reload is possible and made easy with ExtJS binding
    mechanism
    •  Complex custom code that requires experienced developers,
    especially when dealing with both toolkits (classic / modern):
    Web Service + Binding = Mind the performances!

    View Slide

  55. To conclude

    View Slide

  56. To conclude
    •  Mind the initial functional and business requirements
    •  Native solutions are good solutions for simple requirements
    •  With few extra pieces of code: get solutions for complex
    requirements
    •  Above all:
    Design the appropriate solution before implementation!

    View Slide

  57. Other solutions
    For a more extensive presentation of the solutions available:
    See i18n presentation that took place at the SenchaDay in Paris
    On www.jnesis.com

    View Slide

  58. Questions

    View Slide

  59. Thanks for your attention!
    Vincent MUNIER
    [email protected]
    www.jnesis.com

    View Slide