O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Front-end Culture @ Booking.com

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 85 Anúncio

Front-end Culture @ Booking.com

Baixar para ler offline

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.

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.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Front-end Culture @ Booking.com (20)

Mais de Eduardo Shiota Yasuda (9)

Anúncio

Mais recentes (20)

Front-end Culture @ Booking.com

  1. 1. Front-end culture @ Booking.com Eduardo Shiota
  2. 2. Eduardo Shiota contato@eshiota.com @shiota
  3. 3. www.workingatbooking.com
  4. 4. Front-end culture @ Booking.com
  5. 5. What is the role of a front-end developer?
  6. 6. ”Transforming mockups into HTML and CSS.”
  7. 7. ”Doing design, HTML, CSS, and a bit of JavaScript.”
  8. 8. ”Writing scalable JavaScript and crafting fast websites.”
  9. 9. Largest accommodations reservation website in the world.
  10. 10. Founded in 1996. Current version is 13 years old.
  11. 11. Developers and designers touch the same codebase every day.
  12. 12. I’m not here to talk about frameworks and libraries.
  13. 13. We must deliver the best experience, as frictionless as possible, and grow and adapt fast to the customer’s need.
  14. 14. Experimentation Monitoring Empowerment Continuous Improvement Site speed
  15. 15. Experimentation
  16. 16. Buy now Buy now vs
  17. 17. Buy now Buy now if track(my_experiment) 50% 50%
  18. 18. 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 …
  19. 19. 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%
  20. 20. Everything we do at Booking—including technical decisions—is done through A/B testing.
  21. 21. “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
  22. 22. Quiz time!
  23. 23. Which one had a better performance? A: Raise your left hand B: Raise your right hand Inconclusive: Don’t raise your hands
  24. 24. Which one had a better performance? 1.7% drop in bounce rates
  25. 25. Which one had a better performance? A: Raise your left hand B: Raise your right hand Inconclusive: Don’t raise your hands
  26. 26. Which one had a better performance? 203% increase in CTR
  27. 27. Which one had a better performance? A: Raise your left hand B: Raise your right hand Inconclusive: Don’t raise your hands
  28. 28. Which one had a better performance? 43.4% increase in sales
  29. 29. Which one had a better performance? A: Raise your left hand B: Raise your right hand Inconclusive: Don’t raise your hands
  30. 30. Which one had a better performance? No conclusive impact on any main metric
  31. 31. if track('new_button') render 'new_button.inc' else render 'button.inc'
  32. 32. if track('new_button') == 1 render 'new_button.inc' if track('new_button') == 2 render 'new_button_v2.inc' else render 'button.inc'
  33. 33. if (track('increase_gallery_size')) { require('gallery').init({ size: 20 }); } else { require('gallery').init({ size: 10 }); }
  34. 34. Buy now Buy now vs Net conversion Clickthrough rates Validation errors
  35. 35. vs JS Errors Net conversion (per UA) Page load time jQuery 1.11.3 jQuery 3.0
  36. 36. vs Time to render (Net conversion per UA) Page load time Virtual DOM Morphdom
  37. 37. ”In god we trust, all others must bring data.”
  38. 38. Net conversion is one of many proxy metrics for the user’s experience.
  39. 39. Monitoring
  40. 40. We have dashboards showing us what happens in every single part of the application.
  41. 41. Everything generates an event.
  42. 42. 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
  43. 43. Events DB Graphite metrics
  44. 44. If something happens, we can quickly react and debug.
  45. 45. Site speed
  46. 46. The customer must be able to make a reservation, regardless of being behind China’s firewall or using a fiber connection in Germany.
  47. 47. 1st DOM Content Ready 1st Load Avg. DOM Content Ready Avg. Load Body size in bytes Wallclock CPU Memory usage
  48. 48. Service Workers Cache management and offline first.
  49. 49. Critical rendering path Inlining above-the-fold resources.
  50. 50. Asynchrnonous assets and templates On-demand resources loading.
  51. 51. Assets pre-fetching Pre-fetching assets for the next step in the customer’s journey.
  52. 52. WebP? HTTP/2?
  53. 53. All performance changes are done and measured through our A/B testing tool.
  54. 54. Empowerment
  55. 55. Every developer and designer has the power to make a decision and execute it on every step of the process.
  56. 56. 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
  57. 57. Everyone is equally responsible for making decisions and the product’s success; there are no ”HiPPOs”.
  58. 58. Our data is available for all developers and designers.
  59. 59. (View our videos at the PlanetBooking YouTube channel)
  60. 60. Continuous Improvement
  61. 61. Our product is over 10 years old, and is continously growing and evolving.
  62. 62. We cannot afford redesigns and refactoring code all the time.
  63. 63. All of our efforts are always focused on the customer, and our velocity must allow us to react accordingly.
  64. 64. beneficial for customers beneficial for the company beneficial for developers
  65. 65. What does ”high performance” mean?
  66. 66. It means delivering the best experience, as frictionless as possible, and growing and adapting fast to the customer’s need.
  67. 67. It means doing experimentation. We make data-driven decisions, and we know we’re building the best experience for our customers.
  68. 68. It means monitoring everything that happens. We’re sure that, if the customer’s experience is broken, we’re able to react fast.
  69. 69. It means giving power to developers. Everyone is responsible for deciding the product’s future.
  70. 70. It means constantly improving and adapting to the customer, the market, and to new technologies.
  71. 71. Technology alone won’t give you a high performance.
  72. 72. Don’t love the tools, love the challenge.
  73. 73. You are responsible for the future of your product.
  74. 74. ”Keep the customer at the centre of everything you do.”
  75. 75. Dank jullie wel! contato@eshiota.com @shiota

×