Tasting i18n

i 1 8 n

TASTING I18N - ARCHITECTURE, DEVELOPMENT & TESTING

Taste of implementing RTL on top of existing LTR to support Internationalisation (i18n), testing it to ensure we go smooth.

Interesting hit was implementing & automating it.

CHALLENGESWhy it was a big thing to implement and test.

2

CHALLENGES & TASKS

3

CHALLENGES & TASKS

3

Keep it simple

CHALLENGES & TASKS

3

Keep it simple

Make it extensible & It has to be scalable

CHALLENGES & TASKS

3

Keep it simple


(Re)architecting the product support of growing scope.

CHALLENGES & TASKS

3

Keep it simple



Development in Continuous Delivery mode

CHALLENGES & TASKS

3

Keep it simple



Development in Continuous Delivery mode

Create test data & Test strategy/approach

I18NUnderstand before you jump.

4

INTERNATIONALISATION - I18N

5


5

What is i18n?


5

What is i18n?

•Content Localisation


5

What is i18n?

•Content Localisation •Presentation of Content

CREATION OF DATADevelopment is hard unless you have localised data set. lets create data.

6

CREATION OF DATA

7

CREATION OF DATA

7

Heavy Data dependent web application!

CREATION OF DATA

7


Localised data with scripts styles, currency etc

CREATION OF DATA

7



Less knowledge around Locale and Language specifics

CREATION OF DATA

7




Far east languages & script reading writing techniques

CREATION OF DATA

7




Far east languages & script reading writing techniques

Languages which are read & written from Right To Left

CREATION OF DATA - SOME EXAMPLE OF APPS

8


8


8


8


9


9


9

CREATION OF DATA

10

CREATION OF DATA

10

Language specific Localised language text

(arabic)

CREATION OF DATA

10


(arabic)

Config forAll attributes to be changed

CREATION OF DATA

10


(arabic)


CREATION OF DATA

10


(arabic)


CREATION OF DATA

10


(arabic)


Ruby Script

CREATION OF DATA

10


(arabic)


Ruby Script

CREATION OF DATA

10


(arabic)


Ruby Script

DB

RTL DEVELOPMENTWe have markup already, lets change (or modify) presentation layer.

11

RTL IMPLEMENTATION - CHALLENGES

12


12

100s of modules developed for LTR


12


Implement RTL without breaking LTR


12



Creating Dynamic Sass is not possible


12




Its not 100% mirror, some parts remain as is.


12




Its not 100% mirror, some parts remain as is.

All interactions using JS has to be mirrored

RTL IMPLEMENTATION - POSSIBLE SOLUTIONS

13


13

Override CSS


13

Advantages -

Override CSS


13

Advantages -

Override CSS

Quick to implement


13

Advantages -

Override CSS

Quick to implement

No worries about existing LTR

Disadvantages -


13

Advantages -

Override CSS

Quick to implement


Disadvantages -


13

Advantages -

Override CSS

Quick to implement


Extra CSS Weight

Disadvantages -


13

Advantages -

Override CSS

Quick to implement

No worries about existing LTR Too many extra CSS rules

Extra CSS Weight

Disadvantages -


13

Advantages -

Override CSS

Quick to implement


Extra CSS Weight

Page load speed

Disadvantages -


13

Advantages -

Override CSS

Quick to implement


Extra CSS Weight

Page load speed

Less reliable and extendable


14


14

Divide & Write separate CSS


14

Advantages -



14

Advantages -


No Overrides of rules


14

Advantages -



Page load remains same


14

Advantages -




Very flexible and extendable


14

Advantages -





Provides customisability

Disadvantages -


14

Advantages -






Disadvantages -


14

Advantages -




Hard to debug



Disadvantages -


14

Advantages -



Page load remains sameRequired extra effort in testing to make sure not breaking LTR/RTL in future

Hard to debug



RTL IMPLEMENTATION

15

RTL IMPLEMENTATION

15

Request

RTL IMPLEMENTATION

15

Request

RTL IMPLEMENTATION

15

RequestDetect

ContentDir

RTL IMPLEMENTATION

15

RequestDetect

ContentDir

RTL IMPLEMENTATION

15

Get LTR CSS

RequestDetect

ContentDir

RTL IMPLEMENTATION

15

Get LTR CSS

Get RTL CSS

RequestDetect

ContentDir

RTL IMPLEMENTATION

15

Get LTR CSS

Get RTL CSS

RequestDetect

ContentDir

RTL IMPLEMENTATION

15

Serve theLTR/RTL CSS

Get LTR CSS

Get RTL CSS

RequestDetect

ContentDir

RTL IMPLEMENTATION

16

DEMO

TESTING RTL

17

TESTING RTL - CHALLENGES

18


18

What to test? Data or Presentation?


18


How much to test?


18


How much to test?

What level of depth required in Testing?


18


How much to test?


Should we check the existing website?


18


How much to test?


Should we check the existing website?

Compare new LTR with old LTR to keep it intact

AUTOMATING CSSAutomating CSS for LTR and RTL (i18n)

19

AUTOMATING CSS - CHALLENGES

20


20

Separation of concerns!


20


Automate data & markup


20



Automate existing LTR presentation


20




Automate RTL presentation with same old markup


20




Automate RTL presentation with same old markup

Automate comparisons

AUTOMATING CSS - SEPARATION OF AUTOMATION

21


21

Jasmine for CSS testing


21

Markup compilation with data validations

automation



21

Markup compilation with data validations

automation

Automate CSS presentation.


AUTOMATING CSS

22

DEMO

AUTOMATING CSS

Restrictions

• Dynamic attributes/values testing is hard

• Testing attributes supported by HTML for ltr/rtl

• flex model

• display: inline-block

• transforms

23

24

But sometimes you need to stop your horses in urge to automate everything.

Q & ADon’t shy to ask your doubts, but let me clear it that I’m not google also.

25

For questions or suggestions:

Contact me - www.abhinavs.com/blog

@as_abhinav

THANK YOU

Tasting i18n

Internet

creation of data development

localised data set

language specics

internationalisation

internationalisation

example of apps

challenges tasks

simple make