front-end culture @ booking.com
TRANSCRIPT
Front-end culture @ Booking.com
Eduardo Shiota
Eduardo [email protected]@shiota
www.workingatbooking.com
Front-end culture @ Booking.com
What is the role of a front-end developer?
”Transforming mockups into HTML and CSS.”
”Doing design, HTML, CSS, and a bit of JavaScript.”
”Writing scalable JavaScript and crafting fast websites.”
Largest accommodations reservation website in the world.
Founded in 1996.Current version is 13 years old.
Developers and designers touch the same codebase every day.
I’m not here to talk about frameworks and libraries.
We must deliver the best experience, as frictionless as possible, and grow and adapt fast to the customer’s need.
Experimentation
Monitoring
Empowerment
ContinuousImprovement
Site speed
Experimentation
Buy now
Buy now
vs
Buy now
Buy now
if track(my_experiment)50%
50%
Buy now
Buy now
Logged in/outLanguage/currencyCountry of originBrowser/OS/Device…
Visited productsNavigation flowSearch criteriaValidation errors…
Customer’s city/statePayment typeCustomer service callsCancellations…
Page load timeWallclock/CPUNumber of queriesServer/client-side errors…
Buy now Buy now
Duration: 14 daysVisitors: 45.140 (22.570 per variant)
Transactions
Average price
339 (1.5%) 407 (1.8%)+20%
$ 42,00 $ 42,84+2%
Everything we do at Booking—including technical decisions—is done through A/B testing.
“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
Quiz time!
Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands
Which one had a better performance?
1.7% drop in bounce rates
Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands
Which one had a better performance?
203% increase in CTR
Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands
Which one had a better performance?
43.4% increase in sales
Which one had a better performance?
A: Raise your left hand B: Raise your right hand
Inconclusive: Don’t raise your hands
Which one had a better performance?
No conclusive impact on any main metric
if track('new_button')render 'new_button.inc'
elserender 'button.inc'
if track('new_button') == 1render 'new_button.inc'
if track('new_button') == 2render 'new_button_v2.inc'
elserender 'button.inc'
if (track('increase_gallery_size')) {require('gallery').init({size: 20
});} else {require('gallery').init({size: 10
});}
Buy now
Buy now
vsNet conversion
Clickthrough ratesValidation errors
vsJS Errors
Net conversion (per UA)Page load time
jQuery 1.11.3
jQuery 3.0
vsTime to render
(Net conversion per UA)Page load time
Virtual DOM
Morphdom
”In god we trust, all others must bring data.”
Net conversion is one of many proxy metrics for the user’s experience.
Monitoring
We have dashboards showing us what happens in every single part of the application.
Everything generates an event.
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
Events DB Graphite metrics
If something happens, we can quickly react and debug.
Site speed
The customer must be able to make a reservation, regardless of being behind China’s firewall or using a fiber connection in Germany.
1st DOM Content Ready1st Load
Avg. DOM Content ReadyAvg. Load
Body size in bytesWallclock
CPUMemory usage
Service Workers
Cache management and offline first.
Critical rendering path
Inlining above-the-fold resources.
Asynchrnonous assets and templates
On-demand resources loading.
Assets pre-fetching
Pre-fetching assets for the next step in the customer’s journey.
WebP? HTTP/2?
All performance changes are done and measured through our A/B testing tool.
Empowerment
Every developer and designer has the power to make a decision and execute it on every step of the process.
Conception of ideas
Backlog management
Implementation discussions
Designing and coding
QualityAssurance
Deploy to production
A/B test configuration and
start
Data analysis and decision making
Learnings and follow ups
Everyone is equally responsible for making decisions and the product’s success; there are no ”HiPPOs”.
Our data is available for all developers and designers.
(View our videos at the PlanetBooking YouTube channel)
Continuous Improvement
Our product is over 10 years old, and is continously growing and evolving.
We cannot afford redesigns and refactoring code all the time.
All of our efforts are always focused on the customer, and our velocity must allow us to react accordingly.
beneficial for customers
beneficial for the company
beneficial for developers
What does ”high performance” mean?
It means delivering the best experience, as frictionless as possible, and growing and adapting fast to the customer’s need.
It means doing experimentation. We make data-driven decisions, and we know we’re building the best experience for our customers.
It means monitoring everything that happens. We’re sure that, if the customer’s experience is broken, we’re able to react fast.
It means giving power to developers. Everyone is responsible for deciding the product’s future.
It means constantly improving and adapting to the customer, the market, and to new technologies.
Technology alone won’t give you a high performance.
Don’t love the tools, love the challenge.
You are responsible for the future of your product.
”Keep the customer at the centre of everything you do.”
Dank jullie [email protected]@shiota