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