Front-end culture @ Booking.com

Eduardo Shiota

Eduardo Shiotacontato@eshiota.com@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 wel!contato@eshiota.com@shiota