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

by Lee Boonstra

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Vincent Munier Technical Manager

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

•  Consulting (code auditing, consultancy in software architectures,…) •  Development (mainly in Agile) •  Training and technical coaching JNESIS brieﬂy…

Slide 6

Slide 6 text

JNESIS brieﬂy…

Slide 7

Slide 7 text

Why this presentation?

Slide 8

Slide 8 text

Contents

Slide 9

Slide 9 text

Contents •  Brief deﬁnitions

Slide 10

Slide 10 text

Contents •  Brief deﬁnitions •  Some reﬂections about it…

Slide 11

Slide 11 text

Contents •  Brief deﬁnitions •  Some reﬂections about it… •  Scope of the presentation

Slide 12

Slide 12 text

Contents •  Brief deﬁnitions •  Some reﬂections about it… •  Scope of the presentation •  Architecture – Basic refresher

Slide 13

Slide 13 text

Contents •  Brief deﬁnitions •  Some reﬂections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions

Slide 14

Slide 14 text

Contents •  Brief deﬁnitions •  Some reﬂections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions •  Entreprise concerns

Slide 15

Slide 15 text

Contents •  Brief deﬁnitions •  Some reﬂections about it… •  Scope of the presentation •  Architecture – Basic refresher •  Natives solutions •  Entreprise concerns •  Enterprise-class solution

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Brief deﬁnitions

Slide 18

Slide 18 text

Brief deﬁnitions •  i18n : internationalization •  L10n : localization

Slide 19

Slide 19 text

Brief deﬁnitions i18n : internationalization •  Ability for an application to support translation L10n : localization •  A translated “occurrence” of the application

Slide 20

Slide 20 text

Brief deﬁnitions L10n + i18n

Slide 21

Slide 21 text

Brief deﬁnitions Ext JS comes with ﬁles acting as localization materials for up to 40 languages:

Slide 22

Slide 22 text

Some reﬂections about it…

Slide 23

Slide 23 text

Some reﬂections about it… Differences are not only in the words: •  Orientations •  Alphabet •  Punctuation marks •  Dates formats •  Culture impacts •  Legal impacts

Slide 24

Slide 24 text

Some reﬂections 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!

Slide 25

Slide 25 text

Scope of the presentation

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Architecture Basic refreshers

Slide 29

Slide 29 text

Architectures: Basic refresher

Slide 30

Slide 30 text

Native solutions

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Native solutions

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Advanced native solution

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Advanced native solution Demo

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Enterprise concerns

Slide 41

Slide 41 text

Enterprise concerns Common constraints: •  Developers are not translators •  The job of a specialist, a team or a department •  Mostly: Non-technical proﬁles

Slide 42

Slide 42 text

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 ﬁles / database hosting translations

Slide 43

Slide 43 text

Enterprise-class solution

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Entreprise-class solution

Slide 46

Slide 46 text

Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Deﬁning a new localized property

Slide 47

Slide 47 text

Entreprise-class solution With ExtJs mechanisms: Very easy to code ! Deﬁning a singleton

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Entreprise-class solution Good points: •  Translation processes can be now offered by third party software! •  No speciﬁc conﬁguration •  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

Slide 51

Slide 51 text

Entreprise-class solution Demo

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

To conclude

Slide 56

Slide 56 text

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!

Slide 57

Slide 57 text

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