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.

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
    vmunier@jnesis.com
    www.jnesis.com
    

    View Slide