際際滷

際際滷Share a Scribd company logo

Picking Dates @Airbnb

Maja Wichrowska
Maja Wichrowska

- Maja Wichrowska worked on the datepicker component at Airbnb for almost 2 years, taking it from an initial hacky solution to a fully redesigned, internationalized, and customizable component. - Early on, the datepicker was a small mission-critical part of the site built quickly without much focus on architecture. As Airbnb grew, technical debt accumulated and the datepicker struggled to scale. - Maja led a redesign of the datepicker using React to create three main controlled components that are easily internationalizable, cross-browser compatible, and customizable through props and styles.

1 of 27
Download to read offline
Picking Dates @Airbnb MAJA WICHROWSKA / 2016-08-16 A Journey Through Time
Picking Dates @Airbnb MAJA WICHROWSKA / 1471305600 The Reason I Drink
Tenure: Almost 2 years Team: Web Infrastructure Fun Fact: Once saw a live Potter Puppet Pals Show when they opened for the Wizard Rock band Harry and the Potters at Slims. Responsibilities: De Facto owner of all things date related on the frontend of Airbnb Maja Wichrowska Mostly Frontend Engineer
airbnb.com airbnb.com/s
~5 years ago
Small Team: ~15 engineers Building Fast: More important to get something out there then it is to engineer it perfectly Mission-Critical Component: If you can't select dates on the site, you can't really book We'll Fix It Later: Make this good later when everything is no longer on fire. Airbnb: The Startup 2011
Out of the box solution
~ 4 years ago
Medium team: ~30 engineers Established Product: People actively use Airbnb Growing Rapidly: Scale is the biggest issue on everyone's mind Airbnb: The Small Company 2012
FakeQueryUi /* * At the moment (ha), moment's kind of a pain wrt Ender (it detects Ender, * does not attach to window, and then breaks all of its own i18n files). It * also lacks some necessary data in the i18n files (specifically, what day * the locale starts its weeks on). For now use this shim, but don't * use it anywhere outside of the Datepicker module or it'll be impossible to * ever kill it down the line someday. */
FakeQueryUi /* * Horrifying Templating DSL * ------------------------- * * Lalala, don't mind the roll-your-own templating DSL, it is tres horrible * but slightly less horrible than mashing strings together. Is it worth * making the datepicker have a Handlebars dependency and doing things * properly? I don't know! */ function horror() {
FakeQueryUi /* * OH GOD I'M SO SORRY * * Some horrible templating. If you ever have to touch this, I will buy you * two beers and a tequila shot. * * Love, * [redacted] */
FakeQueryUi
~1 year ago
Large team: ~200 engineers Time/Resources for Technical Debt: The goal now is to build a sustainable architecture for the future Frontend Alignment: We know what technologies we're investing in (Hint: It's React) Hacks aren't cutting it anymore: The date picker keeps breaking in new and fascinating ways Airbnb: The Corporate Behemoth The Relatively Large Company 2015
Australia Brazil
One Particularly Excitable New Hire Literally chose #webinfra after talking with the then-manager about building a mobile-friendly, easily internationalized datepicker Maja Wichrowska Particularly Excitable New Hire
'Datepicker redesign' are the two best words in the English language" Redesign
Totally Smooth Launch Also known as that time I was writing a postmortem every week for five weeks
Why Date Formats Matter Or my personal favorite new date picker related bug Rails I18n vs. MomentJS's 'L' format: The same in some locales, but not all locales Localized dates in URLs: This is a very bad idea No dates search returns all results: If you test data has no availability, the search page looks successful Standardize your dates! YYYY-MM-DD
Picking Dates @Airbnb
1471305600 (i.e. today)
3 fully-controlled main components: <DateRangePicker/ >, <SingleDatePicker/>, <DayPicker/> Easily internationalizable: Integrates with moment locales, takes in props to localize month titles, accessibility text Cross-browser compatible: Has been tested in IE9/10/11 and Edge, Safari, Firefox, Chrome, Mobile Safari on iPads and iPhones, and Chrome on Android devices Utility classes for date conversion and comparison: Includes built in functions for converting to and from moment objects to strings as well as to easily compare moment date objects Customizable props and styles: Ideal for conforming the component to whatever design and device you are working with The New Datepicker 2016
Picking Dates @Airbnb
github.com/airbnb/react-dates
Thank you!
Picking Dates @Airbnb

More Related Content

Picking Dates @Airbnb

  • 1. Picking Dates @Airbnb MAJA WICHROWSKA / 2016-08-16 A Journey Through Time
  • 2. Picking Dates @Airbnb MAJA WICHROWSKA / 1471305600 The Reason I Drink
  • 3. Tenure: Almost 2 years Team: Web Infrastructure Fun Fact: Once saw a live Potter Puppet Pals Show when they opened for the Wizard Rock band Harry and the Potters at Slims. Responsibilities: De Facto owner of all things date related on the frontend of Airbnb Maja Wichrowska Mostly Frontend Engineer
  • 6. Small Team: ~15 engineers Building Fast: More important to get something out there then it is to engineer it perfectly Mission-Critical Component: If you can't select dates on the site, you can't really book We'll Fix It Later: Make this good later when everything is no longer on fire. Airbnb: The Startup 2011
  • 7. Out of the box solution
  • 8. ~ 4 years ago
  • 9. Medium team: ~30 engineers Established Product: People actively use Airbnb Growing Rapidly: Scale is the biggest issue on everyone's mind Airbnb: The Small Company 2012
  • 10. FakeQueryUi /* * At the moment (ha), moment's kind of a pain wrt Ender (it detects Ender, * does not attach to window, and then breaks all of its own i18n files). It * also lacks some necessary data in the i18n files (specifically, what day * the locale starts its weeks on). For now use this shim, but don't * use it anywhere outside of the Datepicker module or it'll be impossible to * ever kill it down the line someday. */
  • 11. FakeQueryUi /* * Horrifying Templating DSL * ------------------------- * * Lalala, don't mind the roll-your-own templating DSL, it is tres horrible * but slightly less horrible than mashing strings together. Is it worth * making the datepicker have a Handlebars dependency and doing things * properly? I don't know! */ function horror() {
  • 12. FakeQueryUi /* * OH GOD I'M SO SORRY * * Some horrible templating. If you ever have to touch this, I will buy you * two beers and a tequila shot. * * Love, * [redacted] */
  • 15. Large team: ~200 engineers Time/Resources for Technical Debt: The goal now is to build a sustainable architecture for the future Frontend Alignment: We know what technologies we're investing in (Hint: It's React) Hacks aren't cutting it anymore: The date picker keeps breaking in new and fascinating ways Airbnb: The Corporate Behemoth The Relatively Large Company 2015
  • 17. One Particularly Excitable New Hire Literally chose #webinfra after talking with the then-manager about building a mobile-friendly, easily internationalized datepicker Maja Wichrowska Particularly Excitable New Hire
  • 18. 'Datepicker redesign' are the two best words in the English language" Redesign
  • 19. Totally Smooth Launch Also known as that time I was writing a postmortem every week for five weeks
  • 20. Why Date Formats Matter Or my personal favorite new date picker related bug Rails I18n vs. MomentJS's 'L' format: The same in some locales, but not all locales Localized dates in URLs: This is a very bad idea No dates search returns all results: If you test data has no availability, the search page looks successful Standardize your dates! YYYY-MM-DD
  • 23. 3 fully-controlled main components: <DateRangePicker/ >, <SingleDatePicker/>, <DayPicker/> Easily internationalizable: Integrates with moment locales, takes in props to localize month titles, accessibility text Cross-browser compatible: Has been tested in IE9/10/11 and Edge, Safari, Firefox, Chrome, Mobile Safari on iPads and iPhones, and Chrome on Android devices Utility classes for date conversion and comparison: Includes built in functions for converting to and from moment objects to strings as well as to easily compare moment date objects Customizable props and styles: Ideal for conforming the component to whatever design and device you are working with The New Datepicker 2016