Вениамин Тамбурин

Transcript

1. Как мы пишем фронтенд в Букинге Вениамин Тамбурин
4. Booking.com работает более чем в 220 странах на 43 языках
5. В чем заключается роль разработчика интерфейсов?
8. Локализация Эксперименты Мониторинг Производительность Ответственность команды Инновации
9. Локализация 
 и интернационализация
10. 43 языка 50 валют 2000+ комбинаций
13. Верстка HTML и CSS всегда должна работать
18. Английский Русский Болгарский Китайский Арабский
20. Мы должны понимать язык 
 и культуру наших пользователей
21. два варианта на одном экране
24. Говоря с человеком на том языке, который он понимает, ты говоришь с его головой. Если ты говоришь с человеком на его родном языке, ты говоришь с его сердцем 
 — Нельсон Мандела
25. Эксперименты
27. Buy now Buy now vs
28. Buy now Buy now ! if track(experiment)
29. 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
30. Buy now Buy now Продолжительность: 14 дней
 Посетители: 45140 (22570 на вариант) Transactions Average price 407 (1.8%) $ 42,00 $ 42,84 339 (1.5%) +20% +2%
31. Что бы мы ни делали, мы делаем через A/B эксперименты
32. Но новый макет очевидно лучше старого! Мы можем обойтись без эксперимента! 
 — большинство дизайнеров
33. Какой вариант лучше? Поднимите правую руку ✋ Не поднимайте руку, если нет разницы Поднимите левую руку
34. Какой вариант лучше? Поднимите правую руку ✋ –1.7% отказов
35. Какой вариант лучше? Поднимите правую руку ✋ Не поднимайте руку, если нет разницы Поднимите левую руку
36. Какой вариант лучше? Поднимите левую руку +203% CTR
37. Какой вариант лучше? Поднимите правую руку ✋ Не поднимайте руку, если нет разницы Поднимите левую руку
38. Какой вариант лучше? Поднимите левую руку +43.4% покупок
39. Какой вариант лучше? Поднимите правую руку ✋ Не поднимайте руку, если нет разницы Поднимите левую руку
40. Какой вариант лучше? Ни один вариант не показал значимых изменений
41. Buy now Buy now vs Net conversion Click-through rates Validation errors больше слова про то, что мы тестируем и тезнологии, не только кнопки
42. vs Net conversion Page load time Validation errors jQuery 1.11 jQuery 3.0
43. vs Time to render Net conversion (per UA) Page load time Virtual DOM morphdom
44. Задача — не увеличить конверсию, но быть лучше для наших пользователей
45. Мониторинг
46. Каждая часть приложения покрыта метрикой
48. Каждое событие создает Event
49. { 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
50. Мы можем быстро реагировать на любые проблемы
52. Производительность
53. Пользователь должен иметь возможность забронировать отель где бы он ни находился
54. Первый DOM Content Ready Первый onLoad
 Средний DOM Content Ready Средний onLoad Размер страницы Wallclock CPU Память
55. Service Workers Critical rendering path Asynchronous assets and templates Assets pre-fetching
56. Любое улучшение производительности пройдет через эксперимент
57. Ответственность и автономность команд
58. Каждый дизайнер и разработчик может выдвинуть идею и воплотить ее в жизнь
59. Идея Обсуждение Дизайн и разработка Тестирование Релиз Создание A/B эксперимента Анализ результата Выводы и новые идеи
60. Все в равной мере ответственны за принятые решения и результаты
61. Инновации
62. Booking.com продолжает расти более 20 лет
63. Мы делаем редизайн и рефакторинг с большой осторожностью
65. ценность для
 пользователей польза
 компании радость
 разработчикам
66. Как же мы делаем фронтенд для 224 стран и 40 языков?
67. Локализация. Мы стараемся быть ближе к пользователям и говорить с ними на одном языке
68. Эксперименты. Мы не доверяем интуиции, но принимаем решения на основе точных данных
69. Мониторинг. Мы быстро реагируем на возникающие проблемы
70. Мы ответственны за все принимаемые решения
71. Мы следим за новостями рынка и технологий
73. Любите не инструменты, 
 но продукт и вызовы
74. Пользователь — мера всего
75. Dank jullie wel! Спасибо!