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

2. Multilingual Applications with ExtJS 6 Overview of the native and alternative solutions
3. Vincent Munier Technical Manager
4. JNESIS briefly… •  Java and javascript specialists •  An agile team of expert consultants •  Sencha partner for Switzerland and France since 2013 MULHOUSE - PARIS - PHILADELPHIA
5. •  Consulting (code auditing, consultancy in software architectures,…) •  Development (mainly in Agile) •  Training and technical coaching JNESIS briefly…
6. JNESIS briefly…
7. Why this presentation?
8. Contents
9. Contents •  Brief definitions
10. Contents •  Brief definitions •  Some reflections about it…
11. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation
12. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation •  Architecture – Basic refresher
13. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions
14. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions •  Entreprise concerns
15. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions •  Entreprise concerns •  Enterprise-class solution
16. Contents •  Brief definitions •  Some reflections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions •  Entreprise concerns •  Enterprise-class solution •  To Conclude
17. Brief definitions
18. Brief definitions •  i18n : internationalization •  L10n : localization
19. Brief definitions i18n : internationalization •  Ability for an application to support translation L10n : localization •  A translated “occurrence” of the application
20. Brief definitions L10n + i18n
21. Brief definitions Ext JS comes with files acting as localization materials for up to 40 languages:
22. Some reflections about it…
23. Some reflections about it… Differences are not only in the words: •  Orientations •  Alphabet •  Punctuation marks •  Dates formats •  Culture impacts •  Legal impacts
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!
25. Scope of the presentation
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
27. Scope of the presentation Considering the starting point is: •  The application has been correctly designed to run internationalization
28. Architecture Basic refreshers
29. Architectures: Basic refresher
30. Native solutions
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
32. Native solutions
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
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
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
36. Advanced native solution
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
38. Advanced native solution Demo
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
40. Enterprise concerns
41. Enterprise concerns Common constraints: •  Developers are not translators •  The job of a specialist, a team or a department •  Mostly: Non-technical profiles
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
43. Enterprise-class solution
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
45. Entreprise-class solution
46. Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Defining a new localized property
47. Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Defining a singleton
48. Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Using the localized property
49. Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Using a launch function to call the ws
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
51. Entreprise-class solution Demo
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)
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
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!
55. To conclude
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!
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
58. Questions
59. Thanks for your attention! Vincent MUNIER vmunier@jnesis.com www.jnesis.com