En nuestro equipo enfocamos nuestros esfuerzos en recopilar datos para desarrollar una tabla de comparación que muestra el verdadero coste al mover dinero entre diferentes divisas. En su desarrollo, se nos ha presentado el reto de abstraernos de la propia tecnología elegida, en este caso React, para hacerlo compatible con cualquier cliente. Con esta charla quiero compartir las lecciones aprendidas convirtiendo la tabla en un componente web con el propósito de facilitar su distribución y la propagación de nuevas versiones con la mínima fricción para el cliente. Find out more presentations at https://madrid2018.codemotionworld.com/speakers/

1. Ultimate Stack Compilation
Catalina Oyaneder
Madrid | November 30 - December 1, 2018

2. Hi there!
Software developer at
I Am Cata
@cataflu

3. Hi there!
Software developer at
I Am Cata
@cataflu
@flipper83

5. More than 1300
people across 10 cities

6. We work in autonomous and independent teams focused
on solving a specific business or customer problem.

7. Comparison Team

8. Victor Jash
Marcus
Dave
Phil

9. Dave

10. Comparison Table
Why?

11. The unaware and unclear
Photo by Eric Ward on Unsplash

12. When banks and others operators
claim to be free of fees, actually
they hide their fees in the
exchange rate.
Fee-free1

13. “Mediante el servicio DCC (Dynamic
Currency Conversion), activado por
defecto en todos los TPV de Banco
Sabadell, los comercios que cobren de
tarjetas extranjeras de países no euro
pueden obtener una comisión extra
(estándar del 0,5%).”
DCC
https://www.bancsabadell.com/cs/Satellite/SabAtl/TPV/6000018200278/en/

14. Banks could charge you up to 5% in
hidden costs when sending money to
any bank account abroad. TransferWise
is up to 8x cheaper. It's only fair.
Up to 8x
cheaper

15. Comparison
Journey

16. Hypothesis
People don’t
believe in up to
8x cheaper.
If you see savings,
you are more likely to
share the product.

17. MVP
Display the data using
an image in the
referral page

18. Static
image

19. MVP
Hypothesis
confirmed
20% lift in the referral
invitations
Display the data using
an image in the
referral page

20. Develop
MVP
Hypothesis
confirmed
20% lift in the referral
invitations
Display the data using
an image in the
referral page

21. Static
image

22. Static
image
? ?
?

23. Let’s get to work
Design iteration
Collecting the data
Packaging and distribution

24. Before any markup
we run user testing
cartoon by Satu Kyröläinen (www.satukyrolainen.com/cartoons)

25. Observe behaviour,
listen feedback,
question expectations
and learn

26. Static
image

27. First
iteration

28. First
iteration

29. First
iteration

30. We need to rethink
design

31. Meanwhile we are
collecting the data

32. APIsOpen Banking
- Create more competition
- Better services and more innovation
Allow trusted third parties to access
bank account information.

33. Distribution
Photo by Stephane YAICH on Unsplash
A React component
To share with many
other teams
But, how?

36. Github Releases

37. Github Releases

38. Github Releases npm distribution

39. What if people don’t use React?
What if we want to share it externally?
Wait! Is npm package all we need?
How can we easily communicate new releases?

40. Unknowns
and research
What do other companies do?
Photo by National Geographic

54. Small reusable piece of
functionality that even
non-programmers can
utilise to enrich their site.
What we need is
a Web Plugin

55. And what can we choose to
build it?
Web Components? iframe?

56. Fully encapsulate all of their HTML and CSS.
Bundle markup and styles into custom HTML elements
But are they ready?
Browser support - Not present in Safari or IE
Great stuff
Polyfill All The Things - Complex implementation
Web
Components

57. <iframe>: The Inline Frame element

58. The
Universal
Loader

59. How it works

65. The UL renders the
table in a <div>
container

66. UL
Great stuff
As soon as we release, everybody has the changes
Script has loading problems? The link is still rendered
And the downsides?
Not SEO friendly
Responsive
Easy to share
Possible fragility on sites we don't control

67. UL
Great stuff
As soon as we release, everybody has the changes
Script has loading problems? The link is still rendered
And the downsides?
Not SEO friendly
Responsive
Easy to share
Possible fragility on sites we don't control
Did you say inline <div>?

68. ?

69. We use our custom
Bootstrap
Context
It’s our Style Guide, a living
document
And ensures consistency
and coherence across our
platform

70. There are no namespaces in CSS.
All you do in CSS ends up in global scope.
What if the host page also uses Bootstrap?
With different style or version?
So, what’s the problem?

71. We need to
scope our CSS BEM! SMACSS!
OOCSS!
ACSS!

72. The basic idea of
styled-components is
to enforce best
practices by removing
the mapping between
styles and components.
Max Stoiber co-creator

73. CSS directly into your components
Small, reusable and easy to test
Reduce specificity clash
CSS-in-JS

74. Wait, wait , wait! So having
this kind of markup in JS
wasn't enough?!

84. The styles are part of their
component

85. Unique class
names! Awesome!
All my problems
solved!

86. Ouch! Not really… It cannot
be applied to our Bootstrap

87. Helped by Webpack or Browserify
CSS file in which all class names and
animation names are scoped locally
by default

94. Wait!
In some routes
we are not the
cheapest
What should
we do?

95. Be
Transparent

96. Be
Transparent

99. But after one year of collecting data...
We've seen things you people wouldn't believe.

100. The Costs Of Money
Transfer It's not
Rocket Science
“0% Commission/ No fees”
Fee spikes
Exchange rate vs amount sent
Route directions
Watch out for:

101. Future?

102. Thanks!
:)