Do the right (to left) thing

DotheRight(toLeft)Thing
DirectionalContentinReact
MAJA WICHROWSKA / 2018-05-17 / @MAJAPW
1 Do the Right (to Left) Thing (PDF) - May 20, 2018

DIRECTIONAL CONTENT IN REACT
@majapw

Maha(‫)ماحا‬
Lives in New York City
Studies English at NYU
“A terminally pessimistic
and culturally
dispossessed teenager”
Khalid(‫)خالد‬
Lives in Cairo, Egypt
Getting an MBA from
Cairo University
“A chronic misfit with a
creepy side-kick friend”
@majapw

@majapw

•Why support right-to-left languages at all?
•Why is it hard to do so?
•What tools are already available?
•How did we solve this problem at Airbnb?
@majapw

WHY SUPPORT RIGHT-TO-LEFT?
@majapw

ި‫ހ‬ެ‫ވ‬ި‫ދ‬
(Dhivehi)
‫دیلی‬ ‫آذربایجان‬
(Azeri)
‫کوردی‬
(Kurdish)
‫ִבִרית‬‫ע‬
(Hebrew)
‫فارسی‬
(Persian)
‫سنڌي‬
(Sindhi)
‫پښتو‬
(Pashto)
‫و‬ُ‫د‬‫ر‬ُ‫ا‬
(Urdu)
‫العربية‬
(Arabic)
RTLLanguages
WHAT’S OUT THERE?
@majapw

[http://www.internetworldstats.com/stats5.htm]
ARABIC ON THE WEB
•58.7% of the Middle East is on the Internet.
•Over 90% of the population of Qatar and the
UAE have access to the Internet.
•40% of the Arab Digital Generation uses the
Internet for at least 5 hours a day.
@majapw

ARABIC ON THE WEB
•4-5% of Internet users speak Arabic.
•Arabic-speaking Internet users have
grown 7250% since 2000.
•60% of Arabic speakers would prefer
content in their own language.
•Arabic speakers prefer blogging and
other similar platforms so asto
createthatArabiccontent.
[http://www.internetworldstats.com/stats7.htm] @majapw

ARABIC ON THE WEB
[https://w3techs.com/technologies/overview/content_language/all]
[http://funredes.org/lc2017/]
Only0.8%to3% 
oftopwebsites 
haveArabiccontent
Atlas Mountains, Morocco
@majapw

WHY IS THIS HARD?
@majapw

Whyisthishard?
.‫ﻣﺎﯾﺎ‬ ‫اﺳﻣﻲ‬ !‫ﻣرﺣﺑﺎ‬
@majapw

Whyisthishard?
.Maja ‫اﺳﻣﻲ‬ !‫ﻣرﺣﺑﺎ‬
BIDIRECTIONAL CONTENT
@majapw

Whyisthishard?
.27 ‫ﯾوم‬ ‫أوﺻل‬
BIDIRECTIONAL CONTENT
@majapw

Whyisthishard?
.27 ‫ﯾوم‬ ‫أوﺻل‬
USER-GENERATED CONTENT/INPUTS
@majapw

Whyisthishard?
CUSTOM CSS STYLES
@majapw

Whyisthishard?
ICONOGRAPHY/OTHER IMAGERY
@majapw

Whyisthishard?
@majapw

GET THE GEAR*
*TOOLS, LIBRARIES, WHATEVER
@majapw

Tools
BUILT-IN GEAR
dir=“ltr”
dir=“rtl”
dir=“auto”
@majapw

Tools
BRUTALIST AIRBNB
@majapw

<DirectionProvider/>
Sets the direction attribute based on a global language setting on a top-level node
withDirection()
Wraps individual components and consumes the direction as a prop, allowing for customization
based on its value.
@majapw
react-with-direction

render() {
const { count } = this.state;
return (
<div>
{`Step ${count + 1}`}
</div>
);
}
DirectionProvider
@majapw

render() {
return (
<div>
<IconChevronRight />
</div>
);
}
DirectionProvider
@majapw

render() {
return (
<div>
<IconChevronRight
onClick={() => {
this.setState({ count: (count + 1) % 100 })
}
/>
</div>
);
}
DirectionProvider
@majapw

<div dir=“rtl”>
</div>
render() {
return (
<IconChevronRight
onClick={() => {
}
/>
);
}
<DirectionProvider direction={DIRECTIONS.RTL}>
</DirectionProvider>
DirectionProvider
@majapw

<div dir=“rtl”>
</div>
render() {
return (
<IconChevronRight
onClick={() => {
}
/>
);
}
DirectionProvider
@majapw

export default function IconChevronNext({ ...props }) {
...
}
withDirection
@majapw

export default function IconChevronNext({ ...props }) {
return <IconChevronRight {...props} />;
}
withDirection
@majapw

function IconChevronNext({ direction, ...props }) {
}
export default withDirection(IconChevronNext);
withDirection
@majapw

function IconChevronNext({ direction, ...props }) {
if (direction === DIRECTIONS.RTL) {
return <IconChevronLeft {...props} />;
}
}
export default withDirection(IconChevronNext);
withDirection
@majapw

render() {
return (
<DirectionProvider direction={DIRECTIONS.RTL}>
<IconChevronNext
onClick={() => {
}
/>
</DirectionProvider>
);
}
WithDirection
@majapw

DIR=“LTR”
ManualLabor
@majapw

DIR=“RTL”
ManualLabor
@majapw

Whataboutstyle?
AUTOMATED OPTIONS
R2 (ded/R2) - a CSS LTR ∞ RTL converter for i18n friendly layouts
css-flip (twitter/css-flip) - a CSS BiDi flipper
rtlcss (MohammadYounes/rtlcss) - Framework for transforming CSS from LTR to RTL
cssjanus (cssjanus/cssjanus) - Flip CSS stylesheets between left-to-right and right-to-left
webpack-rtl-plugin (romainberger/webpack-rtl-plugin) - Webpack plugin to produce a rtl css bundle
@majapw

R2 (ded/R2) - a CSS LTR ∞ RTL converter for i18n friendly layouts
css-flip (twitter/css-flip) - a CSS BiDi flipper
rtlcss (MohammadYounes/rtlcss) - Framework for transforming CSS from LTR to RTL
cssjanus (cssjanus/cssjanus) - Flip CSS stylesheets between left-to-right and right-to-left
webpack-rtl-plugin (romainberger/webpack-rtl-plugin) - Webpack plugin to produce a rtl CSS bundle
Whataboutstyle?
AUTOMATED OPTIONS
@majapw

/* BookIt.js */
Backin2014…
/* BookIt.scss */
@majapw

Howdowestylemodular
Reactcomponentswhile
minimizingside-effects
betweenthem?
AModularSolution
@majapw

/* BookIt.js */
AModularSolution
/* BookIt.scss */
@majapw

/* BookIt.jsx */
AModularSolution
/* BookIt.scss */
CSS-IN-JS
@majapw

AModularSolution
CSS-IN-JS
Aphrodite
[https://www.github.com/khan/aphrodite]
<Component/>
@majapw

AModularSolution
CSS-IN-JS
Aphrodite
<Component/>

AModularSolution
CSS-IN-JS
Aphrodite
<Component/>
compile-time

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>
Canyouhelpmeturnthese
intosomethingIcanuse?
{
container: {
display: ‘block’,
margin: ‘8px 4px’,
},
containerLarge: {
margin: 16,
},
}

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>
Here.Usethesereferences!
{
container: …,
containerLarge: …,
}

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>Create

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>Create
run-time

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>Create
run-time
Okay.NowIneedtoapply
thesestylestoaDOMnode.
[
styles.container,
styles.containerLarge,
]
Prettyplease,canyouhelp
meagain?<3

compile-time
AModularSolution
CSS-IN-JS
Aphrodite
<Component/>Create
run-timeOfcourse!ThatiswhatIam
herefor.Justusethis
uniqueclassnameonthat
node:
.container_w7y05q-o_O-
containerLarge_1l06a80

AModularSolution
compile-time
CSS-IN-JS
Aphrodite
<Component/>Create
run-time
Resolve

AModularSolution
compile-time
Abstraction
CSS-IN-JS
Aphrodite
<Component/>Create
run-time
Resolve

Aphrodite
react-with-styles-interface-aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
@majapw

JSS
react-with-styles-interface-JSS
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
react-with-styles
<Component/>
@majapw

react-with-styles-interface-react-native
react-native
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
react-with-styles
<Component/>
@majapw

CSS
react-with-styles-interface-css
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
react-with-styles
<Component/>
@majapw

Aphrodite
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
react-with-styles
<Component/>
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Canyouhelpmeturnthese
intosomethingIcanuse?
{
container: {
display: ‘block’,
margin: ‘8px 4px’,
},
containerLarge: {
margin: 16,
},
}
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Letmetalktomy
interfacerealquick!

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Letmeseewhat
Aphroditereturnsforthis
situation.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Here.ThisiswhatIgot
backfrommyinterface:
{
container: …,
containerLarge: …,
}
Youcanaccessthis
objectasaReactprop.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
[
styles.container,
styles.containerLarge,
]
Prettyplease,canyouhelp
meagain?<3
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Cool.Letmeaskmy
interfaceagain.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Ineedtocheckwith
Aphroditeandgetback
toyou!:)
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Okay,somyinterface
gavemeaclassnameso
I’mjustgoingtogiveitto
youlikethis: 
{
className:
‘.container_64dfxr-
O_o-
containerLarge_875dk
r’,
}
Youcanjustspreadthis
onto your DOM node.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Ialsoneedtoapplythese
dynamicstylestoanode.
[{
backgroundImage: …
left: 40,
}]
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Letmecheckwithmy
interface.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Hmm.Aphrodite
doesn’tknowhowto
handledynamicstyle
objects.…IguessIcould
handleitmyself?
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Here.Youcanjustusethis
object:
{
style: {
backgroundImage: …,
left: 40,
},
}
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
Okay,somyinterface
gavemeastylesoI’mjust
goingtogiveittoyoulike
this: 
{
style: …,
}
Youcanjustspreadthis
ontoyourDOMnode.
@majapw

Aphrodite
react-with-styles
compile-time
Abstraction
CSS-IN-JS
Create
run-time
Resolve
<Component/>
@majapw

•Handles all directional styles.
•No changes to how developers write components.
•Handles both Aphrodite-generated classnames and inline style
objects.
•Has minimal performance impact.
AutomaticStyleFlippinginRWS
IMPLEMENTATION REQUIREMENTS
Petra, Jordan
@majapw

ATTEMPT #1
@majapw

•Create happens at compile-time.
•While resolvehappens at run-time, the method is
defined once and exported as a singleton.
Attempt#1
SOME IMPORTANT CONSIDERATIONS
This means that we do not have access to
directional context.
@majapw

•We can assume all our apps have a top-leveldir
attribute that is set before the first render.
•Aphrodite has a built-in plugin system to handle
customstyleselectors.
Attempt#1
THINGS WE CAN LEVERAGE
@majapw

LeverageAphrodite’splugin
systemtocreatedescendent
selectorsfordefaultstylesina
[dir=“ltr”]contextandflipped
stylesina[dir=“rtl”]context.
Attempt#1
OUR CORE STRATEGY
@majapw

CSS-in-JS
Attempt#1
USING APHRODITE’S PLUGIN SYSTEM
CSS
{
container: {
color: 'red',
},
}
.container_fesszw {
color: red !important;
}
@majapw

{
container: {
‘:focus’: {
color: 'purple',
},
},
}
CSS-in-JS
Attempt#1
CSS
.container_fesszw:focus {
color: purple !important;
}
@majapw

[dir=“rtl"] .container_fesszw {
margin-left: 10px !important;
}
[dir="ltr"] .container_fesszw {
margin-right: 10px !important;
}
CSS-in-JS
Attempt#1
CSS
{
container: {
_rtl: {
marginLeft: 10,
},
_ltr: {
marginRight: 10,
},
},
}
@majapw

Aphrodite
react-with-styles
<Component/>
Stylemeplz.
[
styles.container,
{
left: 40
},
]
run-time
Resolve

Aphrodite
react-with-styles
<Component/>
Ofcourse.Letmeasktheinterface.

Aphrodite
react-with-styles
<Component/>
[Before]Compile-timeStaticStyles
Pass unchanged to Aphrodite.

Aphrodite
react-with-styles
<Component/>
[Now]Compile-timeStaticStyles
Transform into _rtl/_ltrstyles by using Kent
Dodds’ rtl-css-jslibrary.
Enable our custom plugin in Aphrodite.

Aphrodite
react-with-styles
<Component/>
resolveStaticStyles(styles.container)

Aphrodite
react-with-styles
<Component/>
resolveStaticStyles({
__name: ‘.container_rbvzuy’,
__definition: {
color: ‘red’,
float: ‘left’,
},
})

[Now] Compile-time Static Styles
Transform into _rtl/_ltr-keyed styles by the
interface using Kent Dodds’ rtl-css-js library.
Aphrodite
react-with-styles
<Component/>
__definition: {
_ltr: {
color: ‘red’,
float: ‘left’,
},
_rtl: rtlCSSJS({
color: ‘red’,
float: ‘left’,
}),
},
})

[Now] Compile-time Static Styles
interface using Kent Dodds’ rtl-css-js library.
Aphrodite
react-with-styles
<Component/>
Compile-time Created Styles
Pass as is to Aphrodite
interface using Kent Dodds’ rtl-css-js library
Pass into a version of Aphrodite with a custom
plugin enabled
__definition: {
_ltr: {
color: ‘red’,
float: ‘left’,
},
_rtl: {
color: ‘red’,
float: ‘right’,
},
},
})

Aphrodite
react-with-styles
<Component/>
Here.SpreadthisontoyourDOMnode. 
{
className: ‘.container_rbvzuy’,
}
[dir="rtl"] .container_rbvzuy {
float: right !important;
}
[dir="ltr"] .container_rbvzuy {
float: left !important;
}

Aphrodite
react-with-styles
<Component/>
Style me plz.
[
styles.container,
{
left: 40
},
]
@majapw

Aphrodite
react-with-styles
<Component/>
Ofcourse.Letmeasktheinterface.
@majapw

Aphrodite
react-with-styles
<Component/>
[Before]Run-timeDynamicStyles
Pass inline styles unchanged back to RWS.
@majapw

Aphrodite
react-with-styles
<Component/>
[Now]Run-timeDynamicStyles
Transform styles into Aphrodite classnames.*
*Only do this for directional styles.
@majapw

Aphrodite
react-with-styles
<Component/>
{
left: 40
}
@majapw

Aphrodite
react-with-styles
<Component/>
{
__name: ‘inlineStyle_aov0j6’,
__definition: {
left: 40,
},
}
@majapw

@majapw
Aphrodite
react-with-styles
<Component/>
{
__definition: {
_ltr: {
left: 40,
},
_rtl: rtlCSSJS({
left: 40,
}),
},
}

@majapw
Aphrodite
react-with-styles
<Component/>
{
__definition: {
_ltr: {
left: 40,
},
_rtl: {
right: 40,
},
},
}

Aphrodite
react-with-styles
<Component/>
__definition: {
_ltr: {
left: 40,
},
_rtl: {
right: 40,
},
},
})

Aphrodite
react-with-styles
<Component/>
Here.SpreadthisontoyourDOMnode. 
{
className: ‘.inlineStyle_aov0j6’,
}
[dir="rtl"] .inlineStyle_aov0j6 {
right: 40px !important;
}
[dir="ltr"] .inlineStyle_aov0j6 {
left: 40px !important;
}
@majapw

Attempt#1
SOME SUCCESS
@majapw

•Descendent selectors do not allow for context switching.
•Descendent selectors coupled with shorthand/longhand
styles cause specificity issues.
•React 16 upgrade caused server/client mismatches due
to the way we were initializing direction and transforming
inline styles to classnames.
Attempt#1
FAILURES
@majapw

ATTEMPT #2
@majapw

Attempt#2
MODIFIED REQUIREMENTS
•No changes to how developers write components.
•Handles both Aphrodite-generated classnames and inline style objects.
@majapw

•Changestohowdeveloperswritecomponentscaneasilybecodemodded.
•Handles both Aphrodite-generated classnames and inline style objects.
•Handlesdirectionalcontextswitching.
•Doesnotintroducespecificityissues.
•Doesnotcauseaserver/clientmismatch.
Attempt#2
MODIFIED REQUIREMENTS
@majapw

Usecontextualcreateand
resolvemethodsbasedon
direction.
Attempt#2
OUR CORE STRATEGY
@majapw

compile-time
Attempt#2
CONTEXTUAL METHODS
Create
run-time
ResolveCreate Resolve
@majapw

compile-time
Attempt#2
CONTEXTUAL METHODS
CreateLTR
CreateRTL
run-time
ResolveLTR
ResolveRTLCreate
Create Resolve
Resolve
@majapw

compile-time
Attempt#2
CONTEXTUAL METHODS
CreateLTR
CreateRTL
run-time
ResolveLTR
ResolveRTL
deferred to first render
@majapw

compile-time
Attempt#2
CONTEXTUAL METHODS
CreateLTR
CreateRTL
run-time
ResolveLTR
ResolveRTL
deferred to first render passed down as a prop
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
<Component/>Attempt#2
CONTEXTUAL METHODS
Canyoucreatethese
styles?
{
container: {
color: ‘red’,
float: ‘left’,
},
}
Thanks!
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
<Component/>
ItlookslikeI’minanRTL
context.Letmecallmy
interface’sRTL-specific
createmethod.
Attempt#2
CONTEXTUAL METHODS
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Ooh,anRTLcontext!Let
meflipthestylesbeforeI
passthemtoAphrodite.
{
container:
rtlCSSJS({
color: ‘red’,
float: ‘left’,
)}
},
}
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Ooh,anRTLcontext!Let
meflipthestylesbeforeI
passthemtoAphrodite.
{
container:
{
color: ‘red’,
float: ‘right’,
}
},
}
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Here.ThisiswhatIgot
backfrommyinterface:
{
container: …,
}
Youcanaccessthis
objectasaReactprop.
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
[
styles.container,
{
left: 40,
},
]
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
<Component/>
[
styles.container,
{
left: 40,
},
]
Attempt#2
CONTEXTUAL METHODS
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
<Component/>
ItlookslikeI’minanRTL
context.Letmeusemy
interface’sRTL-specific
resolvemethod.
Attempt#2
CONTEXTUAL METHODS
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Sincewe’reinRTL-land,
I’llflipthesestylesbefore
passingthemback.
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
[
rtlCSSJS({
left: 40,
}),
]
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Hereyougo!Usethis:
{
style: {
right: 40,
},
}
@majapw

Aphrodite
react-with-styles
compile-time
Create
run-time
Resolve
CONTEXTUAL METHODS
Here.Spreadthisonto
yourDOMnode. 
{
style: {
right: 40,
},
}
@majapw

Attempt#2
CONTEXTUAL METHODS
import {
resolve,
} from ‘react-with-styles’;
function MyComponent({ styles }) {
return (
<div {...resolve(styles.container)}>
Hello World
</div>
);
}
@majapw

Attempt#2
CONTEXTUAL METHODS
import {
resolve,
function MyComponent({ styles }) {
return (
Hello World
</div>
);
}
@majapw

Attempt#2
CONTEXTUAL METHODS
import {
resolve,
function MyComponent({ resolve, styles }) {
return (
Hello World
</div>
);
}
@majapw

FinalResult
SUCCESS!
@majapw

TrueLoveUnlocked
MAHA & KHALID 4EVA
@majapw

airbnb/react-with-direction
airbnb/react-with-styles
kentcdodds/rtl-css-js
Thankyou!
@majapw

Do the right (to left) thing

More Related Content

Recently uploaded (20)

Featured (20)

Do the right (to left) thing