What are the challenges we face while developing the front-end for the largest accommodations reservations website in the world? Working on an e-commerce interface is already a complex task itself; how do we make it work in 224 countries, for customers all around the world? In this presentation, we'll see how our architecture, performance and UI decisions impact the experience of millions of partners and users who book a room with us.

1. Front-end culture @
Booking.com
Eduardo Shiota

2. Eduardo Shiota
contato@eshiota.com
@shiota

5. www.workingatbooking.com

6. Front-end culture @
Booking.com

7. What is the role of a front-end
developer?

8. ”Transforming mockups into HTML
and CSS.”

9. ”Doing design, HTML, CSS, and a bit
of JavaScript.”

10. ”Writing scalable JavaScript and
crafting fast websites.”

12. Largest accommodations
reservation website in the world.

13. Founded in 1996.
Current version is 13 years old.

14. Developers and designers touch the
same codebase every day.

16. I’m not here to talk about
frameworks and libraries.

17. We must deliver the best experience,
as frictionless as possible, and grow
and adapt fast to the customer’s need.

18. Experimentation
Monitoring
Empowerment
Continuous
Improvement
Site speed

19. Experimentation

21. Buy now
Buy now
vs

22. Buy now
Buy now
if track(my_experiment)
50%
50%

23. Buy now
Buy now
Logged in/out
Language/currency
Country of origin
Browser/OS/Device
…
Visited products
Navigation flow
Search criteria
Validation errors
…
Customer’s city/state
Payment type
Customer service calls
Cancellations
…
Page load time
Wallclock/CPU
Number of queries
Server/client-side errors
…

24. Buy now Buy now
Duration: 14 days
Visitors: 45.140 (22.570 per variant)
Transactions
Average price
339 (1.5%) 407 (1.8%)
+20%
$ 42,00 $ 42,84
+2%

25. Everything we do at Booking—including
technical decisions—is done through
A/B testing.

26. “But my design is so much better and
more intuitive than what we have! We
don’t need an A/B test.”
— the majority of designers

27. Quiz time!

28. Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands

29. Which one had a better performance?
1.7% drop in bounce rates

30. Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands

31. Which one had a better performance?
203% increase in CTR

32. Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands

33. Which one had a better performance?
43.4% increase in sales

34. Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands

35. Which one had a better performance?
No conclusive impact on any main metric

36. if track('new_button')
render 'new_button.inc'
else
render 'button.inc'

37. if track('new_button') == 1
render 'new_button.inc'
if track('new_button') == 2
render 'new_button_v2.inc'
else
render 'button.inc'

38. if (track('increase_gallery_size')) {
require('gallery').init({
size: 20
});
} else {
require('gallery').init({
size: 10
});
}

39. Buy now
Buy now
vs
Net conversion
Clickthrough rates
Validation errors

40. vs
JS Errors
Net conversion (per UA)
Page load time
jQuery 1.11.3
jQuery 3.0

41. vs
Time to render
(Net conversion per UA)
Page load time
Virtual DOM
Morphdom

42. ”In god we trust, all others
must bring data.”

43. Net conversion is one of many proxy
metrics for the user’s experience.

44. Monitoring

45. We have dashboards showing us
what happens in every single part
of the application.

47. Everything generates an event.

48. action => ’hotel’,
referrer => ’http://booking.com’,
country => ’us’,
ip => ’222.222.2.22’,
git_tag => ’20160625-120178’,
node => ’xx555-33’,
browser => ’chrome’,
version => ’49’,
js_error => {
file => ’hotel.js’,
error => ’undefined B is not a function’,
stack => ’...’,
line_number => 337
},
js_data => {
first_load => 4343,
first_paint => 1200
}
is_robot => 0,
...
Event
DB

49. Events DB Graphite metrics

50. If something happens, we can quickly
react and debug.

52. Site speed

53. The customer must be able to make a
reservation, regardless of being behind
China’s firewall or using a fiber
connection in Germany.

54. 1st DOM Content Ready
1st Load
Avg. DOM Content Ready
Avg. Load
Body size in bytes
Wallclock
CPU
Memory usage

55. Service Workers
Cache management and offline first.

56. Critical rendering path
Inlining above-the-fold resources.

57. Asynchrnonous assets and templates
On-demand resources loading.

58. Assets pre-fetching
Pre-fetching assets for the next step in the
customer’s journey.

59. WebP? HTTP/2?

60. All performance changes are
done and measured through our
A/B testing tool.

61. Empowerment

62. Every developer and designer has the
power to make a decision and execute it
on every step of the process.

63. Conception
of ideas
Backlog
management
Implementation
discussions
Designing and
coding
Quality
Assurance
Deploy to
production
A/B test
configuration and
start
Data analysis and
decision making
Learnings and
follow ups

64. Everyone is equally responsible for
making decisions and the product’s
success; there are no ”HiPPOs”.

65. Our data is available for all developers
and designers.

66. (View our videos at the
PlanetBooking YouTube channel)

67. Continuous Improvement

68. Our product is over 10 years old, and
is continously growing and evolving.

70. We cannot afford redesigns and
refactoring code all the time.

71. All of our efforts are always focused on
the customer, and our velocity must
allow us to react accordingly.

72. beneficial for
customers
beneficial for the
company
beneficial for
developers

73. What does ”high
performance” mean?

74. It means delivering the best
experience, as frictionless as possible,
and growing and adapting fast to the
customer’s need.

75. It means doing experimentation. We make
data-driven decisions, and we know we’re
building the best experience for our
customers.

76. It means monitoring everything that
happens. We’re sure that, if the customer’s
experience is broken, we’re able to react fast.

77. It means giving power to developers.
Everyone is responsible for deciding the
product’s future.

78. It means constantly improving and adapting
to the customer, the market, and to new
technologies.

79. Technology alone won’t give you a high
performance.

81. Don’t love the tools, love the challenge.

82. You are responsible for the future of
your product.

83. ”Keep the customer at the centre
of everything you do.”

85. Dank jullie wel!
contato@eshiota.com
@shiota